@dnanpm/ui-components 0.0.4 → 0.1.0

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const icons = require("@dnanpm/icons");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const textDecoration_module = require("../../styles/utils/text-decoration.module.css.cjs");
+const Breadcrumb_module = require("./Breadcrumb.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const defaultRenderLink = (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props });
+const Breadcrumb = react.forwardRef(function Breadcrumb2({
+  items,
+  lastItemAsLink = false,
+  renderLink = defaultRenderLink,
+  className,
+  "aria-label": ariaLabel = "Murupolku",
+  ...props
+}, ref) {
+  if (items.length === 0) {
+    return null;
+  }
+  const lastIndex = items.length - 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: cn.cn(Breadcrumb_module.default.breadcrumb, focus_module.default.focusClipGuard, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumb_module.default.breadcrumb__list, children: items.map((item, index) => {
+        const isLast = index === lastIndex;
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: Breadcrumb_module.default.breadcrumb__item, children: isLast ? lastItemAsLink ? renderLink({
+          href: item.href,
+          className: cn.cn(
+            focus_module.default.focusable,
+            textDecoration_module.default.underlineLink,
+            Breadcrumb_module.default.breadcrumb__link,
+            Breadcrumb_module.default.breadcrumb__current
+          ),
+          "aria-current": "page",
+          children: item.label
+        }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: Breadcrumb_module.default.breadcrumb__current,
+            "aria-current": "page",
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          renderLink({
+            href: item.href,
+            className: cn.cn(
+              focus_module.default.focusable,
+              textDecoration_module.default.underlineLink,
+              Breadcrumb_module.default.breadcrumb__link
+            ),
+            children: item.label
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            icons.ChevronRight,
+            {
+              className: Breadcrumb_module.default.breadcrumb__separator,
+              "aria-hidden": "true"
+            }
+          )
+        ] }) }, index);
+      }) })
+    }
+  );
+});
+Breadcrumb.displayName = "Breadcrumb";
+exports.Breadcrumb = Breadcrumb;
+//# sourceMappingURL=Breadcrumb.cjs.map

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

@@ -0,0 +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;;"}

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -0,0 +1,72 @@
+@layer dna-design-system {/**
+ * Breadcrumb Component Styles
+ *
+ * Design tokens are consumed via CSS custom properties (variables).
+ * These variables come from @dnanpm/design-tokens package.
+ *
+ * Uses a container query (ch units) to switch between default and collapsed mode.
+ */
+
+._breadcrumb_iubo4_10 {
+    container-name: breadcrumb;
+    container-type: inline-size;
+    width: 100%;
+    overflow: hidden;
+}
+
+._breadcrumb__list_iubo4_17 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-ui-xxs);
+    margin: var(--spacing-ui-lg) 0;
+    padding: 0;
+    list-style: none;
+}
+
+._breadcrumb__item_iubo4_26 {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-ui-xxs);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.125rem;
+
+    &:last-child {
+        min-width: 0;
+        flex-shrink: 1;
+    }
+    a,
+    span {
+        white-space: nowrap;
+    }
+}
+
+._breadcrumb__link_iubo4_45 {
+    color: var(--colors-semantic-interactive-primary-default);
+    border-radius: var(--radius-semantic-sm);
+}
+
+._breadcrumb__link_iubo4_45:hover {
+    color: var(--colors-semantic-interactive-primary-hover);
+}
+
+._breadcrumb__current_iubo4_54 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+._breadcrumb__separator_iubo4_59 {
+    flex: 0 0 auto;
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--colors-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)) {
+        display: none;
+    }
+}
+}

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

