diff --git a/packages/__docs__/versioned-components.ts b/packages/__docs__/versioned-components.ts
index 622ea8c015..c4fd1df45d 100644
--- a/packages/__docs__/versioned-components.ts
+++ b/packages/__docs__/versioned-components.ts
@@ -24,6 +24,7 @@
 
 import * as V11_6 from '@instructure/ui/v11_6'
 import * as V11_7 from '@instructure/ui/v11_7'
+import * as V11_8 from '@instructure/ui/v11_8'
 // eslint-disable-next-line no-restricted-imports
 import { Guidelines } from './src/Guidelines'
 // eslint-disable-next-line no-restricted-imports
@@ -33,11 +34,17 @@ import { ToggleBlockquote } from './src/ToggleBlockquote'
 // eslint-disable-next-line no-restricted-imports
 import { V12ChangelogTable } from './src/V12ChangelogTable'
 
-const docsComponents = { Guidelines, Figure, ToggleBlockquote, V12ChangelogTable }
+const docsComponents = {
+  Guidelines,
+  Figure,
+  ToggleBlockquote,
+  V12ChangelogTable
+}
 
 const versions: Record<string, Record<string, any>> = {
   v11_6: { ...V11_6, ...docsComponents } as any,
   v11_7: { ...V11_7, ...docsComponents } as any,
+  v11_8: { ...V11_8, ...docsComponents } as any
 }
 
 /**
@@ -45,8 +52,6 @@ const versions: Record<string, Record<string, any>> = {
  * Version exports are merged with docs-specific components (Guidelines,
  * Figure, ToggleBlockquote, V12ChangelogTable). Defaults to v11_6.
  */
-export function getComponentsForVersion(
-  version?: string
-): Record<string, any> {
+export function getComponentsForVersion(version?: string): Record<string, any> {
   return versions[version ?? 'v11_6'] ?? versions['v11_6']
 }
diff --git a/packages/ui-pill/package.json b/packages/ui-pill/package.json
index db5a197348..cdc89d0df9 100644
--- a/packages/ui-pill/package.json
+++ b/packages/ui-pill/package.json
@@ -27,6 +27,7 @@
     "@instructure/console": "workspace:*",
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
+    "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
@@ -38,7 +39,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
     "vitest": "^5.0.0"
   },
@@ -76,12 +76,19 @@
       "require": "./lib/exports/b.js",
       "default": "./es/exports/b.js"
     },
+    "./v11_8": {
+      "src": "./src/exports/c.ts",
+      "types": "./types/exports/c.d.ts",
+      "import": "./es/exports/c.js",
+      "require": "./lib/exports/c.js",
+      "default": "./es/exports/c.js"
+    },
     "./latest": {
-      "src": "./src/exports/b.ts",
-      "types": "./types/exports/b.d.ts",
-      "import": "./es/exports/b.js",
-      "require": "./lib/exports/b.js",
-      "default": "./es/exports/b.js"
+      "src": "./src/exports/c.ts",
+      "types": "./types/exports/c.d.ts",
+      "import": "./es/exports/c.js",
+      "require": "./lib/exports/c.js",
+      "default": "./es/exports/c.js"
     }
   }
 }
diff --git a/packages/ui-pill/src/Pill/__tests__/Pill.test.tsx b/packages/ui-pill/src/Pill/__tests__/Pill.test.tsx
index c01dc789b1..0f4c781fd4 100644
--- a/packages/ui-pill/src/Pill/__tests__/Pill.test.tsx
+++ b/packages/ui-pill/src/Pill/__tests__/Pill.test.tsx
@@ -23,12 +23,11 @@
  */
 
 import { render } from 'vitest-browser-react'
-import { page, userEvent } from 'vitest/browser'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 
 import { runAxeCheck } from '@instructure/ui-axe-check'
 import { Pill } from '@instructure/ui-pill/latest'
