@dnanpm/ui-components 0.1.0 → 0.2.0

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target === '_blank';\n        const relTokens = new Set((rel ?? '').split(/\\s+/).filter(Boolean));\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"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,UAAU;AAAA,IACZ,OAAO;AAAA,IACP,OAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAAC,OAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClC,OAAO,WAAW,IAAI,EAAE;AAAA,IACxB,YAAY;AAAA,IACZ,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACF,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAkB,UAAS;AAAA,IAClD,WACG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GAER;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI,KAAK,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC;AAElE,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAO,oBAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,oBAAC,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,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -0,0 +1,24 @@
+require('./Button.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const button = "_button_188fd_1";
+const button__content = "_button__content_188fd_171";
+const button__spinner = "_button__spinner_188fd_179";
+const styles = {
+  button,
+  "button--full-width": "_button--full-width_188fd_18",
+  "button--normal": "_button--normal_188fd_25",
+  "button--small": "_button--small_188fd_32",
+  "button--primary": "_button--primary_188fd_41",
+  "button--secondary": "_button--secondary_188fd_60",
+  "button--tertiary": "_button--tertiary_188fd_85",
+  "button--disabled": "_button--disabled_188fd_105",
+  "button--loading": "_button--loading_188fd_167",
+  button__content,
+  button__spinner
+};
+exports.button = button;
+exports.button__content = button__content;
+exports.button__spinner = button__spinner;
+exports.default = styles;
+//# sourceMappingURL=Button.module.css.cjs.map

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

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

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

@@ -0,0 +1,24 @@
+import './Button.css';
+const button = "_button_188fd_1";
+const button__content = "_button__content_188fd_171";
+const button__spinner = "_button__spinner_188fd_179";
+const styles = {
+  button,
+  "button--full-width": "_button--full-width_188fd_18",
+  "button--normal": "_button--normal_188fd_25",
+  "button--small": "_button--small_188fd_32",
+  "button--primary": "_button--primary_188fd_41",
+  "button--secondary": "_button--secondary_188fd_60",
+  "button--tertiary": "_button--tertiary_188fd_85",
+  "button--disabled": "_button--disabled_188fd_105",
+  "button--loading": "_button--loading_188fd_167",
+  button__content,
+  button__spinner
+};
+export {
+  button,
+  button__content,
+  button__spinner,
+  styles as default
+};
+//# sourceMappingURL=Button.module.css.js.map

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

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

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

@@ -0,0 +1,84 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * Visual variant of the Button.
+ *
+ * - `primary`   — Filled pink background. Main call-to-action.
+ * - `secondary` — Outlined with secondary (plum) border color.
+ * - `tertiary`  — Filled neutral background with a neutral border.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+/**
+ * Size variant of the Button.
+ *
+ * - `normal` — 40px height, 16px bold text.
+ * - `small`  — 32px height, 14px bold text.
+ */
+export type ButtonSize = 'normal' | 'small';
+export interface ButtonLinkProps extends ComponentPropsWithRef<'a'> {
+    readonly href: string;
+    readonly children: ReactNode;
+}
+interface ButtonBaseProps {
+    /**
+     * Visual variant determining colors and border style.
+     * @default 'primary'
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * Whether the button should stretch to fill the available width.
+     * @default false
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * Size variant controlling height and font size.
+     * @default 'normal'
+     */
+    readonly size?: ButtonSize;
+    /**
+     * Whether the button is in a loading state.
+     * When true, the button content remains visible and a spinner is shown.
+     * The button remains non-interactive during loading.
+     * @default false
+     */
+    readonly loading?: boolean;
+}
+export type ButtonAsButton = ButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof ButtonBaseProps> & {
+    /** When omitted, the element renders as a `<button>`. */
+    readonly href?: never;
+    /** Anchor-only props are intentionally unsupported in button mode. */
+    readonly target?: never;
+    readonly rel?: never;
+    readonly renderLink?: never;
+};
+export type ButtonAsAnchor = ButtonBaseProps & Omit<ComponentPropsWithRef<'a'>, keyof ButtonBaseProps> & {
+    /** When `href` is provided, the element renders as an `<a>`. */
+    readonly href: string;
+    /** Button-only props are intentionally unsupported in anchor mode. */
+    readonly disabled?: never;
+    readonly type?: never;
+    readonly name?: never;
+    /**
+     * Custom render function for the link element. Use this to integrate with
+     * client-side routing libraries like Next.js or React Router.
+     *
+     * @example
+     * // Next.js
+     * import Link from 'next/link';
+     * <Button href="/page" renderLink={(props) => <Link {...props} />}>Navigate</Button>
+     *
+     * @example
+     * // React Router
+     * import { Link } from 'react-router-dom';
+     * <Button href="/page" renderLink={({ href, ...props }) => <Link to={href} {...props} />}>Navigate</Button>
+     */
+    readonly renderLink?: (props: ButtonLinkProps) => ReactNode;
+};
+/**
+ * Props for the Button component.
+ *
+ * When `href` is provided the component renders as an `<a>` element;
+ * otherwise it renders as a `<button>`.
+ */
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+export {};
+//# sourceMappingURL=Button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC/D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IAC3D,yDAAyD;IACzD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IACtD,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './Button.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/ColorScheme/ColorScheme.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const cn = require("../../utils/cn/cn.cjs");
+const ColorScheme = ({ scheme, className, children, ref, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, "data-color-scheme": scheme, className: cn.cn(className), children });
+};
+exports.ColorScheme = ColorScheme;
+//# sourceMappingURL=ColorScheme.cjs.map