@@ -0,0 +1,3 @@
+import { BreadcrumbProps } from './Breadcrumb.types';
+export declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,73 @@
+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({
+  items,
+  lastItemAsLink = false,
+  renderLink = defaultRenderLink,
+  className,
+  "aria-label": ariaLabel = "Murupolku",
+  ...props
+}, ref) {
+  if (items.length === 0) {
+    return null;
+  }
+  const lastIndex = items.length - 1;
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: cn(styles.breadcrumb, focusStyles.focusClipGuard, className),
+      ...props,
+      children: /* @__PURE__ */ jsx("ol", { className: styles.breadcrumb__list, children: items.map((item, index) => {
+        const isLast = index === lastIndex;
+        return /* @__PURE__ */ jsx("li", { className: styles.breadcrumb__item, children: isLast ? lastItemAsLink ? renderLink({
+          href: item.href,
+          className: cn(
+            focusStyles.focusable,
+            textDecorationStyles.underlineLink,
+            styles.breadcrumb__link,
+            styles.breadcrumb__current
+          ),
+          "aria-current": "page",
+          children: item.label
+        }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles.breadcrumb__current,
+            "aria-current": "page",
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderLink({
+            href: item.href,
+            className: cn(
+              focusStyles.focusable,
+              textDecorationStyles.underlineLink,
+              styles.breadcrumb__link
+            ),
+            children: item.label
+          }),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: styles.breadcrumb__separator,
+              "aria-hidden": "true"
+            }
+          )
+        ] }) }, index);
+      }) })
+    }
+  );
+});
+Breadcrumb.displayName = "Breadcrumb";
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,25 @@
+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 styles = {
+  breadcrumb,
+  breadcrumb__list,
+  breadcrumb__item,
+  breadcrumb__link,
+  breadcrumb__current,
+  breadcrumb__separator
+};
+exports.breadcrumb = breadcrumb;
+exports.breadcrumb__current = breadcrumb__current;
+exports.breadcrumb__item = breadcrumb__item;
+exports.breadcrumb__link = breadcrumb__link;
+exports.breadcrumb__list = breadcrumb__list;
+exports.breadcrumb__separator = breadcrumb__separator;
+exports.default = styles;
+//# sourceMappingURL=Breadcrumb.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,25 @@
+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 styles = {
+  breadcrumb,
+  breadcrumb__list,
+  breadcrumb__item,
+  breadcrumb__link,
+  breadcrumb__current,
+  breadcrumb__separator
+};
+export {
+  breadcrumb,
+  breadcrumb__current,
+  breadcrumb__item,
+  breadcrumb__link,
+  breadcrumb__list,
+  breadcrumb__separator,
+  styles as default
+};
+//# sourceMappingURL=Breadcrumb.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export interface BreadcrumbItem {
+    /**
+     * The visible label for the breadcrumb item
+     */
+    readonly label: string;
+    /**
+     * The URL for the breadcrumb link
+     */
+    readonly href: string;
+}
+export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    readonly href: string;
+    readonly children: React.ReactNode;
+}
+export interface BreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
+    /**
+     * Ordered list of breadcrumb items. The last item represents the current page.
+     */
+    readonly items: readonly BreadcrumbItem[];
+    /**
+     * Whether the last item (current page) should render as a link.
+     * @default false
+     */
+    readonly lastItemAsLink?: boolean;
+    /**
+     * Custom render function for link elements. Use this to integrate with
+     * client-side routing libraries like Next.js or React Router.
+     *
+     * @example
+     * // Next.js
+     * import Link from 'next/link';
+     * <Breadcrumb items={items} renderLink={(props) => <Link {...props} />} />
+     *
+     * @example
+     * // React Router
+     * import { Link } from 'react-router-dom';
+     * <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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './Breadcrumb.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Label/Label.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Label_module = require("./Label.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Label = react.forwardRef(function Label2({ variant = "default", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn.cn(Label_module.default.label, Label_module.default[`label--${variant}`], className),
+      ...props,
+      children
+    }
+  );
+});
+Label.displayName = "Label";
+exports.Label = Label;
+//# sourceMappingURL=Label.cjs.map

package/dist/components/Label/Label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.cjs","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport styles from './Label.module.css';\nimport type { LabelProps } from './Label.types';\n\nexport const Label = forwardRef<HTMLSpanElement, LabelProps>(function Label(\n    { variant = 'default', className, children, ...props },\n    ref,\n) {\n    return (\n        <span\n            ref={ref}\n            className={cn(styles.label, styles[`label--${variant}`], className)}\n            {...props}\n        >\n            {children}\n        </span>\n    );\n});\n\nLabel.displayName = 'Label';\n"],"names":["forwardRef","Label","jsx","cn","styles"],"mappings":";;;;;;AAKO,MAAM,QAAQA,MAAAA,WAAwC,SAASC,OAClE,EAAE,UAAU,WAAW,WAAW,UAAU,GAAG,MAAA,GAC/C,KACF;AACE,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA,GAAGC,aAAAA,QAAO,OAAOA,aAAAA,QAAO,UAAU,OAAO,EAAE,GAAG,SAAS;AAAA,MACjE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,MAAM,cAAc;;"}

package/dist/components/Label/Label.css

@@ -0,0 +1,40 @@
+@layer dna-design-system {._label_sogft_1 {
+    display: inline-block;
+    max-width: 100%;
+    padding: var(--spacing-ui-xxs) var(--spacing-ui-lg);
+    border-radius: var(--radius-semantic-full);
+    font-size: 0.875rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--colors-semantic-foreground-default);
+}
+
+._label--default_sogft_17 {
+    background-color: var(--colors-semantic-surface-base);
+}
+
+._label--campaign_sogft_21 {
+    background-color: var(--colors-semantic-surface-primary-mid);
+}
+
+._label--new_sogft_25 {
+    background-color: var(--colors-semantic-accent-lemon-500);
+}
+
+._label--presale_sogft_29 {
+    background-color: var(--colors-semantic-accent-orange-500);
+}
+
+._label--soldout_sogft_33 {
+    background-color: var(--colors-semantic-surface-neutral-strong);
+}
+
+._label--other_sogft_37 {
+    background-color: var(--colors-semantic-accent-sky-500);
+}
+}

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,3 @@
+import { LabelProps } from './Label.types';
+export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,wGAahB,CAAC"}

package/dist/components/Label/Label.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styles from "./Label.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const Label = forwardRef(function Label2({ variant = "default", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(styles.label, styles[`label--${variant}`], className),
+      ...props,
+      children
+    }
+  );
+});
+Label.displayName = "Label";
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport styles from './Label.module.css';\nimport type { LabelProps } from './Label.types';\n\nexport const Label = forwardRef<HTMLSpanElement, LabelProps>(function Label(\n    { variant = 'default', className, children, ...props },\n    ref,\n) {\n    return (\n        <span\n            ref={ref}\n            className={cn(styles.label, styles[`label--${variant}`], className)}\n            {...props}\n        >\n            {children}\n        </span>\n    );\n});\n\nLabel.displayName = 'Label';\n"],"names":["Label"],"mappings":";;;;AAKO,MAAM,QAAQ,WAAwC,SAASA,OAClE,EAAE,UAAU,WAAW,WAAW,UAAU,GAAG,MAAA,GAC/C,KACF;AACE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW,GAAG,OAAO,OAAO,OAAO,UAAU,OAAO,EAAE,GAAG,SAAS;AAAA,MACjE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,MAAM,cAAc;"}

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

@@ -0,0 +1,16 @@
+require('./Label.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const label = "_label_sogft_1";
+const styles = {
+  label,
+  "label--default": "_label--default_sogft_17",
+  "label--campaign": "_label--campaign_sogft_21",
+  "label--new": "_label--new_sogft_25",
+  "label--presale": "_label--presale_sogft_29",
+  "label--soldout": "_label--soldout_sogft_33",
+  "label--other": "_label--other_sogft_37"
+};
+exports.default = styles;
+exports.label = label;
+//# sourceMappingURL=Label.module.css.cjs.map

package/dist/components/Label/Label.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +1,16 @@
+import './Label.css';
+const label = "_label_sogft_1";
+const styles = {
+  label,
+  "label--default": "_label--default_sogft_17",
+  "label--campaign": "_label--campaign_sogft_21",
+  "label--new": "_label--new_sogft_25",
+  "label--presale": "_label--presale_sogft_29",
+  "label--soldout": "_label--soldout_sogft_33",
+  "label--other": "_label--other_sogft_37"
+};
+export {
+  styles as default,
+  label
+};
+//# sourceMappingURL=Label.module.css.js.map

package/dist/components/Label/Label.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

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

@@ -0,0 +1,28 @@
+import type * as React from 'react';
+/**
+ * Visual variant of the Label, determining its background color.
+ *
+ * - `default` — White. Default neutral label.
+ * - `campaign` — Pink. Indicates discounts, benefits, and special offers.
+ * - `new` — Yellow. Indicates a "new state", e.g. new product.
+ * - `presale` — Orange. Indicates a pre-sale campaign.
+ * - `soldout` — Sand. Indicates a sold-out state.
+ * - `other` — Blue. Indicates anything else, e.g. special technical properties.
+ */
+export type LabelVariant = 'default' | 'campaign' | 'new' | 'presale' | 'soldout' | 'other';
+export interface LabelProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * The visible text content of the label.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The visual variant that determines background color.
+     * @default 'default'
+     */
+    readonly variant?: LabelVariant;
+    /**
+     * Custom className to apply to the root element.
+     */
+    readonly className?: string;
+}
+//# sourceMappingURL=Label.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IACtE;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B"}

