npm - @dnanpm/ui-components - Versions diffs - 0.8.0 → 0.10.0 - Mend

@dnanpm/ui-components 0.8.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/dist/components/Avatar/Avatar.types.d.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import { ComponentPropsWithRef, ComponentType, ReactElement, ReactNode, SVGProps } from 'react';
+export type AvatarVariant = 'letter' | 'two-letters' | 'person' | 'logo' | 'icon';
+export type AvatarSize = 'small' | 'medium' | 'large';
+export type AvatarBackground = 'white' | 'sand-soft' | 'sand-mid' | 'sand-strong' | 'pink-soft' | 'pink-mid' | 'pink-strong' | 'plum-soft' | 'plum-mid' | 'plum-strong' | 'transparent';
+export type AvatarOrientation = 'horizontal' | 'vertical';
+export interface ResolvedMedia {
+    readonly variant: AvatarVariant;
+    readonly content: ReactNode;
+}
+export type AvatarIcon = ComponentType<SVGProps<SVGSVGElement>>;
+interface AvatarBaseProps {
+    /**
+     * What the avatar shows: `letter`, `two-letters`, `person`, `logo` or `icon`.
+     * @default 'letter'
+     */
+    readonly variant?: AvatarVariant;
+    /**
+     * Circle size: `small` 24 px, `medium` 48 px or `large` 64 px.
+     * @default 'medium'
+     */
+    readonly size?: AvatarSize;
+    /**
+     * Approved background palette or `transparent`. The text and icon colour adjusts
+     * automatically for contrast.
+     * @default 'sand-mid'
+     */
+    readonly background?: AvatarBackground;
+    /**
+     * Name position. Only affects the visible name.
+     * @default 'horizontal'
+     */
+    readonly orientation?: AvatarOrientation;
+    /**
+     * Shows the name next to the avatar, clamped to two lines. When off, the circle is
+     * exposed to assistive technology as an image named by `name`.
+     * @default true
+     */
+    readonly showName?: boolean;
+    /** Full name. Gives the initials for `letter` and `two-letters`. */
+    readonly name: string;
+    /** Client-rendered image element. Only for `person` and `logo`. Use an empty `alt`. */
+    readonly image?: ReactElement | false | null;
+    /**
+     * Icon component. Only for `icon`.
+     * @default UserFilled
+     */
+    readonly icon?: AvatarIcon;
+}
+type AvatarLetterProps = {
+    readonly variant?: 'letter' | 'two-letters';
+    readonly image?: never;
+    readonly icon?: never;
+};
+type AvatarImageProps = {
+    readonly variant: 'person' | 'logo';
+    readonly image: ReactElement | false | null;
+    readonly icon?: never;
+};
+type AvatarIconProps = {
+    readonly variant: 'icon';
+    readonly icon?: AvatarIcon;
+    readonly image?: never;
+};
+export type AvatarProps = AvatarBaseProps & (AvatarLetterProps | AvatarImageProps | AvatarIconProps) & Omit<ComponentPropsWithRef<'span'>, keyof AvatarBaseProps | 'children' | 'aria-label' | 'aria-labelledby' | 'role'>;
+export {};
+//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/Avatar/Avatar.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,SAAS,EACT,QAAQ,EACX,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAElF,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GACtB,OAAO,GACP,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,aAAa,CAAC;AAEpB,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEhE,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;CAC9B;AAED,KAAK,iBAAiB,GAAG;IACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC;IAC5C,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;CACzB,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GACrC,CAAC,iBAAiB,GAAG,gBAAgB,GAAG,eAAe,CAAC,GACxD,IAAI,CACA,qBAAqB,CAAC,MAAM,CAAC,EAC7B,MAAM,eAAe,GAAG,UAAU,GAAG,YAAY,GAAG,iBAAiB,GAAG,MAAM,CACjF,CAAC"}

package/dist/components/Avatar/Avatar.utils.cjs ADDED Viewed

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const firstCharacter = (word) => Array.from(word)[0]?.toUpperCase() ?? "";
+const getInitials = (name, count = 1) => {
+  const words = name.normalize("NFC").trim().split(/\s+/).filter((word) => word.length > 0);
+  const first = words[0];
+  const last = words[words.length - 1];
+  if (first === void 0 || last === void 0) {
+    return "";
+  }
+  if (count === 2 && words.length > 1) {
+    return `${firstCharacter(first)}${firstCharacter(last)}`;
+  }
+  return firstCharacter(first);
+};
+exports.getInitials = getInitials;
+//# sourceMappingURL=Avatar.utils.cjs.map

