diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35f8daca..ab310a8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,39 +1,3 @@
-# [1.2.0-next.5](https://github.com/fabric-ds/react/compare/v1.2.0-next.4...v1.2.0-next.5) (2022-06-08)
-
-
-### Bug Fixes
-
-* bump component-classes to get Step fix ([c17ce7e](https://github.com/fabric-ds/react/commit/c17ce7e83e1e78aca28e867dbf29331d69c549fe))
-
-# [1.2.0-next.4](https://github.com/fabric-ds/react/compare/v1.2.0-next.3...v1.2.0-next.4) (2022-06-08)
-
-
-### Bug Fixes
-
-* **animated-expansion:** rename to ExpandTransition and check if element ref exists ([#119](https://github.com/fabric-ds/react/issues/119)) ([b7a8026](https://github.com/fabric-ds/react/commit/b7a8026dd17e6c53c1fe3b1831964b104bfc5087))
-* bump component-classes to get Step fix ([5d99506](https://github.com/fabric-ds/react/commit/5d99506bcf45f531522670e6a910f11e671c1a54))
-
-# [1.2.0-next.3](https://github.com/fabric-ds/react/compare/v1.2.0-next.2...v1.2.0-next.3) (2022-06-07)
-
-
-### Bug Fixes
-
-* **affix:** Add aria-label to Affix icons ([17fab00](https://github.com/fabric-ds/react/commit/17fab00e1f939531a613df6e2ba9e752e5e9d23e))
-
-# [1.2.0-next.2](https://github.com/fabric-ds/react/compare/v1.2.0-next.1...v1.2.0-next.2) (2022-06-02)
-
-
-### Features
-
-* **alert:** add expand and collapse behaviour to inline alert ([#114](https://github.com/fabric-ds/react/issues/114)) ([075f314](https://github.com/fabric-ds/react/commit/075f314adfa468960a42f7c87af855d2f1ddce6d))
-
-# [1.2.0-next.1](https://github.com/fabric-ds/react/compare/v1.1.1...v1.2.0-next.1) (2022-05-31)
-
-
-### Features
-
-* **packages:** add inline Alert component ([#106](https://github.com/fabric-ds/react/issues/106)) ([ddfe084](https://github.com/fabric-ds/react/commit/ddfe0842c2af00e3dc531fbff25d18f395a5dfe7))
-
## [1.1.1](https://github.com/fabric-ds/react/compare/v1.1.0...v1.1.1) (2022-05-23)
diff --git a/docs/src/Main.tsx b/docs/src/Main.tsx
index 1ef91e3d..ae6c49ac 100644
--- a/docs/src/Main.tsx
+++ b/docs/src/Main.tsx
@@ -6,7 +6,6 @@ import {
Route,
Switch as ReactSwitch,
} from 'react-router-dom';
-import Alert from '../../packages/alert/docs/Alert.mdx';
import Box from '../../packages/box/docs/Box.mdx';
import Breadcrumbs from '../../packages/breadcrumbs/docs/Breadcrumbs.mdx';
import Button from '../../packages/button/docs/Button.mdx';
@@ -47,10 +46,6 @@ const App = () => {
<Home />
</Route>
- <Route path="/alert">
- <Alert />
- </Route>
-
<Route path="/modal">
<Modal />
</Route>
diff --git a/index.html b/index.html
index d77c2a4e..da4a1a3b 100644
--- a/index.html
+++ b/index.html
@@ -55,10 +55,7 @@
{
"title": "Feedback indicators",
"open": true,
- "items": [
- { "title": "Alert", "href": "/alert" },
- { "title": "Steps", "href": "/steps" }
- ]
+ "items": [{ "title": "Steps", "href": "/steps" }]
},
{
"title": "Forms",
diff --git a/package.json b/package.json
index 00234fee..19aff0f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@fabric-ds/react",
- "version": "1.2.0-next.5",
+ "version": "1.1.1",
"repository": "git@github.com:fabric-ds/react.git",
"license": "ISC",
"type": "module",
@@ -48,7 +48,9 @@
"@babel/core": "^7.12.10",
"@chbphone55/classnames": "^2.0.0",
"@eik/esbuild-plugin": "^1.1.0",
+ "@fabric-ds/component-classes": "^0.0.38",
"@fabric-ds/icons": "^0.3.12",
+ "@fabric-ds/tailwind-config": "^0.5.20",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "1.6.22",
"@semantic-release/changelog": "^6.0.1",
@@ -103,7 +105,7 @@
"dependencies": {
"@chbphone55/classnames": "^2.0.0",
"@fabric-ds/core": "0.0.13",
- "@fabric-ds/css": "^1.1.4",
+ "@fabric-ds/css": "^1.1.2",
"d3-scale": "^4.0.2",
"react-focus-lock": "^2.5.2",
"react-spring": "^8.0.27",
diff --git a/packages/_helpers/affix.tsx b/packages/_helpers/affix.tsx
index e3f97625..f44bc1e4 100644
--- a/packages/_helpers/affix.tsx
+++ b/packages/_helpers/affix.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { suffix, prefix } from '@fabric-ds/css/component-classes';
+import { suffix, prefix } from '@fabric-ds/component-classes';
import { classNames } from '@chbphone55/classnames';
interface AffixProps {
@@ -43,8 +43,6 @@ export function Affix(props: AffixProps) {
<>
{props.clear && (
<svg
- role="img"
- aria-label="X"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
@@ -62,8 +60,6 @@ export function Affix(props: AffixProps) {
{props.search && (
<svg
- role="img"
- aria-label="Forstørrelsesglass"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
deleted file mode 100644
index c73df5fd..00000000
--- a/packages/_helpers/expand-transition.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { collapse, expand } from 'element-collapse';
-import { classNames } from '@chbphone55/classnames';
-
-export function ExpandTransition({
- show,
- children,
-}: PropsWithChildren<{ show?: Boolean }>) {
- const [isExpanded, setIsExpanded] = useState(show);
- const expandableRef = useRef<HTMLDivElement>(null);
- const isMounted = useRef(false);
-
- async function collapseElement(el: HTMLElement) {
- await new Promise((resolve) => {
- collapse(el, resolve);
- });
- setIsExpanded(false);
- }
-
- function expandElement(el: HTMLElement) {
- expand(el);
- setIsExpanded(true);
- }
-
- useEffect(() => {
- // Don't do anything at first render
- if (!isMounted.current) {
- isMounted.current = true;
- return;
- }
-
- if (!expandableRef.current) return;
-
- if (show) {
- expandElement(expandableRef.current);
- } else {
- collapseElement(expandableRef.current);
- }
- }, [show]);
-
- return (
- <div
- ref={expandableRef}
- className={classNames({
- 'overflow-hidden': true,
- 'h-0 invisible': !isExpanded,
- })}
- aria-hidden={!isExpanded}
- >
- {children}
- </div>
- );
-}
diff --git a/packages/_helpers/index.ts b/packages/_helpers/index.ts
index 189dec17..eeb873a1 100644
--- a/packages/_helpers/index.ts
+++ b/packages/_helpers/index.ts
@@ -1,4 +1,3 @@
export { Clickable } from './clickable';
export { DeadToggle } from './dead-toggle';
export { Affix } from './affix';
-export { ExpandTransition } from './expand-transition';
diff --git a/packages/alert/docs/Alert.mdx b/packages/alert/docs/Alert.mdx
deleted file mode 100644
index 82746838..00000000
--- a/packages/alert/docs/Alert.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Alert } from '../src';
-import { Button } from '../../button/src';
-
-# Alert
-
-Alert is an inline component used for displaying different types of messages.
-
-## Import
-
-```js
-import { Alert } from '@fabric-ds/react';
-```
-
-## Visual Options
-
-### Expandable behaviour
-
-```jsx example
-function ExpandableAlert() {
- const [show, setShow] = React.useState(true);
-
- return (
- <>
- <Alert type="info" show={show}>
- <p className="font-bold">Title Caption-Strong</p>
- <p>This is the message text that can be short or a little bit long</p>
- <a>Link to more information</a>
- <div className="mt-8 space-x-8">
- <Button small>Primary CTA</Button>
- <Button small secondary quiet>
- Secondary
- </Button>
- </div>
- </Alert>
-
- <Button className="mt-16" small primary onClick={() => setShow(!show)}>
- {show ? 'Hide alert' : 'Show alert'}
- </Button>
- </>
- );
-}
-```
-
-### Negative
-
-```jsx example
-<Alert type="negative" show>
- This is the message text that can be short or a little bit long
-</Alert>
-```
-
-### Positive
-
-```jsx example
-<Alert type="positive" show>
- This is the message text that can be short or a little bit long
-</Alert>
-```
-
-### Warning
-
-```jsx example
-<Alert type="warning" show>
- This is the message text that can be short or a little bit long
-</Alert>
-```
-
-### Info
-
-```jsx example
-<Alert type="info" show>
- This is the message text that can be short or a little bit long
-</Alert>
-```
-
-## Props
-
-```props packages/alert/src/component.tsx
-
-```
diff --git a/packages/alert/src/component.tsx b/packages/alert/src/component.tsx
deleted file mode 100644
index 22977c12..00000000
--- a/packages/alert/src/component.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { classNames } from '@chbphone55/classnames';
-import React, { PropsWithChildren, ReactElement } from 'react';
-import { AlertProps } from '.';
-import { ExpandTransition } from '../../_helpers';
-
-export function Alert({
- show,
- type,
- children,
- ...props
-}: PropsWithChildren<AlertProps>) {
- const { color, icon } = styleMap[type];
-
- return (
- <ExpandTransition show={show}>
- <div
- className={classNames(
- props.className,
- `flex p-16 border rounded-4 border-l-4 bg-${color}-50 border-${color}-300`,
- )}
- style={{ borderLeftColor: `var(--f-${color}-600)`, ...props.style }}
- >
- <div className={`mr-8 text-${color}-600`}>{icon}</div>
- <div className="last-child:mb-0 text-14">{children}</div>
- </div>
- </ExpandTransition>
- );
-}
-
-const styleMap: {
- [key in AlertProps['type']]: { color: String; icon: ReactElement };
-} = {
- negative: {
- color: 'red',
- icon: (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- fill="none"
- >
- <path
- d="M4.1.586A2 2 0 0 1 5.516 0h4.97A2 2 0 0 1 11.9.586L15.413 4.1A2 2 0 0 1 16 5.514v4.97a2 2 0 0 1-.586 1.415L11.9 15.413a2 2 0 0 1-1.415.586h-4.97a2 2 0 0 1-1.414-.586L.586 11.9A2 2 0 0 1 0 10.485v-4.97A2 2 0 0 1 .586 4.1L4.1.586Z"
- fill="currentColor"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M8 3.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V4A.75.75 0 0 1 8 3.25Z"
- fill="#fff"
- />
- <path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" />
- </svg>
- ),
- },
- positive: {
- color: 'green',
- icon: (
- <svg
- width="16"
- height="16"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <circle
- cx="8"
- cy="8"
- r="8"
- transform="rotate(180 8 8)"
- fill="currentColor"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M11.5 4.94c.3.27.34.75.06 1.06l-4 4.5a.75.75 0 0 1-1.09.03l-2-2a.75.75 0 0 1 1.06-1.06l1.44 1.44L10.44 5a.75.75 0 0 1 1.06-.07Z"
- fill="#fff"
- />
- </svg>
- ),
- },
- warning: {
- color: 'yellow',
- icon: (
- <svg
- width="16"
- height="16"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M.24 12 6.16 1.09a2.1 2.1 0 0 1 3.68 0l5.92 10.93c.73 1.36-.28 2.99-1.85 2.99H2.1a2.04 2.04 0 0 1-1.85-3Z"
- fill="currentColor"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M8 3.25c.41 0 .75.34.75.75v5a.75.75 0 0 1-1.5 0V4c0-.41.34-.75.75-.75Z"
- fill="#fff"
- />
- <path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" />
- </svg>
- ),
- },
- info: {
- color: 'aqua',
- icon: (
- <svg
- width="16"
- height="16"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <circle cx="8" cy="8" r="8" fill="currentColor" />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M7.25 12a.75.75 0 0 0 1.5 0V8a.75.75 0 0 0-1.5 0v4ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
- fill="#fff"
- />
- </svg>
- ),
- },
-};
diff --git a/packages/alert/src/index.ts b/packages/alert/src/index.ts
deleted file mode 100644
index 8c4450cf..00000000
--- a/packages/alert/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Alert } from './component';
-export type { AlertProps } from './props';
diff --git a/packages/alert/src/props.tsx b/packages/alert/src/props.tsx
deleted file mode 100644
index 12b62dd2..00000000
--- a/packages/alert/src/props.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export type AlertProps = {
- /**
- * Determines whether the alert should be visible
- */
- show?: Boolean;
- /**
- * Type of alert
- */
- type: 'negative' | 'positive' | 'warning' | 'info';
- /**
- * Additional classes to include
- */
- className?: string;
- /** Additional CSS styles for the container. */
- style?: React.CSSProperties;
-};
diff --git a/packages/alert/stories/Alert.stories.tsx b/packages/alert/stories/Alert.stories.tsx
deleted file mode 100644
index 9dbf0bb3..00000000
--- a/packages/alert/stories/Alert.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { Button } from '../../button/src';
-import { Alert } from '../src';
-
-const metadata = { title: 'FeedbackIndicators/Alert' };
-export default metadata;
-
-export const Default = () => {
- const [show, setShow] = React.useState(true);
-
- return (
- <div className="flex flex-col gap-y-16">
- <div>
- <h3>Negative</h3>
- <Alert type="negative" show={show}>
- This is a message that you've done something really wrong.
- </Alert>
- <Button className="mt-16" small primary onClick={() => setShow(!show)}>
- {show ? 'Hide negative alert' : 'Show negative alert'}
- </Button>
- </div>
- <div>
- <h3>Positive</h3>
- <Alert type="positive" show>
- This is a message that gives you positive feedback.
- </Alert>
- </div>
- <div>
- <h3>Warning</h3>
- <Alert type="warning" show>
- This is a message that shows a warning, might be nothing serious.
- </Alert>
- </div>
- <div>
- <h3>Info</h3>
- <Alert type="info" show>
- This is a message that enlightens you with some new cool information.
- </Alert>
- </div>
- </div>
- );
-};
-
-const InteractiveContent = () => (
- <>
- <p className="font-bold">This text attracts your attention right away</p>
- <p>This is the message text that can be short or a little bit long</p>
- <a>Link to more information</a>
- <div className="mt-8 space-x-8">
- <Button small>Primary CTA</Button>
- <Button small secondary quiet>
- Secondary
- </Button>
- </div>
- </>
-);
-
-export const WithInteractiveContent = () => {
- const [show, setShow] = React.useState(true);
-
- return (
- <div className="flex flex-col gap-y-16">
- <div>
- <h3>Negative</h3>
- <Alert type="negative" show={show}>
- <InteractiveContent />
- </Alert>
- <Button className="mt-16" small primary onClick={() => setShow(!show)}>
- {show ? 'Hide negative alert' : 'Show negative alert'}
- </Button>
- </div>
- <div>
- <h3>Positive</h3>
- <Alert type="positive" show>
- <InteractiveContent />
- </Alert>
- </div>
- <div>
- <h3>Warning</h3>
- <Alert type="warning" show>
- <InteractiveContent />
- </Alert>
- </div>
- <div>
- <h3>Info</h3>
- <Alert type="info" show>
- <InteractiveContent />
- </Alert>
- </div>
- </div>
- );
-};
diff --git a/packages/box/src/component.tsx b/packages/box/src/component.tsx
index fd20457b..bdacee7f 100644
--- a/packages/box/src/component.tsx
+++ b/packages/box/src/component.tsx
@@ -1,5 +1,5 @@
import { classNames } from '@chbphone55/classnames';
-import { box } from '@fabric-ds/css/component-classes';
+import { box } from '@fabric-ds/component-classes';
import React from 'react';
import { BoxProps } from './props';
diff --git a/packages/card/src/component.tsx b/packages/card/src/component.tsx
index 50aa532a..42feb834 100644
--- a/packages/card/src/component.tsx
+++ b/packages/card/src/component.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { card as c } from '@fabric-ds/css/component-classes';
+import { card as c } from '@fabric-ds/component-classes';
import { classNames } from '@chbphone55/classnames';
import { CardProps } from './props';
diff --git a/packages/expandable/src/component.tsx b/packages/expandable/src/component.tsx
index 9280cdc0..566c6018 100644
--- a/packages/expandable/src/component.tsx
+++ b/packages/expandable/src/component.tsx
@@ -1,10 +1,7 @@
import { classNames } from '@chbphone55/classnames';
-import {
- box as boxClasses,
- buttonReset,
-} from '@fabric-ds/css/component-classes';
-import React from 'react';
-import { ExpandTransition } from '../../_helpers';
+import { box as boxClasses, buttonReset } from '@fabric-ds/component-classes';
+import { collapse, expand } from 'element-collapse';
+import React, { useRef } from 'react';
import type { ExpandableProps } from './props';
export function Expandable(props: ExpandableProps) {
@@ -24,11 +21,19 @@ export function Expandable(props: ExpandableProps) {
...rest
} = props;
+ const boxRef = useRef(null);
const [stateExpanded, setStateExpanded] = React.useState(expanded);
const toggleExpandable = (state) => {
setStateExpanded(!state);
if (onChange) onChange(!state);
+
+ if (!boxRef.current || !props.animated) return;
+ if (!state) {
+ expand(boxRef.current);
+ } else {
+ collapse(boxRef.current);
+ }
};
return (
@@ -78,8 +83,14 @@ export function Expandable(props: ExpandableProps) {
</div>
)}
</button>
-
- <ExpansionBehaviour animated={animated} stateExpanded={stateExpanded}>
+ <div
+ ref={boxRef}
+ className={classNames({
+ 'overflow-hidden': true,
+ 'h-0 invisible': !stateExpanded,
+ })}
+ aria-hidden={!stateExpanded}
+ >
<div
className={classNames({
[contentClass || '']: true,
@@ -88,23 +99,7 @@ export function Expandable(props: ExpandableProps) {
>
{children}
</div>
- </ExpansionBehaviour>
- </div>
- );
-}
-
-function ExpansionBehaviour({ animated, stateExpanded, children }) {
- return animated ? (
- <ExpandTransition show={stateExpanded}>{children}</ExpandTransition>
- ) : (
- <div
- className={classNames({
- 'overflow-hidden': true,
- 'h-0 invisible': !stateExpanded,
- })}
- aria-hidden={!stateExpanded}
- >
- {children}
+ </div>
</div>
);
}
diff --git a/packages/index.ts b/packages/index.ts
index 8216fbda..492f3f6d 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -1,5 +1,4 @@
export * from './_helpers';
-export * from './alert/src';
export * from './box/src';
export * from './breadcrumbs/src';
export * from './attention/src';
diff --git a/packages/modal/docs/Modal.mdx b/packages/modal/docs/Modal.mdx
index 5e843a4a..cb32adde 100644
--- a/packages/modal/docs/Modal.mdx
+++ b/packages/modal/docs/Modal.mdx
@@ -110,17 +110,9 @@ respond to `esc` keypresses and/or clicking outside the modal.
```jsx example
function Example() {
const [open, setOpen] = React.useState(false);
- const [mustAgree, setMustAgree] = React.useState(false);
const [hasAgreed, setHasAgreed] = React.useState(false);
- const toggleModal = () => {
- if (open && !hasAgreed) {
- setMustAgree(true);
- return;
- }
- setMustAgree(false);
- setOpen(!open);
- }
+ const toggleModal = () => setOpen(!open);
return (
<>
@@ -133,12 +125,9 @@ function Example() {
onDismiss={hasAgreed ? toggleModal : undefined}
title="Non dismissable"
footer={
- <>
- {mustAgree && <p className="m-10">You must agree first!</p>}
- <Button primary onClick={toggleModal}>
- Save
- </Button>
- </>
+ <Button primary disabled={!hasAgreed} onClick={toggleModal}>
+ Save
+ </Button>
}
>
<p>To go further, you need to agree to these bogus terms</p>
diff --git a/packages/modal/src/component.tsx b/packages/modal/src/component.tsx
index 18fc46ea..616737ae 100644
--- a/packages/modal/src/component.tsx
+++ b/packages/modal/src/component.tsx
@@ -1,5 +1,5 @@
import { classNames } from '@chbphone55/classnames';
-import { modal as c } from '@fabric-ds/css/component-classes';
+import { modal as c } from '@fabric-ds/component-classes';
import React, { useEffect, useRef } from 'react';
import { useId } from '../../utils/src';
import FocusLock from 'react-focus-lock';
diff --git a/packages/steps/src/step.tsx b/packages/steps/src/step.tsx
index ab7140e6..6169a9eb 100644
--- a/packages/steps/src/step.tsx
+++ b/packages/steps/src/step.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { classNames } from '@chbphone55/classnames';
-import { step as c } from '@fabric-ds/css/component-classes';
+import { step as c } from '@fabric-ds/component-classes';
import { useContext } from 'react';
import { StepsContext } from './component';
diff --git a/packages/switch/src/component.tsx b/packages/switch/src/component.tsx
index b893994d..b17f07a8 100644
--- a/packages/switch/src/component.tsx
+++ b/packages/switch/src/component.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { SwitchProps } from './props';
import { classNames } from '@chbphone55/classnames';
-import { switchToggle as c } from '@fabric-ds/css/component-classes';
+import { switchToggle as c } from '@fabric-ds/component-classes';
export function Switch({
id,
diff --git a/packages/tabs/src/component-tab-panel.tsx b/packages/tabs/src/component-tab-panel.tsx
index 33706071..8a0561e0 100644
--- a/packages/tabs/src/component-tab-panel.tsx
+++ b/packages/tabs/src/component-tab-panel.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { tab as c } from '@fabric-ds/css/component-classes';
+import { tab as c } from '@fabric-ds/component-classes';
import type { TabPanelProps } from './props';
export function TabPanel(props: TabPanelProps) {
diff --git a/packages/tabs/src/component-tab.tsx b/packages/tabs/src/component-tab.tsx
index 3343a492..b5273f91 100644
--- a/packages/tabs/src/component-tab.tsx
+++ b/packages/tabs/src/component-tab.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { classNames as cn } from '@chbphone55/classnames';
-import { tab as c } from '@fabric-ds/css/component-classes';
+import { tab as c } from '@fabric-ds/component-classes';
import type { TabProps } from './props';
const setup = ({
diff --git a/packages/tabs/src/component-tabs.tsx b/packages/tabs/src/component-tabs.tsx
index 0920881e..b9d86d58 100644
--- a/packages/tabs/src/component-tabs.tsx
+++ b/packages/tabs/src/component-tabs.tsx
@@ -6,7 +6,7 @@ import React, {
Children,
} from 'react';
import { classNames as cn } from '@chbphone55/classnames';
-import { tabs as c } from '@fabric-ds/css/component-classes';
+import { tabs as c } from '@fabric-ds/component-classes';
import { debounce } from './utils';
import type { TabsProps } from './props';