@deriv-web-design/ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,963 @@
+// primitives/Button/Button.module.css
+var Button_default = {};
+
+// primitives/Button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = ({
+  colorScheme = "coral",
+  variant = "primary",
+  iconPosition = "none",
+  icon,
+  label,
+  fullWidth = false,
+  showFocusRing = false,
+  children,
+  disabled,
+  className,
+  ...props
+}) => {
+  const isIconOnly = iconPosition === "icon-only";
+  const classNames = [
+    Button_default.button,
+    Button_default[`${colorScheme}_${variant}`],
+    isIconOnly ? Button_default.iconOnly : "",
+    fullWidth ? Button_default.fullWidth : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const iconNode = icon ? /* @__PURE__ */ jsx("span", { className: Button_default.icon, children: icon }) : null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: classNames,
+      disabled,
+      "aria-label": isIconOnly && label ? label : void 0,
+      ...props,
+      children: [
+        iconPosition === "icon-left" && iconNode,
+        !isIconOnly && /* @__PURE__ */ jsx("span", { className: Button_default.label, children: label ?? children }),
+        iconPosition === "icon-only" && iconNode,
+        iconPosition === "icon-right" && iconNode,
+        showFocusRing && /* @__PURE__ */ jsx("span", { className: Button_default.focusRing, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+
+// primitives/Link/Link.module.css
+var Link_default = {};
+
+// primitives/Link/Link.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChevronIcon = () => /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M3 8h10M9 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Link = ({
+  colorScheme = "coral",
+  label,
+  icon,
+  showChevron = true,
+  disabled = false,
+  children,
+  className,
+  onClick,
+  ...props
+}) => {
+  const hasIcon = !!icon;
+  const classNames = [
+    Link_default.link,
+    Link_default[colorScheme],
+    hasIcon ? Link_default.withIcon : Link_default.withChevron,
+    disabled ? Link_default.disabled : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const handleClick = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      className: classNames,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: handleClick,
+      ...props,
+      children: [
+        hasIcon && /* @__PURE__ */ jsx2("span", { className: Link_default.icon, children: icon }),
+        /* @__PURE__ */ jsx2("span", { className: Link_default.label, children: label ?? children }),
+        !hasIcon && showChevron && /* @__PURE__ */ jsx2("span", { className: Link_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ChevronIcon, {}) })
+      ]
+    }
+  );
+};
+
+// primitives/Chip/Chip.module.css
+var Chip_default = {};
+
+// primitives/Chip/Chip.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Chip = ({
+  size = "md",
+  label,
+  icon,
+  tag,
+  selected = false,
+  showFocusRing = false,
+  disabled = false,
+  children,
+  className,
+  ...props
+}) => {
+  const classNames = [
+    Chip_default.chip,
+    Chip_default[size],
+    selected ? Chip_default.selected : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      className: classNames,
+      disabled,
+      "aria-pressed": selected,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx3("span", { className: Chip_default.icon, children: icon }),
+        /* @__PURE__ */ jsx3("span", { className: Chip_default.label, children: label ?? children }),
+        tag && /* @__PURE__ */ jsx3("span", { className: Chip_default.tag, children: tag }),
+        showFocusRing && /* @__PURE__ */ jsx3("span", { className: Chip_default.focusRing, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+
+// primitives/Tag/Tag.module.css
+var Tag_default = {};
+
+// primitives/Tag/Tag.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Tag = ({
+  size = "sm",
+  variant = "fill",
+  fontWeight = "regular",
+  label,
+  icon,
+  children,
+  className,
+  ...props
+}) => {
+  const classNames = [
+    Tag_default.tag,
+    Tag_default[size],
+    Tag_default[variant],
+    Tag_default[fontWeight],
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("span", { className: classNames, ...props, children: [
+    icon && /* @__PURE__ */ jsx4("span", { className: Tag_default.icon, children: icon }),
+    /* @__PURE__ */ jsx4("span", { className: Tag_default.label, children: label ?? children })
+  ] });
+};
+
+// primitives/Accordion/Accordion.tsx
+import { useState } from "react";
+
+// primitives/Accordion/Accordion.module.css
+var Accordion_default = {};
+
+// primitives/Accordion/Accordion.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChevronIcon2 = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Accordion = ({
+  title,
+  children,
+  open,
+  defaultOpen = false,
+  onToggle,
+  showTopDivider = true,
+  showBottomDivider = true,
+  showFocusRing = false,
+  className
+}) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : internalOpen;
+  const handleToggle = () => {
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(next);
+  };
+  const classNames = [Accordion_default.accordion, className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: classNames,
+      style: {
+        borderTop: showTopDivider ? `1px solid var(--accordion-divider-color)` : void 0,
+        borderBottom: showBottomDivider ? `1px solid var(--accordion-divider-color)` : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            className: Accordion_default.header,
+            onClick: handleToggle,
+            "aria-expanded": isOpen,
+            children: [
+              /* @__PURE__ */ jsx5("span", { className: Accordion_default.titleWrapper, children: /* @__PURE__ */ jsx5("span", { className: Accordion_default.title, children: title }) }),
+              /* @__PURE__ */ jsx5("span", { className: [Accordion_default.chevron, isOpen ? Accordion_default.chevronRotated : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ jsx5("span", { className: Accordion_default.focusRing, "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { className: [Accordion_default.bodyWrapper, isOpen ? Accordion_default.bodyWrapperOpen : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5("div", { className: Accordion_default.bodyInner, children: /* @__PURE__ */ jsx5("div", { className: Accordion_default.body, children }) }) })
+      ]
+    }
+  );
+};
+
+// primitives/TextField/TextField.tsx
+import { forwardRef } from "react";
+
+// primitives/TextField/TextField.module.css
+var TextField_default = {};
+
+// primitives/TextField/TextField.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx6("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx6("path", { d: "M5.5 8l2 2 3-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var FailIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx6("path", { d: "M8 2.5L14 13.5H2L8 2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx6("path", { d: "M8 6.5v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx6("circle", { cx: "8", cy: "11.5", r: "0.75", fill: "currentColor" })
+] });
+var TextField = forwardRef(
+  ({
+    variant = "outline",
+    status = "neutral",
+    disabled,
+    className,
+    ...inputProps
+  }, ref) => {
+    const wrapperClass = [
+      TextField_default.wrapper,
+      TextField_default[variant],
+      TextField_default[status],
+      className ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs6("div", { className: wrapperClass, "data-disabled": disabled || void 0, children: [
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          ref,
+          className: TextField_default.input,
+          disabled,
+          ...inputProps
+        }
+      ),
+      status === "success" && /* @__PURE__ */ jsx6("span", { className: [TextField_default.iconSlot, TextField_default.iconSuccess].join(" "), children: /* @__PURE__ */ jsx6(SuccessIcon, {}) }),
+      status === "fail" && /* @__PURE__ */ jsx6("span", { className: [TextField_default.iconSlot, TextField_default.iconFail].join(" "), children: /* @__PURE__ */ jsx6(FailIcon, {}) })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+
+// primitives/SearchField/SearchField.tsx
+import { forwardRef as forwardRef2, useRef, useState as useState2, useCallback } from "react";
+
+// primitives/SearchField/SearchField.module.css
+var SearchField_default = {};
+
+// primitives/SearchField/SearchField.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SearchIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx7("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.25" }),
+  /* @__PURE__ */ jsx7("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })
+] });
+var ClearIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx7("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.25" }),
+  /* @__PURE__ */ jsx7("path", { d: "M6 6l4 4M10 6l-4 4", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })
+] });
+var SuccessIcon2 = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx7("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx7("path", { d: "M5.5 8l2 2 3-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var FailIcon2 = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx7("path", { d: "M8 2.5L14 13.5H2L8 2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx7("path", { d: "M8 6.5v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx7("circle", { cx: "8", cy: "11.5", r: "0.75", fill: "currentColor" })
+] });
+var SearchField = forwardRef2(
+  ({
+    status = "neutral",
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    disabled,
+    className,
+    ...inputProps
+  }, ref) => {
+    const innerRef = useRef(null);
+    const setRef = useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const isControlled = value !== void 0;
+    const [internalHasValue, setInternalHasValue] = useState2(
+      Boolean(defaultValue)
+    );
+    const hasValue = isControlled ? Boolean(value) : internalHasValue;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalHasValue(Boolean(e.target.value));
+      }
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled && innerRef.current) {
+        innerRef.current.value = "";
+        setInternalHasValue(false);
+      }
+      onClear?.();
+      innerRef.current?.focus();
+    };
+    const showFailIcon = status === "fail" && !disabled;
+    const showSuccessIcon = status === "success" && hasValue && !disabled;
+    const showClearButton = hasValue && !disabled;
+    const wrapperClass = [
+      SearchField_default.wrapper,
+      SearchField_default[status],
+      className ?? ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: SearchField_default.iconSlot, children: /* @__PURE__ */ jsx7(SearchIcon, {}) }),
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              ref: setRef,
+              className: SearchField_default.input,
+              disabled,
+              value,
+              defaultValue,
+              onChange: handleChange,
+              ...inputProps
+            }
+          ),
+          showSuccessIcon && /* @__PURE__ */ jsx7("span", { className: [SearchField_default.iconSlot, SearchField_default.iconSuccess].join(" "), children: /* @__PURE__ */ jsx7(SuccessIcon2, {}) }),
+          showFailIcon && /* @__PURE__ */ jsx7("span", { className: [SearchField_default.iconSlot, SearchField_default.iconFail].join(" "), children: /* @__PURE__ */ jsx7(FailIcon2, {}) }),
+          showClearButton && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: SearchField_default.clearButton,
+              onClick: handleClear,
+              "aria-label": "Clear search",
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsx7(ClearIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchField.displayName = "SearchField";
+
+// primitives/Breadcrumb/Breadcrumb.tsx
+import { useState as useState3 } from "react";
+
+// primitives/Breadcrumb/Breadcrumb.module.css
+var Breadcrumb_default = {};
+
+// primitives/Breadcrumb/Breadcrumb.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var ChevronRightIcon = () => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        d: "M6 3.5L10.5 8L6 12.5",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+function BreadcrumbLink({ item }) {
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsx8("a", { href: item.href, onClick: item.onClick, className: Breadcrumb_default.link, children: item.label }),
+    /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ jsx8(ChevronRightIcon, {}) })
+  ] });
+}
+function Breadcrumb({
+  items,
+  size = "md",
+  collapsible = true,
+  className,
+  ...navProps
+}) {
+  const [expanded, setExpanded] = useState3(false);
+  const truncatable = collapsible && items.length > 3;
+  const listClass = [
+    Breadcrumb_default.list,
+    Breadcrumb_default[size],
+    truncatable ? Breadcrumb_default.collapsible : "",
+    truncatable && expanded ? Breadcrumb_default.expanded : ""
+  ].filter(Boolean).join(" ");
+  if (!truncatable) {
+    return /* @__PURE__ */ jsx8("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ jsx8("ol", { className: listClass, children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.current, "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx8(BreadcrumbLink, { item }) }, index);
+    }) }) });
+  }
+  const firstItem = items[0];
+  const middleItems = items.slice(1, items.length - 2);
+  const parentItem = items[items.length - 2];
+  const currentItem = items[items.length - 1];
+  return /* @__PURE__ */ jsx8("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ jsxs8("ol", { className: listClass, children: [
+    /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item: firstItem }) }),
+    /* @__PURE__ */ jsxs8("li", { className: Breadcrumb_default.ellipsisItem, "aria-hidden": expanded, children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          className: Breadcrumb_default.ellipsisButton,
+          onClick: () => setExpanded(true),
+          "aria-label": "Show all breadcrumb items",
+          children: "\u2026"
+        }
+      ),
+      /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ jsx8(ChevronRightIcon, {}) })
+    ] }),
+    middleItems.map((item, index) => /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.middleItem, children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item }) }, `m-${index}`)),
+    /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ jsx8(BreadcrumbLink, { item: parentItem }) }),
+    /* @__PURE__ */ jsx8("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ jsx8("span", { className: Breadcrumb_default.current, "aria-current": "page", children: currentItem.label }) })
+  ] }) });
+}
+
+// primitives/ChipDropdown/ChipDropdown.tsx
+import { useEffect, useRef as useRef2, useState as useState4 } from "react";
+
+// primitives/ChipDropdown/ChipDropdown.module.css
+var ChipDropdown_default = {};
+
+// primitives/ChipDropdown/ChipDropdown.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var ChevronDownIcon = () => /* @__PURE__ */ jsx9(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: "M3 6l5 5 5-5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsx9(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: "M2 6l3 3 5-5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var ChipDropdown = ({
+  size = "md",
+  label,
+  tag,
+  icon,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  className,
+  ...props
+}) => {
+  const [open, setOpen] = useState4(false);
+  const wrapperRef = useRef2(null);
+  const selectedOption = options.find((o) => o.value === value) ?? null;
+  const displayLabel = selectedOption ? selectedOption.label : label;
+  const isSelected = selectedOption !== null;
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const triggerClassNames = [
+    ChipDropdown_default.trigger,
+    ChipDropdown_default[size],
+    isSelected ? ChipDropdown_default.selected : "",
+    open ? ChipDropdown_default.expand : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs9("div", { ref: wrapperRef, className: ChipDropdown_default.wrapper, children: [
+    /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        className: triggerClassNames,
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen((prev) => !prev),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.icon, children: icon }),
+          /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.label, children: displayLabel }),
+          tag && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.tag, children: tag }),
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: [ChipDropdown_default.chevron, open ? ChipDropdown_default.chevronOpen : ""].filter(Boolean).join(" "),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx9(ChevronDownIcon, {})
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx9(
+      "ul",
+      {
+        role: "listbox",
+        "aria-label": label,
+        className: ChipDropdown_default.list,
+        children: options.map((option) => {
+          const isActive = option.value === value;
+          return /* @__PURE__ */ jsxs9(
+            "li",
+            {
+              role: "option",
+              "aria-selected": isActive,
+              className: [
+                ChipDropdown_default.item,
+                isActive ? ChipDropdown_default.itemSelected : ""
+              ].filter(Boolean).join(" "),
+              onClick: () => {
+                onChange?.(option.value);
+                setOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.itemLabel, children: option.label }),
+                isActive && /* @__PURE__ */ jsx9("span", { className: ChipDropdown_default.itemCheck, children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// components/Card/CardPrimaryVariant.module.css
+var CardPrimaryVariant_default = {};
+
+// components/Card/CardPrimaryVariant.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var ArrowRightIcon = () => /* @__PURE__ */ jsx10(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx10(
+      "path",
+      {
+        d: "M3 8h10M9 4l4 4-4 4",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+var CardPrimaryVariant = ({
+  colorScheme = "light",
+  title,
+  description,
+  image,
+  imageAlt = "",
+  showLink = true,
+  linkText = "Learn more",
+  onLinkClick,
+  className,
+  variant: _variant,
+  ...props
+}) => {
+  const isInverse = colorScheme === "dark" || colorScheme === "brand" || colorScheme === "image";
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: [
+        CardPrimaryVariant_default.card,
+        CardPrimaryVariant_default[`style--${colorScheme}`],
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        colorScheme === "image" && image && /* @__PURE__ */ jsxs10("div", { "aria-hidden": "true", className: CardPrimaryVariant_default.imageOverlay, children: [
+          /* @__PURE__ */ jsx10("img", { alt: "", className: CardPrimaryVariant_default.overlayImg, src: image }),
+          /* @__PURE__ */ jsx10("div", { className: CardPrimaryVariant_default.gradient })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: CardPrimaryVariant_default.content, children: [
+          /* @__PURE__ */ jsx10("p", { className: [CardPrimaryVariant_default.title, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: title }),
+          /* @__PURE__ */ jsx10("p", { className: [CardPrimaryVariant_default.description, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: description }),
+          showLink && /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              className: [CardPrimaryVariant_default.link, isInverse ? CardPrimaryVariant_default.linkInverse : CardPrimaryVariant_default.linkCoral].join(" "),
+              onClick: onLinkClick,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx10("span", { children: linkText }),
+                /* @__PURE__ */ jsx10(ArrowRightIcon, {})
+              ]
+            }
+          )
+        ] }),
+        colorScheme !== "image" && /* @__PURE__ */ jsx10("div", { className: CardPrimaryVariant_default.imageSection, children: image && /* @__PURE__ */ jsx10("img", { alt: imageAlt, className: CardPrimaryVariant_default.image, src: image }) })
+      ]
+    }
+  );
+};
+
+// components/Card/CardSecondaryVariant.module.css
+var CardSecondaryVariant_default = {};
+
+// components/Card/CardSecondaryVariant.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var ArrowRightIcon2 = () => /* @__PURE__ */ jsx11(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx11(
+      "path",
+      {
+        d: "M3 8h10M9 4l4 4-4 4",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+var CardSecondaryVariant = ({
+  title,
+  description,
+  icon,
+  showIcon = true,
+  showLink = true,
+  linkText = "Learn more",
+  onLinkClick,
+  className,
+  variant: _variant,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: [CardSecondaryVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        showIcon && icon && /* @__PURE__ */ jsx11("span", { className: CardSecondaryVariant_default.icon, children: icon }),
+        /* @__PURE__ */ jsx11("p", { className: CardSecondaryVariant_default.title, children: title }),
+        /* @__PURE__ */ jsx11("p", { className: CardSecondaryVariant_default.description, children: description }),
+        showLink && /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            className: CardSecondaryVariant_default.link,
+            onClick: onLinkClick,
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx11("span", { children: linkText }),
+              /* @__PURE__ */ jsx11(ArrowRightIcon2, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// components/Card/CardThumbnailVariant.module.css
+var CardThumbnailVariant_default = {};
+
+// components/Card/CardThumbnailVariant.tsx
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var LinkIcon = () => /* @__PURE__ */ jsxs12(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "14",
+    viewBox: "0 0 14 14",
+    width: "14",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx12(
+        "path",
+        {
+          d: "M5.25 2.625H3.5A1.75 1.75 0 0 0 1.75 4.375v5.25A1.75 1.75 0 0 0 3.5 11.375h5.25a1.75 1.75 0 0 0 1.75-1.75V7.875",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "1.25"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "path",
+        {
+          d: "M7.875 1.75h4.375v4.375M12.25 1.75 6.125 7.875",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "1.25"
+        }
+      )
+    ]
+  }
+);
+var PlayIcon = () => /* @__PURE__ */ jsxs12(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "80",
+    viewBox: "0 0 80 80",
+    width: "80",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx12("circle", { cx: "40", cy: "40", fill: "rgba(255,255,255,0.88)", r: "40" }),
+      /* @__PURE__ */ jsx12("path", { d: "M32 27l22 13-22 13V27z", fill: "rgba(24,28,37,0.72)" })
+    ]
+  }
+);
+var CardThumbnailVariant = ({
+  type = "video",
+  thumbnail,
+  thumbnailAlt = "",
+  title,
+  summary,
+  tags = [],
+  hideTags = false,
+  showCopyLink = true,
+  onCopyLink,
+  avatar,
+  avatarAlt = "",
+  className,
+  variant: _variant,
+  ...props
+}) => {
+  const isVideo = type === "video";
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: [CardThumbnailVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs12("div", { className: CardThumbnailVariant_default.thumbnailWrapper, children: [
+          /* @__PURE__ */ jsx12("img", { alt: thumbnailAlt, className: CardThumbnailVariant_default.thumbnailImage, src: thumbnail }),
+          isVideo && /* @__PURE__ */ jsx12("span", { "aria-label": "Play video", className: CardThumbnailVariant_default.playButton, children: /* @__PURE__ */ jsx12(PlayIcon, {}) }),
+          !isVideo && avatar && /* @__PURE__ */ jsx12("img", { alt: avatarAlt, className: CardThumbnailVariant_default.avatar, src: avatar })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: CardThumbnailVariant_default.content, children: [
+          /* @__PURE__ */ jsxs12("div", { className: CardThumbnailVariant_default.metaRow, children: [
+            !hideTags && /* @__PURE__ */ jsx12("div", { className: CardThumbnailVariant_default.tagsList, children: tags.map((tag, i) => /* @__PURE__ */ jsx12(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
+            showCopyLink && /* @__PURE__ */ jsx12(
+              "button",
+              {
+                "aria-label": "Copy link",
+                className: CardThumbnailVariant_default.copyLink,
+                onClick: onCopyLink,
+                type: "button",
+                children: /* @__PURE__ */ jsx12(LinkIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx12("p", { className: CardThumbnailVariant_default.title, children: title }),
+          /* @__PURE__ */ jsx12("p", { className: CardThumbnailVariant_default.summary, children: summary })
+        ] })
+      ]
+    }
+  );
+};
+
+// components/Card/Card.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Card = (props) => {
+  if (props.variant === "primary") {
+    return /* @__PURE__ */ jsx13(CardPrimaryVariant, { ...props });
+  }
+  if (props.variant === "secondary") {
+    return /* @__PURE__ */ jsx13(CardSecondaryVariant, { ...props });
+  }
+  return /* @__PURE__ */ jsx13(CardThumbnailVariant, { ...props });
+};
+
+// primitives/Pagination/Pagination.module.css
+var Pagination_default = {};
+
+// primitives/Pagination/Pagination.tsx
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var ChevronLeft = () => /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronRight = () => /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function getPageItems(currentPage, totalPages) {
+  if (totalPages <= 5) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  if (currentPage <= 3) {
+    return [1, 2, 3, 4, 5, "ellipsis-right", totalPages];
+  }
+  if (currentPage >= totalPages - 2) {
+    return [1, "ellipsis-left", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+  }
+  return [1, "ellipsis-left", currentPage - 1, currentPage, currentPage + 1, "ellipsis-right", totalPages];
+}
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className
+}) => {
+  const items = getPageItems(currentPage, totalPages);
+  const isPrevDisabled = currentPage <= 1;
+  const isNextDisabled = currentPage >= totalPages;
+  return /* @__PURE__ */ jsxs13(
+    "nav",
+    {
+      className: [Pagination_default.pagination, className ?? ""].filter(Boolean).join(" "),
+      "aria-label": "Pagination navigation",
+      children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            className: [Pagination_default.navButton, isPrevDisabled ? Pagination_default.navButtonDisabled : ""].filter(Boolean).join(" "),
+            onClick: () => onPageChange(currentPage - 1),
+            disabled: isPrevDisabled,
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ jsx14("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ jsx14(ChevronLeft, {}) })
+          }
+        ),
+        items.map((item, index) => {
+          if (item === "ellipsis-left" || item === "ellipsis-right") {
+            return /* @__PURE__ */ jsx14(
+              "span",
+              {
+                className: Pagination_default.ellipsis,
+                "aria-hidden": "true",
+                children: "\u2026"
+              },
+              `${item}-${index}`
+            );
+          }
+          const isSelected = item === currentPage;
+          return /* @__PURE__ */ jsx14(
+            "button",
+            {
+              className: [Pagination_default.pageButton, isSelected ? Pagination_default.pageButtonSelected : ""].filter(Boolean).join(" "),
+              onClick: () => {
+                if (!isSelected) onPageChange(item);
+              },
+              "aria-current": isSelected ? "page" : void 0,
+              "aria-label": `Page ${item}`,
+              children: item
+            },
+            item
+          );
+        }),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            className: [Pagination_default.navButton, isNextDisabled ? Pagination_default.navButtonDisabled : ""].filter(Boolean).join(" "),
+            onClick: () => onPageChange(currentPage + 1),
+            disabled: isNextDisabled,
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ jsx14("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ jsx14(ChevronRight, {}) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Accordion,
+  Breadcrumb,
+  Button,
+  Card,
+  Chip,
+  ChipDropdown,
+  Link,
+  Pagination,
+  SearchField,
+  Tag,
+  TextField
+};
+//# sourceMappingURL=index.mjs.map