package/dist/components/Avatar/Avatar.utils.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Avatar.utils.cjs","sources":["../../../src/components/Avatar/Avatar.utils.ts"],"sourcesContent":["const firstCharacter = (word: string): string => Array.from(word)[0]?.toUpperCase() ?? '';\n\n/**\n * Derives initials from a full name: the first letter of the first word and, with\n * `count` 2, the first letter of the last word. Returns `''` for an empty name.\n */\nexport const getInitials = (name: string, count: 1 | 2 = 1): string => {\n const words = name\n .normalize('NFC')\n .trim()\n .split(/\\s+/)\n .filter((word) => word.length > 0);\n const first = words[0];\n const last = words[words.length - 1];\n\n if (first === undefined || last === undefined) {\n return '';\n }\n\n if (count === 2 && words.length > 1) {\n return `${firstCharacter(first)}${firstCharacter(last)}`;\n }\n\n return firstCharacter(first);\n};\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,CAAC,SAAyB,MAAM,KAAK,IAAI,EAAE,CAAC,GAAG,YAAA,KAAiB;AAMhF,MAAM,cAAc,CAAC,MAAc,QAAe,MAAc;AACnE,QAAM,QAAQ,KACT,UAAU,KAAK,EACf,KAAA,EACA,MAAM,KAAK,EACX,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AACrC,QAAM,QAAQ,MAAM,CAAC;AACrB,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AAEnC,MAAI,UAAU,UAAa,SAAS,QAAW;AAC3C,WAAO;AAAA,EACX;AAEA,MAAI,UAAU,KAAK,MAAM,SAAS,GAAG;AACjC,WAAO,GAAG,eAAe,KAAK,CAAC,GAAG,eAAe,IAAI,CAAC;AAAA,EAC1D;AAEA,SAAO,eAAe,KAAK;AAC/B;;"}

package/dist/components/Avatar/Avatar.utils.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Derives initials from a full name: the first letter of the first word and, with
+ * `count` 2, the first letter of the last word. Returns `''` for an empty name.
+ */
+export declare const getInitials: (name: string, count?: 1 | 2) => string;
+//# sourceMappingURL=Avatar.utils.d.ts.map

package/dist/components/Avatar/Avatar.utils.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Avatar.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.utils.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,EAAE,QAAO,CAAC,GAAG,CAAK,KAAG,MAkB5D,CAAC"}

package/dist/components/Avatar/Avatar.utils.js ADDED Viewed

@@ -0,0 +1,17 @@
+const firstCharacter = (word) => Array.from(word)[0]?.toUpperCase() ?? "";
+const getInitials = (name, count = 1) => {
+  const words = name.normalize("NFC").trim().split(/\s+/).filter((word) => word.length > 0);
+  const first = words[0];
+  const last = words[words.length - 1];
+  if (first === void 0 || last === void 0) {
+    return "";
+  }
+  if (count === 2 && words.length > 1) {
+    return `${firstCharacter(first)}${firstCharacter(last)}`;
+  }
+  return firstCharacter(first);
+};
+export {
+  getInitials
+};
+//# sourceMappingURL=Avatar.utils.js.map