package/dist/components/ColorScheme/ColorScheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.cjs","sources":["../../../src/components/ColorScheme/ColorScheme.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport type { ColorSchemeProps } from './ColorScheme.types';\n\nexport const ColorScheme = ({ scheme, className, children, ref, ...props }: ColorSchemeProps) => {\n    return (\n        <div ref={ref} {...props} data-color-scheme={scheme} className={cn(className)}>\n            {children}\n        </div>\n    );\n};\n"],"names":["jsx","cn"],"mappings":";;;;AAGO,MAAM,cAAc,CAAC,EAAE,QAAQ,WAAW,UAAU,KAAK,GAAG,YAA8B;AAC7F,SACIA,2BAAAA,IAAC,OAAA,EAAI,KAAW,GAAG,OAAO,qBAAmB,QAAQ,WAAWC,GAAAA,GAAG,SAAS,GACvE,SAAA,CACL;AAER;;"}

package/dist/components/ColorScheme/ColorScheme.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.d.ts","sourceRoot":"","sources":["../../../src/components/ColorScheme/ColorScheme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,WAAW,GAAI,gDAAgD,gBAAgB,4CAM3F,CAAC"}

package/dist/components/ColorScheme/ColorScheme.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn/cn.js";
+const ColorScheme = ({ scheme, className, children, ref, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { ref, ...props, "data-color-scheme": scheme, className: cn(className), children });
+};
+export {
+  ColorScheme
+};
+//# sourceMappingURL=ColorScheme.js.map

package/dist/components/ColorScheme/ColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.js","sources":["../../../src/components/ColorScheme/ColorScheme.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport type { ColorSchemeProps } from './ColorScheme.types';\n\nexport const ColorScheme = ({ scheme, className, children, ref, ...props }: ColorSchemeProps) => {\n    return (\n        <div ref={ref} {...props} data-color-scheme={scheme} className={cn(className)}>\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;AAGO,MAAM,cAAc,CAAC,EAAE,QAAQ,WAAW,UAAU,KAAK,GAAG,YAA8B;AAC7F,SACI,oBAAC,OAAA,EAAI,KAAW,GAAG,OAAO,qBAAmB,QAAQ,WAAW,GAAG,SAAS,GACvE,SAAA,CACL;AAER;"}

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

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from 'react';
+export type ColorSchemeValue = 'light' | 'dark';
+export interface ColorSchemeProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * The color scheme to apply to children.
+     * Components within will adapt their colors accordingly.
+     */
+    readonly scheme: ColorSchemeValue;
+}
+//# sourceMappingURL=ColorScheme.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.types.d.ts","sourceRoot":"","sources":["../../../src/components/ColorScheme/ColorScheme.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;CACrC"}

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

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

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

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

package/dist/components/Label/Label.cjs

@@ -1,10 +1,9 @@
 "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) {
+const Label = ({ variant = "default", className, children, ref, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -14,7 +13,6 @@ const Label = react.forwardRef(function Label2({ variant = "default", className,
       children
     }
   );
-});
-Label.displayName = "Label";
+};
 exports.Label = Label;
 //# sourceMappingURL=Label.cjs.map

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

@@ -1 +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;;"}
+{"version":3,"file":"Label.cjs","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Label.module.css';\nimport type { LabelProps } from './Label.types';\n\nexport const Label = ({ variant = 'default', className, children, ref, ...props }: LabelProps) => {\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"],"names":["jsx","cn","styles"],"mappings":";;;;;AAIO,MAAM,QAAQ,CAAC,EAAE,UAAU,WAAW,WAAW,UAAU,KAAK,GAAG,YAAwB;AAC9F,SACIA,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;;"}

