@dnanpm/ui-components 0.1.0 → 0.3.0

package/dist/components/Pictograph/PictographItem.css

@@ -0,0 +1,63 @@
+@layer dds-components {/**
+ * PictographItem Component Styles
+ *
+ * Individual pictograph item containing an icon and text area.
+ * Reads CSS custom properties from the parent Pictograph component
+ * for direction, alignment, icon sizing, and gap.
+ */
+
+._pictograph-item_1udd7_9 {
+    display: flex;
+    flex-direction: var(--pictograph-direction);
+    align-items: var(--pictograph-align);
+    gap: var(--pictograph-item-gap);
+    margin: 0;
+}
+
+._pictograph-item__icon_1udd7_17 {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pictograph-icon-color);
+    width: var(--pictograph-icon-size);
+    height: var(--pictograph-icon-size);
+}
+
+._pictograph-item__icon_1udd7_17 svg {
+    fill: currentColor;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+}
+
+._pictograph-item__text_1udd7_35 {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    text-align: var(--pictograph-text-align);
+    text-wrap: balance;
+    color: var(--pictograph-text-color);
+}
+
+._pictograph-item__text_1udd7_35 > *:not(dialog) {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* Single paragraph gets larger font */
+._pictograph-item__text_1udd7_35 > p:only-child {
+    font: var(--typography-body-lg);
+    margin-bottom: 0;
+}
+
+/* Headings inside text area */
+._pictograph-item__text_1udd7_35 h1,
+._pictograph-item__text_1udd7_35 h2,
+._pictograph-item__text_1udd7_35 h3,
+._pictograph-item__text_1udd7_35 h4,
+._pictograph-item__text_1udd7_35 h5 {
+    font: var(--typography-heading-xs);
+}
+}

package/dist/components/Pictograph/PictographItem.d.ts