package/dist/components/Avatar/Avatar.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Avatar.utils.js","sources":["../../../src/components/Avatar/Avatar.utils.ts"],"sourcesContent":["const firstCharacter = (word: string): string => Array.from(word)[0]?.toUpperCase() ?? '';\n\n/**\n * Derives initials from a full name: the first letter of the first word and, with\n * `count` 2, the first letter of the last word. Returns `''` for an empty name.\n */\nexport const getInitials = (name: string, count: 1 | 2 = 1): string => {\n const words = name\n .normalize('NFC')\n .trim()\n .split(/\\s+/)\n .filter((word) => word.length > 0);\n const first = words[0];\n const last = words[words.length - 1];\n\n if (first === undefined || last === undefined) {\n return '';\n }\n\n if (count === 2 && words.length > 1) {\n return `${firstCharacter(first)}${firstCharacter(last)}`;\n }\n\n return firstCharacter(first);\n};\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,CAAC,SAAyB,MAAM,KAAK,IAAI,EAAE,CAAC,GAAG,YAAA,KAAiB;AAMhF,MAAM,cAAc,CAAC,MAAc,QAAe,MAAc;AACnE,QAAM,QAAQ,KACT,UAAU,KAAK,EACf,KAAA,EACA,MAAM,KAAK,EACX,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AACrC,QAAM,QAAQ,MAAM,CAAC;AACrB,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AAEnC,MAAI,UAAU,UAAa,SAAS,QAAW;AAC3C,WAAO;AAAA,EACX;AAEA,MAAI,UAAU,KAAK,MAAM,SAAS,GAAG;AACjC,WAAO,GAAG,eAAe,KAAK,CAAC,GAAG,eAAe,IAAI,CAAC;AAAA,EAC1D;AAEA,SAAO,eAAe,KAAK;AAC/B;"}

package/dist/components/Avatar/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export type { AvatarBackground, AvatarIcon, AvatarOrientation, AvatarProps, AvatarSize, AvatarVariant, } from './Avatar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACR,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,aAAa,GAChB,MAAM,gBAAgB,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.cjs CHANGED Viewed

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 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 index = require("../../styles/utils/index.cjs");
 const Breadcrumb_module = require("./Breadcrumb.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const defaultRenderLink = (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props });
@@ -25,16 +24,15 @@ const Breadcrumb = ({
     {
       ref,
       "aria-label": ariaLabel,
-      className: cn.cn(Breadcrumb_module.default.breadcrumb, focus_module.default.focusClipGuard, className),
+      className: cn.cn(Breadcrumb_module.default.breadcrumb, index.focusStyles.focusClipGuard, className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumb_module.default.breadcrumb__list, children: items.map((item, index) => {
-        const isLast = index === lastIndex;
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: Breadcrumb_module.default.breadcrumb__list, children: items.map((item, index$1) => {
+        const isLast = index$1 === 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,
+            index.focusStyles.focusable,
+            index.textDecorationStyles.underlineLink,
             Breadcrumb_module.default.breadcrumb__current
           ),
           "aria-current": "page",
@@ -50,9 +48,8 @@ const Breadcrumb = ({
           renderLink({
             href: item.href,
             className: cn.cn(
-              focus_module.default.focusable,
-              textDecoration_module.default.underlineLink,
-              Breadcrumb_module.default.breadcrumb__link
+              index.focusStyles.focusable,
+              index.textDecorationStyles.underlineLink
             ),
             children: item.label
           }),
@@ -63,7 +60,7 @@ const Breadcrumb = ({
               "aria-hidden": "true"
             }
           )
-        ] }) }, index);
+        ] }) }, index$1);
       }) })
     }
   );

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

	@@ -1 +1 @@