package/dist/components/Label/Label.css

@@ -1,40 +1,38 @@
-@layer dna-design-system {._label_sogft_1 {
+@layer dna-design-system {._label_1bsev_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;
+    font: var(--typography-label-md-bold);
     text-align: center;
     text-transform: uppercase;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--colors-semantic-foreground-default);
+    color: var(--color-semantic-foreground-default);
 }
 
-._label--default_sogft_17 {
-    background-color: var(--colors-semantic-surface-base);
+._label--default_1bsev_15 {
+    background-color: var(--color-semantic-surface-base);
 }
 
-._label--campaign_sogft_21 {
-    background-color: var(--colors-semantic-surface-primary-mid);
+._label--campaign_1bsev_19 {
+    background-color: var(--color-semantic-surface-primary-mid);
 }
 
-._label--new_sogft_25 {
-    background-color: var(--colors-semantic-accent-lemon-500);
+._label--new_1bsev_23 {
+    background-color: var(--color-semantic-accent-lemon-strong);
 }
 
-._label--presale_sogft_29 {
-    background-color: var(--colors-semantic-accent-orange-500);
+._label--presale_1bsev_27 {
+    background-color: var(--color-semantic-accent-orange-strong);
 }
 
-._label--soldout_sogft_33 {
-    background-color: var(--colors-semantic-surface-neutral-strong);
+._label--soldout_1bsev_31 {
+    background-color: var(--color-semantic-surface-neutral-strong);
 }
 
-._label--other_sogft_37 {
-    background-color: var(--colors-semantic-accent-sky-500);
+._label--other_1bsev_35 {
+    background-color: var(--color-semantic-accent-sky-strong);
 }
 }

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

@@ -1,3 +1,3 @@
 import { LabelProps } from './Label.types';
-export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const Label: ({ variant, className, children, ref, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,GAAI,iDAA6D,UAAU,4CAU5F,CAAC"}

package/dist/components/Label/Label.js

@@ -1,8 +1,7 @@
 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) {
+const Label = ({ variant = "default", className, children, ref, ...props }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -12,8 +11,7 @@ const Label = forwardRef(function Label2({ variant = "default", className, child
       children
     }
   );
-});
-Label.displayName = "Label";
+};
 export {
   Label
 };

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

@@ -1 +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;"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Label.module.css';\nimport type { LabelProps } from './Label.types';\n\nexport const Label = ({ variant = 'default', className, children, ref, ...props }: LabelProps) => {\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"],"names":[],"mappings":";;;AAIO,MAAM,QAAQ,CAAC,EAAE,UAAU,WAAW,WAAW,UAAU,KAAK,GAAG,YAAwB;AAC9F,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;"}

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

@@ -1,15 +1,15 @@
 require('./Label.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const label = "_label_sogft_1";
+const label = "_label_1bsev_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"
+  "label--default": "_label--default_1bsev_15",
+  "label--campaign": "_label--campaign_1bsev_19",
+  "label--new": "_label--new_1bsev_23",
+  "label--presale": "_label--presale_1bsev_27",
+  "label--soldout": "_label--soldout_1bsev_31",
+  "label--other": "_label--other_1bsev_35"
 };
 exports.default = styles;
 exports.label = label;

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

@@ -1,13 +1,13 @@
 import './Label.css';
-const label = "_label_sogft_1";
+const label = "_label_1bsev_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"
+  "label--default": "_label--default_1bsev_15",
+  "label--campaign": "_label--campaign_1bsev_19",
+  "label--new": "_label--new_1bsev_23",
+  "label--presale": "_label--presale_1bsev_27",
+  "label--soldout": "_label--soldout_1bsev_31",
+  "label--other": "_label--other_1bsev_35"
 };
 export {
   styles as default,

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

@@ -10,7 +10,7 @@ import type * as React from 'react';
  * - `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'> {
+export interface LabelProps extends React.ComponentPropsWithRef<'span'> {
     /**
      * The visible text content of the label.
      */
@@ -20,9 +20,5 @@ export interface LabelProps extends React.ComponentPropsWithoutRef<'span'> {
      * @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

@@ -1 +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"}
+{"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,qBAAqB,CAAC,MAAM,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;CACnC"}

package/dist/components/Notification/Notification.cjs

@@ -1,7 +1,6 @@
 "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");
@@ -18,24 +17,25 @@ const variantRoles = {
   warning: "alert",
   error: "alert"
 };
-const Notification = react.forwardRef(function Notification2({
+const Notification = ({
   variant,
   children,
   closable = false,
   onClose,
   closeLabel = "Sulje ilmoitus",
   className,
+  ref,
   ...props
-}, ref) {
+}) => {
   const Icon = variantIcons[variant];
   const role = variantRoles[variant];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ...props,
       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 }),
@@ -52,7 +52,6 @@ const Notification = react.forwardRef(function Notification2({
       ]
     }
   );
-});
-Notification.displayName = "Notification";
+};
 exports.Notification = Notification;
 //# sourceMappingURL=Notification.cjs.map

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

@@ -1 +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;;"}
+{"version":3,"file":"Notification.cjs","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, 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 = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\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"],"names":["Info","Check","Warning","ErrorIcon","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,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA,GAAGC,oBAAAA,QAAO,cAAcA,oBAAAA,QAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,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;;"}

package/dist/components/Notification/Notification.css

@@ -5,7 +5,7 @@
  * These variables come from @dnanpm/design-tokens package.
  */
 
-._notification_1glup_8 {
+._notification_5h3rs_8 {
     display: flex;
     align-items: center;
     gap: var(--spacing-ui-md);
@@ -16,24 +16,24 @@
 }
 
 /* Variant colors */
-._notification--info_1glup_19 {
-    --notification-color: var(--colors-semantic-status-info);
+._notification--info_5h3rs_19 {
+    --notification-color: var(--color-semantic-status-info);
 }
 
-._notification--success_1glup_23 {
-    --notification-color: var(--colors-semantic-status-success);
+._notification--success_5h3rs_23 {
+    --notification-color: var(--color-semantic-status-success);
 }
 
-._notification--warning_1glup_27 {
-    --notification-color: var(--colors-semantic-status-warning);
+._notification--warning_5h3rs_27 {
+    --notification-color: var(--color-semantic-status-warning);
 }
 
-._notification--error_1glup_31 {
-    --notification-color: var(--colors-semantic-status-error);
+._notification--error_5h3rs_31 {
+    --notification-color: var(--color-semantic-status-error);
 }
 
 /* Icon container */
-._notification__icon-container_1glup_36 {
+._notification__icon-container_5h3rs_36 {
     /* The colored area size should be 48x48px on one line content, so we adjust padding based on whether the border is present or not */
     --_icon-padding-with-border: 10px;
     --_icon-padding-without-border: 12px;
@@ -46,28 +46,27 @@
     padding: var(--_icon-padding-with-border) var(--_icon-padding-without-border)
         var(--_icon-padding-with-border) var(--_icon-padding-with-border);
     background-color: var(--notification-color);
-    color: var(--colors-semantic-foreground-inverse);
+    color: var(--color-semantic-foreground-inverse);
 }
 
-._notification__icon_1glup_36 {
+._notification__icon_5h3rs_36 {
     width: 24px;
     height: 24px;
     flex: 0 0 auto;
 }
 
 /* Content */
-._notification__content_1glup_59 {
+._notification__content_5h3rs_59 {
     flex: 1 1 auto;
     min-width: 0;
     padding: var(--spacing-ui-xs) 0;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: var(--colors-semantic-foreground-default);
+    font: var(--typography-body-md);
+    color: var(--color-semantic-foreground-default);
     text-wrap: pretty;
 }
 
 /* Close button */
-._notification__close_1glup_70 {
+._notification__close_5h3rs_69 {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -80,11 +79,11 @@
     border: none;
     border-radius: var(--radius-semantic-sm);
     background: none;
-    color: var(--colors-semantic-foreground-default);
+    color: var(--color-semantic-foreground-default);
     cursor: pointer;
 }
 
-._notification__close_1glup_70 svg {
+._notification__close_5h3rs_69 svg {
     width: 24px;
     height: 24px;
 }

package/dist/components/Notification/Notification.d.ts

@@ -1,3 +1,3 @@
 import { NotificationProps } from './Notification.types';
-export declare const Notification: import('react').ForwardRefExoticComponent<NotificationProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Notification: ({ variant, children, closable, onClose, closeLabel, className, ref, ...props }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Notification.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,8GAsCvB,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,GAAI,gFAS1B,iBAAiB,4CA2BnB,CAAC"}