@@ -832,13 +863,14 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
invalidText={invalidText}
warn={warn}
warnText={warnText}
- isOpen={isOpen}
+ isOpen={!readOnly && isOpen}
size={size}>
{controlledSelectedItems.length > 0 && (
{
clearSelection();
if (textInput.current) {
@@ -853,7 +885,9 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
{invalid && (
@@ -868,6 +902,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
clearSelection={clearInputValue}
disabled={disabled}
translateWithId={translateWithId}
+ readOnly={readOnly}
onMouseUp={(event: MouseEvent) => {
// If we do not stop this event from propagating,
// it seems like Downshift takes our event and
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index a6af8ad0e00d..0317c7940f95 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -7,6 +7,7 @@
import React from 'react';
import { act, render, screen } from '@testing-library/react';
+import { getByText } from '@carbon/test-utils/dom';
import userEvent from '@testing-library/user-event';
import FilterableMultiSelect from '../FilterableMultiSelect';
import {
@@ -63,6 +64,28 @@ describe('FilterableMultiSelect', () => {
expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
});
+ it('should not be interactive if readonly', async () => {
+ const items = generateItems(4, generateGenericItem);
+ const label = 'test-label';
+ const { container } = render(
+
+ );
+ await waitForPosition();
+
+ // eslint-disable-next-line testing-library/prefer-screen-queries
+ const labelNode = getByText(container, label);
+ await userEvent.click(labelNode);
+
+ expect(
+ // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+ container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
+ ).toBeFalsy();
+ });
it('should initially have the menu open when open prop is provided', async () => {
render();
await waitForPosition();
diff --git a/packages/styles/package.json b/packages/styles/package.json
index c2efcce3f871..e1045830d40c 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/styles",
"description": "Styles for the Carbon Design System",
- "version": "1.67.0",
+ "version": "1.68.0-rc.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -40,13 +40,13 @@
}
},
"dependencies": {
- "@carbon/colors": "^11.27.0",
- "@carbon/feature-flags": "^0.23.0",
- "@carbon/grid": "^11.28.0",
- "@carbon/layout": "^11.27.0",
- "@carbon/motion": "^11.23.0",
- "@carbon/themes": "^11.42.0",
- "@carbon/type": "^11.32.0",
+ "@carbon/colors": "^11.28.0-rc.0",
+ "@carbon/feature-flags": "^0.24.0-rc.0",
+ "@carbon/grid": "^11.29.0-rc.0",
+ "@carbon/layout": "^11.28.0-rc.0",
+ "@carbon/motion": "^11.24.0-rc.0",
+ "@carbon/themes": "^11.43.0-rc.0",
+ "@carbon/type": "^11.33.0-rc.0",
"@ibm/plex": "6.0.0-next.6",
"@ibm/telemetry-js": "^1.5.0"
},
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index f7cca6645499..3d2565cdf650 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -205,7 +205,7 @@
.#{$prefix}--data-table td,
.#{$prefix}--data-table tbody th {
- border-block-end: 1px solid $border-subtle;
+ border-block-end: 1px solid $border-subtle-01;
border-block-start: 1px solid $layer;
color: $text-secondary;
padding-inline: $spacing-05 $spacing-05;
@@ -215,6 +215,16 @@
}
}
+ .#{$prefix}--layer-two .#{$prefix}--data-table td,
+ .#{$prefix}--layer-two .#{$prefix}--data-table tbody th {
+ border-block-end: 1px solid $border-subtle-02;
+ }
+
+ .#{$prefix}--layer-three .#{$prefix}--data-table td,
+ .#{$prefix}--layer-three .#{$prefix}--data-table tbody th {
+ border-block-end: 1px solid $border-subtle-03;
+ }
+
@supports (-moz-appearance: none) {
.#{$prefix}--data-table td {
// Fix to show borders in ff
diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
index affd1f4ba8a6..690139c6cdfb 100644
--- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
+++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
@@ -189,7 +189,15 @@
// Expand icon column
//----------------------------------------------------------------------------
.#{$prefix}--data-table td.#{$prefix}--table-expand {
- border-block-end: 1px solid $border-subtle;
+ border-block-end: 1px solid $border-subtle-01;
+ }
+
+ .#{$prefix}--layer-two .#{$prefix}--data-table td.#{$prefix}--table-expand {
+ border-block-end: 1px solid $border-subtle-02;
+ }
+
+ .#{$prefix}--layer-three .#{$prefix}--data-table td.#{$prefix}--table-expand {
+ border-block-end: 1px solid $border-subtle-03;
}
.#{$prefix}--data-table
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 84b0c9b774f4..55c5bf471fbf 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/themes",
"description": "Themes for applying color in the Carbon Design System",
- "version": "11.42.0",
+ "version": "11.43.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -31,16 +31,16 @@
"postinstall": "ibmtelemetry --config=telemetry.yml"
},
"dependencies": {
- "@carbon/colors": "^11.27.0",
- "@carbon/layout": "^11.27.0",
- "@carbon/type": "^11.32.0",
+ "@carbon/colors": "^11.28.0-rc.0",
+ "@carbon/layout": "^11.28.0-rc.0",
+ "@carbon/type": "^11.33.0-rc.0",
"@ibm/telemetry-js": "^1.5.0",
"color": "^4.0.0"
},
"devDependencies": {
"@babel/node": "^7.24.7",
"@babel/preset-env": "^7.24.7",
- "@carbon/cli": "^11.22.0",
+ "@carbon/cli": "^11.23.0-rc.0",
"@carbon/cli-reporter": "^10.7.0",
"@carbon/scss-generator": "^10.18.0",
"@carbon/test-utils": "^10.33.0",
diff --git a/packages/type/package.json b/packages/type/package.json
index ae09694e3b9a..0b2d4bf2ebbe 100644
--- a/packages/type/package.json
+++ b/packages/type/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/type",
"description": "Typography for digital and software products using the Carbon Design System",
- "version": "11.32.0",
+ "version": "11.33.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -40,12 +40,12 @@
"postinstall": "ibmtelemetry --config=telemetry.yml"
},
"dependencies": {
- "@carbon/grid": "^11.28.0",
- "@carbon/layout": "^11.27.0",
+ "@carbon/grid": "^11.29.0-rc.0",
+ "@carbon/layout": "^11.28.0-rc.0",
"@ibm/telemetry-js": "^1.5.0"
},
"devDependencies": {
- "@carbon/cli": "^11.22.0",
+ "@carbon/cli": "^11.23.0-rc.0",
"@carbon/test-utils": "^10.33.0",
"change-case": "^4.1.1",
"css": "^3.0.0",
diff --git a/packages/upgrade/package.json b/packages/upgrade/package.json
index 26d2eb94fc3d..326e1c57fe0e 100644
--- a/packages/upgrade/package.json
+++ b/packages/upgrade/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/upgrade",
"description": "A tool for upgrading Carbon versions",
- "version": "11.19.0",
+ "version": "11.20.0-rc.0",
"license": "Apache-2.0",
"bin": {
"carbon-upgrade": "./bin/carbon-upgrade.js"
diff --git a/packages/utilities-react/package.json b/packages/utilities-react/package.json
index 342bece80169..8c02d626df20 100644
--- a/packages/utilities-react/package.json
+++ b/packages/utilities-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/utilities-react",
"description": "Utilities and helpers to drive consistency across software products using the Carbon Design System with React",
- "version": "0.1.0",
+ "version": "0.2.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -48,7 +48,7 @@
"typescript-config-carbon": "^0.3.0"
},
"dependencies": {
- "@carbon/utilities": "^0.1.0",
+ "@carbon/utilities": "^0.2.0-rc.0",
"@ibm/telemetry-js": "^1.6.1"
}
}
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index 32d3a2466927..b57daa820e15 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/utilities",
"description": "Utilities and helpers to drive consistency across software products using the Carbon Design System",
- "version": "0.1.0",
+ "version": "0.2.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/packages/web-components/.storybook/templates/with-layer.ts b/packages/web-components/.storybook/templates/with-layer.ts
index d7ff7d81493d..4271e7d2deb5 100644
--- a/packages/web-components/.storybook/templates/with-layer.ts
+++ b/packages/web-components/.storybook/templates/with-layer.ts
@@ -9,7 +9,7 @@
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
-import Layers from '@carbon/icons/lib/layers/16';
+import Layers from '@carbon/icons/lib/layers/16.js';
import { prefix } from '../../src/globals/settings';
import styles from './with-layer.scss?lit';
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index f5b047d5292f..02bcfe5458a9 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/web-components",
"description": "Web components for the Carbon Design System",
- "version": "2.15.0",
+ "version": "2.16.0-rc.0",
"license": "Apache-2.0",
"main": "es/index.js",
"module": "es/index.js",
@@ -77,9 +77,9 @@
},
"devDependencies": {
"@carbon/icon-helpers": "10.47.0",
- "@carbon/icons": "^11.51.0",
- "@carbon/layout": "^11.27.0",
- "@carbon/motion": "^11.23.0",
+ "@carbon/icons": "^11.52.0-rc.0",
+ "@carbon/layout": "^11.28.0-rc.0",
+ "@carbon/motion": "^11.24.0-rc.0",
"@juggle/resize-observer": "^3.4.0",
"@mordech/vite-lit-loader": "^0.36.0",
"@rollup/plugin-alias": "^5.1.0",
diff --git a/packages/web-components/src/components/accordion/accordion-item-skeleton.ts b/packages/web-components/src/components/accordion/accordion-item-skeleton.ts
index 7a2b97002a06..3c174a612b04 100644
--- a/packages/web-components/src/components/accordion/accordion-item-skeleton.ts
+++ b/packages/web-components/src/components/accordion/accordion-item-skeleton.ts
@@ -8,7 +8,7 @@
*/
import { LitElement, html } from 'lit';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
import { prefix } from '../../globals/settings';
import '../skeleton-text/index';
import styles from './accordion.scss?lit';
diff --git a/packages/web-components/src/components/accordion/accordion-item.ts b/packages/web-components/src/components/accordion/accordion-item.ts
index c7803e991629..acccd3e693bc 100644
--- a/packages/web-components/src/components/accordion/accordion-item.ts
+++ b/packages/web-components/src/components/accordion/accordion-item.ts
@@ -10,7 +10,7 @@
import { classMap } from 'lit/directives/class-map.js';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import Handle from '../../globals/internal/handle';
diff --git a/packages/web-components/src/components/accordion/accordion-skeleton.ts b/packages/web-components/src/components/accordion/accordion-skeleton.ts
index 84ba24ebe6dd..e982d5acdf50 100644
--- a/packages/web-components/src/components/accordion/accordion-skeleton.ts
+++ b/packages/web-components/src/components/accordion/accordion-skeleton.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
import { ACCORDION_ALIGNMENT } from './accordion';
import { forEach } from '../../globals/internal/collection-helpers';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
import './accordion-item-skeleton';
import '../skeleton-text/index';
import styles from './accordion.scss?lit';
diff --git a/packages/web-components/src/components/ai-label/ai-label.stories.ts b/packages/web-components/src/components/ai-label/ai-label.stories.ts
index c35e322e9575..7825add7792d 100644
--- a/packages/web-components/src/components/ai-label/ai-label.stories.ts
+++ b/packages/web-components/src/components/ai-label/ai-label.stories.ts
@@ -8,9 +8,9 @@
*/
import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import './index';
import '../icon-button/index';
diff --git a/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts b/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
index b5479589ae48..bbab1bf07dd7 100644
--- a/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
+++ b/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
@@ -9,7 +9,7 @@
import { html } from 'lit';
import { prefix } from '../../globals/settings';
-import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16';
+import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16.js';
import CDSOverflowMenu from '../overflow-menu/overflow-menu';
import styles from './breadcrumb.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/button/button.mdx b/packages/web-components/src/components/button/button.mdx
index 69122ea2d0b8..12826f8a559d 100644
--- a/packages/web-components/src/components/button/button.mdx
+++ b/packages/web-components/src/components/button/button.mdx
@@ -1,6 +1,6 @@
import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
import * as ButtonStories from './button.stories';
@@ -69,7 +69,7 @@ will be styled as primary or ghost buttons.
Our Storybook example also shows off the Tooltip feature, explained later.
````html
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
${Add16({ slot: 'icon' })} ``` ## Set of Buttons You
can wrap two `Button` elements in a `ButtonSet` when an action required by the
diff --git a/packages/web-components/src/components/button/button.stories.ts b/packages/web-components/src/components/button/button.stories.ts
index f909c061140c..55cf99de469a 100644
--- a/packages/web-components/src/components/button/button.stories.ts
+++ b/packages/web-components/src/components/button/button.stories.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
// Below path will be there when an application installs `carbon-web-components` package.
// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
// @ts-ignore
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
import {
BUTTON_KIND,
BUTTON_TYPE,
diff --git a/packages/web-components/src/components/chat-button/chat-button.mdx b/packages/web-components/src/components/chat-button/chat-button.mdx
index 407a6c5cbba0..81556b907633 100644
--- a/packages/web-components/src/components/chat-button/chat-button.mdx
+++ b/packages/web-components/src/components/chat-button/chat-button.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Markdown, Meta } from "@storybook/blocks";
-import { cdnJs, cdnCss } from "../../globals/internal/storybook-cdn";
-import * as ChatButtonStories from "./chat-button.stories";
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ChatButtonStories from './chat-button.stories';
@@ -19,19 +19,19 @@ Here's a quick example to get you started.
### JS (via import)
```javascript
-import "@carbon/web-components/es/components/chat-button/index.js";
+import '@carbon/web-components/es/components/chat-button/index.js';
```
-{`${cdnJs({ components: ["chat-button"] })}`}
+{`${cdnJs({ components: ['chat-button'] })}`}
{`${cdnCss()}`}
```javascript
-import "@carbon/web-components/es/components/chat-button/index.js";
-import Add16 from "@carbon/icons/lib/add/16";
+import '@carbon/web-components/es/components/chat-button/index.js';
+import Add16 from '@carbon/icons/lib/add/16.js';
function App() {
return html`
- Primary ${Add16({ slot: "icon" })}
+ Primary ${Add16({ slot: 'icon' })}
`;
}
```
diff --git a/packages/web-components/src/components/chat-button/chat-button.stories.ts b/packages/web-components/src/components/chat-button/chat-button.stories.ts
index 3953a1d96c24..b633a0a2ae40 100644
--- a/packages/web-components/src/components/chat-button/chat-button.stories.ts
+++ b/packages/web-components/src/components/chat-button/chat-button.stories.ts
@@ -9,7 +9,7 @@
import { html } from 'lit';
import './index';
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
import styles from './chat-button-story.scss?lit';
export const Default = () => {
diff --git a/packages/web-components/src/components/checkbox/checkbox-group.ts b/packages/web-components/src/components/checkbox/checkbox-group.ts
index de7f44808a95..c0d2b06d593c 100644
--- a/packages/web-components/src/components/checkbox/checkbox-group.ts
+++ b/packages/web-components/src/components/checkbox/checkbox-group.ts
@@ -11,8 +11,8 @@ import { classMap } from 'lit/directives/class-map.js';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import CDSCheckbox from './checkbox';
import styles from './checkbox.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/checkbox/checkbox.ts b/packages/web-components/src/components/checkbox/checkbox.ts
index 8fdef175f555..1bc12ac5bb93 100644
--- a/packages/web-components/src/components/checkbox/checkbox.ts
+++ b/packages/web-components/src/components/checkbox/checkbox.ts
@@ -14,8 +14,8 @@ import { property, query } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import FormMixin from '../../globals/mixins/form';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import styles from './checkbox.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/code-snippet/code-snippet.ts b/packages/web-components/src/components/code-snippet/code-snippet.ts
index 51c6f3f11790..72c24a09f06f 100644
--- a/packages/web-components/src/components/code-snippet/code-snippet.ts
+++ b/packages/web-components/src/components/code-snippet/code-snippet.ts
@@ -10,7 +10,7 @@
import { styleMap } from 'lit/directives/style-map.js';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';
diff --git a/packages/web-components/src/components/combo-box/combo-box.ts b/packages/web-components/src/components/combo-box/combo-box.ts
index 2f0d2455f84b..1a8dadd40730 100644
--- a/packages/web-components/src/components/combo-box/combo-box.ts
+++ b/packages/web-components/src/components/combo-box/combo-box.ts
@@ -10,7 +10,7 @@
import { classMap } from 'lit/directives/class-map.js';
import { TemplateResult, html } from 'lit';
import { property, query } from 'lit/decorators.js';
-import Close16 from '@carbon/icons/lib/close/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
import { prefix } from '../../globals/settings';
import { findIndex, forEach } from '../../globals/internal/collection-helpers';
import CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
diff --git a/packages/web-components/src/components/content-switcher/content-switcher.stories.ts b/packages/web-components/src/components/content-switcher/content-switcher.stories.ts
index 4e78f651af64..6fbcb1dc8414 100644
--- a/packages/web-components/src/components/content-switcher/content-switcher.stories.ts
+++ b/packages/web-components/src/components/content-switcher/content-switcher.stories.ts
@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { CONTENT_SWITCHER_SIZE } from './content-switcher';
import './index';
import { prefix } from '../../globals/settings';
-import TableOfContents16 from '@carbon/icons/lib/table-of-contents/16';
-import Workspace16 from '@carbon/icons/lib/workspace/16';
-import ViewMode2_16 from '@carbon/icons/lib/view--mode-2/16';
+import TableOfContents16 from '@carbon/icons/lib/table-of-contents/16.js';
+import Workspace16 from '@carbon/icons/lib/workspace/16.js';
+import ViewMode2_16 from '@carbon/icons/lib/view--mode-2/16.js';
import '../layer/index';
import '../../../.storybook/templates/with-layer';
diff --git a/packages/web-components/src/components/copy-button/copy-button.ts b/packages/web-components/src/components/copy-button/copy-button.ts
index 2fb8ab45930d..f5287db88da4 100644
--- a/packages/web-components/src/components/copy-button/copy-button.ts
+++ b/packages/web-components/src/components/copy-button/copy-button.ts
@@ -9,7 +9,7 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import Copy16 from '@carbon/icons/lib/copy/16';
+import Copy16 from '@carbon/icons/lib/copy/16.js';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-ai-label.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-ai-label.stories.ts
index b6dc712e98c7..a42c11be1061 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-ai-label.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-ai-label.stories.ts
@@ -8,9 +8,9 @@
*/
import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
import storyDocs from './data-table-ai-label.mdx';
import '../index';
import '../../icon-button/index';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts
index 38c9c928c3ad..4b29e2d30281 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts
@@ -10,13 +10,13 @@
import { html } from 'lit';
import { prefix } from '../../../globals/settings';
import { TABLE_SIZE } from '../table';
-import Add from '@carbon/icons/lib/add/16';
-import Save from '@carbon/icons/lib/save/16';
-import TrashCan from '@carbon/icons/lib/trash-can/16';
+import Add from '@carbon/icons/lib/add/16.js';
+import Save from '@carbon/icons/lib/save/16.js';
+import TrashCan from '@carbon/icons/lib/trash-can/16.js';
// @ts-ignore
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
// @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
import '../../overflow-menu';
import '../index';
import storyDocs from './data-table.mdx';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
index 96d3e746cea5..487cf2a93d2a 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
@@ -10,13 +10,13 @@
import { html } from 'lit';
import { prefix } from '../../../globals/settings';
import { TABLE_SIZE } from '../table';
-import Add from '@carbon/icons/lib/add/16';
-import Save from '@carbon/icons/lib/save/16';
-import TrashCan from '@carbon/icons/lib/trash-can/16';
+import Add from '@carbon/icons/lib/add/16.js';
+import Save from '@carbon/icons/lib/save/16.js';
+import TrashCan from '@carbon/icons/lib/trash-can/16.js';
// @ts-ignore
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
// @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
import '../index';
import storyDocs from './data-table.mdx';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts
index 9db390bf1e96..106dd87a63e5 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
import { prefix } from '../../../globals/settings';
import { TABLE_SIZE } from '../table';
// @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
import '../index';
import storyDocs from './data-table.mdx';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts
index c1e58b74199a..cf6c30875c32 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts
@@ -10,8 +10,8 @@
import { html } from 'lit';
import { prefix } from '../../../globals/settings';
import { TABLE_SIZE } from '../table';
-import Settings16 from '@carbon/icons/lib/settings/16';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
import storyDocs from './data-table.mdx';
import '../index';
diff --git a/packages/web-components/src/components/data-table/table-header-cell.ts b/packages/web-components/src/components/data-table/table-header-cell.ts
index 0937e8027faf..53c9c840835c 100644
--- a/packages/web-components/src/components/data-table/table-header-cell.ts
+++ b/packages/web-components/src/components/data-table/table-header-cell.ts
@@ -10,8 +10,8 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
-import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32';
-import ArrowDown32 from '@carbon/icons/lib/arrow--down/32';
+import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32.js';
+import ArrowDown32 from '@carbon/icons/lib/arrow--down/32.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import {
diff --git a/packages/web-components/src/components/data-table/table-row.ts b/packages/web-components/src/components/data-table/table-row.ts
index 3c318c8612cf..3591021c5e2d 100644
--- a/packages/web-components/src/components/data-table/table-row.ts
+++ b/packages/web-components/src/components/data-table/table-row.ts
@@ -10,7 +10,7 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
import FocusMixin from '../../globals/mixins/focus';
import styles from './data-table.scss?lit';
diff --git a/packages/web-components/src/components/date-picker/date-picker-input.ts b/packages/web-components/src/components/date-picker/date-picker-input.ts
index 7aa5df33f406..53e408e8aa2f 100644
--- a/packages/web-components/src/components/date-picker/date-picker-input.ts
+++ b/packages/web-components/src/components/date-picker/date-picker-input.ts
@@ -10,14 +10,14 @@
import { classMap } from 'lit/directives/class-map.js';
import { LitElement, html } from 'lit';
import { property, query, state } from 'lit/decorators.js';
-import Calendar16 from '@carbon/icons/lib/calendar/16';
+import Calendar16 from '@carbon/icons/lib/calendar/16.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import { INPUT_SIZE } from '../text-input/text-input';
import { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND } from './defs';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import styles from './date-picker.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/date-picker/icon-plugin.ts b/packages/web-components/src/components/date-picker/icon-plugin.ts
index 76fd78274522..c826c76454fb 100644
--- a/packages/web-components/src/components/date-picker/icon-plugin.ts
+++ b/packages/web-components/src/components/date-picker/icon-plugin.ts
@@ -10,8 +10,8 @@
import { render } from 'lit';
import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
import { Plugin } from 'flatpickr/dist/types/options';
-import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16.js';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
/**
* @returns A Flatpickr plugin to set the right icons in the design system.
diff --git a/packages/web-components/src/components/dropdown/dropdown-item.ts b/packages/web-components/src/components/dropdown/dropdown-item.ts
index cd373afeae76..cf36b9a0dad5 100644
--- a/packages/web-components/src/components/dropdown/dropdown-item.ts
+++ b/packages/web-components/src/components/dropdown/dropdown-item.ts
@@ -9,7 +9,7 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import Checkmark16 from '@carbon/icons/lib/checkmark/16';
+import Checkmark16 from '@carbon/icons/lib/checkmark/16.js';
import { prefix } from '../../globals/settings';
import { DROPDOWN_SIZE } from './dropdown';
import styles from './dropdown.scss?lit';
diff --git a/packages/web-components/src/components/dropdown/dropdown.ts b/packages/web-components/src/components/dropdown/dropdown.ts
index b043301dcd5c..bfcd726a877d 100644
--- a/packages/web-components/src/components/dropdown/dropdown.ts
+++ b/packages/web-components/src/components/dropdown/dropdown.ts
@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { LitElement, html, TemplateResult } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import FocusMixin from '../../globals/mixins/focus';
import FormMixin from '../../globals/mixins/form';
import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/file-uploader/file-uploader-item.ts b/packages/web-components/src/components/file-uploader/file-uploader-item.ts
index 5b0866da0752..37393ac3bdd7 100644
--- a/packages/web-components/src/components/file-uploader/file-uploader-item.ts
+++ b/packages/web-components/src/components/file-uploader/file-uploader-item.ts
@@ -9,9 +9,9 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import Close16 from '@carbon/icons/lib/close/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
import { prefix } from '../../globals/settings';
import { LOADING_TYPE } from '../loading/loading';
import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';
diff --git a/packages/web-components/src/components/icon-button/icon-button.mdx b/packages/web-components/src/components/icon-button/icon-button.mdx
index e89aa6f11dc7..1d133eb9d92d 100644
--- a/packages/web-components/src/components/icon-button/icon-button.mdx
+++ b/packages/web-components/src/components/icon-button/icon-button.mdx
@@ -32,7 +32,7 @@ import '@carbon/web-components/es/components/icon-button/index.js';
```javascript
import '@carbon/web-components/es/components/icon-button/index.js';
-import Edit16 from '@carbon/icons/lib/edit/16';
+import Edit16 from '@carbon/icons/lib/edit/16.js';
function App() {
return html`
diff --git a/packages/web-components/src/components/icon-button/icon-button.stories.ts b/packages/web-components/src/components/icon-button/icon-button.stories.ts
index d2fa901bee63..e848e75fc0ce 100644
--- a/packages/web-components/src/components/icon-button/icon-button.stories.ts
+++ b/packages/web-components/src/components/icon-button/icon-button.stories.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
import './index';
import '../button/index';
import { ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs';
-import Edit16 from '@carbon/icons/lib/edit/16';
+import Edit16 from '@carbon/icons/lib/edit/16.js';
import { ICON_BUTTON_SIZE } from './defs';
import { BUTTON_KIND } from '../button/defs';
diff --git a/packages/web-components/src/components/icon/icon.mdx b/packages/web-components/src/components/icon/icon.mdx
index e0f79f5679cc..712d97091dd6 100644
--- a/packages/web-components/src/components/icon/icon.mdx
+++ b/packages/web-components/src/components/icon/icon.mdx
@@ -1,5 +1,5 @@
-import { ArgTypes, Meta } from "@storybook/blocks";
-import * as IconStories from "./icon.stories";
+import { ArgTypes, Meta } from '@storybook/blocks';
+import * as IconStories from './icon.stories';
@@ -14,7 +14,7 @@ Here's a quick example to get you started.
### JS (via import)
```javascript
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
function App() {
return (
diff --git a/packages/web-components/src/components/icon/icon.stories.ts b/packages/web-components/src/components/icon/icon.stories.ts
index 9cee6aad6f22..f52edcf31b2c 100644
--- a/packages/web-components/src/components/icon/icon.stories.ts
+++ b/packages/web-components/src/components/icon/icon.stories.ts
@@ -12,13 +12,13 @@ import { html, svg } from 'lit';
// Below path will be there when an application installs `@carbon/web-components` package.
// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
// @ts-ignore
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
// @ts-ignore
-import Add20 from '@carbon/icons/lib/add/20';
+import Add20 from '@carbon/icons/lib/add/20.js';
// @ts-ignore
-import Add24 from '@carbon/icons/lib/add/24';
+import Add24 from '@carbon/icons/lib/add/24.js';
// @ts-ignore
-import Add32 from '@carbon/icons/lib/add/32';
+import Add32 from '@carbon/icons/lib/add/32.js';
export const Default = {
render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `,
diff --git a/packages/web-components/src/components/inline-loading/inline-loading.ts b/packages/web-components/src/components/inline-loading/inline-loading.ts
index f0cabe8df1e9..d37b46085158 100644
--- a/packages/web-components/src/components/inline-loading/inline-loading.ts
+++ b/packages/web-components/src/components/inline-loading/inline-loading.ts
@@ -10,8 +10,8 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
import { prefix } from '../../globals/settings';
import LOADING_TYPE from '../loading/types';
import getLoadingIcon from '../loading/loading-icon';
diff --git a/packages/web-components/src/components/link/link.mdx b/packages/web-components/src/components/link/link.mdx
index 376156fa89d5..543e2c3d40ff 100644
--- a/packages/web-components/src/components/link/link.mdx
+++ b/packages/web-components/src/components/link/link.mdx
@@ -39,7 +39,7 @@ import '@carbon/web-components/es/components/list/index.js';
Import the desired icon and incorporate with the link text:
```javascript
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
function App() {
return html`
diff --git a/packages/web-components/src/components/link/link.stories.ts b/packages/web-components/src/components/link/link.stories.ts
index 6fda7939ae12..1a81f4d01e59 100644
--- a/packages/web-components/src/components/link/link.stories.ts
+++ b/packages/web-components/src/components/link/link.stories.ts
@@ -9,7 +9,7 @@
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
import { LINK_SIZE } from './link';
const defaultArgs = {
diff --git a/packages/web-components/src/components/modal/modal-close-button.ts b/packages/web-components/src/components/modal/modal-close-button.ts
index 612d4945d7ae..ac2d8a2ef1d4 100644
--- a/packages/web-components/src/components/modal/modal-close-button.ts
+++ b/packages/web-components/src/components/modal/modal-close-button.ts
@@ -9,7 +9,7 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import Close20 from '@carbon/icons/lib/close/20';
+import Close20 from '@carbon/icons/lib/close/20.js';
import { prefix } from '../../globals/settings';
import { ifDefined } from 'lit/directives/if-defined.js';
import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/multi-select/multi-select.ts b/packages/web-components/src/components/multi-select/multi-select.ts
index 09b726c71545..565b33ec1833 100644
--- a/packages/web-components/src/components/multi-select/multi-select.ts
+++ b/packages/web-components/src/components/multi-select/multi-select.ts
@@ -10,7 +10,7 @@
import { html, TemplateResult } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
-import Close16 from '@carbon/icons/lib/close/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
import { prefix } from '../../globals/settings';
import {
filter,
diff --git a/packages/web-components/src/components/notification/actionable-notification.ts b/packages/web-components/src/components/notification/actionable-notification.ts
index 265571082bef..1f0bd194b0ac 100644
--- a/packages/web-components/src/components/notification/actionable-notification.ts
+++ b/packages/web-components/src/components/notification/actionable-notification.ts
@@ -6,12 +6,12 @@
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
-import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';
-import ErrorFilled20 from '@carbon/icons/lib/error--filled/20';
-import InformationFilled20 from '@carbon/icons/lib/information--filled/20';
-import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20';
-import WarningFilled20 from '@carbon/icons/lib/warning--filled/20';
-import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20';
+import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20.js';
+import ErrorFilled20 from '@carbon/icons/lib/error--filled/20.js';
+import InformationFilled20 from '@carbon/icons/lib/information--filled/20.js';
+import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20.js';
+import WarningFilled20 from '@carbon/icons/lib/warning--filled/20.js';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20.js';
import { html, svg } from 'lit';
import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
diff --git a/packages/web-components/src/components/notification/inline-notification.ts b/packages/web-components/src/components/notification/inline-notification.ts
index ea2c285bbc49..69f4c4b76f06 100644
--- a/packages/web-components/src/components/notification/inline-notification.ts
+++ b/packages/web-components/src/components/notification/inline-notification.ts
@@ -7,13 +7,13 @@
* LICENSE file in the root directory of this source tree.
*/
-import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';
-import Close16 from '@carbon/icons/lib/close/16';
-import ErrorFilled20 from '@carbon/icons/lib/error--filled/20';
-import InformationFilled20 from '@carbon/icons/lib/information--filled/20';
-import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20';
-import WarningFilled20 from '@carbon/icons/lib/warning--filled/20';
-import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20';
+import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20.js';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import ErrorFilled20 from '@carbon/icons/lib/error--filled/20.js';
+import InformationFilled20 from '@carbon/icons/lib/information--filled/20.js';
+import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20.js';
+import WarningFilled20 from '@carbon/icons/lib/warning--filled/20.js';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20.js';
import { LitElement, html, svg } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
diff --git a/packages/web-components/src/components/number-input/number-input.ts b/packages/web-components/src/components/number-input/number-input.ts
index a6cd7e6fbff1..a81dbbcbb105 100644
--- a/packages/web-components/src/components/number-input/number-input.ts
+++ b/packages/web-components/src/components/number-input/number-input.ts
@@ -11,10 +11,10 @@ import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
-import Add16 from '@carbon/icons/lib/add/16';
-import Subtract16 from '@carbon/icons/lib/subtract/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
+import Add16 from '@carbon/icons/lib/add/16.js';
+import Subtract16 from '@carbon/icons/lib/subtract/16.js';
import ifNonEmpty from '../../globals/directives/if-non-empty';
import { NUMBER_INPUT_VALIDATION_STATUS } from './defs';
import styles from './number-input.scss?lit';
diff --git a/packages/web-components/src/components/overflow-menu/overflow-menu.mdx b/packages/web-components/src/components/overflow-menu/overflow-menu.mdx
index 550eda73c004..ed738b3cc24e 100644
--- a/packages/web-components/src/components/overflow-menu/overflow-menu.mdx
+++ b/packages/web-components/src/components/overflow-menu/overflow-menu.mdx
@@ -24,7 +24,7 @@ Here's a quick example to get you started.
```javascript
import '@carbon/web-components/es/components/overflow-menu/index.js';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
```
{`${cdnJs({ components: ['overflow-menu'] })}`}
diff --git a/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts b/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts
index 46f60fd2155e..626ec5ce1e62 100644
--- a/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts
+++ b/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts
@@ -13,8 +13,8 @@ import { OVERFLOW_MENU_SIZE } from './overflow-menu';
import './overflow-menu-body';
import './overflow-menu-item';
import { prefix } from '../../globals/settings';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
-import Filter16 from '@carbon/icons/lib/filter/16';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
+import Filter16 from '@carbon/icons/lib/filter/16.js';
const sizes = {
[`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL,
diff --git a/packages/web-components/src/components/pagination/pagination.ts b/packages/web-components/src/components/pagination/pagination.ts
index 403bef7a02ec..6902bd806f31 100644
--- a/packages/web-components/src/components/pagination/pagination.ts
+++ b/packages/web-components/src/components/pagination/pagination.ts
@@ -9,8 +9,8 @@
import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
-import CaretLeft16 from '@carbon/icons/lib/caret--left/16';
-import CaretRight16 from '@carbon/icons/lib/caret--right/16';
+import CaretLeft16 from '@carbon/icons/lib/caret--left/16.js';
+import CaretRight16 from '@carbon/icons/lib/caret--right/16.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/popover/autoalign.mdx b/packages/web-components/src/components/popover/autoalign.mdx
index 7efb9bb4865e..79026c06faf4 100644
--- a/packages/web-components/src/components/popover/autoalign.mdx
+++ b/packages/web-components/src/components/popover/autoalign.mdx
@@ -42,7 +42,7 @@ to the component.
```javascript
import '@carbon/web-components/es/components/popover/index.js';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
```
{`${cdnJs({ components: ['popover'] })}`}
diff --git a/packages/web-components/src/components/popover/autoalign.stories.ts b/packages/web-components/src/components/popover/autoalign.stories.ts
index 6c8dd26a0abb..7feaff26c78d 100644
--- a/packages/web-components/src/components/popover/autoalign.stories.ts
+++ b/packages/web-components/src/components/popover/autoalign.stories.ts
@@ -15,11 +15,11 @@ import '../icon-button/index';
import '../data-table/index';
import { POPOVER_ALIGNMENT } from './defs';
import { AI_LABEL_SIZE } from '../ai-label/defs';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
-import Information16 from '@carbon/icons/lib/information/16';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
+import Information16 from '@carbon/icons/lib/information/16.js';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
import styles from './popover-story.scss?lit';
import aiLabelStyles from '../ai-label/ai-label-story.scss?lit';
diff --git a/packages/web-components/src/components/popover/popover.mdx b/packages/web-components/src/components/popover/popover.mdx
index ada966141d7f..30597ee826e3 100644
--- a/packages/web-components/src/components/popover/popover.mdx
+++ b/packages/web-components/src/components/popover/popover.mdx
@@ -22,7 +22,7 @@ Here's a quick example to get you started.
```javascript
import '@carbon/web-components/es/components/popover/index.js';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
```
{`${cdnJs({ components: ['popover'] })}`}
@@ -54,7 +54,7 @@ import '@carbon/web-components/es/components/form/index.js';
import '@carbon/web-components/es/components/radio-button/index.js';
import '@carbon/web-components/es/components/checkbox/index.js';
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
```
```html
diff --git a/packages/web-components/src/components/popover/popover.stories.ts b/packages/web-components/src/components/popover/popover.stories.ts
index e92a3275a087..37b500e58a8f 100644
--- a/packages/web-components/src/components/popover/popover.stories.ts
+++ b/packages/web-components/src/components/popover/popover.stories.ts
@@ -13,7 +13,7 @@ import './popover-content';
import '../radio-button/index';
import { POPOVER_ALIGNMENT } from './defs';
import { prefix } from '../../globals/settings';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
import Settings16 from '@carbon/icons/lib/settings/16';
import '../checkbox/checkbox';
diff --git a/packages/web-components/src/components/progress-bar/progress-bar.ts b/packages/web-components/src/components/progress-bar/progress-bar.ts
index cee8e62d80dd..636801dfdc6d 100644
--- a/packages/web-components/src/components/progress-bar/progress-bar.ts
+++ b/packages/web-components/src/components/progress-bar/progress-bar.ts
@@ -11,8 +11,8 @@ import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
import { classMap } from 'lit/directives/class-map.js';
-import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
import {
PROGRESS_BAR_SIZE,
PROGRESS_BAR_STATUS,
diff --git a/packages/web-components/src/components/progress-indicator/progress-step.ts b/packages/web-components/src/components/progress-indicator/progress-step.ts
index cbe1d7be0538..0bdbdcc3f7b2 100644
--- a/packages/web-components/src/components/progress-indicator/progress-step.ts
+++ b/packages/web-components/src/components/progress-indicator/progress-step.ts
@@ -9,10 +9,10 @@
import { LitElement, html, svg } from 'lit';
import { property } from 'lit/decorators.js';
-import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16';
-import CircleDash16 from '@carbon/icons/lib/circle-dash/16';
-import Incomplete16 from '@carbon/icons/lib/incomplete/16';
-import Warning16 from '@carbon/icons/lib/warning/16';
+import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16.js';
+import CircleDash16 from '@carbon/icons/lib/circle-dash/16.js';
+import Incomplete16 from '@carbon/icons/lib/incomplete/16.js';
+import Warning16 from '@carbon/icons/lib/warning/16.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import { PROGRESS_STEP_STAT } from './defs';
diff --git a/packages/web-components/src/components/radio-button/radio-button-group.ts b/packages/web-components/src/components/radio-button/radio-button-group.ts
index b38a85286942..8aac79e8acd6 100644
--- a/packages/web-components/src/components/radio-button/radio-button-group.ts
+++ b/packages/web-components/src/components/radio-button/radio-button-group.ts
@@ -16,8 +16,8 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
import HostListener from '../../globals/decorators/host-listener';
import { find, forEach } from '../../globals/internal/collection-helpers';
import { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import CDSRadioButton from './radio-button';
import styles from './radio-button.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/search/search.ts b/packages/web-components/src/components/search/search.ts
index c30a5bf7dbbf..fdc37112647a 100644
--- a/packages/web-components/src/components/search/search.ts
+++ b/packages/web-components/src/components/search/search.ts
@@ -10,8 +10,8 @@
import { classMap } from 'lit/directives/class-map.js';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import Close16 from '@carbon/icons/lib/close/16';
-import Search16 from '@carbon/icons/lib/search/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import Search16 from '@carbon/icons/lib/search/16.js';
import { prefix } from '../../globals/settings';
import ifNonEmpty from '../../globals/directives/if-non-empty';
import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/select/select.ts b/packages/web-components/src/components/select/select.ts
index 80eac0008dc3..e9b504b1a39b 100644
--- a/packages/web-components/src/components/select/select.ts
+++ b/packages/web-components/src/components/select/select.ts
@@ -10,9 +10,9 @@
import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import { prefix } from '../../globals/settings';
import { ifDefined } from 'lit/directives/if-defined.js';
import FormMixin from '../../globals/mixins/form';
diff --git a/packages/web-components/src/components/side-panel/side-panel.ts b/packages/web-components/src/components/side-panel/side-panel.ts
index 2d075cca64c0..214d2abf61a3 100644
--- a/packages/web-components/src/components/side-panel/side-panel.ts
+++ b/packages/web-components/src/components/side-panel/side-panel.ts
@@ -20,8 +20,8 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';
import { selectorTabbable } from '../../globals/settings';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16';
-import Close20 from '@carbon/icons/lib/close/20';
+import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16.js';
+import Close20 from '@carbon/icons/lib/close/20.js';
import { moderate02 } from '@carbon/motion';
import '../button/index';
import '../icon-button/index';
diff --git a/packages/web-components/src/components/slider/slider-input.ts b/packages/web-components/src/components/slider/slider-input.ts
index 7b3be0951aab..a9cdb8b1655b 100644
--- a/packages/web-components/src/components/slider/slider-input.ts
+++ b/packages/web-components/src/components/slider/slider-input.ts
@@ -12,8 +12,8 @@ import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
import FocusMixin from '../../globals/mixins/focus';
import styles from './slider.scss?lit';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/slug/slug.ts b/packages/web-components/src/components/slug/slug.ts
index 903632691fea..d4e54a06bc3e 100644
--- a/packages/web-components/src/components/slug/slug.ts
+++ b/packages/web-components/src/components/slug/slug.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
import { prefix } from '../../globals/settings';
import CDSToggleTip from '../toggle-tip/toggletip';
import styles from './slug.scss?lit';
-import Undo16 from '@carbon/icons/lib/undo/16';
+import Undo16 from '@carbon/icons/lib/undo/16.js';
import { SLUG_SIZE, SLUG_KIND } from './defs';
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/structured-list/structured-list-row.ts b/packages/web-components/src/components/structured-list/structured-list-row.ts
index 572f42615a55..722e3d74359e 100644
--- a/packages/web-components/src/components/structured-list/structured-list-row.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-row.ts
@@ -10,7 +10,7 @@
import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
import { prefix } from '../../globals/settings';
import HostListener from '../../globals/decorators/host-listener';
import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/tabs/tabs.ts b/packages/web-components/src/components/tabs/tabs.ts
index 429e03ae7054..68406e0f43c7 100644
--- a/packages/web-components/src/components/tabs/tabs.ts
+++ b/packages/web-components/src/components/tabs/tabs.ts
@@ -14,8 +14,8 @@ import { prefix } from '../../globals/settings';
import HostListenerMixin from '../../globals/mixins/host-listener';
import HostListener from '../../globals/decorators/host-listener';
import { forEach } from '../../globals/internal/collection-helpers';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
-import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
+import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16.js';
import CDSContentSwitcher, {
NAVIGATION_DIRECTION,
} from '../content-switcher/content-switcher';
diff --git a/packages/web-components/src/components/tag/tag.mdx b/packages/web-components/src/components/tag/tag.mdx
index 20d8065140f6..e7d72fcdc6ee 100644
--- a/packages/web-components/src/components/tag/tag.mdx
+++ b/packages/web-components/src/components/tag/tag.mdx
@@ -65,7 +65,7 @@ icon and insert it within the tag element as such:
```
```javascript
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
function App() {
return html` {`${cdnJs({ components: ['tooltip'] })}`}
diff --git a/packages/web-components/src/components/tooltip/tooltip.stories.ts b/packages/web-components/src/components/tooltip/tooltip.stories.ts
index 732ad8afb61e..4c42a31ea0a8 100644
--- a/packages/web-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/web-components/src/components/tooltip/tooltip.stories.ts
@@ -14,7 +14,7 @@ import { html } from 'lit';
import './index';
import { POPOVER_ALIGNMENT } from '../popover/defs';
import styles from './tooltip-story.scss?lit';
-import Information16 from '@carbon/icons/lib/information/16';
+import Information16 from '@carbon/icons/lib/information/16.js';
const tooltipAlignments = {
[`top`]: POPOVER_ALIGNMENT.TOP,
diff --git a/packages/web-components/src/components/ui-shell/header-menu-button.ts b/packages/web-components/src/components/ui-shell/header-menu-button.ts
index 0185fbd8b36a..591af4fbfef7 100644
--- a/packages/web-components/src/components/ui-shell/header-menu-button.ts
+++ b/packages/web-components/src/components/ui-shell/header-menu-button.ts
@@ -10,8 +10,8 @@
import { classMap } from 'lit/directives/class-map.js';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
-import Close20 from '@carbon/icons/lib/close/20';
-import Menu20 from '@carbon/icons/lib/menu/20';
+import Close20 from '@carbon/icons/lib/close/20.js';
+import Menu20 from '@carbon/icons/lib/menu/20.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/ui-shell/header-menu.ts b/packages/web-components/src/components/ui-shell/header-menu.ts
index a44030db264a..2015e53a1b0a 100644
--- a/packages/web-components/src/components/ui-shell/header-menu.ts
+++ b/packages/web-components/src/components/ui-shell/header-menu.ts
@@ -11,7 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
-import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';
+import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16.js';
import { prefix } from '../../globals/settings';
import FocusMixin from '../../globals/mixins/focus';
import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/ui-shell/side-nav-menu.ts b/packages/web-components/src/components/ui-shell/side-nav-menu.ts
index 2e5d8fb08115..b636ef18ddf3 100644
--- a/packages/web-components/src/components/ui-shell/side-nav-menu.ts
+++ b/packages/web-components/src/components/ui-shell/side-nav-menu.ts
@@ -9,7 +9,7 @@
import { LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
-import ChevronDown20 from '@carbon/icons/lib/chevron--down/20';
+import ChevronDown20 from '@carbon/icons/lib/chevron--down/20.js';
import { prefix } from '../../globals/settings';
import { forEach } from '../../globals/internal/collection-helpers';
import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/ui-shell/ui-shell.stories.ts b/packages/web-components/src/components/ui-shell/ui-shell.stories.ts
index 5c4892aec197..c93dd42d8e61 100644
--- a/packages/web-components/src/components/ui-shell/ui-shell.stories.ts
+++ b/packages/web-components/src/components/ui-shell/ui-shell.stories.ts
@@ -11,10 +11,10 @@ import { html } from 'lit';
// Below path will be there when an application installs `@carbon/web-components` package.
// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
// @ts-ignore
-import Fade16 from '@carbon/icons/lib/fade/16';
-import Search20 from '@carbon/icons/lib/search/20';
-import Notification20 from '@carbon/icons/lib/notification/20';
-import SwitcherIcon20 from '@carbon/icons/lib/switcher/20';
+import Fade16 from '@carbon/icons/lib/fade/16.js';
+import Search20 from '@carbon/icons/lib/search/20.js';
+import Notification20 from '@carbon/icons/lib/notification/20.js';
+import SwitcherIcon20 from '@carbon/icons/lib/switcher/20.js';
import contentStyles from '@carbon/styles/scss/components/ui-shell/content/_content.scss?lit';
import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
import { classMap } from 'lit/directives/class-map.js';
diff --git a/packages/web-components/tests/spec/ui-shell_spec.ts b/packages/web-components/tests/spec/ui-shell_spec.ts
index b9c1bc4c2d94..ddd4356e71e8 100644
--- a/packages/web-components/tests/spec/ui-shell_spec.ts
+++ b/packages/web-components/tests/spec/ui-shell_spec.ts
@@ -11,7 +11,7 @@ import { html, render } from 'lit';
// Below path will be there when an application installs `carbon-web-components` package.
// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
// @ts-ignore
-import Fade16 from '@carbon/icons/lib/fade/16';
+import Fade16 from '@carbon/icons/lib/fade/16.js';
import EventManager from '../utils/event-manager';
import { ifDefined } from 'lit/directives/if-defined.js';
import CDSHeaderMenu from '../../src/components/ui-shell/header-menu';
diff --git a/packages/web-components/tools/rollup-plugin-icons.js b/packages/web-components/tools/rollup-plugin-icons.js
index 3ea6c5241754..138ff005b448 100644
--- a/packages/web-components/tools/rollup-plugin-icons.js
+++ b/packages/web-components/tools/rollup-plugin-icons.js
@@ -38,7 +38,7 @@ export default function rollupPluginIcons(inputs, banner) {
);
const spreadModulePath = path.resolve(
__dirname,
- '../es/globals/directives/spread'
+ '../es/globals/directives/spread.js'
);
const code = `${banner}
diff --git a/www/package.json b/www/package.json
index 41f31068426b..265cd710f501 100644
--- a/www/package.json
+++ b/www/package.json
@@ -1,7 +1,7 @@
{
"name": "www",
"private": true,
- "version": "0.77.0",
+ "version": "0.78.0-rc.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -22,7 +22,7 @@
"start": "next start"
},
"dependencies": {
- "@carbon/react": "^1.68.0",
+ "@carbon/react": "^1.69.0-rc.0",
"@octokit/core": "^4.0.0",
"@octokit/plugin-retry": "^3.0.9",
"@octokit/plugin-throttling": "^4.0.0",
diff --git a/yarn.lock b/yarn.lock
index 6e0b20a40ec3..96e47ef18332 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1720,7 +1720,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/cli@npm:^11.22.0, @carbon/cli@workspace:packages/cli":
+"@carbon/cli@npm:^11.23.0-rc.0, @carbon/cli@workspace:packages/cli":
version: 0.0.0-use.local
resolution: "@carbon/cli@workspace:packages/cli"
dependencies:
@@ -1768,11 +1768,11 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/colors@npm:^11.27.0, @carbon/colors@workspace:packages/colors":
+"@carbon/colors@npm:^11.28.0-rc.0, @carbon/colors@workspace:packages/colors":
version: 0.0.0-use.local
resolution: "@carbon/colors@workspace:packages/colors"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
"@carbon/cli-reporter": "npm:^10.7.0"
"@carbon/scss-generator": "npm:^10.18.0"
"@carbon/test-utils": "npm:^10.33.0"
@@ -1787,14 +1787,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/elements@workspace:packages/elements"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
- "@carbon/colors": "npm:^11.27.0"
- "@carbon/grid": "npm:^11.28.0"
- "@carbon/icons": "npm:^11.51.0"
- "@carbon/layout": "npm:^11.27.0"
- "@carbon/motion": "npm:^11.23.0"
- "@carbon/themes": "npm:^11.42.0"
- "@carbon/type": "npm:^11.32.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
+ "@carbon/colors": "npm:^11.28.0-rc.0"
+ "@carbon/grid": "npm:^11.29.0-rc.0"
+ "@carbon/icons": "npm:^11.52.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
+ "@carbon/motion": "npm:^11.24.0-rc.0"
+ "@carbon/themes": "npm:^11.43.0-rc.0"
+ "@carbon/type": "npm:^11.33.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
fs-extra: "npm:^11.0.0"
klaw-sync: "npm:^6.0.0"
@@ -1812,7 +1812,7 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/feature-flags@npm:^0.23.0, @carbon/feature-flags@workspace:packages/feature-flags":
+"@carbon/feature-flags@npm:^0.24.0-rc.0, @carbon/feature-flags@workspace:packages/feature-flags":
version: 0.0.0-use.local
resolution: "@carbon/feature-flags@workspace:packages/feature-flags"
dependencies:
@@ -1844,18 +1844,18 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/grid@npm:^11.28.0, @carbon/grid@workspace:packages/grid":
+"@carbon/grid@npm:^11.29.0-rc.0, @carbon/grid@workspace:packages/grid":
version: 0.0.0-use.local
resolution: "@carbon/grid@workspace:packages/grid"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
- "@carbon/layout": "npm:^11.27.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
rimraf: "npm:^6.0.0"
languageName: unknown
linkType: soft
-"@carbon/icon-build-helpers@npm:^1.31.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
+"@carbon/icon-build-helpers@npm:^1.32.0-rc.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
version: 0.0.0-use.local
resolution: "@carbon/icon-build-helpers@workspace:packages/icon-build-helpers"
dependencies:
@@ -1866,7 +1866,7 @@ __metadata:
"@babel/template": "npm:^7.24.7"
"@babel/types": "npm:^7.24.7"
"@carbon/cli-reporter": "npm:^10.7.0"
- "@carbon/icon-helpers": "npm:^10.53.0"
+ "@carbon/icon-helpers": "npm:^10.54.0-rc.0"
"@hapi/joi": "npm:^17.1.1"
"@rollup/plugin-babel": "npm:^6.0.0"
"@rollup/plugin-replace": "npm:^5.0.0"
@@ -1900,24 +1900,24 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/icon-helpers@npm:^10.53.0, @carbon/icon-helpers@workspace:packages/icon-helpers":
+"@carbon/icon-helpers@npm:^10.54.0-rc.0, @carbon/icon-helpers@workspace:packages/icon-helpers":
version: 0.0.0-use.local
resolution: "@carbon/icon-helpers@workspace:packages/icon-helpers"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
rimraf: "npm:^6.0.0"
typescript-config-carbon: "npm:^0.3.0"
languageName: unknown
linkType: soft
-"@carbon/icons-react@npm:^11.51.0, @carbon/icons-react@workspace:packages/icons-react":
+"@carbon/icons-react@npm:^11.52.0-rc.0, @carbon/icons-react@workspace:packages/icons-react":
version: 0.0.0-use.local
resolution: "@carbon/icons-react@workspace:packages/icons-react"
dependencies:
- "@carbon/icon-build-helpers": "npm:^1.31.0"
- "@carbon/icon-helpers": "npm:^10.53.0"
- "@carbon/icons": "npm:^11.51.0"
+ "@carbon/icon-build-helpers": "npm:^1.32.0-rc.0"
+ "@carbon/icon-helpers": "npm:^10.54.0-rc.0"
+ "@carbon/icons": "npm:^11.52.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
prop-types: "npm:^15.7.2"
rimraf: "npm:^6.0.0"
@@ -1931,8 +1931,8 @@ __metadata:
resolution: "@carbon/icons-vue@workspace:packages/icons-vue"
dependencies:
"@carbon/cli-reporter": "npm:^10.7.0"
- "@carbon/icon-helpers": "npm:^10.53.0"
- "@carbon/icons": "npm:^11.51.0"
+ "@carbon/icon-helpers": "npm:^10.54.0-rc.0"
+ "@carbon/icons": "npm:^11.52.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
fs-extra: "npm:^11.0.0"
prettier: "npm:^2.8.8"
@@ -1942,12 +1942,12 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/icons@npm:^11.51.0, @carbon/icons@workspace:packages/icons":
+"@carbon/icons@npm:^11.52.0-rc.0, @carbon/icons@workspace:packages/icons":
version: 0.0.0-use.local
resolution: "@carbon/icons@workspace:packages/icons"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
- "@carbon/icon-build-helpers": "npm:^1.31.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
+ "@carbon/icon-build-helpers": "npm:^1.32.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
rimraf: "npm:^6.0.0"
languageName: unknown
@@ -1962,11 +1962,11 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/layout@npm:^11.27.0, @carbon/layout@workspace:packages/layout":
+"@carbon/layout@npm:^11.28.0-rc.0, @carbon/layout@workspace:packages/layout":
version: 0.0.0-use.local
resolution: "@carbon/layout@workspace:packages/layout"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
"@carbon/cli-reporter": "npm:^10.7.0"
"@carbon/scss-generator": "npm:^10.18.0"
"@carbon/test-utils": "npm:^10.33.0"
@@ -1985,11 +1985,11 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/motion@npm:^11.23.0, @carbon/motion@workspace:packages/motion":
+"@carbon/motion@npm:^11.24.0-rc.0, @carbon/motion@workspace:packages/motion":
version: 0.0.0-use.local
resolution: "@carbon/motion@workspace:packages/motion"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
rimraf: "npm:^6.0.0"
languageName: unknown
@@ -1999,9 +1999,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/pictograms-react@workspace:packages/pictograms-react"
dependencies:
- "@carbon/icon-build-helpers": "npm:^1.31.0"
- "@carbon/icon-helpers": "npm:^10.53.0"
- "@carbon/pictograms": "npm:^12.41.0"
+ "@carbon/icon-build-helpers": "npm:^1.32.0-rc.0"
+ "@carbon/icon-helpers": "npm:^10.54.0-rc.0"
+ "@carbon/pictograms": "npm:^12.42.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
prop-types: "npm:^15.7.2"
rimraf: "npm:^6.0.0"
@@ -2010,17 +2010,17 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/pictograms@npm:^12.41.0, @carbon/pictograms@workspace:packages/pictograms":
+"@carbon/pictograms@npm:^12.42.0-rc.0, @carbon/pictograms@workspace:packages/pictograms":
version: 0.0.0-use.local
resolution: "@carbon/pictograms@workspace:packages/pictograms"
dependencies:
- "@carbon/icon-build-helpers": "npm:^1.31.0"
+ "@carbon/icon-build-helpers": "npm:^1.32.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
rimraf: "npm:^6.0.0"
languageName: unknown
linkType: soft
-"@carbon/react@npm:^1.68.0, @carbon/react@workspace:packages/react":
+"@carbon/react@npm:^1.69.0-rc.0, @carbon/react@workspace:packages/react":
version: 0.0.0-use.local
resolution: "@carbon/react@workspace:packages/react"
dependencies:
@@ -2033,12 +2033,12 @@ __metadata:
"@babel/preset-react": "npm:^7.24.7"
"@babel/preset-typescript": "npm:^7.24.7"
"@babel/runtime": "npm:^7.24.7"
- "@carbon/feature-flags": "npm:^0.23.0"
- "@carbon/icons-react": "npm:^11.51.0"
- "@carbon/layout": "npm:^11.27.0"
- "@carbon/styles": "npm:^1.67.0"
+ "@carbon/feature-flags": "npm:^0.24.0-rc.0"
+ "@carbon/icons-react": "npm:^11.52.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
+ "@carbon/styles": "npm:^1.68.0-rc.0"
"@carbon/test-utils": "npm:^10.33.0"
- "@carbon/themes": "npm:^11.42.0"
+ "@carbon/themes": "npm:^11.43.0-rc.0"
"@figma/code-connect": "npm:^1.1.4"
"@floating-ui/react": "npm:^0.26.0"
"@ibm/telemetry-js": "npm:^1.5.0"
@@ -2143,18 +2143,18 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/styles@npm:^1.67.0, @carbon/styles@workspace:packages/styles":
+"@carbon/styles@npm:^1.68.0-rc.0, @carbon/styles@workspace:packages/styles":
version: 0.0.0-use.local
resolution: "@carbon/styles@workspace:packages/styles"
dependencies:
- "@carbon/colors": "npm:^11.27.0"
- "@carbon/feature-flags": "npm:^0.23.0"
- "@carbon/grid": "npm:^11.28.0"
- "@carbon/layout": "npm:^11.27.0"
- "@carbon/motion": "npm:^11.23.0"
+ "@carbon/colors": "npm:^11.28.0-rc.0"
+ "@carbon/feature-flags": "npm:^0.24.0-rc.0"
+ "@carbon/grid": "npm:^11.29.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
+ "@carbon/motion": "npm:^11.24.0-rc.0"
"@carbon/test-utils": "npm:^10.33.0"
- "@carbon/themes": "npm:^11.42.0"
- "@carbon/type": "npm:^11.32.0"
+ "@carbon/themes": "npm:^11.43.0-rc.0"
+ "@carbon/type": "npm:^11.33.0-rc.0"
"@ibm/plex": "npm:6.0.0-next.6"
"@ibm/telemetry-js": "npm:^1.5.0"
autoprefixer: "npm:^10.4.7"
@@ -2200,19 +2200,19 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/themes@npm:^11.42.0, @carbon/themes@workspace:packages/themes":
+"@carbon/themes@npm:^11.43.0-rc.0, @carbon/themes@workspace:packages/themes":
version: 0.0.0-use.local
resolution: "@carbon/themes@workspace:packages/themes"
dependencies:
"@babel/node": "npm:^7.24.7"
"@babel/preset-env": "npm:^7.24.7"
- "@carbon/cli": "npm:^11.22.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
"@carbon/cli-reporter": "npm:^10.7.0"
- "@carbon/colors": "npm:^11.27.0"
- "@carbon/layout": "npm:^11.27.0"
+ "@carbon/colors": "npm:^11.28.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
"@carbon/scss-generator": "npm:^10.18.0"
"@carbon/test-utils": "npm:^10.33.0"
- "@carbon/type": "npm:^11.32.0"
+ "@carbon/type": "npm:^11.33.0-rc.0"
"@ibm/telemetry-js": "npm:^1.5.0"
change-case: "npm:^4.1.1"
color: "npm:^4.0.0"
@@ -2234,13 +2234,13 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/type@npm:^11.32.0, @carbon/type@workspace:packages/type":
+"@carbon/type@npm:^11.33.0-rc.0, @carbon/type@workspace:packages/type":
version: 0.0.0-use.local
resolution: "@carbon/type@workspace:packages/type"
dependencies:
- "@carbon/cli": "npm:^11.22.0"
- "@carbon/grid": "npm:^11.28.0"
- "@carbon/layout": "npm:^11.27.0"
+ "@carbon/cli": "npm:^11.23.0-rc.0"
+ "@carbon/grid": "npm:^11.29.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
"@carbon/test-utils": "npm:^10.33.0"
"@ibm/telemetry-js": "npm:^1.5.0"
change-case: "npm:^4.1.1"
@@ -2281,7 +2281,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/utilities-react@workspace:packages/utilities-react"
dependencies:
- "@carbon/utilities": "npm:^0.1.0"
+ "@carbon/utilities": "npm:^0.2.0-rc.0"
"@ibm/telemetry-js": "npm:^1.6.1"
esbuild: "npm:^0.24.0"
rimraf: "npm:^6.0.0"
@@ -2292,7 +2292,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/utilities@npm:^0.1.0, @carbon/utilities@workspace:packages/utilities":
+"@carbon/utilities@npm:^0.2.0-rc.0, @carbon/utilities@workspace:packages/utilities":
version: 0.0.0-use.local
resolution: "@carbon/utilities@workspace:packages/utilities"
dependencies:
@@ -2309,9 +2309,9 @@ __metadata:
resolution: "@carbon/web-components@workspace:packages/web-components"
dependencies:
"@carbon/icon-helpers": "npm:10.47.0"
- "@carbon/icons": "npm:^11.51.0"
- "@carbon/layout": "npm:^11.27.0"
- "@carbon/motion": "npm:^11.23.0"
+ "@carbon/icons": "npm:^11.52.0-rc.0"
+ "@carbon/layout": "npm:^11.28.0-rc.0"
+ "@carbon/motion": "npm:^11.24.0-rc.0"
"@carbon/styles": "npm:1.63.1"
"@floating-ui/dom": "npm:^1.6.3"
"@ibm/telemetry-js": "npm:^1.5.0"
@@ -9588,8 +9588,8 @@ __metadata:
"@babel/plugin-transform-react-constant-elements": "npm:^7.24.7"
"@babel/preset-env": "npm:^7.24.7"
"@babel/preset-react": "npm:^7.24.7"
- "@carbon/react": "npm:^1.68.0"
- "@carbon/styles": "npm:^1.67.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
+ "@carbon/styles": "npm:^1.68.0-rc.0"
"@carbon/test-utils": "npm:^10.33.0"
"@ibm/telemetry-js": "npm:^1.5.0"
"@rollup/plugin-babel": "npm:^6.0.0"
@@ -9616,7 +9616,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "carbon-components@workspace:packages/carbon-components"
dependencies:
- "@carbon/styles": "npm:^1.67.0"
+ "@carbon/styles": "npm:^1.68.0-rc.0"
"@carbon/test-utils": "npm:^10.33.0"
"@ibm/telemetry-js": "npm:^1.5.0"
chalk: "npm:1.1.3"
@@ -9989,7 +9989,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "class-prefix@workspace:examples/class-prefix"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
"@vitejs/plugin-react": "npm:4.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
@@ -10275,7 +10275,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "codesandbox-styles@workspace:examples/codesandbox-styles"
dependencies:
- "@carbon/styles": "npm:^1.67.0"
+ "@carbon/styles": "npm:^1.68.0-rc.0"
sass: "npm:^1.77.7"
vite: "npm:^4.3.8"
languageName: unknown
@@ -11341,7 +11341,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "custom-theme@workspace:examples/custom-theme"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
"@vitejs/plugin-react": "npm:4.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
@@ -13513,7 +13513,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "examples-light-dark@workspace:examples/light-dark-mode"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
eslint: "npm:8.40.0"
next: "npm:14.1.1"
react: "npm:18.2.0"
@@ -13526,7 +13526,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "examples-nextjs@workspace:examples/nextjs"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
eslint: "npm:8.40.0"
eslint-config-next: "npm:13.4.7"
next: "npm:14.1.1"
@@ -15778,7 +15778,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "id-prefix@workspace:examples/id-prefix"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
"@vitejs/plugin-react": "npm:4.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
@@ -27531,7 +27531,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "v10-token-compat-in-v11@workspace:examples/v10-token-compat-in-v11"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
"@vitejs/plugin-react": "npm:4.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
@@ -27866,7 +27866,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "vite@workspace:examples/vite"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
"@vitejs/plugin-react": "npm:4.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
@@ -28494,7 +28494,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "www@workspace:www"
dependencies:
- "@carbon/react": "npm:^1.68.0"
+ "@carbon/react": "npm:^1.69.0-rc.0"
"@octokit/core": "npm:^4.0.0"
"@octokit/plugin-retry": "npm:^3.0.9"
"@octokit/plugin-throttling": "npm:^4.0.0"
