@dmsi/wedgekit-react 0.0.4

package/dist/components/FilterGroup.cjs

@@ -0,0 +1,903 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/FilterGroup.tsx
+var FilterGroup_exports = {};
+__export(FilterGroup_exports, {
+  FilterGroup: () => FilterGroup,
+  FilterGroupItem: () => FilterGroupItem
+});
+module.exports = __toCommonJS(FilterGroup_exports);
+var import_react = require("react");
+
+// src/components/Label.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Label.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Label = (_a) => {
+  var _b = _a, {
+    as = "span",
+    padded,
+    className,
+    color,
+    align
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx2.default)(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    })
+  );
+};
+Label.displayName = "Label";
+
+// src/components/Checkbox.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
+
+// src/components/Icon.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx3.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
+// src/components/Paragraph.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Element,
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx4.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/Checkbox.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName"
+  ]);
+  const selected = indeterminate || checked;
+  const normalClassName = (0, import_clsx5.default)(
+    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  );
+  const normalSelectedClassName = (0, import_clsx5.default)(
+    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  );
+  const errorClassName = (0, import_clsx5.default)(
+    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  );
+  const errorSelectedClassName = (0, import_clsx5.default)(
+    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  );
+  const disabledClassName = (0, import_clsx5.default)(
+    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  );
+  const readOnlyClassName = (0, import_clsx5.default)(
+    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  );
+  const checkColor = (0, import_clsx5.default)(
+    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "label",
+    {
+      className: (0, import_clsx5.default)(
+        "flex items-center",
+        componentGap,
+        (disabled || readOnly && error || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            __spreadValues({
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              id: props.id,
+              "data-indeterminate": indeterminate
+            }, props)
+          ),
+          error && (readOnly || disabled) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx5.default)("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: (0, import_clsx5.default)(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                baseTransition,
+                normalClassName,
+                normalSelectedClassName,
+                errorClassName,
+                errorSelectedClassName,
+                disabledClassName,
+                readOnlyClassName,
+                checkColor
+              ),
+              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close" }) })
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Paragraph,
+          {
+            padded: true,
+            className: (0, import_clsx5.default)(
+              "text-nowrap",
+              disabled && !error && "!text-text-primary-disabled",
+              error && !disabled && !readOnly && "!text-text-primary-error",
+              paragraphClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  function handleOnChange(e) {
+    if (disabled || readOnly || readOnly && error || !onChange) {
+      return;
+    }
+    onChange(e);
+  }
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/OptionPill.tsx
+var import_clsx7 = __toESM(require("clsx"), 1);
+
+// src/components/Button.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName,
+    href
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href"
+  ]);
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx6.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+    "flex-col",
+    paddingUsingComponentGap
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx6.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx6.default)(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = (0, import_clsx6.default)(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = href ? "a" : as;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Element,
+    __spreadProps(__spreadValues({
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      disabled,
+      href,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/components/OptionPill.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var OptionPill = (_a) => {
+  var _b = _a, {
+    selected = false,
+    onClick,
+    onRemove,
+    removable = false,
+    disabled = false,
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "selected",
+    "onClick",
+    "onRemove",
+    "removable",
+    "disabled",
+    "children",
+    "className"
+  ]);
+  const additionalAttributes = {
+    "data-disabled": disabled || null,
+    "data-selected": selected || null
+  };
+  const classNames = (0, import_clsx7.default)(
+    {
+      "hover:border-border-action-hover active:border-border-action-active": !disabled,
+      "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
+      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
+      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
+    },
+    !removable && componentPadding,
+    removable && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding"
+  );
+  const textColor = (0, import_clsx7.default)(
+    !disabled && "text-text-primary-normal",
+    disabled && !selected && "text-text-primary-disabled",
+    disabled && selected && "text-text-on-action-primary-disabled"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      onClick: handleOnClick
+    }, props), additionalAttributes), {
+      className: (0, import_clsx7.default)(
+        "flex items-center justify-between cursor-pointer w-max",
+        "border border-border-primary-normal rounded-base",
+        "outline-2 outline-transparent -outline-offset-2",
+        componentGap,
+        baseTransition,
+        classNames,
+        className,
+        textColor
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
+        removable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
+          {
+            onClick: handleOnRemove,
+            disabled,
+            className: (0, import_clsx7.default)(
+              "mx-0 h-full w-10 !border-0",
+              componentPaddingMinusBorder
+            ),
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close" })
+          }
+        )
+      ]
+    })
+  );
+  function handleOnClick() {
+    if (disabled) {
+      return;
+    }
+    onClick == null ? void 0 : onClick();
+  }
+  function handleOnRemove() {
+    if (!removable || !onRemove) {
+      return;
+    }
+    onRemove();
+  }
+};
+OptionPill.displayName = "OptionPill";
+
+// src/components/FilterGroup.tsx
+var import_clsx9 = __toESM(require("clsx"), 1);
+
+// src/components/Link.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Link = (_a) => {
+  var _b = _a, {
+    as = "a",
+    className,
+    variant = "primary",
+    typographyStyle = "paragraph",
+    disabled = false,
+    color,
+    paddedY,
+    align,
+    underline = false
+  } = _b, props = __objRest(_b, [
+    "as",
+    "className",
+    "variant",
+    "typographyStyle",
+    "disabled",
+    "color",
+    "paddedY",
+    "align",
+    "underline"
+  ]);
+  const Component = as;
+  const primaryStateStyles = variant === "primary" && !disabled && (0, import_clsx8.default)(
+    "text-text-link-normal hover:text-text-link-hover active:text-text-link-active"
+  );
+  const secondaryStateStyles = variant === "secondary" && !disabled && (0, import_clsx8.default)(
+    "text-text-primary-normal hover:text-text-link-hover active:text-text-link-active"
+  );
+  const criticalStateStyles = variant === "critical" && !disabled && (0, import_clsx8.default)(
+    "text-text-action-critical-normal hover:text-text-action-critical-hover active:text-text-action-critical-active"
+  );
+  const criticalStateDisabledStyles = disabled && variant === "critical" && (0, import_clsx8.default)("text-text-action-critical-disabled");
+  const disabledStateStyles = disabled && ["primary", "secondary"].includes(variant) && (0, import_clsx8.default)("text-text-link-disabled");
+  const disabledStyles = disabled && (0, import_clsx8.default)("pointer-events-none cursor-default");
+  const underlineStyles = underline ? "decoration-current" : "decoration-transparent";
+  const paddingY = paddedY && componentPaddingY;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Component,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx8.default)(
+        "inline",
+        disabled ? "cursor-default" : "cursor-pointer",
+        "underline decoration-[10%] underline-offset-[32%]",
+        !disabled && "hover:decoration-current",
+        !disabled && "active:decoration-transparent",
+        "flex flex-col items-center justify-center",
+        baseTransition,
+        primaryStateStyles,
+        secondaryStateStyles,
+        criticalStateStyles,
+        criticalStateDisabledStyles,
+        disabledStateStyles,
+        disabledStyles,
+        underlineStyles,
+        typographyStyle === "caption" && typography.caption,
+        typographyStyle === "paragraph" && typography.paragraph,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        paddingY,
+        className
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : void 0
+    })
+  );
+};
+Link.displayName = "Link";
+
+// src/components/FilterGroup.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FilterGroup = (_a) => {
+  var _b = _a, {
+    label,
+    type = "link",
+    open = false,
+    showMore = false,
+    onShowMore,
+    onClearAll,
+    children
+  } = _b, props = __objRest(_b, [
+    "label",
+    "type",
+    "open",
+    "showMore",
+    "onShowMore",
+    "onClearAll",
+    "children"
+  ]);
+  const isSummary = type === "summary";
+  const [internalExpanded, setInternalExpanded] = (0, import_react.useState)(open);
+  const [showAllItems, setShowAllItems] = (0, import_react.useState)(false);
+  const isExpanded = open || internalExpanded;
+  const childArray = import_react.Children.toArray(children).filter(import_react.isValidElement);
+  const shouldShowAll = isSummary || showAllItems;
+  const visibleChildren = childArray.slice(
+    0,
+    shouldShowAll ? childArray.length : 5
+  );
+  const showShowMoreLink = showMore && !isSummary && childArray.length > 5 && !showAllItems && isExpanded;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx9.default)(
+        "border-b border-border-primary-normal",
+        isSummary ? layoutPaddingBottom : componentPaddingBottom
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx9.default)(
+              "flex items-center justify-between cursor-pointer",
+              layoutGroupGap
+            ),
+            onClick: handleToggleExpanded,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { children: label }),
+              type !== "summary" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Icon,
+                {
+                  name: "keyboard_arrow_down",
+                  className: (0, import_clsx9.default)(
+                    baseTransition.replace(
+                      "transition-colors",
+                      "transition-transform"
+                    ),
+                    isExpanded && "rotate-180",
+                    "text-icon-action-primary-normal"
+                  )
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Link,
+                {
+                  className: (0, import_clsx9.default)("block", componentPaddingY),
+                  onClick: handleClearAll,
+                  children: "Clear All"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: (0, import_clsx9.default)(
+              "grid",
+              baseTransition.replace(
+                "transition-colors",
+                "transition-[grid-template-rows]"
+              ),
+              isExpanded || isSummary ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "div",
+              {
+                className: (0, import_clsx9.default)(
+                  "overflow-hidden",
+                  componentGap,
+                  (isExpanded || isSummary || internalExpanded) && "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx9.default)(isSummary && `flex flex-col ${componentGap}`), children: visibleChildren }),
+                  showShowMoreLink && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    Link,
+                    {
+                      className: (0, import_clsx9.default)("block", "!items-start", componentPaddingY),
+                      onClick: handleOnShowMore,
+                      children: "Show More"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    })
+  );
+  function handleOnShowMore(e) {
+    e.stopPropagation();
+    setShowAllItems(true);
+    onShowMore == null ? void 0 : onShowMore();
+  }
+  function handleToggleExpanded(e) {
+    if (type === "summary") return;
+    e.stopPropagation();
+    setInternalExpanded(!internalExpanded);
+  }
+  function handleClearAll(e) {
+    e.stopPropagation();
+    onClearAll == null ? void 0 : onClearAll();
+  }
+};
+var FilterGroupItem = (_a) => {
+  var _b = _a, {
+    type = "link",
+    children,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "type",
+    "children",
+    "onClick"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      onClick: handleClick
+    }, props), {
+      className: (0, import_clsx9.default)(
+        "flex items-center justify-between *:first:flex-1 cursor-pointer",
+        type !== "summary" ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding" : ""
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterGroupItemChildComponent, __spreadProps(__spreadValues({}, props), { type, count: props.count, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center justify-between w-full", children: [
+        children,
+        type !== "summary" && props.count && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+          "(",
+          props.count,
+          ")"
+        ] })
+      ] }) }))
+    })
+  );
+  function handleClick(e) {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick();
+  }
+};
+var FilterGroupItemChildComponent = (_a) => {
+  var _b = _a, {
+    type = "link",
+    children
+  } = _b, props = __objRest(_b, [
+    "type",
+    "children"
+  ]);
+  if (type === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Checkbox, __spreadValues({ paragraphClassName: "w-full", label: children }, props));
+  }
+  if (type === "summary") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OptionPill, __spreadProps(__spreadValues({ removable: true }, props), { children })) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Link, __spreadProps(__spreadValues({ variant: "secondary" }, props), { children }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FilterGroup,
+  FilterGroupItem
+});