1	- {"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;;"}
1	+ {"version":3,"file":"Breadcrumb.cjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRight } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { focusStyles, textDecorationStyles } from '../../styles/utils';\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__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 ),\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","index","textDecorationStyles","jsxs","Fragment","ChevronRight"],"mappings":";;;;;;;AAMA,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,MAAAA,YAAY,gBAAgB,SAAS;AAAA,MACrE,GAAG;AAAA,MAEJ,UAAAH,2BAAAA,IAAC,QAAG,WAAWE,kBAAAA,QAAO,kBACjB,UAAA,MAAM,IAAI,CAAC,MAAME,YAAU;AACxB,cAAM,SAASA,YAAU;AAEzB,8CACK,MAAA,EAAe,WAAWF,kBAAAA,QAAO,kBAC7B,UAAA,SACG,iBACI,WAAW;AAAA,UACP,MAAM,KAAK;AAAA,UACX,WAAWD,GAAAA;AAAAA,YACPE,MAAAA,YAAY;AAAA,YACZE,MAAAA,qBAAqB;AAAA,YACrBH,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,IAIdI,2BAAAA,KAAAC,qBAAA,EACK,UAAA;AAAA,UAAA,WAAW;AAAA,YACR,MAAM,KAAK;AAAA,YACX,WAAWN,GAAAA;AAAAA,cACPE,MAAAA,YAAY;AAAA,cACZE,2BAAqB;AAAA,YAAA;AAAA,YAEzB,UAAU,KAAK;AAAA,UAAA,CAClB;AAAA,UACDL,2BAAAA;AAAAA,YAACQ,MAAAA;AAAAA,YAAA;AAAA,cACG,WAAWN,kBAAAA,QAAO;AAAA,cAClB,eAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB,EAAA,CACJ,KAnCCE,OAqCT;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Breadcrumb/Breadcrumb.css CHANGED Viewed

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+@layer dds-components { @layer fallback, components; }
+@layer dds-components.components{/**
  * Breadcrumb Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).
@@ -7,14 +11,14 @@
  * Uses a container query (ch units) to switch between default and collapsed mode.
  */
-._breadcrumb_1c8nk_10 {
+._breadcrumb_1rt2e_10 {
     container-name: breadcrumb;
     container-type: inline-size;
     width: 100%;
     overflow: hidden;
 }
-._breadcrumb__list_1c8nk_17 {
+._breadcrumb__list_1rt2e_17 {
     display: flex;
     align-items: center;
     gap: var(--spacing-space-4);
@@ -23,7 +27,7 @@
     list-style: none;
 }
-._breadcrumb__item_1c8nk_26 {
+._breadcrumb__item_1rt2e_26 {
     flex: 0 0 auto;
     margin: 0;
     padding: 0;
@@ -42,31 +46,30 @@
     }
 }
-._breadcrumb__link_1c8nk_45 {
-    color: var(--color-semantic-interactive-primary-default);
-}
-._breadcrumb__link_1c8nk_45:hover,
-._breadcrumb__link_1c8nk_45:focus-visible {
-    color: var(--color-semantic-interactive-primary-hover);
-}
-._breadcrumb__current_1c8nk_54 {
+._breadcrumb__current_1rt2e_45 {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-._breadcrumb__separator_1c8nk_59 {
+._breadcrumb__separator_1rt2e_50 {
     flex: 0 0 auto;
     width: 0.875rem;
     height: 0.875rem;
     color: var(--color-semantic-interactive-primary-default);
 }
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._breadcrumb__separator_1rt2e_50 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+}
 /* Collapsed mode: hide all items except the last two */
 @container breadcrumb (max-width: 75ch) {
-    ._breadcrumb__item_1c8nk_26:not(:nth-last-child(-n + 2)) {
+    ._breadcrumb__item_1rt2e_26:not(:nth-last-child(-n + 2)) {
         display: none;
     }
 }
-}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI/E,eAAO,MAAM,UAAU,GAAI,0FAQxB,eAAe,mDA8DjB,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { textDecorationStyles, focusStyles } from "../../styles/utils/index.js";
 import styles from "./Breadcrumb.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const defaultRenderLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
@@ -32,7 +31,6 @@ const Breadcrumb = ({
           className: cn(
             focusStyles.focusable,
             textDecorationStyles.underlineLink,
-            styles.breadcrumb__link,
             styles.breadcrumb__current
           ),
           "aria-current": "page",
@@ -49,8 +47,7 @@ const Breadcrumb = ({
             href: item.href,
             className: cn(
               focusStyles.focusable,
-              textDecorationStyles.underlineLink,
-              styles.breadcrumb__link
+              textDecorationStyles.underlineLink
             ),
             children: item.label
           }),

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

	@@ -1 +1 @@
1	- {"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;"}
1	+ {"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { ChevronRight } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { focusStyles, textDecorationStyles } from '../../styles/utils';\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__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 ),\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":";;;;;AAMA,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,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,YAAA;AAAA,YAEzB,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,KAnCC,KAqCT;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1,24 +1,21 @@
 require('./Breadcrumb.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const breadcrumb = "_breadcrumb_1c8nk_10";
-const breadcrumb__list = "_breadcrumb__list_1c8nk_17";
-const breadcrumb__item = "_breadcrumb__item_1c8nk_26";
-const breadcrumb__link = "_breadcrumb__link_1c8nk_45";
-const breadcrumb__current = "_breadcrumb__current_1c8nk_54";
-const breadcrumb__separator = "_breadcrumb__separator_1c8nk_59";
+const breadcrumb = "_breadcrumb_1rt2e_10";
+const breadcrumb__list = "_breadcrumb__list_1rt2e_17";
+const breadcrumb__item = "_breadcrumb__item_1rt2e_26";
+const breadcrumb__current = "_breadcrumb__current_1rt2e_45";
+const breadcrumb__separator = "_breadcrumb__separator_1rt2e_50";
 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;

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

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

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

@@ -1,15 +1,13 @@
 import './Breadcrumb.css';
-const breadcrumb = "_breadcrumb_1c8nk_10";
-const breadcrumb__list = "_breadcrumb__list_1c8nk_17";
-const breadcrumb__item = "_breadcrumb__item_1c8nk_26";
-const breadcrumb__link = "_breadcrumb__link_1c8nk_45";
-const breadcrumb__current = "_breadcrumb__current_1c8nk_54";
-const breadcrumb__separator = "_breadcrumb__separator_1c8nk_59";
+const breadcrumb = "_breadcrumb_1rt2e_10";
+const breadcrumb__list = "_breadcrumb__list_1rt2e_17";
+const breadcrumb__item = "_breadcrumb__item_1rt2e_26";
+const breadcrumb__current = "_breadcrumb__current_1rt2e_45";
+const breadcrumb__separator = "_breadcrumb__separator_1rt2e_50";
 const styles = {
   breadcrumb,
   breadcrumb__list,
   breadcrumb__item,
-  breadcrumb__link,
   breadcrumb__current,
   breadcrumb__separator
 };
@@ -17,7 +15,6 @@ export {
   breadcrumb,
   breadcrumb__current,
   breadcrumb__item,
-  breadcrumb__link,
   breadcrumb__list,
   breadcrumb__separator,
   styles as default

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

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

package/dist/components/Button/Button.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "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 index = require("../../styles/utils/index.cjs");
 const Button_module = require("./Button.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const Spinner = require("../Spinner/Spinner.cjs");
@@ -10,6 +10,9 @@ const Button = ({
   fullWidth = false,
   size = "normal",
   loading = false,
+  icon,
+  image,
+  iconPosition = "start",
   className,
   children,
   ref,
@@ -17,17 +20,39 @@ const Button = ({
 }) => {
   const isDisabled = "disabled" in props && props.disabled;
   const isAnchor = "href" in props && props.href != null;
+  const hasMedia = icon != null || Boolean(image);
   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,
+    index.focusStyles.focusable,
     { [Button_module.default["button--disabled"]]: isDisabled },
     { [Button_module.default["button--loading"]]: loading },
+    { [Button_module.default["button--has-media"]]: hasMedia },
+    { [Button_module.default[`button--media-${iconPosition}`]]: hasMedia },
     className
   );
+  const Icon = icon;
+  const media = Icon != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn.cn(Button_module.default["button__media"], Button_module.default["button__media--icon"]),
+      "aria-hidden": "true",
+      inert: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {})
+    }
+  ) : image ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn.cn(Button_module.default["button__media"], Button_module.default["button__media--image"]),
+      "aria-hidden": "true",
+      inert: true,
+      children: image
+    }
+  ) : null;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconPosition === "start" && media,
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__content, children }),
     loading && /* @__PURE__ */ jsxRuntime.jsx(
       Spinner.Spinner,
@@ -39,7 +64,8 @@ const Button = ({
         role: "presentation",
         className: Button_module.default.button__spinner
       }
-    )
+    ),
+    iconPosition === "end" && media
   ] });
   if (isAnchor) {
     const { href, renderLink, ...anchorProps } = props;

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

	@@ -1 +1 @@
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(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\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;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,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;;"}
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';\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 icon,\n image,\n iconPosition = 'start',\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 const hasMedia = icon != null \|\| Boolean(image);\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 { [styles['button--has-media']]: hasMedia },\n { [styles[`button--media-${iconPosition}`]]: hasMedia },\n className,\n );\n\n const Icon = icon;\n const media =\n Icon != null ? (\n <span\n className={cn(styles['button__media'], styles['button__media--icon'])}\n aria-hidden=\"true\"\n inert\n >\n <Icon />\n </span>\n ) : image ? (\n <span\n className={cn(styles['button__media'], styles['button__media--image'])}\n aria-hidden=\"true\"\n inert\n >\n {image}\n </span>\n ) : null;\n\n const content = (\n <>\n {iconPosition === 'start' && media}\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 {iconPosition === 'end' && media}\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(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\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","jsx","jsxs","Fragment","Spinner"],"mappings":"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"}