@dnanpm/ui-components 0.9.0 → 0.10.0

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1,323 @@
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._checkbox_ndpjl_1 {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--spacing-space-8);
+    align-items: start;
+    max-width: 100%;
+    color: var(--color-semantic-foreground-default);
+}
+
+/* === Control (box and icons stacked in one grid cell) === */
+
+._checkbox__control_ndpjl_12 {
+    --_checkbox-box-size: 20px;
+    --_checkbox-icon-size: 16px;
+    --_checkbox-accent: var(--color-semantic-interactive-primary-default);
+    --_checkbox-border: var(--color-semantic-border-neutral-strong);
+
+    display: grid;
+    grid-row: 1;
+    grid-column: 1;
+    place-items: center;
+    width: var(--_checkbox-box-size);
+
+    /* One label line is 24 px tall, so the box centres on the first line. */
+    height: var(--spacing-space-24);
+}
+
+._checkbox__control_ndpjl_12 > * {
+    grid-area: 1 / 1;
+}
+
+/* Hover and focus look the same as default. Focus only adds the shared focus ring. */
+/* Error also replaces the accent, so checked fills and indeterminate outlines turn red too. */
+._checkbox--error_ndpjl_34 ._checkbox__control_ndpjl_12 {
+    --_checkbox-accent: var(--color-semantic-border-error);
+    --_checkbox-border: var(--color-semantic-border-error);
+}
+
+._checkbox__input_ndpjl_39 {
+    width: var(--_checkbox-box-size);
+    height: var(--_checkbox-box-size);
+    margin: 0;
+    appearance: none;
+    cursor: pointer;
+    background-color: var(--color-semantic-surface-base);
+
+    /* Keeps semi-transparent disabled colours from stacking under the border. */
+    background-clip: padding-box;
+    border: var(--borderwidth-semantic-sm) solid var(--_checkbox-border);
+    border-radius: var(--radius-semantic-sm);
+}
+
+._checkbox__input_ndpjl_39:checked {
+    background-color: var(--_checkbox-accent);
+    border-color: var(--_checkbox-accent);
+}
+
+._checkbox__input_ndpjl_39:indeterminate {
+    background-color: var(--color-semantic-surface-base);
+    border-color: var(--_checkbox-accent);
+}
+
+._checkbox__input_ndpjl_39:disabled {
+    cursor: default;
+    background-color: var(--color-semantic-border-neutral-base);
+    border-color: var(--color-semantic-border-neutral-mid);
+}
+
+._checkbox__input_ndpjl_39:disabled:checked {
+    background-color: var(--color-semantic-interactive-primary-disabled);
+    border-color: var(--color-semantic-interactive-primary-disabled);
+}
+
+._checkbox__input_ndpjl_39:disabled:indeterminate {
+    background-color: var(--color-semantic-surface-base);
+    border-color: var(--color-semantic-interactive-primary-disabled);
+}
+
+/* === Icons === */
+
+._checkbox__icon_ndpjl_81 {
+    display: none;
+    width: var(--_checkbox-icon-size);
+    height: var(--_checkbox-icon-size);
+    pointer-events: none;
+}
+
+._checkbox__icon--check_ndpjl_88 {
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._checkbox__icon--minus_ndpjl_92 {
+    color: var(--_checkbox-accent);
+}
+
+._checkbox__input_ndpjl_39:checked ~ ._checkbox__icon--check_ndpjl_88,
+._checkbox__input_ndpjl_39:indeterminate ~ ._checkbox__icon--minus_ndpjl_92 {
+    display: block;
+}
+
+._checkbox__input_ndpjl_39:indeterminate ~ ._checkbox__icon--check_ndpjl_88 {
+    display: none;
+}
+
+._checkbox__input_ndpjl_39:disabled ~ ._checkbox__icon--minus_ndpjl_92 {
+    color: var(--color-semantic-interactive-primary-disabled);
+}
+
+/* === Text === */
+
+._checkbox__label_ndpjl_111 {
+    grid-row: 1;
+    grid-column: 2;
+
+    /* Centres the first line in the 24 px row, also when the label wraps. */
+    padding-block: calc((var(--spacing-space-24) - 1lh) / 2);
+    font: var(--typography-label-lg);
+    overflow-wrap: anywhere;
+    cursor: pointer;
+}
+
+._checkbox__required_ndpjl_122 {
+    margin-inline-start: var(--spacing-space-4);
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._checkbox_ndpjl_1:has(._checkbox__input_ndpjl_39:disabled) ._checkbox__label_ndpjl_111 {
+    color: var(--color-semantic-foreground-muted);
+    cursor: default;
+}
+
+._checkbox_ndpjl_1:has(._checkbox__input_ndpjl_39:disabled) ._checkbox__required_ndpjl_122 {
+    color: inherit;
+}
+
+._checkbox__description_ndpjl_136,
+._checkbox__error_ndpjl_137 {
+    grid-column: 2;
+    font: var(--typography-body-sm);
+    overflow-wrap: anywhere;
+}
+
+._checkbox__description_ndpjl_136 {
+    color: var(--color-semantic-foreground-muted);
+}
+
+._checkbox__error_ndpjl_137 {
+    margin-block-start: var(--spacing-space-4);
+    color: var(--color-semantic-foreground-status-error);
+}
+
+/* === Visually hidden (same as ButtonCard) === */
+
+._checkbox__sr-only_ndpjl_154 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+}
+
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._checkbox_ndpjl_1 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._checkbox__required_ndpjl_122 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._checkbox_ndpjl_1:has(._checkbox__input_ndpjl_39:disabled) ._checkbox__label_ndpjl_111,
+    ._checkbox__description_ndpjl_136 {
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    /* Inverse interactive tokens, like Button and Pill on dark surfaces. */
+    ._checkbox__control_ndpjl_12 {
+        --_checkbox-accent: var(--color-semantic-interactive-inverse-default);
+        --_checkbox-border: var(--color-semantic-interactive-inverse-default);
+    }
+
+    ._checkbox__input_ndpjl_39:not(:checked, :disabled),
+    ._checkbox__input_ndpjl_39:indeterminate:not(:disabled) {
+        background-color: transparent;
+    }
+
+    ._checkbox__input_ndpjl_39:disabled:not(:checked) {
+        background-color: transparent;
+        border-color: var(--color-semantic-interactive-inverse-disabled);
+    }
+
+    ._checkbox__input_ndpjl_39:disabled:checked {
+        background-color: var(--color-semantic-interactive-inverse-disabled);
+        border-color: var(--color-semantic-interactive-inverse-disabled);
+    }
+
+    /* After the disabled checked rule, so a mixed state stays hollow. */
+    ._checkbox__input_ndpjl_39:disabled:indeterminate {
+        background-color: transparent;
+        border-color: var(--color-semantic-interactive-inverse-disabled);
+    }
+
+    ._checkbox__icon--check_ndpjl_88 {
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    /* The check sits on the red error fill, not on the white accent fill. */
+    ._checkbox--error_ndpjl_34 ._checkbox__icon--check_ndpjl_88 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._checkbox__input_ndpjl_39:disabled ~ ._checkbox__icon--check_ndpjl_88 {
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._checkbox__input_ndpjl_39:disabled ~ ._checkbox__icon--minus_ndpjl_92 {
+        color: var(--color-semantic-interactive-inverse-disabled);
+    }
+
+    /*
+     * TODO: red error text and border are only about 2.5:1 on dark surfaces.
+     * Needs a unified token solution across components (for example an error-inverse colour).
+     */
+
+    /* Scoped dark rules beat the unscoped block below, so forced colors are repeated here. */
+    @media (forced-colors: active) {
+        ._checkbox__input_ndpjl_39 {
+            background-color: Canvas;
+            border-color: CanvasText;
+        }
+
+        ._checkbox__input_ndpjl_39:checked {
+            background-color: Highlight;
+            border-color: Highlight;
+        }
+
+        ._checkbox__input_ndpjl_39:indeterminate {
+            background-color: Canvas;
+            border-color: Highlight;
+        }
+
+        ._checkbox__icon--check_ndpjl_88,
+        ._checkbox--error_ndpjl_34 ._checkbox__icon--check_ndpjl_88 {
+            color: HighlightText;
+        }
+
+        ._checkbox__icon--minus_ndpjl_92 {
+            color: Highlight;
+        }
+
+        ._checkbox__input_ndpjl_39:disabled,
+        ._checkbox__input_ndpjl_39:disabled:checked,
+        ._checkbox__input_ndpjl_39:disabled:indeterminate {
+            background-color: Canvas;
+            border-color: GrayText;
+        }
+
+        ._checkbox__input_ndpjl_39:disabled ~ ._checkbox__icon_ndpjl_81 {
+            color: GrayText;
+        }
+
+        ._checkbox_ndpjl_1:has(._checkbox__input_ndpjl_39:disabled) ._checkbox__label_ndpjl_111 {
+            color: GrayText;
+        }
+
+        ._checkbox__error_ndpjl_137 {
+            color: CanvasText;
+        }
+    }
+}
+
+@media (forced-colors: active) {
+    ._checkbox__input_ndpjl_39 {
+        background-color: Canvas;
+        border-color: CanvasText;
+    }
+
+    ._checkbox__input_ndpjl_39:checked {
+        background-color: Highlight;
+        border-color: Highlight;
+    }
+
+    ._checkbox__input_ndpjl_39:indeterminate {
+        background-color: Canvas;
+        border-color: Highlight;
+    }
+
+    ._checkbox__icon--check_ndpjl_88 {
+        color: HighlightText;
+    }
+
+    ._checkbox__icon--minus_ndpjl_92 {
+        color: Highlight;
+    }
+
+    ._checkbox__input_ndpjl_39:disabled,
+    ._checkbox__input_ndpjl_39:disabled:checked,
+    ._checkbox__input_ndpjl_39:disabled:indeterminate {
+        background-color: Canvas;
+        border-color: GrayText;
+    }
+
+    ._checkbox__input_ndpjl_39:disabled ~ ._checkbox__icon_ndpjl_81 {
+        color: GrayText;
+    }
+
+    ._checkbox_ndpjl_1:has(._checkbox__input_ndpjl_39:disabled) ._checkbox__label_ndpjl_111 {
+        color: GrayText;
+    }
+
+    ._checkbox__error_ndpjl_137 {
+        color: CanvasText;
+    }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from './Checkbox.types';
+export declare const Checkbox: ({ label, showLabel, description, indeterminate, error, errorMessage, onCheckedChange, onChange, id, className, style, disabled, required, ref, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,eAAO,MAAM,QAAQ,GAAI,6NAkBtB,aAAa,4CAoFf,CAAC"}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CheckFilled, MinusFilled } from "@dnanpm/icons";
+import { useId } from "react";
+import { focusStyles } from "../../styles/utils/index.js";
+import styles from "./Checkbox.module.css.js";
+import { isRenderable } from "../../utils/isRenderable/isRenderable.js";
+import { cn } from "../../utils/cn/cn.js";
+const Checkbox = ({
+  label,
+  showLabel = true,
+  description,
+  indeterminate = false,
+  error = false,
+  errorMessage,
+  onCheckedChange,
+  onChange,
+  id,
+  className,
+  style,
+  disabled,
+  required,
+  ref,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) => {
+  const generatedId = useId();
+  const descriptionId = useId();
+  const errorId = useId();
+  const inputId = id ?? generatedId;
+  const hasDescription = isRenderable(description);
+  const hasErrorMessage = error && isRenderable(errorMessage);
+  const describedBy = [
+    hasDescription ? descriptionId : void 0,
+    hasErrorMessage ? errorId : void 0,
+    ariaDescribedBy
+  ].filter(Boolean).join(" ") || void 0;
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.target.checked);
+    event.target.indeterminate = indeterminate;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(styles["checkbox"], error && styles["checkbox--error"], className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: styles["checkbox__control"], children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              ref: (node) => {
+                if (node) node.indeterminate = indeterminate;
+                if (typeof ref === "function") return ref(node);
+                if (ref) ref.current = node;
+                return void 0;
+              },
+              type: "checkbox",
+              id: inputId,
+              className: cn(styles["checkbox__input"], focusStyles.focusable),
+              disabled,
+              required,
+              "aria-describedby": describedBy,
+              "aria-invalid": ariaInvalid ?? (error || void 0),
+              onChange: handleChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CheckFilled,
+            {
+              "aria-hidden": "true",
+              className: cn(styles["checkbox__icon"], styles["checkbox__icon--check"])
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MinusFilled,
+            {
+              "aria-hidden": "true",
+              className: cn(styles["checkbox__icon"], styles["checkbox__icon--minus"])
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(styles["checkbox__label"], !showLabel && styles["checkbox__sr-only"]),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: styles["checkbox__required"], "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ),
+        hasDescription && /* @__PURE__ */ jsx("div", { id: descriptionId, className: styles["checkbox__description"], children: description }),
+        hasErrorMessage && /* @__PURE__ */ jsx("div", { id: errorId, className: styles["checkbox__error"], children: errorMessage })
+      ]
+    }
+  );
+};
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckFilled, MinusFilled } from '@dnanpm/icons';\nimport { useId } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { focusStyles } from '../../styles/utils';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport type { CheckboxProps } from './Checkbox.types';\nimport styles from './Checkbox.module.css';\n\nexport const Checkbox = ({\n    label,\n    showLabel = true,\n    description,\n    indeterminate = false,\n    error = false,\n    errorMessage,\n    onCheckedChange,\n    onChange,\n    id,\n    className,\n    style,\n    disabled,\n    required,\n    ref,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    ...props\n}: CheckboxProps) => {\n    const generatedId = useId();\n    const descriptionId = useId();\n    const errorId = useId();\n    const inputId = id ?? generatedId;\n\n    const hasDescription = isRenderable(description);\n    const hasErrorMessage = error && isRenderable(errorMessage);\n\n    const describedBy =\n        [\n            hasDescription ? descriptionId : undefined,\n            hasErrorMessage ? errorId : undefined,\n            ariaDescribedBy,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined;\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event);\n        onCheckedChange?.(event.target.checked);\n        // The browser clears `indeterminate` on click. Restore it from the prop, so it stays\n        // until the consumer sets the prop to false, even when nothing re-renders.\n        event.target.indeterminate = indeterminate;\n    };\n\n    return (\n        <div\n            className={cn(styles['checkbox'], error && styles['checkbox--error'], className)}\n            style={style}\n        >\n            <span className={styles['checkbox__control']}>\n                <input\n                    {...props}\n                    ref={(node) => {\n                        // `indeterminate` has no HTML attribute, so it is set on the DOM node.\n                        // The inline callback runs on every render, so a changed prop is applied.\n                        // A cleanup function returned by a callback ref is passed on to React.\n                        if (node) node.indeterminate = indeterminate;\n                        if (typeof ref === 'function') return ref(node);\n                        if (ref) ref.current = node;\n                        return undefined;\n                    }}\n                    type=\"checkbox\"\n                    id={inputId}\n                    className={cn(styles['checkbox__input'], focusStyles.focusable)}\n                    disabled={disabled}\n                    required={required}\n                    aria-describedby={describedBy}\n                    aria-invalid={ariaInvalid ?? (error || undefined)}\n                    onChange={handleChange}\n                />\n                <CheckFilled\n                    aria-hidden=\"true\"\n                    className={cn(styles['checkbox__icon'], styles['checkbox__icon--check'])}\n                />\n                <MinusFilled\n                    aria-hidden=\"true\"\n                    className={cn(styles['checkbox__icon'], styles['checkbox__icon--minus'])}\n                />\n            </span>\n            <label\n                htmlFor={inputId}\n                className={cn(styles['checkbox__label'], !showLabel && styles['checkbox__sr-only'])}\n            >\n                {label}\n                {required && (\n                    <span className={styles['checkbox__required']} aria-hidden=\"true\">\n                        *\n                    </span>\n                )}\n            </label>\n            {hasDescription && (\n                <div id={descriptionId} className={styles['checkbox__description']}>\n                    {description}\n                </div>\n            )}\n            {hasErrorMessage && (\n                <div id={errorId} className={styles['checkbox__error']}>\n                    {errorMessage}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,WAAW,CAAC;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,GAAG;AACP,MAAqB;AACjB,QAAM,cAAc,MAAA;AACpB,QAAM,gBAAgB,MAAA;AACtB,QAAM,UAAU,MAAA;AAChB,QAAM,UAAU,MAAM;AAEtB,QAAM,iBAAiB,aAAa,WAAW;AAC/C,QAAM,kBAAkB,SAAS,aAAa,YAAY;AAE1D,QAAM,cACF;AAAA,IACI,iBAAiB,gBAAgB;AAAA,IACjC,kBAAkB,UAAU;AAAA,IAC5B;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAEtB,QAAM,eAAe,CAAC,UAAyC;AAC3D,eAAW,KAAK;AAChB,sBAAkB,MAAM,OAAO,OAAO;AAGtC,UAAM,OAAO,gBAAgB;AAAA,EACjC;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,GAAG,OAAO,UAAU,GAAG,SAAS,OAAO,iBAAiB,GAAG,SAAS;AAAA,MAC/E;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,mBAAmB,GACvC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACI,GAAG;AAAA,cACJ,KAAK,CAAC,SAAS;AAIX,oBAAI,WAAW,gBAAgB;AAC/B,oBAAI,OAAO,QAAQ,WAAY,QAAO,IAAI,IAAI;AAC9C,oBAAI,SAAS,UAAU;AACvB,uBAAO;AAAA,cACX;AAAA,cACA,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,WAAW,GAAG,OAAO,iBAAiB,GAAG,YAAY,SAAS;AAAA,cAC9D;AAAA,cACA;AAAA,cACA,oBAAkB;AAAA,cAClB,gBAAc,gBAAgB,SAAS;AAAA,cACvC,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW,GAAG,OAAO,gBAAgB,GAAG,OAAO,uBAAuB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAE3E;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW,GAAG,OAAO,gBAAgB,GAAG,OAAO,uBAAuB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3E,GACJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,SAAS;AAAA,YACT,WAAW,GAAG,OAAO,iBAAiB,GAAG,CAAC,aAAa,OAAO,mBAAmB,CAAC;AAAA,YAEjF,UAAA;AAAA,cAAA;AAAA,cACA,gCACI,QAAA,EAAK,WAAW,OAAO,oBAAoB,GAAG,eAAY,QAAO,UAAA,IAAA,CAElE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGP,sCACI,OAAA,EAAI,IAAI,eAAe,WAAW,OAAO,uBAAuB,GAC5D,UAAA,YAAA,CACL;AAAA,QAEH,uCACI,OAAA,EAAI,IAAI,SAAS,WAAW,OAAO,iBAAiB,GAChD,UAAA,aAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

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

@@ -0,0 +1,35 @@
+require('./Checkbox.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const checkbox = "_checkbox_ndpjl_1";
+const checkbox__control = "_checkbox__control_ndpjl_12";
+const checkbox__input = "_checkbox__input_ndpjl_39";
+const checkbox__icon = "_checkbox__icon_ndpjl_81";
+const checkbox__label = "_checkbox__label_ndpjl_111";
+const checkbox__required = "_checkbox__required_ndpjl_122";
+const checkbox__description = "_checkbox__description_ndpjl_136";
+const checkbox__error = "_checkbox__error_ndpjl_137";
+const styles = {
+  checkbox,
+  checkbox__control,
+  "checkbox--error": "_checkbox--error_ndpjl_34",
+  checkbox__input,
+  checkbox__icon,
+  "checkbox__icon--check": "_checkbox__icon--check_ndpjl_88",
+  "checkbox__icon--minus": "_checkbox__icon--minus_ndpjl_92",
+  checkbox__label,
+  checkbox__required,
+  checkbox__description,
+  checkbox__error,
+  "checkbox__sr-only": "_checkbox__sr-only_ndpjl_154"
+};
+exports.checkbox = checkbox;
+exports.checkbox__control = checkbox__control;
+exports.checkbox__description = checkbox__description;
+exports.checkbox__error = checkbox__error;
+exports.checkbox__icon = checkbox__icon;
+exports.checkbox__input = checkbox__input;
+exports.checkbox__label = checkbox__label;
+exports.checkbox__required = checkbox__required;
+exports.default = styles;
+//# sourceMappingURL=Checkbox.module.css.cjs.map

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

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

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

@@ -0,0 +1,35 @@
+import './Checkbox.css';
+const checkbox = "_checkbox_ndpjl_1";
+const checkbox__control = "_checkbox__control_ndpjl_12";
+const checkbox__input = "_checkbox__input_ndpjl_39";
+const checkbox__icon = "_checkbox__icon_ndpjl_81";
+const checkbox__label = "_checkbox__label_ndpjl_111";
+const checkbox__required = "_checkbox__required_ndpjl_122";
+const checkbox__description = "_checkbox__description_ndpjl_136";
+const checkbox__error = "_checkbox__error_ndpjl_137";
+const styles = {
+  checkbox,
+  checkbox__control,
+  "checkbox--error": "_checkbox--error_ndpjl_34",
+  checkbox__input,
+  checkbox__icon,
+  "checkbox__icon--check": "_checkbox__icon--check_ndpjl_88",
+  "checkbox__icon--minus": "_checkbox__icon--minus_ndpjl_92",
+  checkbox__label,
+  checkbox__required,
+  checkbox__description,
+  checkbox__error,
+  "checkbox__sr-only": "_checkbox__sr-only_ndpjl_154"
+};
+export {
+  checkbox,
+  checkbox__control,
+  checkbox__description,
+  checkbox__error,
+  checkbox__icon,
+  checkbox__input,
+  checkbox__label,
+  checkbox__required,
+  styles as default
+};
+//# sourceMappingURL=Checkbox.module.css.js.map

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

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

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

@@ -0,0 +1,47 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * Native checkbox input props go to the `<input>`, including `ref`, `id`, `name`,
+ * `value`, `checked`, `defaultChecked`, `disabled` and `required`.
+ * `className` and `style` go to the root element.
+ */
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'children'> {
+    /**
+     * Visible label and accessible name. Plain text only: links and other interactive
+     * content inside a label cause accessibility problems. Put a link in `description` instead.
+     * Always provide text: an empty or blank label leaves the checkbox without a name.
+     */
+    readonly label: string;
+    /**
+     * Whether the label is visible. When `false`, the label is hidden visually but
+     * still names the checkbox for assistive technology. Use only in special cases:
+     * without a visible label, only the checkbox itself can be clicked, which is a small target.
+     * @default true
+     */
+    readonly showLabel?: boolean;
+    /**
+     * Supporting text below the label. Linked to the checkbox with `aria-describedby`.
+     * Can contain a link, for example to the terms. Links are not allowed in `label`.
+     */
+    readonly description?: ReactNode;
+    /**
+     * Shows the mixed state, for a checkbox that stands for a group where only some items
+     * are selected. Controlled: update it in `onCheckedChange`.
+     * @default false
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Marks the checkbox as invalid and shows `errorMessage`. Always provide an
+     * `errorMessage` too, so the error is not shown by colour alone.
+     * @default false
+     */
+    readonly error?: boolean;
+    /**
+     * Error text shown below the label when `error` is `true`. Explain how to fix the problem.
+     */
+    readonly errorMessage?: ReactNode;
+    /**
+     * Called with the new checked value when the user changes the checkbox. Runs after `onChange`.
+     */
+    readonly onCheckedChange?: (checked: boolean) => void;
+}
+//# sourceMappingURL=Checkbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5F;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/ContentCard/ContentCard.cjs

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const ContentCard_module = require("./ContentCard.module.css.cjs");
+const isRenderable = require("../../utils/isRenderable/isRenderable.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const logoBackgroundToken = {
   white: "var(--color-semantic-surface-base)",
@@ -17,7 +18,6 @@ const logoBackgroundToken = {
   "plum-mid": "var(--color-semantic-surface-secondary-mid)",
   "plum-strong": "var(--color-semantic-surface-secondary-strong)"
 };
-const isRenderable = (node) => node != null && typeof node !== "boolean";
 const ContentCard = ({
   media,
   mediaKind = "image",
@@ -38,7 +38,7 @@ const ContentCard = ({
   const titleId = react.useId();
   const HeadingLevel = headingLevel;
   const Root = as;
-  const hasMedia = isRenderable(media);
+  const hasMedia = isRenderable.isRenderable(media);
   const ariaLabel = props["aria-label"];
   const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel || as === "div" ? void 0 : titleId);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -46,13 +46,14 @@ const ContentCard = ({
     {
       ref,
       ...props,
+      "data-color-scheme": "light",
       className: cn.cn(
         ContentCard_module["content-card"],
         hasMedia && mediaWidth === "1/2" && ContentCard_module["content-card--media-half"],
         hasMedia && mediaPosition === "end" && ContentCard_module["content-card--media-end"],
         appearance === "border" && ContentCard_module["content-card--border"],
         appearance === "elevated" && ContentCard_module["content-card--elevated"],
-        appearance === "elevated" && elevation_module.default.elevationLow,
+        appearance === "elevated" && index.elevationStyles.elevationLow,
         className
       ),
       "aria-label": ariaLabel,
@@ -74,7 +75,7 @@ const ContentCard = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__content"], children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__content-inner"], children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__body-region"], children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__header"], children: [
-              isRenderable(titlePrefix) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__prefix"], children: titlePrefix }),
+              isRenderable.isRenderable(titlePrefix) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__prefix"], children: titlePrefix }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 HeadingLevel,
                 {
@@ -84,9 +85,9 @@ const ContentCard = ({
                 }
               )
             ] }),
-            isRenderable(body) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(ContentCard_module["content-card__body"], "dds-prose"), children: body })
+            isRenderable.isRenderable(body) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(ContentCard_module["content-card__body"], "dds-prose"), children: body })
           ] }),
-          isRenderable(actions) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__actions"], children: actions })
+          isRenderable.isRenderable(actions) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__actions"], children: actions })
         ] }) })
       ] })
     }