package/dist/components/Label/index.d.ts

@@ -0,0 +1,3 @@
+export { Label } from './Label';
+export type { LabelProps, LabelVariant } from './Label.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Notification/Notification.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const icons = require("@dnanpm/icons");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const Notification_module = require("./Notification.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const variantIcons = {
+  info: icons.Info,
+  success: icons.Check,
+  warning: icons.Warning,
+  error: icons.Error
+};
+const variantRoles = {
+  info: "status",
+  success: "status",
+  warning: "alert",
+  error: "alert"
+};
+const Notification = react.forwardRef(function Notification2({
+  variant,
+  children,
+  closable = false,
+  onClose,
+  closeLabel = "Sulje ilmoitus",
+  className,
+  ...props
+}, ref) {
+  const Icon = variantIcons[variant];
+  const role = variantRoles[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role,
+      className: cn.cn(Notification_module.default.notification, Notification_module.default[`notification--${variant}`], className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Notification_module.default["notification__icon-container"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: Notification_module.default.notification__icon, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Notification_module.default.notification__content, children }),
+        closable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: cn.cn(Notification_module.default.notification__close, focus_module.default.focusable),
+            onClick: onClose,
+            "aria-label": closeLabel,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Notification.displayName = "Notification";
+exports.Notification = Notification;
+//# sourceMappingURL=Notification.cjs.map

package/dist/components/Notification/Notification.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.cjs","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef, type ComponentType, type SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(function Notification(\n    {\n        variant,\n        children,\n        closable = false,\n        onClose,\n        closeLabel = 'Sulje ilmoitus',\n        className,\n        ...props\n    },\n    ref,\n) {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n            {...props}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n});\n\nNotification.displayName = 'Notification';\n"],"names":["Info","Check","Warning","ErrorIcon","forwardRef","Notification","jsxs","cn","styles","jsx","focusStyles","Close"],"mappings":";;;;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAMA,MAAAA;AAAAA,EACN,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,OAAOC,MAAAA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAeC,MAAAA,WAA8C,SAASC,cAC/E;AAAA,EACI;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACP,GACA,KACF;AACE,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA,GAAGC,oBAAAA,QAAO,cAAcA,oBAAAA,QAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAC/E,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,8BAA8B,GACjD,UAAAC,2BAAAA,IAAC,MAAA,EAAK,WAAWD,4BAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,uBAAwB,UAAS;AAAA,QACvD,YACGC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAWF,GAAAA,GAAGC,oBAAAA,QAAO,qBAAqBE,aAAAA,QAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAED,aAAa,cAAc;;"}