@deriv-web-design/ui 0.0.1

package/dist/index.js

@@ -0,0 +1,1000 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  Breadcrumb: () => Breadcrumb,
+  Button: () => Button,
+  Card: () => Card,
+  Chip: () => Chip,
+  ChipDropdown: () => ChipDropdown,
+  Link: () => Link,
+  Pagination: () => Pagination,
+  SearchField: () => SearchField,
+  Tag: () => Tag,
+  TextField: () => TextField
+});
+module.exports = __toCommonJS(index_exports);
+
+// primitives/Button/Button.module.css
+var Button_default = {};
+
+// primitives/Button/Button.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("span", { className: Button_default.icon, children: icon }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      className: classNames,
+      disabled,
+      "aria-label": isIconOnly && label ? label : void 0,
+      ...props,
+      children: [
+        iconPosition === "icon-left" && iconNode,
+        !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Button_default.label, children: label ?? children }),
+        iconPosition === "icon-only" && iconNode,
+        iconPosition === "icon-right" && iconNode,
+        showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Button_default.focusRing, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+
+// primitives/Link/Link.module.css
+var Link_default = {};
+
+// primitives/Link/Link.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)(
+    "a",
+    {
+      className: classNames,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: handleClick,
+      ...props,
+      children: [
+        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Link_default.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Link_default.label, children: label ?? children }),
+        !hasIcon && showChevron && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Link_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronIcon, {}) })
+      ]
+    }
+  );
+};
+
+// primitives/Chip/Chip.module.css
+var Chip_default = {};
+
+// primitives/Chip/Chip.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      className: classNames,
+      disabled,
+      "aria-pressed": selected,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.label, children: label ?? children }),
+        tag && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.tag, children: tag }),
+        showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Chip_default.focusRing, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+
+// primitives/Tag/Tag.module.css
+var Tag_default = {};
+
+// primitives/Tag/Tag.tsx
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsxs)("span", { className: classNames, ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Tag_default.icon, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Tag_default.label, children: label ?? children })
+  ] });
+};
+
+// primitives/Accordion/Accordion.tsx
+var import_react = require("react");
+
+// primitives/Accordion/Accordion.module.css
+var Accordion_default = {};
+
+// primitives/Accordion/Accordion.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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] = (0, import_react.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__ */ (0, import_jsx_runtime5.jsxs)(
+    "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__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            className: Accordion_default.header,
+            onClick: handleToggle,
+            "aria-expanded": isOpen,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.titleWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.title, children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: [Accordion_default.chevron, isOpen ? Accordion_default.chevronRotated : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.focusRing, "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: [Accordion_default.bodyWrapper, isOpen ? Accordion_default.bodyWrapperOpen : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Accordion_default.bodyInner, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Accordion_default.body, children }) }) })
+      ]
+    }
+  );
+};
+
+// primitives/TextField/TextField.tsx
+var import_react2 = require("react");
+
+// primitives/TextField/TextField.module.css
+var TextField_default = {};
+
+// primitives/TextField/TextField.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5.5 8l2 2 3-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var FailIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 2.5L14 13.5H2L8 2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 6.5v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8", cy: "11.5", r: "0.75", fill: "currentColor" })
+] });
+var TextField = (0, import_react2.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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: wrapperClass, "data-disabled": disabled || void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          ref,
+          className: TextField_default.input,
+          disabled,
+          ...inputProps
+        }
+      ),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: [TextField_default.iconSlot, TextField_default.iconSuccess].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SuccessIcon, {}) }),
+      status === "fail" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: [TextField_default.iconSlot, TextField_default.iconFail].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FailIcon, {}) })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+
+// primitives/SearchField/SearchField.tsx
+var import_react3 = require("react");
+
+// primitives/SearchField/SearchField.module.css
+var SearchField_default = {};
+
+// primitives/SearchField/SearchField.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.25" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })
+] });
+var ClearIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.25" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 6l4 4M10 6l-4 4", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })
+] });
+var SuccessIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5.5 8l2 2 3-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var FailIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 2.5L14 13.5H2L8 2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 6.5v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "8", cy: "11.5", r: "0.75", fill: "currentColor" })
+] });
+var SearchField = (0, import_react3.forwardRef)(
+  ({
+    status = "neutral",
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    disabled,
+    className,
+    ...inputProps
+  }, ref) => {
+    const innerRef = (0, import_react3.useRef)(null);
+    const setRef = (0, import_react3.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] = (0, import_react3.useState)(
+      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__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: SearchField_default.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              ref: setRef,
+              className: SearchField_default.input,
+              disabled,
+              value,
+              defaultValue,
+              onChange: handleChange,
+              ...inputProps
+            }
+          ),
+          showSuccessIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: [SearchField_default.iconSlot, SearchField_default.iconSuccess].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SuccessIcon2, {}) }),
+          showFailIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: [SearchField_default.iconSlot, SearchField_default.iconFail].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FailIcon2, {}) }),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              className: SearchField_default.clearButton,
+              onClick: handleClear,
+              "aria-label": "Clear search",
+              tabIndex: -1,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClearIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchField.displayName = "SearchField";
+
+// primitives/Breadcrumb/Breadcrumb.tsx
+var import_react4 = require("react");
+
+// primitives/Breadcrumb/Breadcrumb.module.css
+var Breadcrumb_default = {};
+
+// primitives/Breadcrumb/Breadcrumb.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "path",
+      {
+        d: "M6 3.5L10.5 8L6 12.5",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+function BreadcrumbLink({ item }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: item.href, onClick: item.onClick, className: Breadcrumb_default.link, children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {}) })
+  ] });
+}
+function Breadcrumb({
+  items,
+  size = "md",
+  collapsible = true,
+  className,
+  ...navProps
+}) {
+  const [expanded, setExpanded] = (0, import_react4.useState)(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__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { className: listClass, children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.current, "aria-current": "page", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": "Breadcrumb", className, ...navProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ol", { className: listClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item: firstItem }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: Breadcrumb_default.ellipsisItem, "aria-hidden": expanded, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          className: Breadcrumb_default.ellipsisButton,
+          onClick: () => setExpanded(true),
+          "aria-label": "Show all breadcrumb items",
+          children: "\u2026"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {}) })
+    ] }),
+    middleItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.middleItem, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item }) }, `m-${index}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BreadcrumbLink, { item: parentItem }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: Breadcrumb_default.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Breadcrumb_default.current, "aria-current": "page", children: currentItem.label }) })
+  ] }) });
+}
+
+// primitives/ChipDropdown/ChipDropdown.tsx
+var import_react5 = require("react");
+
+// primitives/ChipDropdown/ChipDropdown.module.css
+var ChipDropdown_default = {};
+
+// primitives/ChipDropdown/ChipDropdown.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "path",
+      {
+        d: "M3 6l5 5 5-5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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] = (0, import_react5.useState)(false);
+  const wrapperRef = (0, import_react5.useRef)(null);
+  const selectedOption = options.find((o) => o.value === value) ?? null;
+  const displayLabel = selectedOption ? selectedOption.label : label;
+  const isSelected = selectedOption !== null;
+  (0, import_react5.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__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: wrapperRef, className: ChipDropdown_default.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: triggerClassNames,
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen((prev) => !prev),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.icon, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.label, children: displayLabel }),
+          tag && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.tag, children: tag }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "span",
+            {
+              className: [ChipDropdown_default.chevron, open ? ChipDropdown_default.chevronOpen : ""].filter(Boolean).join(" "),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronDownIcon, {})
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "ul",
+      {
+        role: "listbox",
+        "aria-label": label,
+        className: ChipDropdown_default.list,
+        children: options.map((option) => {
+          const isActive = option.value === value;
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "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__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.itemLabel, children: option.label }),
+                isActive && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: ChipDropdown_default.itemCheck, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, {}) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// components/Card/CardPrimaryVariant.module.css
+var CardPrimaryVariant_default = {};
+
+// components/Card/CardPrimaryVariant.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: [
+        CardPrimaryVariant_default.card,
+        CardPrimaryVariant_default[`style--${colorScheme}`],
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        colorScheme === "image" && image && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "aria-hidden": "true", className: CardPrimaryVariant_default.imageOverlay, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: "", className: CardPrimaryVariant_default.overlayImg, src: image }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: CardPrimaryVariant_default.gradient })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: CardPrimaryVariant_default.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: [CardPrimaryVariant_default.title, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: [CardPrimaryVariant_default.description, isInverse ? CardPrimaryVariant_default.textInverse : CardPrimaryVariant_default.textDefault].join(" "), children: description }),
+          showLink && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              className: [CardPrimaryVariant_default.link, isInverse ? CardPrimaryVariant_default.linkInverse : CardPrimaryVariant_default.linkCoral].join(" "),
+              onClick: onLinkClick,
+              type: "button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: linkText }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrowRightIcon, {})
+              ]
+            }
+          )
+        ] }),
+        colorScheme !== "image" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: CardPrimaryVariant_default.imageSection, children: image && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: imageAlt, className: CardPrimaryVariant_default.image, src: image }) })
+      ]
+    }
+  );
+};
+
+// components/Card/CardSecondaryVariant.module.css
+var CardSecondaryVariant_default = {};
+
+// components/Card/CardSecondaryVariant.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ArrowRightIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "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__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: [CardSecondaryVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        showIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: CardSecondaryVariant_default.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: CardSecondaryVariant_default.title, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: CardSecondaryVariant_default.description, children: description }),
+        showLink && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "button",
+          {
+            className: CardSecondaryVariant_default.link,
+            onClick: onLinkClick,
+            type: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: linkText }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowRightIcon2, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// components/Card/CardThumbnailVariant.module.css
+var CardThumbnailVariant_default = {};
+
+// components/Card/CardThumbnailVariant.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var LinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "14",
+    viewBox: "0 0 14 14",
+    width: "14",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "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__ */ (0, import_jsx_runtime12.jsx)(
+        "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__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "80",
+    viewBox: "0 0 80 80",
+    width: "80",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "40", cy: "40", fill: "rgba(255,255,255,0.88)", r: "40" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: [CardThumbnailVariant_default.card, className ?? ""].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: CardThumbnailVariant_default.thumbnailWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { alt: thumbnailAlt, className: CardThumbnailVariant_default.thumbnailImage, src: thumbnail }),
+          isVideo && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-label": "Play video", className: CardThumbnailVariant_default.playButton, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayIcon, {}) }),
+          !isVideo && avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { alt: avatarAlt, className: CardThumbnailVariant_default.avatar, src: avatar })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: CardThumbnailVariant_default.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: CardThumbnailVariant_default.metaRow, children: [
+            !hideTags && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: CardThumbnailVariant_default.tagsList, children: tags.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tag, { icon: tag.icon, label: tag.label, size: "md", variant: "fill" }, i)) }),
+            showCopyLink && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                "aria-label": "Copy link",
+                className: CardThumbnailVariant_default.copyLink,
+                onClick: onCopyLink,
+                type: "button",
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LinkIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: CardThumbnailVariant_default.title, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: CardThumbnailVariant_default.summary, children: summary })
+        ] })
+      ]
+    }
+  );
+};
+
+// components/Card/Card.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Card = (props) => {
+  if (props.variant === "primary") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardPrimaryVariant, { ...props });
+  }
+  if (props.variant === "secondary") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardSecondaryVariant, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardThumbnailVariant, { ...props });
+};
+
+// primitives/Pagination/Pagination.module.css
+var Pagination_default = {};
+
+// primitives/Pagination/Pagination.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsxs)(
+    "nav",
+    {
+      className: [Pagination_default.pagination, className ?? ""].filter(Boolean).join(" "),
+      "aria-label": "Pagination navigation",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            className: [Pagination_default.navButton, isPrevDisabled ? Pagination_default.navButtonDisabled : ""].filter(Boolean).join(" "),
+            onClick: () => onPageChange(currentPage - 1),
+            disabled: isPrevDisabled,
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeft, {}) })
+          }
+        ),
+        items.map((item, index) => {
+          if (item === "ellipsis-left" || item === "ellipsis-right") {
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "span",
+              {
+                className: Pagination_default.ellipsis,
+                "aria-hidden": "true",
+                children: "\u2026"
+              },
+              `${item}-${index}`
+            );
+          }
+          const isSelected = item === currentPage;
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "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__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            className: [Pagination_default.navButton, isNextDisabled ? Pagination_default.navButtonDisabled : ""].filter(Boolean).join(" "),
+            onClick: () => onPageChange(currentPage + 1),
+            disabled: isNextDisabled,
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: Pagination_default.navIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, {}) })
+          }
+        )
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Breadcrumb,
+  Button,
+  Card,
+  Chip,
+  ChipDropdown,
+  Link,
+  Pagination,
+  SearchField,
+  Tag,
+  TextField
+});
+//# sourceMappingURL=index.js.map