-import { IconEyeLine } from '@instructure/ui-icons'
+import { IconEyeLine, CheckInstUIIcon } from '@instructure/ui-icons'
 
 describe('<Pill />', () => {
   it('should render', async () => {
@@ -78,45 +77,22 @@ describe('<Pill />', () => {
     expect(axeCheck).toBe(true)
   })
 
-  describe('Component tests', () => {
-    // the real cursor stays where the previous test left it, which can keep a
-    // Tooltip open: park it off-component before each test
-    beforeEach(async () => {
-      const parkingSpot = document.createElement('div')
-      parkingSpot.style.cssText =
-        'position:fixed;right:0;bottom:0;width:20px;height:20px'
-      document.body.appendChild(parkingSpot)
-      await userEvent.hover(parkingSpot)
-      parkingSpot.remove()
-    })
-
-    it('should render without a Tooltip when text does not overflow max-width', async () => {
-      await render(<Pill>hello</Pill>)
-
-      await page.getByText('hello').hover()
-
-      expect(document.querySelector('span[role="tooltip"]')).toBeNull()
-    })
-
-    it('should render a Tooltip when text overflows max-width', async () => {
-      const text =
-        'some really super incredibly long text that will force overflow'
-      await render(<Pill>{text}</Pill>)
-      const trigger = document.querySelector<HTMLElement>(
-        'span[data-popover-trigger="true"]'
-      )!
-      const tooltip = () =>
-        document.querySelector<HTMLElement>('span[role="tooltip"]')!
-
-      expect(trigger).toMatchTextContent(text)
-      expect(tooltip()).not.toBeVisible()
-
-      await userEvent.hover(trigger)
-
-      await vi.waitFor(() => {
-        expect(tooltip()).toBeVisible()
-      })
-      expect(tooltip()).toMatchTextContent(text)
-    })
+  it('should accept an icon component reference', async () => {
+    const { container } = await render(
+      <Pill renderIcon={CheckInstUIIcon}>Overdue</Pill>
+    )
+
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should provide a ref to the root element', async () => {
+    const elementRef = vi.fn()
+    const { container } = await render(
+      <Pill elementRef={elementRef}>Overdue</Pill>
+    )
+
+    expect(elementRef).toHaveBeenCalledWith(
+      container.querySelector('[data-cid="Pill"]')
+    )
   })
 })
diff --git a/packages/ui-pill/src/Pill/v2/index.tsx b/packages/ui-pill/src/Pill/v2/index.tsx
index b9722f42dd..bd4d14dcb3 100644
--- a/packages/ui-pill/src/Pill/v2/index.tsx
+++ b/packages/ui-pill/src/Pill/v2/index.tsx
@@ -24,10 +24,10 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view/latest'
+import { View } from '@instructure/ui-view/v11_7'
 import { passthroughProps } from '@instructure/ui-react-utils'
-import { Tooltip } from '@instructure/ui-tooltip/latest'
-import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip/latest'
+import { Tooltip } from '@instructure/ui-tooltip/v11_7'
+import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip/v11_7'
 
 import { withStyleNew } from '@instructure/emotion'
 
diff --git a/packages/ui-pill/src/Pill/v3/README.md b/packages/ui-pill/src/Pill/v3/README.md
new file mode 100644
index 0000000000..cfc7486e02
--- /dev/null
+++ b/packages/ui-pill/src/Pill/v3/README.md
@@ -0,0 +1,122 @@
+---
+describes: Pill
+---
+
+Displays short, contextual information about an item. Set the color via the
+`color` prop and the size via the `size` prop. Use the `margin` prop to add space
+around the component. Use the `renderIcon` prop to add an icon before the text.
+Additionally, you can use the `statusLabel` prop to add a label before the main text.
+
+```js
+---
+type: example
+---
+<div>
+  <Pill
+    margin="general.spaceSm"
+  >
+    Excused
+  </Pill>
+  <Pill
+    statusLabel="Status"
+    color="info"
+    margin="general.spaceSm"
+  >
+    Draft
+  </Pill>
+  <Pill
+    statusLabel="Status"
+    renderIcon={DiamondInstUIIcon}
+    color="success"
+    margin="general.spaceSm"
+  >
+    Checked In
+  </Pill>
+  <Pill
+    renderIcon={Clock4InstUIIcon}
+    color="warning"
+    margin="general.spaceSm"
+  >
+    Late
+  </Pill>
+  <Pill
+    renderIcon={MailInstUIIcon}
+    color="error"
+    margin="general.spaceSm"
+  >
+    Notification
+  </Pill>
+</div>
+```
+
+### Sizes
+
+The `size` prop accepts `x-small`, `small` (default), `medium`, and `large`.
+InstUI icons passed to `renderIcon` are sized to match.
+
+```js
+---
+type: example
+---
+<div>
+  <Pill size="x-small" renderIcon={DiamondInstUIIcon} margin="general.spaceSm">
+    x-small
+  </Pill>
+  <Pill size="small" renderIcon={DiamondInstUIIcon} margin="general.spaceSm">
+    small
+  </Pill>
+  <Pill size="medium" renderIcon={DiamondInstUIIcon} margin="general.spaceSm">
+    medium
+  </Pill>
+  <Pill size="large" renderIcon={DiamondInstUIIcon} margin="general.spaceSm">
+    large
+  </Pill>
+</div>
+```
+
+### Colors
+
+The status colors (`primary`, `info`, `success`, `warning`, `error`) convey meaning.
+`primary` is the neutral Pill in the design files. The accent colors (`stone`, `sky`,
+`orange`, `aurora`, `plum`, `violet`, `sea`) are for categorization and carry no
+status meaning.
+
+```js
+---
+type: example
+---
+<div>
+  <Pill color="primary" margin="general.spaceSm">primary</Pill>
+  <Pill color="info" margin="general.spaceSm">info</Pill>
+  <Pill color="success" margin="general.spaceSm">success</Pill>
+  <Pill color="warning" margin="general.spaceSm">warning</Pill>
+  <Pill color="error" margin="general.spaceSm">error</Pill>
+  <br />
+  <Pill color="stone" margin="general.spaceSm">stone</Pill>
+  <Pill color="sky" margin="general.spaceSm">sky</Pill>
+  <Pill color="orange" margin="general.spaceSm">orange</Pill>
+  <Pill color="aurora" margin="general.spaceSm">aurora</Pill>
+  <Pill color="plum" margin="general.spaceSm">plum</Pill>
+  <Pill color="violet" margin="general.spaceSm">violet</Pill>
+  <Pill color="sea" margin="general.spaceSm">sea</Pill>
+</div>
+```
+
+The Pill always shows its full text on a single line, so keep the text short.
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="no" title="Don't">
+    <Figure.Item>Use more than 2 words for the main text</Figure.Item>
+    <Figure.Item>Use more than 2 words for the statusLabel</Figure.Item>
+    <Figure.Item>Use for dismissible items (use a <Link href="/#Tag">Tag</Link> instead)</Figure.Item>
+    <Figure.Item>Use for counts (use a <Link href="/#Badge">Badge</Link> instead)</Figure.Item>
+    <Figure.Item>Put actions next to the text</Figure.Item>
+  </Figure>
+</Guidelines>
+```
diff --git a/packages/ui-pill/src/Pill/v3/index.tsx b/packages/ui-pill/src/Pill/v3/index.tsx
new file mode 100644
index 0000000000..9ca8169a86
--- /dev/null
+++ b/packages/ui-pill/src/Pill/v3/index.tsx
@@ -0,0 +1,102 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { renderIconWithProps } from '@instructure/ui-icons'
+
+import { useStyleNew } from '@instructure/emotion'
+
+import generateStyle from './styles.js'
+
+import type { PillProps } from './props'
+import { pillSizeToIconSize } from './props.js'
+
+/**
+---
+category: components
+---
+**/
+const Pill = (props: PillProps) => {
+  const {
+    as,
+    children,
+    color = 'primary',
+    size = 'small',
+    elementRef,
+    margin,
+    statusLabel,
+    renderIcon,
+    themeOverride,
+    ...rest
+  } = props
+
+  const styles = useStyleNew({
+    generateStyle,
+    themeOverride,
+    params: { color, size },
+    componentId: 'Pill',
+    displayName: 'Pill'
+  })
+
+  return (
+    <View
+      {...passthroughProps(rest)}
+      as={as}
+      elementRef={elementRef}
+      margin={margin}
+      padding="0"
+      background="transparent"
+      borderRadius="pill"
+      borderWidth="0"
+      display="inline-block"
+      position="relative"
+      data-cid="Pill"
+    >
+      <div css={styles?.pill}>
+        {renderIcon && (
+          <div css={styles?.icon}>
+            {renderIconWithProps(
+              renderIcon,
+              pillSizeToIconSize[size],
+              undefined
+            )}
+          </div>
+        )}
+        <div css={styles?.text}>
+          {statusLabel && (
+            <span css={styles?.status}>{statusLabel.concat(':')}</span>
+          )}
+          {children}
+        </div>
+      </div>
+    </View>
+  )
+}
+
+Pill.displayName = 'Pill'
+
+export default Pill
+export { Pill }
+export type { PillProps }
diff --git a/packages/ui-pill/src/Pill/v3/props.ts b/packages/ui-pill/src/Pill/v3/props.ts
new file mode 100644
index 0000000000..929a24e1b2
--- /dev/null
+++ b/packages/ui-pill/src/Pill/v3/props.ts
@@ -0,0 +1,115 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import type {
+  Spacing,
+  ComponentStyle,
+  NewThemeOverrideProp
+} from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type {
+  AsElementType,
+  OtherHTMLAttributes,
+  Renderable
+} from '@instructure/shared-types'
+
+const pillSizeToIconSize = {
+  'x-small': 'xs',
+  small: 'xs',
+  medium: 'sm',
+  large: 'sm'
+} as const
+
+type PillOwnProps = {
+  as?: AsElementType
+  /**
+   * The status colors (`primary`, `info`, `success`, `warning`, `error`) convey
+   * meaning, the accent colors (`stone`, `sky`, `orange`, `aurora`, `plum`,
+   * `violet`, `sea`) are for categorization.
+   */
+  color?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'stone'
+    | 'sky'
+    | 'orange'
+    | 'aurora'
+    | 'plum'
+    | 'violet'
+    | 'sea'
+  /**
+   * The size of the Pill. The icon is sized to match.
+   */
+  size?: keyof typeof pillSizeToIconSize
+  /**
+   * Provides a reference to the underlying HTML element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Valid values are `0`, `none`, `auto`, and Spacing token values,
+   * see https://instructure.design/layout-spacing. Apply these values via
+   * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
+   */
+  margin?: Spacing
+  children: React.ReactNode
+
+  /**
+   * Adds a status label to the left of the main text.
+   */
+  statusLabel?: string
+
+  /**
+   * An icon displayed before the text. InstUI icons are sized and colored
+   * automatically.
+   */
+  renderIcon?: Renderable
+}
+type PropKeys = keyof PillOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PillProps = PillOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['Pill']>> &
+  OtherHTMLAttributes<PillOwnProps>
+
+type PillStyle = ComponentStyle<'pill' | 'text' | 'status' | 'icon'>
+
+type PillStyleParams = Required<Pick<PillProps, 'color' | 'size'>>
+
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'children',
+  'color',
+  'size',
+  'elementRef',
+  'margin',
+  'statusLabel',
+  'renderIcon'
+]
+
+export type { PillProps, PillStyle, PillStyleParams }
+export { allowedProps, pillSizeToIconSize }
diff --git a/packages/ui-pill/src/Pill/v3/styles.ts b/packages/ui-pill/src/Pill/v3/styles.ts
new file mode 100644
index 0000000000..5ae6369a04
--- /dev/null
+++ b/packages/ui-pill/src/Pill/v3/styles.ts
@@ -0,0 +1,171 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { PillStyle, PillStyleParams } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params Additional parameters to customize the style.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: ReturnType<NewComponentTypes['Pill']>,
+  params: PillStyleParams
+): PillStyle => {
+  const { color, size } = params
+
+  const sizeVariants = {
+    'x-small': {
+      height: componentTheme.heightXSmall,
+      paddingInline: componentTheme.paddingHorizontal,
+      fontSize: componentTheme.textFontSize,
+      gap: componentTheme.gapIconLabel
+    },
+    small: {
+      height: componentTheme.height,
+      paddingInline: componentTheme.paddingHorizontal,
+      fontSize: componentTheme.textFontSize,
+      gap: componentTheme.gapIconLabel
+    },
+    medium: {
+      height: componentTheme.heightMedium,
+      paddingInline: componentTheme.paddingHorizontalMedium,
+      fontSize: componentTheme.textFontSizeMedium,
+      gap: componentTheme.gapIconLabelMedium
+    },
+    large: {
+      height: componentTheme.heightLarge,
+      paddingInline: componentTheme.paddingHorizontalLarge,
+      fontSize: componentTheme.textFontSizeLarge,
+      gap: componentTheme.gapIconLabelLarge
+    }
+  }
+
+  const colorVariants = {
+    primary: {
+      color: componentTheme.baseTextColor,
+      borderColor: componentTheme.baseBorderColor,
+      background: componentTheme.neutralBackgroundColor
+    },
+    info: {
+      color: componentTheme.infoTextColor,
+      borderColor: componentTheme.infoBorderColor,
+      background: componentTheme.infoBackgroundColor
+    },
+    success: {
+      color: componentTheme.successTextColor,
+      borderColor: componentTheme.successBorderColor,
+      background: componentTheme.successBackgroundColor
+    },
+    warning: {
+      color: componentTheme.warningTextColor,
+      borderColor: componentTheme.warningBorderColor,
+      background: componentTheme.warningBackgroundColor
+    },
+    error: {
+      color: componentTheme.errorTextColor,
+      borderColor: componentTheme.errorBorderColor,
+      background: componentTheme.errorBackgroundColor
+    },
+    stone: {
+      color: componentTheme.stoneTextColor,
+      borderColor: componentTheme.stoneBorderColor,
+      background: componentTheme.stoneBackgroundColor
+    },
+    sky: {
+      color: componentTheme.skyTextColor,
+      borderColor: componentTheme.skyBorderColor,
+      background: componentTheme.skyBackgroundColor
+    },
+    orange: {
+      color: componentTheme.orangeTextColor,
+      borderColor: componentTheme.orangeBorderColor,
+      background: componentTheme.orangeBackgroundColor
+    },
+    aurora: {
+      color: componentTheme.auroraTextColor,
+      borderColor: componentTheme.auroraBorderColor,
+      background: componentTheme.auroraBackgroundColor
+    },
+    plum: {
+      color: componentTheme.plumTextColor,
+      borderColor: componentTheme.plumBorderColor,
+      background: componentTheme.plumBackgroundColor
+    },
+    violet: {
+      color: componentTheme.violetTextColor,
+      borderColor: componentTheme.violetBorderColor,
+      background: componentTheme.violetBackgroundColor
+    },
+    sea: {
+      color: componentTheme.seaTextColor,
+      borderColor: componentTheme.seaBorderColor,
+      background: componentTheme.seaBackgroundColor
+    }
+  }
+
+  const { fontSize, ...sizeStyles } = sizeVariants[size]
+
+  return {
+    pill: {
+      label: 'pill',
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: componentTheme.borderStyle,
+      borderRadius: componentTheme.borderRadius,
+      fontFamily: componentTheme.fontFamily,
+      ...sizeStyles,
+      ...colorVariants[color]
+    },
+    status: {
+      label: 'pill__status',
+      fontWeight: componentTheme.statusLabelFontWeight,
+      marginInlineEnd: componentTheme.gapContent
+    },
+    icon: {
+      label: 'pill__icon',
+      display: 'flex',
+      alignItems: 'center',
+      flexShrink: 0,
+      ...(color === 'error' && { color: componentTheme.errorIconColor })
+    },
+    text: {
+      label: 'pill__text',
+      boxSizing: 'border-box',
+      fontSize,
+      lineHeight: componentTheme.lineHeight,
+      fontWeight: componentTheme.textFontWeight,
+      whiteSpace: 'nowrap'
+    }
+  }
+}
+
+export default generateStyle
diff --git a/packages/ui-pill/src/exports/c.ts b/packages/ui-pill/src/exports/c.ts
new file mode 100644
index 0000000000..5af1a1e018
--- /dev/null
+++ b/packages/ui-pill/src/exports/c.ts
@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { Pill } from '../Pill/v3/index.js'
+export type { PillProps } from '../Pill/v3/props'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 02c81a0be2..ff2e647816 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -136,12 +136,19 @@
       "require": "./lib/v11_7.js",
       "default": "./es/v11_7.js"
     },
+    "./v11_8": {
+      "src": "./src/v11_8.ts",
+      "types": "./types/v11_8.d.ts",
+      "import": "./es/v11_8.js",
+      "require": "./lib/v11_8.js",
+      "default": "./es/v11_8.js"
+    },
     "./latest": {
-      "src": "./src/v11_7.ts",
-      "types": "./types/v11_7.d.ts",
-      "import": "./es/v11_7.js",
-      "require": "./lib/v11_7.js",
-      "default": "./es/v11_7.js"
+      "src": "./src/v11_8.ts",
+      "types": "./types/v11_8.d.ts",
+      "import": "./es/v11_8.js",
+      "require": "./lib/v11_8.js",
+      "default": "./es/v11_8.js"
     }
   }
 }
diff --git a/packages/ui/src/v11_8.ts b/packages/ui/src/v11_8.ts
new file mode 100644
index 0000000000..7213c4a85d
--- /dev/null
+++ b/packages/ui/src/v11_8.ts
@@ -0,0 +1,524 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { InstUISettingsProvider, withStyleNew } from '@instructure/emotion'
+export type {
+  ComponentStyle,
+  StyleObject,
+  Overrides,
+  ThemeOverride,
+  ComponentOverride,
+  ThemeOrLegacyOverride
+} from '@instructure/emotion'
+export {
+  AccessibleContent,
+  PresentationContent,
+  ScreenReaderContent
+} from '@instructure/ui-a11y-content'
+export type {
+  AccessibleContentProps,
+  ScreenReaderContentProps,
+  PresentationContentProps
+} from '@instructure/ui-a11y-content'
+export { Alert } from '@instructure/ui-alerts/v11_7'
+export type { AlertProps } from '@instructure/ui-alerts/v11_7'
+export { Avatar } from '@instructure/ui-avatar/v11_7'
+export type { AvatarProps } from '@instructure/ui-avatar/v11_7'
+export { Badge } from '@instructure/ui-badge/v11_7'
+export type { BadgeProps } from '@instructure/ui-badge/v11_7'
+export { Billboard } from '@instructure/ui-billboard/v11_7'
+export type { BillboardProps } from '@instructure/ui-billboard/v11_7'
+export { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb/v11_7'
+export type {
+  BreadcrumbProps,
+  BreadcrumbLinkProps
+} from '@instructure/ui-breadcrumb/v11_7'
+export {
+  BaseButton,
+  Button,
+  CloseButton,
+  CondensedButton,
+  IconButton,
+  ToggleButton
+} from '@instructure/ui-buttons/v11_7'
+export type {
+  BaseButtonOwnProps,
+  ButtonProps,
+  BaseButtonProps,
+  ToggleButtonProps,
+  CloseButtonProps,
+  CondensedButtonProps,
+  IconButtonProps
+} from '@instructure/ui-buttons/v11_7'
+export { Byline } from '@instructure/ui-byline/v11_7'
+export type { BylineProps } from '@instructure/ui-byline/v11_7'
+export { Calendar, CalendarDay } from '@instructure/ui-calendar/v11_7'
+export type {
+  CalendarDayProps,
+  CalendarProps
+} from '@instructure/ui-calendar/v11_7'
+export {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxFacade,
+  ToggleFacade
+} from '@instructure/ui-checkbox/v11_7'
+export type {
+  CheckboxFacadeProps,
+  ToggleFacadeProps,
+  CheckboxGroupProps,
+  CheckboxProps
+} from '@instructure/ui-checkbox/v11_7'
+export {
+  ColorPicker,
+  ColorMixer,
+  ColorPreset,
+  ColorContrast,
+  ColorIndicator
+} from '@instructure/ui-color-picker/v11_7'
+export type {
+  ColorContrastProps,
+  ColorIndicatorProps,
+  ColorMixerProps,
+  ColorPickerProps,
+  ColorPresetProps
+} from '@instructure/ui-color-picker/v11_7'
+export { DateInput, DateInput2 } from '@instructure/ui-date-input/v11_7'
+export type {
+  DateInputProps,
+  DateInput2Props
+} from '@instructure/ui-date-input/v11_7'
+export { DateTimeInput } from '@instructure/ui-date-time-input/v11_7'
+export { Dialog } from '@instructure/ui-dialog'
+export type { DialogProps } from '@instructure/ui-dialog'
+export {
+  DrawerLayout,
+  DrawerContent,
+  DrawerTray
+} from '@instructure/ui-drawer-layout/v11_7'
+export type {
+  DrawerLayoutProps,
+  DrawerLayoutContentProps,
+  DrawerLayoutTrayProps
+} from '@instructure/ui-drawer-layout/v11_7'
+export {
+  Drilldown,
+  DrilldownGroup,
+  DrilldownOption,
+  DrilldownPage,
+  DrilldownSeparator
+} from '@instructure/ui-drilldown/v11_7'
+export type {
+  DrilldownGroupChild,
+  DrilldownGroupProps,
+  DrilldownOptionChild,
+  DrilldownOptionProps,
+  DrilldownPageChild,
+  DrilldownPageChildren,
+  DrilldownPageProps,
+  DrilldownProps,
+  DrilldownSeparatorChild,
+  DrilldownSeparatorProps
+} from '@instructure/ui-drilldown/v11_7'
+export { Editable, InPlaceEdit } from '@instructure/ui-editable/v11_7'
+export type {
+  EditableProps,
+  InPlaceEditProps
+} from '@instructure/ui-editable/v11_7'
+export { Expandable } from '@instructure/ui-expandable'
+export type {
+  ExpandableProps,
+  RenderExpandable,
+  ExpandableToggleProps
+} from '@instructure/ui-expandable'
+export { FileDrop } from '@instructure/ui-file-drop/v11_7'
+export type { FileDropProps } from '@instructure/ui-file-drop/v11_7'
+export { Flex, FlexItem } from '@instructure/ui-flex/v11_7'
+export type { FlexProps, FlexItemProps } from '@instructure/ui-flex/v11_7'
+export { Focusable } from '@instructure/ui-focusable'
+export type { FocusableProps } from '@instructure/ui-focusable'
+export {
+  FormField,
+  FormFieldMessage,
+  FormFieldMessages,
+  FormFieldLayout,
+  FormFieldGroup
+} from '@instructure/ui-form-field/v11_7'
+export type {
+  FormFieldGroupProps,
+  FormFieldMessageProps,
+  FormFieldMessagesProps,
+  FormFieldLayoutProps,
+  FormFieldOwnProps,
+  FormFieldProps,
+  FormMessage,
+  FormMessageType,
+  FormMessageChild
+} from '@instructure/ui-form-field/v11_7'
+export { Grid, GridRow, GridCol } from '@instructure/ui-grid/v11_7'
+export type {
+  GridProps,
+  GridRowProps,
+  GridColProps,
+  GridBreakpoints
+} from '@instructure/ui-grid/v11_7'
+export { Heading } from '@instructure/ui-heading/v11_7'
+export type { HeadingProps } from '@instructure/ui-heading/v11_7'
+export {
+  ApplyLocale,
+  TextDirectionContext,
+  ApplyLocaleContext,
+  textDirectionContextConsumer,
+  DateTime,
+  getTextDirection,
+  Locale,
+  DIRECTION
+} from '@instructure/ui-i18n'
+export type {
+  Moment,
+  TextDirectionContextConsumerProps,
+  ApplyLocaleProps
+} from '@instructure/ui-i18n'
+export * from '@instructure/ui-icons'
+export { Img } from '@instructure/ui-img/v11_7'
+export type { ImgProps } from '@instructure/ui-img/v11_7'
+export {
+  NutritionFacts,
+  DataPermissionLevels,
+  AiInformation
+} from '@instructure/ui-instructure/v11_7'
+export type {
+  NutritionFactsProps,
+  DataPermissionLevelsProps,
+  AiInformationProps
+} from '@instructure/ui-instructure/v11_7'
+export { Link } from '@instructure/ui-link/v11_7'
+export type { LinkProps } from '@instructure/ui-link/v11_7'
+export {
+  List,
+  ListItem,
+  InlineList,
+  InlineListItem
+} from '@instructure/ui-list/v11_7'
+export type {
+  ListProps,
+  ListItemProps,
+  InlineListProps,
+  InlineListItemProps
+} from '@instructure/ui-list/v11_7'
+export {
+  Menu,
+  MenuItem,
+  MenuItemGroup,
+  MenuItemSeparator
+} from '@instructure/ui-menu/v11_7'
+export type {
+  MenuProps,
+  MenuItemProps,
+  MenuGroupProps,
+  MenuSeparatorProps
+} from '@instructure/ui-menu/v11_7'
+export { MetricGroup, Metric } from '@instructure/ui-metric/v11_7'
+export type {
+  MetricGroupProps,
+  MetricProps
+} from '@instructure/ui-metric/v11_7'
+export {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader
+} from '@instructure/ui-modal/v11_7'
+export type {
+  ModalProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps
+} from '@instructure/ui-modal/v11_7'
+export { Transition, BaseTransition } from '@instructure/ui-motion'
+export type {
+  TransitionProps,
+  TransitionType,
+  BaseTransitionStatesType
+} from '@instructure/ui-motion'
+export { AppNav, AppNavItem } from '@instructure/ui-navigation/v11_7'
+export type {
+  AppNavProps,
+  AppNavItemProps
+} from '@instructure/ui-navigation/v11_7'
+export { NumberInput } from '@instructure/ui-number-input/v11_7'
+export type { NumberInputProps } from '@instructure/ui-number-input/v11_7'
+export {
+  Options,
+  OptionSeparator,
+  OptionItem
+} from '@instructure/ui-options/v11_7'
+export type {
+  OptionsItemProps,
+  OptionsItemRenderProps,
+  OptionsProps,
+  OptionsSeparatorProps
+} from '@instructure/ui-options/v11_7'
+export { Mask, Overlay } from '@instructure/ui-overlays/v11_7'
+export type { MaskProps, OverlayProps } from '@instructure/ui-overlays/v11_7'
+export { Pages, PagesPage } from '@instructure/ui-pages/v11_7'
+export type { PagesPageProps, PagesProps } from '@instructure/ui-pages/v11_7'
+export { Pagination, PaginationButton } from '@instructure/ui-pagination/v11_7'
+export type {
+  PaginationNavigationProps,
+  PaginationPageProps,
+  PaginationProps
+} from '@instructure/ui-pagination/v11_7'
+export { Pill } from '@instructure/ui-pill/v11_8'
+export type { PillProps } from '@instructure/ui-pill/v11_8'
+export { Popover } from '@instructure/ui-popover/v11_7'
+export type {
+  PopoverProps,
+  PopoverOwnProps
+} from '@instructure/ui-popover/v11_7'
+export { Portal } from '@instructure/ui-portal'
+export type { PortalProps, PortalNode } from '@instructure/ui-portal'
+export {
+  Position,
+  calculateElementPosition,
+  executeMirrorFunction,
+  mirrorHorizontalPlacement,
+  mirrorPlacement,
+  parsePlacement
+} from '@instructure/ui-position'
+export type {
+  PositionConstraint,
+  PositionObject,
+  PositionProps,
+  PlacementPropValues,
+  PositionMountNode
+} from '@instructure/ui-position'
+export { ProgressBar, ProgressCircle } from '@instructure/ui-progress/v11_7'
+export type {
+  ProgressBarProps,
+  ProgressCircleProps
+} from '@instructure/ui-progress/v11_7'
+export { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input/v11_7'
+export type {
+  RadioInputProps,
+  RadioInputGroupProps
+} from '@instructure/ui-radio-input/v11_7'
+export { RangeInput } from '@instructure/ui-range-input/v11_7'
+export type { RangeInputProps } from '@instructure/ui-range-input/v11_7'
+export { Rating, RatingIcon } from '@instructure/ui-rating/v11_7'
+export type { RatingIconProps, RatingProps } from '@instructure/ui-rating/v11_7'
+export {
+  Responsive,
+  ResponsivePropTypes,
+  addElementQueryMatchListener,
+  addMediaQueryMatchListener,
+  parseQuery,
+  jsonToMediaQuery
+} from '@instructure/ui-responsive/v11_7'
+export type {
+  ResponsiveProps,
+  ResponsivePropsObject,
+  BreakpointQueries,
+  QueriesMatching,
+  Query,
+  ResponsiveByBreakpointProps,
+  ValidQueryKey
+} from '@instructure/ui-responsive/v11_7'
+export { Select, SelectGroup, SelectOption } from '@instructure/ui-select/v11_7'
+export type {
+  SelectOwnProps,
+  SelectGroupProps,
+  SelectOptionProps,
+  SelectProps
+} from '@instructure/ui-select/v11_7'
+export { Selectable } from '@instructure/ui-selectable'
+export type {
+  SelectableRender,
+  SelectableProps
+} from '@instructure/ui-selectable'
+export { SideNavBar, SideNavBarItem } from '@instructure/ui-side-nav-bar/v11_7'
+export type {
+  SideNavBarProps,
+  SideNavBarItemProps
+} from '@instructure/ui-side-nav-bar/v11_7'
+export {
+  SimpleSelect,
+  SimpleSelectOption,
+  SimpleSelectGroup
+} from '@instructure/ui-simple-select/v11_7'
+export type {
+  SimpleSelectProps,
+  SimpleSelectGroupProps,
+  SimpleSelectOptionProps
+} from '@instructure/ui-simple-select/v11_7'
+export { SourceCodeEditor } from '@instructure/ui-source-code-editor/v11_7'
+export type { SourceCodeEditorProps } from '@instructure/ui-source-code-editor/v11_7'
+export { Spinner } from '@instructure/ui-spinner/v11_7'
+export type { SpinnerProps } from '@instructure/ui-spinner/v11_7'
+export { InlineSVG, SVGIcon } from '@instructure/ui-svg-images'
+export type { InlineSVGProps, SVGIconProps } from '@instructure/ui-svg-images'
+export {
+  Table,
+  TableContext,
+  TableBody,
+  TableHead,
+  TableCell,
+  TableRow,
+  TableColHeader,
+  TableRowHeader
+} from '@instructure/ui-table/v11_7'
+export type {
+  TableBodyProps,
+  TableCellProps,
+  TableProps,
+  TableColHeaderProps,
+  TableHeadProps,
+  TableRowHeaderProps,
+  TableRowProps
+} from '@instructure/ui-table/v11_7'
+export { Tabs, TabsPanel, TabsTab } from '@instructure/ui-tabs/v11_7'
+export type {
+  TabsTabProps,
+  TabsPanelProps,
+  TabsProps
+} from '@instructure/ui-tabs/v11_7'
+export { Tag } from '@instructure/ui-tag/v11_7'
+export type { TagProps } from '@instructure/ui-tag/v11_7'
+export { Text } from '@instructure/ui-text/v11_7'
+export type { TextProps } from '@instructure/ui-text/v11_7'
+export { TextArea } from '@instructure/ui-text-area/v11_7'
+export type { TextAreaProps } from '@instructure/ui-text-area/v11_7'
+export { TextInput } from '@instructure/ui-text-input/v11_7'
+export type { TextInputProps } from '@instructure/ui-text-input/v11_7'
+export {
+  canvas,
+  canvasHighContrast,
+  dark,
+  light,
+  primitives,
+  additionalPrimitives,
+  dataVisualization
+} from '@instructure/ui-themes'
+export type {
+  ThemeMap,
+  BaseTheme,
+  Theme,
+  ThemeKeys,
+  ThemeSpecificStyle,
+  CanvasTheme,
+  CanvasBrandVariables,
+  CanvasHighContrastTheme,
+  Primitives,
+  AdditionalPrimitives,
+  DataVisualization,
+  UI,
+  Dark,
+  DarkTheme,
+  Light,
+  LightTheme
+} from '@instructure/ui-themes'
+export { TimeSelect } from '@instructure/ui-time-select/v11_7'
+export type { TimeSelectProps } from '@instructure/ui-time-select/v11_7'
+export {
+  ToggleDetails,
+  ToggleGroup
+} from '@instructure/ui-toggle-details/v11_7'
+export type {
+  ToggleDetailsProps,
+  ToggleGroupProps
+} from '@instructure/ui-toggle-details/v11_7'
+export { Tooltip } from '@instructure/ui-tooltip/v11_7'
+export type {
+  TooltipProps,
+  TooltipRenderChildrenArgs
+} from '@instructure/ui-tooltip/v11_7'
+export {
+  TopNavBar,
+  TopNavBarActionItems,
+  TopNavBarBrand,
+  TopNavBarBreadcrumb,
+  TopNavBarItem,
+  TopNavBarLayout,
+  TopNavBarMenuItems,
+  TopNavBarUser
+} from '@instructure/ui-top-nav-bar/v11_7'
+export type {
+  TopNavBarProps,
+  TopNavBarOwnProps,
+  TopNavBarActionItemsProps,
+  TopNavBarActionItemsOwnProps,
+  TopNavBarBrandProps,
+  TopNavBarBrandOwnProps,
+  /**
+   * This is an alias for the `ItemChild` type in `TopNavBarItem`
+   */
+  ItemChild as TopNavBarItemChild,
+  TopNavBarItemProps,
+  TopNavBarItemOwnProps,
+  TopNavBarItemTooltipType,
+  TopNavBarLayoutProps,
+  CommonTopNavBarLayoutProps,
+  TopNavBarDesktopLayoutProps,
+  TopNavBarDesktopLayoutOwnProps,
+  DesktopLayoutOwnProps,
+  TopNavBarSmallViewportLayoutProps,
+  TopNavBarSmallViewportLayoutOwnProps,
+  SmallViewportLayoutOwnProps,
+  TopNavBarMenuItemsProps,
+  TopNavBarMenuItemsOwnProps,
+  TopNavBarUserProps,
+  TopNavBarUserOwnProps
+} from '@instructure/ui-top-nav-bar/v11_7'
+export { Tray } from '@instructure/ui-tray/v11_7'
+export type { TrayProps } from '@instructure/ui-tray/v11_7'
+export {
+  TreeBrowser,
+  TreeNode,
+  TreeButton,
+  TreeCollection
+} from '@instructure/ui-tree-browser/v11_7'
+export type {
+  TreeBrowserButtonProps,
+  /**
+   * This is an alias for the `Collection` type in `TreeBrowser`
+   */
+  Collection as TreeBrowserCollection,
+  /**
+   * This is an alias for the `CollectionData` type in `TreeBrowser`
+   */
+  CollectionData as TreeBrowserCollectionData,
+  TreeBrowserProps,
+  TreeBrowserCollectionProps,
+  TreeBrowserNodeProps
+} from '@instructure/ui-tree-browser/v11_7'
+export { TruncateList } from '@instructure/ui-truncate-list'
+export type { TruncateListProps } from '@instructure/ui-truncate-list'
+export { TruncateText } from '@instructure/ui-truncate-text/v11_7'
+export type { TruncateTextProps } from '@instructure/ui-truncate-text/v11_7'
+export { View, ContextView } from '@instructure/ui-view/v11_7'
+export type {
+  ViewProps,
+  ContextViewProps,
+  ViewOwnProps
+} from '@instructure/ui-view/v11_7'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7deb242fb9..e60ab0b15e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3010,6 +3010,9 @@ importers:
       '@instructure/shared-types':
         specifier: workspace:*
         version: link:../shared-types
+      '@instructure/ui-icons':
+        specifier: workspace:*
+        version: link:../ui-icons
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
@@ -3041,9 +3044,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-icons':
-        specifier: workspace:*
-        version: link:../ui-icons
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
diff --git a/regression-test/src/app/small-components/page.tsx b/regression-test/src/app/small-components/page.tsx
index 1d9bd3aae3..a86b11802a 100644
--- a/regression-test/src/app/small-components/page.tsx
+++ b/regression-test/src/app/small-components/page.tsx
@@ -36,6 +36,7 @@ import {
   IconClockLine,
   IconEndLine,
   IconCheckLine,
+  CheckInstUIIcon,
   AccessibleContent
 } from '@instructure/ui/latest'
 
@@ -82,6 +83,39 @@ export default function SmallComponentsPage() {
           Notification
         </Pill>
       </div>
+      <div>
+        {(['x-small', 'small', 'medium', 'large'] as const).map((size) => (
+          <Pill
+            key={size}
+            size={size}
+            statusLabel="Status"
+            renderIcon={CheckInstUIIcon}
+            margin="x-small"
+          >
+            {size}
+          </Pill>
+        ))}
+        <Pill
+          size="large"
+          renderIcon={CheckInstUIIcon}
+          color="error"
+          margin="x-small"
+        >
+          Missing
+        </Pill>
+      </div>
+      <div>
+        {(['sky', 'aurora', 'plum'] as const).map((color) => (
+          <Pill
+            key={color}
+            color={color}
+            renderIcon={CheckInstUIIcon}
+            margin="x-small"
+          >
+            {color}
+          </Pill>
+        ))}
+      </div>
       <div>
         <Text>Tag:</Text>
       </div>