@dnanpm/ui-components 0.1.0 → 0.2.0

package/dist/components/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ChevronRight } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport styles from './Breadcrumb.module.css';\nimport type { BreadcrumbLinkProps, BreadcrumbProps } from './Breadcrumb.types';\n\nconst defaultRenderLink = (props: BreadcrumbLinkProps) => <a {...props} />;\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n    {\n        items,\n        lastItemAsLink = false,\n        renderLink = defaultRenderLink,\n        className,\n        'aria-label': ariaLabel = 'Murupolku',\n        ...props\n    },\n    ref,\n) {\n    if (items.length === 0) {\n        return null;\n    }\n\n    const lastIndex = items.length - 1;\n\n    return (\n        <nav\n            ref={ref}\n            aria-label={ariaLabel}\n            className={cn(styles.breadcrumb, focusStyles.focusClipGuard, className)}\n            {...props}\n        >\n            <ol className={styles.breadcrumb__list}>\n                {items.map((item, index) => {\n                    const isLast = index === lastIndex;\n\n                    return (\n                        <li key={index} className={styles.breadcrumb__item}>\n                            {isLast ? (\n                                lastItemAsLink ? (\n                                    renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                            styles.breadcrumb__current,\n                                        ),\n                                        'aria-current': 'page',\n                                        children: item.label,\n                                    })\n                                ) : (\n                                    <span\n                                        className={styles.breadcrumb__current}\n                                        aria-current=\"page\"\n                                    >\n                                        {item.label}\n                                    </span>\n                                )\n                            ) : (\n                                <>\n                                    {renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                        ),\n                                        children: item.label,\n                                    })}\n                                    <ChevronRight\n                                        className={styles.breadcrumb__separator}\n                                        aria-hidden=\"true\"\n                                    />\n                                </>\n                            )}\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n});\n\nBreadcrumb.displayName = 'Breadcrumb';\n"],"names":["jsx","forwardRef","Breadcrumb","cn","styles","focusStyles","textDecorationStyles","jsxs","Fragment","ChevronRight"],"mappings":";;;;;;;;;AAQA,MAAM,oBAAoB,CAAC,UAA+BA,2BAAAA,IAAC,KAAA,EAAG,GAAG,OAAO;AAEjE,MAAM,aAAaC,MAAAA,WAAyC,SAASC,YACxE;AAAA,EACI;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,GAAG;AACP,GACA,KACF;AACE,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,YAAY,MAAM,SAAS;AAEjC,SACIF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,cAAY;AAAA,MACZ,WAAWG,GAAAA,GAAGC,kBAAAA,QAAO,YAAYC,aAAAA,QAAY,gBAAgB,SAAS;AAAA,MACrE,GAAG;AAAA,MAEJ,UAAAL,2BAAAA,IAAC,QAAG,WAAWI,kBAAAA,QAAO,kBACjB,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU;AAEzB,8CACK,MAAA,EAAe,WAAWA,kBAAAA,QAAO,kBAC7B,UAAA,SACG,iBACI,WAAW;AAAA,UACP,MAAM,KAAK;AAAA,UACX,WAAWD,GAAAA;AAAAA,YACPE,aAAAA,QAAY;AAAA,YACZC,sBAAAA,QAAqB;AAAA,YACrBF,kBAAAA,QAAO;AAAA,YACPA,0BAAO;AAAA,UAAA;AAAA,UAEX,gBAAgB;AAAA,UAChB,UAAU,KAAK;AAAA,QAAA,CAClB,IAEDJ,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWI,kBAAAA,QAAO;AAAA,YAClB,gBAAa;AAAA,YAEZ,UAAA,KAAK;AAAA,UAAA;AAAA,QAAA,IAIdG,2BAAAA,KAAAC,qBAAA,EACK,UAAA;AAAA,UAAA,WAAW;AAAA,YACR,MAAM,KAAK;AAAA,YACX,WAAWL,GAAAA;AAAAA,cACPE,aAAAA,QAAY;AAAA,cACZC,sBAAAA,QAAqB;AAAA,cACrBF,0BAAO;AAAA,YAAA;AAAA,YAEX,UAAU,KAAK;AAAA,UAAA,CAClB;AAAA,UACDJ,2BAAAA;AAAAA,YAACS,MAAAA;AAAAA,YAAA;AAAA,cACG,WAAWL,kBAAAA,QAAO;AAAA,cAClB,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB,EAAA,CACJ,KArCC,KAuCT;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAED,WAAW,cAAc;;"}
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRight } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport styles from './Breadcrumb.module.css';\nimport type { BreadcrumbLinkProps, BreadcrumbProps } from './Breadcrumb.types';\n\nconst defaultRenderLink = (props: BreadcrumbLinkProps) => <a {...props} />;\n\nexport const Breadcrumb = ({\n    items,\n    lastItemAsLink = false,\n    renderLink = defaultRenderLink,\n    className,\n    'aria-label': ariaLabel = 'Murupolku',\n    ref,\n    ...props\n}: BreadcrumbProps) => {\n    if (items.length === 0) {\n        return null;\n    }\n\n    const lastIndex = items.length - 1;\n\n    return (\n        <nav\n            ref={ref}\n            aria-label={ariaLabel}\n            className={cn(styles.breadcrumb, focusStyles.focusClipGuard, className)}\n            {...props}\n        >\n            <ol className={styles.breadcrumb__list}>\n                {items.map((item, index) => {\n                    const isLast = index === lastIndex;\n\n                    return (\n                        <li key={index} className={styles.breadcrumb__item}>\n                            {isLast ? (\n                                lastItemAsLink ? (\n                                    renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                            styles.breadcrumb__current,\n                                        ),\n                                        'aria-current': 'page',\n                                        children: item.label,\n                                    })\n                                ) : (\n                                    <span\n                                        className={styles.breadcrumb__current}\n                                        aria-current=\"page\"\n                                    >\n                                        {item.label}\n                                    </span>\n                                )\n                            ) : (\n                                <>\n                                    {renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                        ),\n                                        children: item.label,\n                                    })}\n                                    <ChevronRight\n                                        className={styles.breadcrumb__separator}\n                                        aria-hidden=\"true\"\n                                    />\n                                </>\n                            )}\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n};\n"],"names":["jsx","cn","styles","focusStyles","textDecorationStyles","jsxs","Fragment","ChevronRight"],"mappings":";;;;;;;;AAOA,MAAM,oBAAoB,CAAC,UAA+BA,2BAAAA,IAAC,KAAA,EAAG,GAAG,OAAO;AAEjE,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,YAAY,MAAM,SAAS;AAEjC,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,cAAY;AAAA,MACZ,WAAWC,GAAAA,GAAGC,kBAAAA,QAAO,YAAYC,aAAAA,QAAY,gBAAgB,SAAS;AAAA,MACrE,GAAG;AAAA,MAEJ,UAAAH,2BAAAA,IAAC,QAAG,WAAWE,kBAAAA,QAAO,kBACjB,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU;AAEzB,8CACK,MAAA,EAAe,WAAWA,kBAAAA,QAAO,kBAC7B,UAAA,SACG,iBACI,WAAW;AAAA,UACP,MAAM,KAAK;AAAA,UACX,WAAWD,GAAAA;AAAAA,YACPE,aAAAA,QAAY;AAAA,YACZC,sBAAAA,QAAqB;AAAA,YACrBF,kBAAAA,QAAO;AAAA,YACPA,0BAAO;AAAA,UAAA;AAAA,UAEX,gBAAgB;AAAA,UAChB,UAAU,KAAK;AAAA,QAAA,CAClB,IAEDF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWE,kBAAAA,QAAO;AAAA,YAClB,gBAAa;AAAA,YAEZ,UAAA,KAAK;AAAA,UAAA;AAAA,QAAA,IAIdG,2BAAAA,KAAAC,qBAAA,EACK,UAAA;AAAA,UAAA,WAAW;AAAA,YACR,MAAM,KAAK;AAAA,YACX,WAAWL,GAAAA;AAAAA,cACPE,aAAAA,QAAY;AAAA,cACZC,sBAAAA,QAAqB;AAAA,cACrBF,0BAAO;AAAA,YAAA;AAAA,YAEX,UAAU,KAAK;AAAA,UAAA,CAClB;AAAA,UACDF,2BAAAA;AAAAA,YAACO,MAAAA;AAAAA,YAAA;AAAA,cACG,WAAWL,kBAAAA,QAAO;AAAA,cAClB,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB,EAAA,CACJ,KArCC,KAuCT;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -7,14 +7,14 @@
  * Uses a container query (ch units) to switch between default and collapsed mode.
  */
 
-._breadcrumb_iubo4_10 {
+._breadcrumb_b37v8_10 {
     container-name: breadcrumb;
     container-type: inline-size;
     width: 100%;
     overflow: hidden;
 }
 
-._breadcrumb__list_iubo4_17 {
+._breadcrumb__list_b37v8_17 {
     display: flex;
     align-items: center;
     gap: var(--spacing-ui-xxs);
@@ -23,14 +23,15 @@
     list-style: none;
 }
 
-._breadcrumb__item_iubo4_26 {
+._breadcrumb__item_b37v8_26 {
     flex: 0 0 auto;
+    margin: 0;
+    padding: 0;
     display: flex;
     align-items: center;
     gap: var(--spacing-ui-xxs);
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.125rem;
+    font: var(--typography-label-md);
+    line-height: 1.125rem; /* intentional: absolute line-height for visual alignment */
 
     &:last-child {
         min-width: 0;
@@ -42,30 +43,30 @@
     }
 }
 
-._breadcrumb__link_iubo4_45 {
-    color: var(--colors-semantic-interactive-primary-default);
+._breadcrumb__link_b37v8_46 {
+    color: var(--color-semantic-interactive-primary-default);
     border-radius: var(--radius-semantic-sm);
 }
 
-._breadcrumb__link_iubo4_45:hover {
-    color: var(--colors-semantic-interactive-primary-hover);
+._breadcrumb__link_b37v8_46:hover {
+    color: var(--color-semantic-interactive-primary-hover);
 }
 
-._breadcrumb__current_iubo4_54 {
+._breadcrumb__current_b37v8_55 {
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-._breadcrumb__separator_iubo4_59 {
+._breadcrumb__separator_b37v8_60 {
     flex: 0 0 auto;
     width: 0.875rem;
     height: 0.875rem;
-    color: var(--colors-semantic-interactive-primary-default);
+    color: var(--color-semantic-interactive-primary-default);
 }
 
 /* Collapsed mode: hide all items except the last two */
 @container breadcrumb (max-width: 75ch) {
-    ._breadcrumb__item_iubo4_26:not(:nth-last-child(-n + 2)) {
+    ._breadcrumb__item_b37v8_26:not(:nth-last-child(-n + 2)) {
         display: none;
     }
 }

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,3 +1,3 @@
 import { BreadcrumbProps } from './Breadcrumb.types';
-export declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
+export declare const Breadcrumb: ({ items, lastItemAsLink, renderLink, className, "aria-label": ariaLabel, ref, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI/E,eAAO,MAAM,UAAU,yGA0ErB,CAAC"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI/E,eAAO,MAAM,UAAU,GAAI,0FAQxB,eAAe,mDAgEjB,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,19 +1,19 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ChevronRight } from "@dnanpm/icons";
 import focusStyles from "../../styles/utils/focus.module.css.js";
 import textDecorationStyles from "../../styles/utils/text-decoration.module.css.js";
 import styles from "./Breadcrumb.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const defaultRenderLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
-const Breadcrumb = forwardRef(function Breadcrumb2({
+const Breadcrumb = ({
   items,
   lastItemAsLink = false,
   renderLink = defaultRenderLink,
   className,
   "aria-label": ariaLabel = "Murupolku",
+  ref,
   ...props
-}, ref) {
+}) => {
   if (items.length === 0) {
     return null;
   }
@@ -65,8 +65,7 @@ const Breadcrumb = forwardRef(function Breadcrumb2({
       }) })
     }
   );
-});
-Breadcrumb.displayName = "Breadcrumb";
+};
 export {
   Breadcrumb
 };

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ChevronRight } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport styles from './Breadcrumb.module.css';\nimport type { BreadcrumbLinkProps, BreadcrumbProps } from './Breadcrumb.types';\n\nconst defaultRenderLink = (props: BreadcrumbLinkProps) => <a {...props} />;\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n    {\n        items,\n        lastItemAsLink = false,\n        renderLink = defaultRenderLink,\n        className,\n        'aria-label': ariaLabel = 'Murupolku',\n        ...props\n    },\n    ref,\n) {\n    if (items.length === 0) {\n        return null;\n    }\n\n    const lastIndex = items.length - 1;\n\n    return (\n        <nav\n            ref={ref}\n            aria-label={ariaLabel}\n            className={cn(styles.breadcrumb, focusStyles.focusClipGuard, className)}\n            {...props}\n        >\n            <ol className={styles.breadcrumb__list}>\n                {items.map((item, index) => {\n                    const isLast = index === lastIndex;\n\n                    return (\n                        <li key={index} className={styles.breadcrumb__item}>\n                            {isLast ? (\n                                lastItemAsLink ? (\n                                    renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                            styles.breadcrumb__current,\n                                        ),\n                                        'aria-current': 'page',\n                                        children: item.label,\n                                    })\n                                ) : (\n                                    <span\n                                        className={styles.breadcrumb__current}\n                                        aria-current=\"page\"\n                                    >\n                                        {item.label}\n                                    </span>\n                                )\n                            ) : (\n                                <>\n                                    {renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                        ),\n                                        children: item.label,\n                                    })}\n                                    <ChevronRight\n                                        className={styles.breadcrumb__separator}\n                                        aria-hidden=\"true\"\n                                    />\n                                </>\n                            )}\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n});\n\nBreadcrumb.displayName = 'Breadcrumb';\n"],"names":["Breadcrumb"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB,CAAC,UAA+B,oBAAC,KAAA,EAAG,GAAG,OAAO;AAEjE,MAAM,aAAa,WAAyC,SAASA,YACxE;AAAA,EACI;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,GAAG;AACP,GACA,KACF;AACE,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,YAAY,MAAM,SAAS;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,GAAG,OAAO,YAAY,YAAY,gBAAgB,SAAS;AAAA,MACrE,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAG,WAAW,OAAO,kBACjB,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU;AAEzB,mCACK,MAAA,EAAe,WAAW,OAAO,kBAC7B,UAAA,SACG,iBACI,WAAW;AAAA,UACP,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACP,YAAY;AAAA,YACZ,qBAAqB;AAAA,YACrB,OAAO;AAAA,YACP,OAAO;AAAA,UAAA;AAAA,UAEX,gBAAgB;AAAA,UAChB,UAAU,KAAK;AAAA,QAAA,CAClB,IAED;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,OAAO;AAAA,YAClB,gBAAa;AAAA,YAEZ,UAAA,KAAK;AAAA,UAAA;AAAA,QAAA,IAId,qBAAA,UAAA,EACK,UAAA;AAAA,UAAA,WAAW;AAAA,YACR,MAAM,KAAK;AAAA,YACX,WAAW;AAAA,cACP,YAAY;AAAA,cACZ,qBAAqB;AAAA,cACrB,OAAO;AAAA,YAAA;AAAA,YAEX,UAAU,KAAK;AAAA,UAAA,CAClB;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,OAAO;AAAA,cAClB,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB,EAAA,CACJ,KArCC,KAuCT;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAED,WAAW,cAAc;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRight } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport textDecorationStyles from '../../styles/utils/text-decoration.module.css';\nimport styles from './Breadcrumb.module.css';\nimport type { BreadcrumbLinkProps, BreadcrumbProps } from './Breadcrumb.types';\n\nconst defaultRenderLink = (props: BreadcrumbLinkProps) => <a {...props} />;\n\nexport const Breadcrumb = ({\n    items,\n    lastItemAsLink = false,\n    renderLink = defaultRenderLink,\n    className,\n    'aria-label': ariaLabel = 'Murupolku',\n    ref,\n    ...props\n}: BreadcrumbProps) => {\n    if (items.length === 0) {\n        return null;\n    }\n\n    const lastIndex = items.length - 1;\n\n    return (\n        <nav\n            ref={ref}\n            aria-label={ariaLabel}\n            className={cn(styles.breadcrumb, focusStyles.focusClipGuard, className)}\n            {...props}\n        >\n            <ol className={styles.breadcrumb__list}>\n                {items.map((item, index) => {\n                    const isLast = index === lastIndex;\n\n                    return (\n                        <li key={index} className={styles.breadcrumb__item}>\n                            {isLast ? (\n                                lastItemAsLink ? (\n                                    renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                            styles.breadcrumb__current,\n                                        ),\n                                        'aria-current': 'page',\n                                        children: item.label,\n                                    })\n                                ) : (\n                                    <span\n                                        className={styles.breadcrumb__current}\n                                        aria-current=\"page\"\n                                    >\n                                        {item.label}\n                                    </span>\n                                )\n                            ) : (\n                                <>\n                                    {renderLink({\n                                        href: item.href,\n                                        className: cn(\n                                            focusStyles.focusable,\n                                            textDecorationStyles.underlineLink,\n                                            styles.breadcrumb__link,\n                                        ),\n                                        children: item.label,\n                                    })}\n                                    <ChevronRight\n                                        className={styles.breadcrumb__separator}\n                                        aria-hidden=\"true\"\n                                    />\n                                </>\n                            )}\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,oBAAoB,CAAC,UAA+B,oBAAC,KAAA,EAAG,GAAG,OAAO;AAEjE,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,YAAY,MAAM,SAAS;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,GAAG,OAAO,YAAY,YAAY,gBAAgB,SAAS;AAAA,MACrE,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAG,WAAW,OAAO,kBACjB,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU;AAEzB,mCACK,MAAA,EAAe,WAAW,OAAO,kBAC7B,UAAA,SACG,iBACI,WAAW;AAAA,UACP,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACP,YAAY;AAAA,YACZ,qBAAqB;AAAA,YACrB,OAAO;AAAA,YACP,OAAO;AAAA,UAAA;AAAA,UAEX,gBAAgB;AAAA,UAChB,UAAU,KAAK;AAAA,QAAA,CAClB,IAED;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,OAAO;AAAA,YAClB,gBAAa;AAAA,YAEZ,UAAA,KAAK;AAAA,UAAA;AAAA,QAAA,IAId,qBAAA,UAAA,EACK,UAAA;AAAA,UAAA,WAAW;AAAA,YACR,MAAM,KAAK;AAAA,YACX,WAAW;AAAA,cACP,YAAY;AAAA,cACZ,qBAAqB;AAAA,cACrB,OAAO;AAAA,YAAA;AAAA,YAEX,UAAU,KAAK;AAAA,UAAA,CAClB;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,OAAO;AAAA,cAClB,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB,EAAA,CACJ,KArCC,KAuCT;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs

@@ -1,12 +1,12 @@
 require('./Breadcrumb.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const breadcrumb = "_breadcrumb_iubo4_10";
-const breadcrumb__list = "_breadcrumb__list_iubo4_17";
-const breadcrumb__item = "_breadcrumb__item_iubo4_26";
-const breadcrumb__link = "_breadcrumb__link_iubo4_45";
-const breadcrumb__current = "_breadcrumb__current_iubo4_54";
-const breadcrumb__separator = "_breadcrumb__separator_iubo4_59";
+const breadcrumb = "_breadcrumb_b37v8_10";
+const breadcrumb__list = "_breadcrumb__list_b37v8_17";
+const breadcrumb__item = "_breadcrumb__item_b37v8_26";
+const breadcrumb__link = "_breadcrumb__link_b37v8_46";
+const breadcrumb__current = "_breadcrumb__current_b37v8_55";
+const breadcrumb__separator = "_breadcrumb__separator_b37v8_60";
 const styles = {
   breadcrumb,
   breadcrumb__list,

package/dist/components/Breadcrumb/Breadcrumb.module.css.js

@@ -1,10 +1,10 @@
 import './Breadcrumb.css';
-const breadcrumb = "_breadcrumb_iubo4_10";
-const breadcrumb__list = "_breadcrumb__list_iubo4_17";
-const breadcrumb__item = "_breadcrumb__item_iubo4_26";
-const breadcrumb__link = "_breadcrumb__link_iubo4_45";
-const breadcrumb__current = "_breadcrumb__current_iubo4_54";
-const breadcrumb__separator = "_breadcrumb__separator_iubo4_59";
+const breadcrumb = "_breadcrumb_b37v8_10";
+const breadcrumb__list = "_breadcrumb__list_b37v8_17";
+const breadcrumb__item = "_breadcrumb__item_b37v8_26";
+const breadcrumb__link = "_breadcrumb__link_b37v8_46";
+const breadcrumb__current = "_breadcrumb__current_b37v8_55";
+const breadcrumb__separator = "_breadcrumb__separator_b37v8_60";
 const styles = {
   breadcrumb,
   breadcrumb__list,

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -13,7 +13,7 @@ export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnch
     readonly href: string;
     readonly children: React.ReactNode;
 }
-export interface BreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
+export interface BreadcrumbProps extends Omit<React.ComponentPropsWithRef<'nav'>, 'children'> {
     /**
      * Ordered list of breadcrumb items. The last item represents the current page.
      */
@@ -38,9 +38,5 @@ export interface BreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'na
      * <Breadcrumb items={items} renderLink={({ href, ...props }) => <Link to={href} {...props} />} />
      */
     readonly renderLink?: (props: BreadcrumbLinkProps) => React.ReactNode;
-    /**
-     * Custom className to apply to the nav element
-     */
-    readonly className?: string;
 }
 //# sourceMappingURL=Breadcrumb.types.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5F;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtE;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B"}
+{"version":3,"file":"Breadcrumb.types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC3B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzF;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;CACzE"}

package/dist/components/Button/Button.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const Button_module = require("./Button.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Spinner = require("../Spinner/Spinner.cjs");
+const Button = ({
+  variant = "primary",
+  fullWidth = false,
+  size = "normal",
+  loading = false,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isDisabled = "disabled" in props && props.disabled;
+  const isAnchor = "href" in props && props.href != null;
+  const classes = cn.cn(
+    Button_module.default.button,
+    Button_module.default[`button--${variant}`],
+    { [Button_module.default["button--full-width"]]: fullWidth },
+    Button_module.default[`button--${size}`],
+    focus_module.default.focusable,
+    { [Button_module.default["button--disabled"]]: isDisabled },
+    { [Button_module.default["button--loading"]]: loading },
+    className
+  );
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__content, children }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx(
+      Spinner.Spinner,
+      {
+        size: size === "small" ? "xs" : "s",
+        color: "inherit",
+        "aria-hidden": "true",
+        "aria-label": void 0,
+        role: "presentation",
+        className: Button_module.default.button__spinner
+      }
+    )
+  ] });
+  if (isAnchor) {
+    const { href, renderLink, ...anchorProps } = props;
+    const {
+      disabled: _disabled,
+      type: _type,
+      name: _name,
+      ...safeAnchorProps
+    } = anchorProps;
+    const target = safeAnchorProps.target;
+    const rel = safeAnchorProps.rel;
+    const shouldHardenRel = target === "_blank";
+    const relTokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+    if (shouldHardenRel) {
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+    }
+    const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
+    const linkProps = {
+      ...safeAnchorProps,
+      ref,
+      href,
+      rel: hardenedRel,
+      className: classes,
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      tabIndex: loading ? -1 : void 0,
+      onClick: loading ? (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } : safeAnchorProps.onClick,
+      children: content
+    };
+    if (renderLink) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink(linkProps) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
+  }
+  const {
+    type = "button",
+    disabled,
+    href: _href,
+    target: _target,
+    rel: _rel,
+    renderLink: _renderLink,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      className: classes,
+      "aria-busy": loading || void 0,
+      ...buttonProps,
+      children: content
+    }
+  );
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.cjs.map

package/dist/components/Button/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target === '_blank';\n        const relTokens = new Set((rel ?? '').split(/\\s+/).filter(Boolean));\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":["cn","styles","focusStyles","jsxs","Fragment","jsx","Spinner"],"mappings":";;;;;;;AAOO,MAAM,SAAS,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAmB;AACf,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAUA,GAAAA;AAAAA,IACZC,cAAAA,QAAO;AAAA,IACPA,cAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAACA,cAAAA,QAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClCA,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,IACxBC,aAAAA,QAAY;AAAA,IACZ,EAAE,CAACD,cAAAA,QAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAACA,cAAAA,QAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACFE,2BAAAA,KAAAC,WAAAA,UAAA,EACI,UAAA;AAAA,IAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWJ,cAAAA,QAAO,iBAAkB,UAAS;AAAA,IAClD,WACGI,2BAAAA;AAAAA,MAACC,QAAAA;AAAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAWL,cAAAA,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GAER;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI,KAAK,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC;AAElE,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAOI,2BAAAA,IAAAD,WAAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAOC,+BAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AASJ,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;;"}

package/dist/components/Button/Button.css

@@ -0,0 +1,182 @@
+@layer dna-design-system {._button_188fd_1 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-ui-xxs);
+    max-width: 100%;
+    border: none;
+    border-radius: var(--radius-semantic-full);
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    transition:
+        color 0.2s ease-in-out,
+        background-color 0.2s ease-in-out,
+        border-color 0.2s ease-in-out;
+}
+
+._button--full-width_188fd_18 {
+    width: 100%;
+    min-width: 0;
+}
+
+/* ─── Sizes ─── */
+
+._button--normal_188fd_25 {
+    font: var(--typography-label-lg-bold);
+    height: 40px;
+    min-width: 128px;
+    padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
+}
+
+._button--small_188fd_32 {
+    font: var(--typography-label-md-bold);
+    height: 32px;
+    min-width: 100px;
+    padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
+}
+
+/* ─── Primary variant ─── */
+
+._button--primary_188fd_41 {
+    background-color: var(--color-semantic-interactive-primary-default);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._button--primary_188fd_41:hover {
+    background-color: var(--color-semantic-interactive-primary-hover);
+}
+
+._button--primary_188fd_41:active {
+    background-color: var(--color-semantic-interactive-primary-active);
+}
+
+._button--primary_188fd_41:focus-visible {
+    background-color: var(--color-semantic-interactive-primary-focus);
+}
+
+/* ─── Secondary variant ─── */
+
+._button--secondary_188fd_60 {
+    background-color: transparent;
+    border: var(--borderwidth-semantic-sm) solid var(--color-semantic-interactive-secondary-default);
+    color: var(--color-semantic-foreground-secondary-strong);
+}
+
+._button--secondary_188fd_60:hover {
+    background-color: var(--color-semantic-interactive-secondary-hover);
+    border-color: var(--color-semantic-interactive-secondary-hover);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._button--secondary_188fd_60:active {
+    background-color: var(--color-semantic-interactive-secondary-active);
+    border-color: var(--color-semantic-interactive-secondary-active);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._button--secondary_188fd_60:focus-visible {
+    background-color: var(--color-semantic-interactive-secondary-focus);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+/* ─── Tertiary variant ─── */
+
+._button--tertiary_188fd_85 {
+    background-color: var(--color-semantic-interactive-neutral-default);
+    border: var(--borderwidth-semantic-sm) solid var(--color-semantic-border-neutral-mid);
+    color: var(--color-semantic-foreground-secondary-strong);
+}
+
+._button--tertiary_188fd_85:hover {
+    background-color: var(--color-semantic-interactive-neutral-hover);
+}
+
+._button--tertiary_188fd_85:active {
+    background-color: var(--color-semantic-interactive-neutral-active);
+}
+
+._button--tertiary_188fd_85:focus-visible {
+    background-color: var(--color-semantic-interactive-neutral-focus);
+}
+
+/* ─── Disabled state ─── */
+
+._button--disabled_188fd_105 {
+    pointer-events: none;
+}
+
+._button--primary_188fd_41._button--disabled_188fd_105 {
+    background-color: var(--color-semantic-interactive-primary-disabled);
+    color: var(--color-semantic-foreground-muted);
+}
+
+._button--secondary_188fd_60._button--disabled_188fd_105 {
+    border-color: var(--color-semantic-interactive-secondary-disabled);
+    color: var(--color-semantic-foreground-muted);
+}
+
+._button--tertiary_188fd_85._button--disabled_188fd_105 {
+    background-color: var(--color-semantic-interactive-neutral-disabled);
+    color: var(--color-semantic-foreground-muted);
+}
+
+/* ─── Dark color scheme ─── */
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._button--primary_188fd_41._button--disabled_188fd_105 {
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._button--secondary_188fd_60 {
+        border-color: var(--color-semantic-interactive-inverse-default);
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._button--secondary_188fd_60:hover {
+        background-color: var(--color-semantic-interactive-inverse-hover);
+        border-color: var(--color-semantic-interactive-inverse-hover);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    ._button--secondary_188fd_60:active {
+        background-color: var(--color-semantic-interactive-inverse-active);
+        border-color: var(--color-semantic-interactive-inverse-active);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    ._button--secondary_188fd_60:focus-visible {
+        background-color: var(--color-semantic-interactive-inverse-focus);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    ._button--secondary_188fd_60._button--disabled_188fd_105 {
+        border-color: var(--color-semantic-interactive-inverse-disabled);
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._button--tertiary_188fd_85._button--disabled_188fd_105 {
+        border-color: var(--color-semantic-interactive-neutral-disabled);
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+}
+
+/* ─── Loading state ─── */
+
+._button--loading_188fd_167 {
+    pointer-events: none;
+}
+
+._button__content_188fd_171 {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+._button__spinner_188fd_179 {
+    flex: 0 0 auto;
+}
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './Button.types';
+export declare const Button: ({ variant, fullWidth, size, loading, className, children, ref, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,2EASpB,WAAW,4CA0Hb,CAAC"}

package/dist/components/Button/Button.js

@@ -0,0 +1,104 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./Button.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const Button = ({
+  variant = "primary",
+  fullWidth = false,
+  size = "normal",
+  loading = false,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isDisabled = "disabled" in props && props.disabled;
+  const isAnchor = "href" in props && props.href != null;
+  const classes = cn(
+    styles.button,
+    styles[`button--${variant}`],
+    { [styles["button--full-width"]]: fullWidth },
+    styles[`button--${size}`],
+    focusStyles.focusable,
+    { [styles["button--disabled"]]: isDisabled },
+    { [styles["button--loading"]]: loading },
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: styles.button__content, children }),
+    loading && /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        size: size === "small" ? "xs" : "s",
+        color: "inherit",
+        "aria-hidden": "true",
+        "aria-label": void 0,
+        role: "presentation",
+        className: styles.button__spinner
+      }
+    )
+  ] });
+  if (isAnchor) {
+    const { href, renderLink, ...anchorProps } = props;
+    const {
+      disabled: _disabled,
+      type: _type,
+      name: _name,
+      ...safeAnchorProps
+    } = anchorProps;
+    const target = safeAnchorProps.target;
+    const rel = safeAnchorProps.rel;
+    const shouldHardenRel = target === "_blank";
+    const relTokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+    if (shouldHardenRel) {
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+    }
+    const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
+    const linkProps = {
+      ...safeAnchorProps,
+      ref,
+      href,
+      rel: hardenedRel,
+      className: classes,
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      tabIndex: loading ? -1 : void 0,
+      onClick: loading ? (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } : safeAnchorProps.onClick,
+      children: content
+    };
+    if (renderLink) {
+      return /* @__PURE__ */ jsx(Fragment, { children: renderLink(linkProps) });
+    }
+    return /* @__PURE__ */ jsx("a", { ...linkProps });
+  }
+  const {
+    type = "button",
+    disabled,
+    href: _href,
+    target: _target,
+    rel: _rel,
+    renderLink: _renderLink,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      className: classes,
+      "aria-busy": loading || void 0,
+      ...buttonProps,
+      children: content
+    }
+  );
+};
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map