@@ -0,0 +1,3 @@
+import { PictographItemProps } from './Pictograph.types';
+export declare const PictographItem: ({ icon, children, className, ref, ...props }: PictographItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PictographItem.d.ts.map

package/dist/components/Pictograph/PictographItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictographItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,8CAM5B,mBAAmB,4CASrB,CAAC"}

package/dist/components/Pictograph/PictographItem.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "./PictographItem.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const PictographItem = ({
+  icon,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("li", { ref, className: cn(styles["pictograph-item"], className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: styles["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("div", { className: styles["pictograph-item__text"], children })
+  ] });
+};
+export {
+  PictographItem
+};
+//# sourceMappingURL=PictographItem.js.map

package/dist/components/Pictograph/PictographItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictographItem.js","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    return (\n        <li ref={ref} className={cn(styles['pictograph-item'], className)} {...props}>\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACI,qBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,OAAO,iBAAiB,GAAG,SAAS,GAAI,GAAG,OACnE,UAAA;AAAA,IAAA,oBAAC,UAAK,WAAW,OAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,wBACC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,EAAA,GAC/D;AAER;"}

package/dist/components/Pictograph/PictographItem.module.css.cjs

@@ -0,0 +1,9 @@
+require('./PictographItem.css');
+"use strict";
+const styles = {
+  "pictograph-item": "_pictograph-item_1udd7_9",
+  "pictograph-item__icon": "_pictograph-item__icon_1udd7_17",
+  "pictograph-item__text": "_pictograph-item__text_1udd7_35"
+};
+module.exports = styles;
+//# sourceMappingURL=PictographItem.module.css.cjs.map

package/dist/components/Pictograph/PictographItem.module.css.cjs.map

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

package/dist/components/Pictograph/PictographItem.module.css.js

@@ -0,0 +1,10 @@
+import './PictographItem.css';
+const styles = {
+  "pictograph-item": "_pictograph-item_1udd7_9",
+  "pictograph-item__icon": "_pictograph-item__icon_1udd7_17",
+  "pictograph-item__text": "_pictograph-item__text_1udd7_35"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=PictographItem.module.css.js.map

package/dist/components/Pictograph/PictographItem.module.css.js.map

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

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

@@ -0,0 +1,4 @@
+export { Pictograph } from './Pictograph';
+export { PictographItem } from './PictographItem';
+export type { PictographItemProps, PictographProps } from './Pictograph.types';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Spinner/Spinner.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Spinner_module = require("./Spinner.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const CAR_DASH = "71 212";
+const Spinner = ({
+  color = "primary",
+  size = "m",
+  className,
+  ref,
+  role = "status",
+  "aria-label": ariaLabel = "Ladataan",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ...props,
+      ref,
+      viewBox: "0 0 100 100",
+      role,
+      "aria-label": ariaLabel,
+      className: cn.cn(
+        Spinner_module.default.spinner,
+        Spinner_module.default[`spinner--${color}`],
+        Spinner_module.default[`spinner--${size}`],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: Spinner_module.default.spinner__track,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: Spinner_module.default.spinner__car,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10",
+            strokeDasharray: CAR_DASH,
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+exports.Spinner = Spinner;
+//# sourceMappingURL=Spinner.cjs.map

package/dist/components/Spinner/Spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Spinner.module.css';\nimport type { SpinnerProps } from './Spinner.types';\n\n/**\n * Circumference of a circle with r=45 in a 100×100 viewBox: 2π × 45 ≈ 282.74.\n * The \"car\" arc covers ~25 % of the circumference (~70.69); the gap fills the rest (~212.06).\n */\nconst CAR_DASH = '71 212';\n\nexport const Spinner = ({\n    color = 'primary',\n    size = 'm',\n    className,\n    ref,\n    role = 'status',\n    'aria-label': ariaLabel = 'Ladataan',\n    ...props\n}: SpinnerProps) => {\n    return (\n        <svg\n            {...props}\n            ref={ref}\n            viewBox=\"0 0 100 100\"\n            role={role}\n            aria-label={ariaLabel}\n            className={cn(\n                styles.spinner,\n                styles[`spinner--${color}`],\n                styles[`spinner--${size}`],\n                className,\n            )}\n        >\n            {/* Track: full ring at 40 % opacity */}\n            <circle\n                className={styles.spinner__track}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n            />\n            {/* Car: partial arc that rotates continuously */}\n            <circle\n                className={styles.spinner__car}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n                strokeDasharray={CAR_DASH}\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n};\n"],"names":["jsxs","cn","styles","jsx"],"mappings":";;;;;AAQA,MAAM,WAAW;AAEV,MAAM,UAAU,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc,YAAY;AAAA,EAC1B,GAAG;AACP,MAAoB;AAChB,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA,cAAY;AAAA,MACZ,WAAWC,GAAAA;AAAAA,QACPC,eAAAA,QAAO;AAAA,QACPA,eAAAA,QAAO,YAAY,KAAK,EAAE;AAAA,QAC1BA,eAAAA,QAAO,YAAY,IAAI,EAAE;AAAA,QACzB;AAAA,MAAA;AAAA,MAIJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWD,eAAAA,QAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWD,eAAAA,QAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1,116 @@
+@layer dds-components {/* ─────────────────────────────────────────────────────────────
+   Spinner — base
+   ───────────────────────────────────────────────────────────── */
+
+._spinner_j28th_5 {
+    /*
+     * Internal custom property that carries the animation duration.
+     * Each size class below overrides it; the .car rule consumes it.
+     * The default matches the medium (m) size.
+     */
+    --_spinner-duration: 0.8s;
+
+    display: inline-block;
+    flex-shrink: 0;
+    overflow: visible;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Color variants
+   Token: foreground color of both the track and the car.
+   The track uses the same color at 40 % opacity (see .track).
+   ───────────────────────────────────────────────────────────── */
+
+._spinner--primary_j28th_24 {
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._spinner--secondary_j28th_28 {
+    color: var(--color-semantic-foreground-secondary-strong);
+}
+
+._spinner--inverse_j28th_32 {
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._spinner--inherit_j28th_36 {
+    color: inherit;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Size variants
+   XS → 0.6 s  |  S → 0.7 s  |  M → 0.8 s  |  L → 0.9 s  |  XL → 1.0 s
+   ───────────────────────────────────────────────────────────── */
+
+._spinner--xs_j28th_45 {
+    width: 20px;
+    height: 20px;
+    --_spinner-duration: 0.6s;
+}
+
+._spinner--s_j28th_28 {
+    width: 24px;
+    height: 24px;
+    --_spinner-duration: 0.7s;
+}
+
+._spinner--m_j28th_57 {
+    width: 40px;
+    height: 40px;
+    --_spinner-duration: 0.8s;
+}
+
+._spinner--l_j28th_63 {
+    width: 64px;
+    height: 64px;
+    --_spinner-duration: 0.9s;
+}
+
+._spinner--xl_j28th_69 {
+    width: 80px;
+    height: 80px;
+    --_spinner-duration: 1s;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Track — the background ring
+   Rendered at 40 % opacity of currentColor.
+   ───────────────────────────────────────────────────────────── */
+
+._spinner__track_j28th_80 {
+    opacity: 0.4;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Car — the animated arc that travels around the track
+   ───────────────────────────────────────────────────────────── */
+
+._spinner__car_j28th_88 {
+    /*
+     * transform-box: fill-box makes transform-origin relative to the
+     * element's own bounding box, so "center" correctly refers to the
+     * centre of the circle rather than the SVG viewport.
+     */
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: _spinner-rotate_j28th_1 var(--_spinner-duration) linear infinite;
+}
+
+@keyframes _spinner-rotate_j28th_1 {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Reduced-motion preference
+   Slow the animation significantly instead of stopping it entirely,
+   so the loading state remains perceptible without causing discomfort.
+   ───────────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+    ._spinner__car_j28th_88 {
+        animation-duration: 3s;
+    }
+}
+}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { SpinnerProps } from './Spinner.types';
+export declare const Spinner: ({ color, size, className, ref, role, "aria-label": ariaLabel, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQpD,eAAO,MAAM,OAAO,GAAI,0EAQrB,YAAY,4CAuCd,CAAC"}

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "./Spinner.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const CAR_DASH = "71 212";
+const Spinner = ({
+  color = "primary",
+  size = "m",
+  className,
+  ref,
+  role = "status",
+  "aria-label": ariaLabel = "Ladataan",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...props,
+      ref,
+      viewBox: "0 0 100 100",
+      role,
+      "aria-label": ariaLabel,
+      className: cn(
+        styles.spinner,
+        styles[`spinner--${color}`],
+        styles[`spinner--${size}`],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.spinner__track,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.spinner__car,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10",
+            strokeDasharray: CAR_DASH,
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Spinner.module.css';\nimport type { SpinnerProps } from './Spinner.types';\n\n/**\n * Circumference of a circle with r=45 in a 100×100 viewBox: 2π × 45 ≈ 282.74.\n * The \"car\" arc covers ~25 % of the circumference (~70.69); the gap fills the rest (~212.06).\n */\nconst CAR_DASH = '71 212';\n\nexport const Spinner = ({\n    color = 'primary',\n    size = 'm',\n    className,\n    ref,\n    role = 'status',\n    'aria-label': ariaLabel = 'Ladataan',\n    ...props\n}: SpinnerProps) => {\n    return (\n        <svg\n            {...props}\n            ref={ref}\n            viewBox=\"0 0 100 100\"\n            role={role}\n            aria-label={ariaLabel}\n            className={cn(\n                styles.spinner,\n                styles[`spinner--${color}`],\n                styles[`spinner--${size}`],\n                className,\n            )}\n        >\n            {/* Track: full ring at 40 % opacity */}\n            <circle\n                className={styles.spinner__track}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n            />\n            {/* Car: partial arc that rotates continuously */}\n            <circle\n                className={styles.spinner__car}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n                strokeDasharray={CAR_DASH}\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,WAAW;AAEV,MAAM,UAAU,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc,YAAY;AAAA,EAC1B,GAAG;AACP,MAAoB;AAChB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA,cAAY;AAAA,MACZ,WAAW;AAAA,QACP,OAAO;AAAA,QACP,OAAO,YAAY,KAAK,EAAE;AAAA,QAC1B,OAAO,YAAY,IAAI,EAAE;AAAA,QACzB;AAAA,MAAA;AAAA,MAIJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,OAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,OAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,26 @@
+require('./Spinner.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const spinner = "_spinner_j28th_5";
+const spinner__track = "_spinner__track_j28th_80";
+const spinner__car = "_spinner__car_j28th_88";
+const styles = {
+  spinner,
+  "spinner--primary": "_spinner--primary_j28th_24",
+  "spinner--secondary": "_spinner--secondary_j28th_28",
+  "spinner--inverse": "_spinner--inverse_j28th_32",
+  "spinner--inherit": "_spinner--inherit_j28th_36",
+  "spinner--xs": "_spinner--xs_j28th_45",
+  "spinner--s": "_spinner--s_j28th_28",
+  "spinner--m": "_spinner--m_j28th_57",
+  "spinner--l": "_spinner--l_j28th_63",
+  "spinner--xl": "_spinner--xl_j28th_69",
+  spinner__track,
+  spinner__car,
+  "spinner-rotate": "_spinner-rotate_j28th_1"
+};
+exports.default = styles;
+exports.spinner = spinner;
+exports.spinner__car = spinner__car;
+exports.spinner__track = spinner__track;
+//# sourceMappingURL=Spinner.module.css.cjs.map

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

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

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

@@ -0,0 +1,26 @@
+import './Spinner.css';
+const spinner = "_spinner_j28th_5";
+const spinner__track = "_spinner__track_j28th_80";
+const spinner__car = "_spinner__car_j28th_88";
+const styles = {
+  spinner,
+  "spinner--primary": "_spinner--primary_j28th_24",
+  "spinner--secondary": "_spinner--secondary_j28th_28",
+  "spinner--inverse": "_spinner--inverse_j28th_32",
+  "spinner--inherit": "_spinner--inherit_j28th_36",
+  "spinner--xs": "_spinner--xs_j28th_45",
+  "spinner--s": "_spinner--s_j28th_28",
+  "spinner--m": "_spinner--m_j28th_57",
+  "spinner--l": "_spinner--l_j28th_63",
+  "spinner--xl": "_spinner--xl_j28th_69",
+  spinner__track,
+  spinner__car,
+  "spinner-rotate": "_spinner-rotate_j28th_1"
+};
+export {
+  styles as default,
+  spinner,
+  spinner__car,
+  spinner__track
+};
+//# sourceMappingURL=Spinner.module.css.js.map

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

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

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

@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef } from 'react';
+/**
+ * Color variant of the Spinner.
+ *
+ * - `primary`   — Primary brand color. Use on light backgrounds.
+ * - `secondary` — Secondary brand color. Use on light backgrounds.
+ * - `inverse`   — Inverse color. Use on dark or colored backgrounds.
+ * - `inherit`   — Inherit the current text color from the parent.
+ */
+export type SpinnerColor = 'primary' | 'secondary' | 'inverse' | 'inherit';
+/**
+ * Size variant of the Spinner following the T-shirt sizing scale.
+ *
+ * - `xs` — 20 × 20 px
+ * - `s`  — 24 × 24 px
+ * - `m`  — 40 × 40 px
+ * - `l`  — 64 × 64 px
+ * - `xl` — 80 × 80 px
+ */
+export type SpinnerSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export interface SpinnerProps extends ComponentPropsWithRef<'svg'> {
+    /**
+     * Color variant determining which design token is used for the spinner color.
+     * Use `inherit` to follow the parent's `currentColor`.
+     * @default 'primary'
+     */
+    readonly color?: SpinnerColor;
+    /**
+     * Size variant following the T-shirt sizing scale.
+     * @default 'm'
+     */
+    readonly size?: SpinnerSize;
+    /**
+     * Accessible label announced to screen readers.
+     * Defaults to the Finnish word for "Loading" per the design system convention
+     * (ADR-002). Override with a locale-appropriate string when needed.
+     * @default 'Ladataan'
+     */
+    readonly 'aria-label'?: string;
+}
+//# sourceMappingURL=Spinner.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAE3E;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC9D;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAClC"}

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

@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+export type { SpinnerColor, SpinnerProps, SpinnerSize } from './Spinner.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.cjs

@@ -4,13 +4,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Accordion = require("./components/Accordion/Accordion.cjs");
 const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
+const Button = require("./components/Button/Button.cjs");
+const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
 const Label = require("./components/Label/Label.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
+const Pictograph = require("./components/Pictograph/Pictograph.cjs");
+const PictographItem = require("./components/Pictograph/PictographItem.cjs");
+const Spinner = require("./components/Spinner/Spinner.cjs");
 const cn = require("./utils/cn/cn.cjs");
 exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
+exports.Button = Button.Button;
+exports.ColorScheme = ColorScheme.ColorScheme;
 exports.Label = Label.Label;
 exports.Notification = Notification.Notification;
+exports.Pictograph = Pictograph.Pictograph;
+exports.PictographItem = PictographItem.PictographItem;
+exports.Spinner = Spinner.Spinner;
 exports.cn = cn.cn;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

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

package/dist/index.d.ts

@@ -1,13 +1,21 @@
 export { Accordion } from './components/Accordion';
 export { AccordionItem } from './components/AccordionItem';
 export { Breadcrumb } from './components/Breadcrumb';
+export { Button } from './components/Button';
+export { ColorScheme } from './components/ColorScheme';
 export { Notification } from './components/Notification';
 export { Label } from './components/Label';
+export { Pictograph, PictographItem } from './components/Pictograph';
+export { Spinner } from './components/Spinner';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
+export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './components/Button';
+export type { ColorSchemeProps, ColorSchemeValue } from './components/ColorScheme';
 export type { NotificationProps, NotificationVariant } from './components/Notification';
 export type { LabelProps, LabelVariant } from './components/Label';
+export type { PictographItemProps, PictographProps } from './components/Pictograph';
+export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
 export { cn } from './utils';
 export type { CnDictionary, CnInput } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -2,15 +2,25 @@
 import { Accordion } from "./components/Accordion/Accordion.js";
 import { AccordionItem } from "./components/AccordionItem/AccordionItem.js";
 import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
+import { Button } from "./components/Button/Button.js";
+import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
 import { Label } from "./components/Label/Label.js";
 import { Notification } from "./components/Notification/Notification.js";
+import { Pictograph } from "./components/Pictograph/Pictograph.js";
+import { PictographItem } from "./components/Pictograph/PictographItem.js";
+import { Spinner } from "./components/Spinner/Spinner.js";
 import { cn } from "./utils/cn/cn.js";
 export {
   Accordion,
   AccordionItem,
   Breadcrumb,
+  Button,
+  ColorScheme,
   Label,
   Notification,
+  Pictograph,
+  PictographItem,
+  Spinner,
   cn
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/styles/utils/elevation.css

@@ -1,27 +1,27 @@
-@layer dna-design-system {/* 
+@layer dds-components {/* 
  * TODO: Replace local variables (_elevation-semantic-low, high and extra-high) 
  * with official design tokens once elevation tokens are added to the design token set
  */
 
-._elevationLow_1rmn9_6 {
+._elevationLow_4gnft_6 {
     --_elevation-semantic-low: 0px 2px 16px 0px rgba(18, 18, 18, 0.06);
     --_elevation-style: var(--_elevation-semantic-low);
 }
 
-._elevationHigh_1rmn9_11 {
+._elevationHigh_4gnft_11 {
     --_elevation-semantic-high: 0px 4px 24px 0px rgba(18, 18, 18, 0.08);
     --_elevation-style: var(--_elevation-semantic-high);
 }
 
-._elevationExtraHigh_1rmn9_16 {
+._elevationExtraHigh_4gnft_16 {
     --_elevation-semantic-extra-high: 0px 8px 64px 0px rgba(18, 18, 18, 0.16);
     --_elevation-style: var(--_elevation-semantic-extra-high);
 }
 
-._elevationLow_1rmn9_6,
-._elevationHigh_1rmn9_11,
-._elevationExtraHigh_1rmn9_16 {
-    border: var(--borderwidth-semantic-xs) solid var(--colors-semantic-border-neutral-base);
+._elevationLow_4gnft_6,
+._elevationHigh_4gnft_11,
+._elevationExtraHigh_4gnft_16 {
+    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
     box-shadow: var(--_elevation-style);
     border-radius: var(--radius-semantic-md);
 }