@servicetitan/anvil2 2.9.1 → 3.0.0

package/dist/SelectCard-CtXwY8FZ.js

@@ -0,0 +1,351 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useMemo, useId, forwardRef, useLayoutEffect, useRef } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { a as CheckboxGroup, C as Checkbox } from './Checkbox-BSAS8-DM.js';
+import { a as RadioGroup, R as Radio, S as SvgRadioButtonChecked, b as SvgRadioButtonUnchecked } from './Radio-DO4UhbBE.js';
+import { C as Card } from './Card-DSFuXUGk.js';
+import { I as Icon } from './Icon-BMMbp40n.js';
+import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
+
+import './SelectCard.css';const SelectCardContext = createContext(null);
+const useSelectCardContext = () => useContext(SelectCardContext);
+
+const SelectCardProvider = ({
+  children,
+  defaultValue,
+  onChange,
+  selectionMode,
+  showSelectIndicator,
+  value
+}) => {
+  const isControlled = value !== void 0;
+  const [internalSelection, setInternalSelection] = useState(() => {
+    const ids = defaultValue ?? [];
+    return new Set(selectionMode === "single" ? ids.slice(0, 1) : ids);
+  });
+  const selection = useMemo(() => {
+    if (!isControlled) return internalSelection;
+    const ids = value ?? [];
+    return new Set(selectionMode === "single" ? ids.slice(0, 1) : ids);
+  }, [isControlled, value, internalSelection, selectionMode]);
+  const radioName = useId();
+  const handleChange = (e, state, options) => {
+    if (!state || !state.id) {
+      if (!options?.internal) {
+        onChange?.(e, state);
+      }
+      return;
+    }
+    if (!isControlled) {
+      if (selectionMode === "single") {
+        setInternalSelection(state.checked ? /* @__PURE__ */ new Set([state.id]) : /* @__PURE__ */ new Set());
+      } else {
+        setInternalSelection((prev) => {
+          const next = new Set(prev);
+          if (state.checked) {
+            next.add(state.id);
+          } else {
+            next.delete(state.id);
+          }
+          return next;
+        });
+      }
+    }
+    if (!options?.internal) {
+      onChange?.(e, state);
+    }
+  };
+  const context = {
+    hasGroupDefault: defaultValue !== void 0,
+    isGroupControlled: isControlled,
+    selectionMode,
+    onChange: handleChange,
+    radioName,
+    selection,
+    showSelectIndicator
+  };
+  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: context, children });
+};
+
+const SelectCardGroup = forwardRef((props, _ref) => {
+  const {
+    ariaLabelledBy,
+    children,
+    defaultValue,
+    legend,
+    legendProps,
+    moreInfo,
+    onChange,
+    required = false,
+    selectionMode,
+    showSelectIndicator = false,
+    value,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    SelectCardProvider,
+    {
+      defaultValue,
+      onChange,
+      selectionMode,
+      showSelectIndicator,
+      value,
+      children: [
+        selectionMode === "multiple" && /* @__PURE__ */ jsx(
+          CheckboxGroup,
+          {
+            "aria-labelledby": ariaLabelledBy,
+            legend,
+            legendProps,
+            required,
+            moreInfo,
+            ...rest,
+            children
+          }
+        ),
+        selectionMode === "single" && /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            "aria-labelledby": ariaLabelledBy,
+            legend,
+            legendProps,
+            required,
+            moreInfo,
+            ...rest,
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+SelectCardGroup.displayName = "SelectCardGroup";
+
+const styles = {
+	"select-card": "_select-card_qn7fm_1",
+	"icon-wrapper": "_icon-wrapper_qn7fm_39",
+	"icon-checked": "_icon-checked_qn7fm_43",
+	"icon-unchecked": "_icon-unchecked_qn7fm_47",
+	"icon-checked-error": "_icon-checked-error_qn7fm_51",
+	"icon-checked-disabled": "_icon-checked-disabled_qn7fm_55",
+	"select-card-checkbox-unchecked": "_select-card-checkbox-unchecked_qn7fm_59",
+	"select-card-checkbox-checked": "_select-card-checkbox-checked_qn7fm_66",
+	"select-card-checkbox-error": "_select-card-checkbox-error_qn7fm_73",
+	"select-card--selected": "_select-card--selected_qn7fm_113",
+	"select-card--checked": "_select-card--checked_qn7fm_144",
+	"select-card--errored": "_select-card--errored_qn7fm_150",
+	"select-card--disabled": "_select-card--disabled_qn7fm_182",
+	"select-card--remove-drop-shadow": "_select-card--remove-drop-shadow_qn7fm_187",
+	"select-card-wrapper": "_select-card-wrapper_qn7fm_191",
+	"select-card-label": "_select-card-label_qn7fm_195"
+};
+
+const SelectCardElement = forwardRef(
+  (props, ref) => {
+    const {
+      checkboxProps,
+      children,
+      checked: checkedProp,
+      className,
+      defaultChecked: defaultCheckedProp,
+      disabled,
+      errored,
+      radioProps,
+      onChange,
+      removeDropShadow,
+      showSelectIndicator = false,
+      id,
+      ...rest
+    } = props;
+    const [checked, setChecked] = useOptionallyControlledState({
+      controlledValue: checkedProp,
+      defaultValue: defaultCheckedProp || false,
+      onChange
+    });
+    const context = useSelectCardContext();
+    const isCardControlled = checkedProp !== void 0;
+    const isGroupControlled = context?.isGroupControlled ?? false;
+    const [_, setForceRenderCount] = useState(0);
+    useLayoutEffect(() => {
+      const initialChecked = checkedProp ?? defaultCheckedProp;
+      if (initialChecked && !isGroupControlled && !context?.hasGroupDefault) {
+        context?.onChange?.(
+          void 0,
+          {
+            id,
+            checked: initialChecked
+          },
+          { internal: true }
+        );
+        setForceRenderCount((prev) => prev + 1);
+      }
+    }, []);
+    const isFirstRender = useRef(true);
+    useLayoutEffect(() => {
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+        return;
+      }
+      if (isCardControlled && context) {
+        if (context.selectionMode === "single" && !checkedProp) {
+          return;
+        }
+        context.onChange?.(
+          void 0,
+          {
+            id,
+            checked: checkedProp
+          },
+          { internal: true }
+        );
+      }
+    }, [checkedProp]);
+    const handleChange = (event) => {
+      const newChecked = event ? event.target.checked : false;
+      setChecked(newChecked);
+      context?.onChange?.(event, {
+        id,
+        checked: newChecked
+      });
+    };
+    const isChecked = context ? context.selection.has(id) : checked;
+    const showIndicator = context?.showSelectIndicator || showSelectIndicator;
+    const inputChecked = isGroupControlled ? isChecked : isCardControlled ? checkedProp : void 0;
+    const inputDefaultChecked = isGroupControlled || isCardControlled ? void 0 : context?.hasGroupDefault ? context.selection.has(id) : defaultCheckedProp;
+    const contentClassName = cx(styles["select-card"], className, {
+      [styles["select-card--remove-drop-shadow"]]: removeDropShadow,
+      [styles["select-card--checked"]]: isChecked,
+      [styles["select-card--selected"]]: isChecked && !errored,
+      [styles["select-card--errored"]]: errored,
+      [styles["select-card--disabled"]]: disabled
+    });
+    const iconClassNames = cx({
+      [styles["icon-checked"]]: isChecked && !errored && !disabled,
+      [styles["icon-unchecked"]]: !isChecked && !disabled,
+      [styles["icon-checked-error"]]: errored && !disabled,
+      [styles["icon-checked-disabled"]]: disabled
+    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      (!context || context?.selectionMode === "multiple") && /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          ...checkboxProps,
+          className: cx(
+            styles["select-card-wrapper"],
+            checkboxProps?.className,
+            {
+              [styles["select-card-checkbox-unchecked"]]: !isChecked && !errored,
+              [styles["select-card-checkbox-checked"]]: isChecked && !errored,
+              [styles["select-card-checkbox-error"]]: errored
+            }
+          ),
+          labelWrapperClassName: styles["select-card-label"],
+          checked: inputChecked,
+          defaultChecked: inputDefaultChecked,
+          onChange: handleChange,
+          disabled,
+          ref,
+          label: /* @__PURE__ */ jsx(
+            Card,
+            {
+              ...rest,
+              className: contentClassName,
+              flex: showIndicator ? "1" : void 0,
+              gap: showIndicator ? "2" : void 0,
+              alignItems: showIndicator ? "flex-start" : void 0,
+              children: showIndicator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    size: "large",
+                    svg: isChecked ? SvgCheckBox : SvgCheckBoxOutlineBlank,
+                    className: iconClassNames
+                  }
+                ) }),
+                children
+              ] }) : children
+            }
+          ),
+          hideCheckbox: true
+        }
+      ),
+      context?.selectionMode === "single" && /* @__PURE__ */ jsx(
+        Radio,
+        {
+          ...radioProps,
+          className: cx(
+            styles["select-card-wrapper"],
+            radioProps?.className,
+            {
+              [styles["select-card-checkbox-unchecked"]]: !isChecked && !errored,
+              [styles["select-card-checkbox-checked"]]: isChecked && !errored,
+              [styles["select-card-checkbox-error"]]: errored
+            }
+          ),
+          labelWrapperClassName: styles["select-card-label"],
+          checked: inputChecked,
+          defaultChecked: inputDefaultChecked,
+          onChange: handleChange,
+          disabled,
+          ref,
+          name: context.radioName,
+          label: /* @__PURE__ */ jsx(
+            Card,
+            {
+              ...rest,
+              className: contentClassName,
+              flex: showIndicator ? "1" : void 0,
+              gap: showIndicator ? "2" : void 0,
+              alignItems: showIndicator ? "flex-start" : void 0,
+              children: showIndicator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    size: "large",
+                    svg: isChecked ? SvgRadioButtonChecked : SvgRadioButtonUnchecked,
+                    className: iconClassNames
+                  }
+                ) }),
+                children
+              ] }) : children
+            }
+          ),
+          hideRadio: true
+        }
+      )
+    ] });
+  }
+);
+SelectCardElement.displayName = "SelectCard";
+const SelectCard = Object.assign(SelectCardElement, {
+  /**
+   * SelectCardGroup component for managing groups of selectable cards.
+   *
+   * Features:
+   * - Manages selection state for multiple SelectCard components
+   * - Supports both single and multiple selection modes
+   * - Provides proper accessibility with legends and ARIA labels
+   * - Handles required field validation
+   * - Automatic radio button grouping for single selection
+   * - Context provider for child SelectCard components
+   *
+   * @example
+   * <SelectCard.Group
+   *   legend="Choose your plan"
+   *   selectionMode="single"
+   *   onChange={(e, state) => console.log('Selection changed:', state)}
+   * >
+   *   <SelectCard id="basic" onChange={() => {}}>
+   *     <Text variant="headline" size="small">Basic Plan</Text>
+   *   </SelectCard>
+   *   <SelectCard id="premium" onChange={() => {}}>
+   *     <Text variant="headline" size="small">Premium Plan</Text>
+   *   </SelectCard>
+   * </SelectCard.Group>
+   */
+  Group: SelectCardGroup
+});
+
+export { SelectCard as S };
+//# sourceMappingURL=SelectCard-CtXwY8FZ.js.map

package/dist/SelectCard-CtXwY8FZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCard-CtXwY8FZ.js","sources":["../src/components/SelectCard/internal/SelectCardContext.tsx","../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import { ChangeEvent, createContext, useContext } from \"react\";\n\n/**\n * Interface for the select card state\n */\nexport interface ISelectCardState {\n  /**\n   * When `true`, adds the item to the selected state holder.\n   */\n  checked: boolean;\n\n  /**\n   * Gives an explicit id to each item in the set.\n   */\n  id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\nexport interface ISelectCardOnChangeOptions {\n  /**\n   * When `true`, doesn't fire the user's `onChange`\n   */\n  internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n  /**\n   * Callback function that is triggered when the selection state changes.\n   *\n   * @callback OnChangeCallback\n   * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n   * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n   * @returns {void}\n   */\n  onChange?: (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => void;\n\n  /**\n   * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n   */\n  selectionMode: \"single\" | \"multiple\";\n\n  /**\n   * Used internally to create a UUID for the HTML `name` property on radios.\n   */\n  radioName: string;\n\n  /**\n   * Creates a set of ids that are selected.\n   */\n  selection: Set<string | number>;\n\n  /**\n   * When `true`, indicates that selection is controlled at the group level via the `value` prop.\n   * @default false\n   */\n  isGroupControlled?: boolean;\n\n  /**\n   * When `true`, the group was given a `defaultValue` and owns the initial selection state.\n   * Individual `SelectCard` mount syncs should be skipped to avoid overriding it.\n   * @default false\n   */\n  hasGroupDefault?: boolean;\n\n  /**\n   * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n   * The indicator type (checkbox or radio) is automatically determined by the selection mode from SelectCard.Group context.\n   * @default false\n   */\n  showSelectIndicator?: boolean;\n}\n\nexport const SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { ChangeEvent, ReactNode, useId, useMemo, useState } from \"react\";\nimport {\n  ISelectCardContext,\n  ISelectCardOnChangeOptions,\n  ISelectCardState,\n  SelectCardContext,\n} from \"./SelectCardContext\";\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps extends Omit<\n  ISelectCardContext,\n  \"radioName\" | \"selection\"\n> {\n  children: ReactNode;\n\n  /**\n   * Controlled selection state. When provided, the group becomes controlled.\n   * Array of `SelectCard` ids that are currently selected.\n   */\n  value?: Array<string | number>;\n\n  /**\n   * Initial selection state for uncontrolled usage.\n   * Array of `SelectCard` ids that are selected on first render.\n   */\n  defaultValue?: Array<string | number>;\n}\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n *   selectionMode=\"multiple\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n *   <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n  children,\n  defaultValue,\n  onChange,\n  selectionMode,\n  showSelectIndicator,\n  value,\n}: ISelectCardProviderProps) => {\n  const isControlled = value !== undefined;\n  const [internalSelection, setInternalSelection] = useState<\n    Set<string | number>\n  >(() => {\n    const ids = defaultValue ?? [];\n    return new Set(selectionMode === \"single\" ? ids.slice(0, 1) : ids);\n  });\n  const selection = useMemo(() => {\n    if (!isControlled) return internalSelection;\n    const ids = value ?? [];\n    return new Set(selectionMode === \"single\" ? ids.slice(0, 1) : ids);\n  }, [isControlled, value, internalSelection, selectionMode]);\n\n  const radioName = useId();\n\n  const handleChange = (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => {\n    if (!state || !state.id) {\n      if (!options?.internal) {\n        onChange?.(e, state);\n      }\n\n      return;\n    }\n\n    // Update internal selection when uncontrolled\n    if (!isControlled) {\n      if (selectionMode === \"single\") {\n        setInternalSelection(state.checked ? new Set([state.id]) : new Set());\n      } else {\n        setInternalSelection((prev) => {\n          const next = new Set(prev);\n          if (state.checked) {\n            next.add(state.id!);\n          } else {\n            next.delete(state.id!);\n          }\n          return next;\n        });\n      }\n    }\n\n    if (!options?.internal) {\n      onChange?.(e, state);\n    }\n  };\n\n  const context = {\n    hasGroupDefault: defaultValue !== undefined,\n    isGroupControlled: isControlled,\n    selectionMode,\n    onChange: handleChange,\n    radioName,\n    selection,\n    showSelectIndicator,\n  };\n\n  return (\n    <SelectCardContext.Provider value={context}>\n      {children}\n    </SelectCardContext.Provider>\n  );\n};\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio/RadioGroup\";\nimport { SelectCardProvider } from \"./internal/SelectCardProvider\";\nimport { ISelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n  extends\n    Omit<ISelectCardContext, \"radioName\" | \"selection\">,\n    Pick<CheckboxGroupProps, \"moreInfo\"> {\n  /**\n   * Associates the legend with content below.\n   */\n  ariaLabelledBy?: string;\n\n  children?: ReactNode;\n\n  /**\n   * Initial selection state for uncontrolled usage.\n   * Array of `SelectCard` ids that are selected on first render.\n   * Takes precedence over individual `SelectCard` `defaultChecked` props.\n   */\n  defaultValue?: Array<string | number>;\n\n  /**\n   * Sets the legend on the group.\n   */\n  legend: CheckboxGroupProps[\"legend\"];\n\n  /**\n   * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).\n   */\n  legendProps?: CheckboxGroupProps[\"legendProps\"];\n\n  /**\n   * When `true`, sets \"required\" text in label.\n   * @accessibility This does not enforce error when nothing is selected.\n   * @default false\n   */\n  required?: boolean;\n\n  /**\n   * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n   * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` setting.\n   * @default false\n   */\n  showSelectIndicator?: boolean;\n\n  /**\n   * Controlled selection state. When provided, the group becomes controlled.\n   * Array of `SelectCard` ids that are currently selected.\n   */\n  value?: Array<string | number>;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n * - Supports AI mark indicator\n *\n * @example\n * <SelectCardGroup\n *   legend=\"Choose your plan\"\n *   selectionMode=\"single\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n *   legendProps={{ aiMark: true }}\n * >\n *   <SelectCard id=\"basic\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n *   </SelectCard>\n *   <SelectCard id=\"premium\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n *   </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n  HTMLInputElement,\n  SelectCardGroupProps\n>((props, _ref) => {\n  const {\n    ariaLabelledBy,\n    children,\n    defaultValue,\n    legend,\n    legendProps,\n    moreInfo,\n    onChange,\n    required = false,\n    selectionMode,\n    showSelectIndicator = false,\n    value,\n    ...rest\n  } = props;\n\n  return (\n    <SelectCardProvider\n      defaultValue={defaultValue}\n      onChange={onChange}\n      selectionMode={selectionMode}\n      showSelectIndicator={showSelectIndicator}\n      value={value}\n    >\n      {selectionMode === \"multiple\" && (\n        <CheckboxGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          legendProps={legendProps}\n          required={required}\n          moreInfo={moreInfo}\n          {...rest}\n        >\n          {children}\n        </CheckboxGroup>\n      )}\n      {selectionMode === \"single\" && (\n        <RadioGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          legendProps={legendProps}\n          required={required}\n          moreInfo={moreInfo}\n          {...rest}\n        >\n          {children}\n        </RadioGroup>\n      )}\n    </SelectCardProvider>\n  );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import {\n  useLayoutEffect,\n  useState,\n  useRef,\n  forwardRef,\n  type ChangeEvent,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\nimport { Icon } from \"../Icon\";\n\nimport CheckboxOutline from \"@servicetitan/hammer-icon/mdi/round/check_box_outline_blank.svg\";\nimport CheckboxChecked from \"@servicetitan/hammer-icon/mdi/round/check_box.svg\";\nimport RadioOutline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport RadioChecked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\n\nimport styles from \"./SelectCard.module.scss\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n  /**\n   * Passes props to the underlying `<Checkbox />` component.\n   */\n  checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n  /**\n   * Controlled state. When provided, the component becomes controlled.\n   */\n  checked?: boolean;\n\n  /**\n   * Uncontrolled initial state. Ignored when inside a `SelectCard.Group` that sets `defaultValue`.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * When `true`, disables the card.\n   */\n  disabled?: boolean;\n\n  /**\n   * When `true`, sets error styling on the card.\n   */\n  errored?: boolean;\n\n  /**\n   * A unique identifier for the card, used to track the selection state.\n   */\n  id: string | number;\n\n  /**\n   * Function called on selection state change.\n   */\n  onChange?: (value: boolean) => void;\n\n  /**\n   * Passes props to the underlying `<Radio />` component.\n   */\n  radioProps?: Omit<RadioProps, \"label\">;\n\n  /**\n   * Removes the drop shadow effect on the card.\n   */\n  removeDropShadow?: boolean;\n\n  /**\n   * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n   * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` prop on the\n   * `SelectCard.Group`, and defaults to checkbox if no `SelectCard.Group` is used.\n   * @default false\n   */\n  showSelectIndicator?: boolean;\n}\n\nconst SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n  (props, ref) => {\n    const {\n      checkboxProps,\n      children,\n      checked: checkedProp,\n      className,\n      defaultChecked: defaultCheckedProp,\n      disabled,\n      errored,\n      radioProps,\n      onChange,\n      removeDropShadow,\n      showSelectIndicator = false,\n      id,\n      ...rest\n    } = props;\n\n    const [checked, setChecked] = useOptionallyControlledState<boolean>({\n      controlledValue: checkedProp,\n      defaultValue: defaultCheckedProp || false,\n      onChange,\n    });\n\n    const context = useSelectCardContext();\n    const isCardControlled = checkedProp !== undefined;\n    const isGroupControlled = context?.isGroupControlled ?? false;\n\n    // we need to re-render after setting the initial selection state on context\n    const [_, setForceRenderCount] = useState(0);\n    useLayoutEffect(() => {\n      // Sync initial checked state to context (for both controlled and uncontrolled modes).\n      // Skip when group is controlled — the group's value prop owns the selection Set.\n      const initialChecked = checkedProp ?? defaultCheckedProp;\n      if (initialChecked && !isGroupControlled && !context?.hasGroupDefault) {\n        context?.onChange?.(\n          undefined,\n          {\n            id,\n            checked: initialChecked,\n          },\n          { internal: true },\n        );\n\n        setForceRenderCount((prev) => prev + 1);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Sync controlled state changes to context (skip initial mount - handled by above effect)\n    const isFirstRender = useRef(true);\n    useLayoutEffect(() => {\n      if (isFirstRender.current) {\n        isFirstRender.current = false;\n        return;\n      }\n      if (isCardControlled && context) {\n        // In single selection mode, only sync when checked is true.\n        // Unchecking is implicit when another card becomes checked.\n        // Syncing checked=false would clear the entire selection.\n        if (context.selectionMode === \"single\" && !checkedProp) {\n          return;\n        }\n        context.onChange?.(\n          undefined,\n          {\n            id,\n            checked: checkedProp!,\n          },\n          { internal: true },\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [checkedProp]);\n\n    const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event ? event.target.checked : false;\n      setChecked(newChecked);\n      context?.onChange?.(event, {\n        id,\n        checked: newChecked,\n      });\n    };\n\n    // A selection in the group context supersedes the normal checked state of the card\n    const isChecked = context ? context.selection.has(id) : checked;\n    const showIndicator = context?.showSelectIndicator || showSelectIndicator;\n\n    // When group is controlled (value prop), drive input from context selection.\n    // When group has defaultValue, it takes precedence — ignore individual defaultChecked.\n    const inputChecked = isGroupControlled\n      ? isChecked\n      : isCardControlled\n        ? checkedProp\n        : undefined;\n    const inputDefaultChecked =\n      isGroupControlled || isCardControlled\n        ? undefined\n        : context?.hasGroupDefault\n          ? context.selection.has(id)\n          : defaultCheckedProp;\n\n    const contentClassName = cx(styles[\"select-card\"], className, {\n      [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n      [styles[\"select-card--checked\"]]: isChecked,\n      [styles[\"select-card--selected\"]]: isChecked && !errored,\n      [styles[\"select-card--errored\"]]: errored,\n      [styles[\"select-card--disabled\"]]: disabled,\n    });\n\n    const iconClassNames = cx({\n      [styles[\"icon-checked\"]]: isChecked && !errored && !disabled,\n      [styles[\"icon-unchecked\"]]: !isChecked && !disabled,\n      [styles[\"icon-checked-error\"]]: errored && !disabled,\n      [styles[\"icon-checked-disabled\"]]: disabled,\n    });\n\n    return (\n      <>\n        {(!context || context?.selectionMode === \"multiple\") && (\n          <Checkbox\n            {...checkboxProps}\n            className={cx(\n              styles[\"select-card-wrapper\"],\n              checkboxProps?.className,\n              {\n                [styles[\"select-card-checkbox-unchecked\"]]:\n                  !isChecked && !errored,\n                [styles[\"select-card-checkbox-checked\"]]: isChecked && !errored,\n                [styles[\"select-card-checkbox-error\"]]: errored,\n              },\n            )}\n            labelWrapperClassName={styles[\"select-card-label\"]}\n            checked={inputChecked}\n            defaultChecked={inputDefaultChecked}\n            onChange={handleChange}\n            disabled={disabled}\n            ref={ref}\n            label={\n              <Card\n                {...rest}\n                className={contentClassName}\n                flex={showIndicator ? \"1\" : undefined}\n                gap={showIndicator ? \"2\" : undefined}\n                alignItems={showIndicator ? \"flex-start\" : undefined}\n              >\n                {showIndicator ? (\n                  <>\n                    <span className={styles[\"icon-wrapper\"]} aria-hidden>\n                      <Icon\n                        size=\"large\"\n                        svg={isChecked ? CheckboxChecked : CheckboxOutline}\n                        className={iconClassNames}\n                      />\n                    </span>\n                    {children}\n                  </>\n                ) : (\n                  children\n                )}\n              </Card>\n            }\n            hideCheckbox\n          />\n        )}\n        {context?.selectionMode === \"single\" && (\n          <Radio\n            {...radioProps}\n            className={cx(\n              styles[\"select-card-wrapper\"],\n              radioProps?.className,\n              {\n                [styles[\"select-card-checkbox-unchecked\"]]:\n                  !isChecked && !errored,\n                [styles[\"select-card-checkbox-checked\"]]: isChecked && !errored,\n                [styles[\"select-card-checkbox-error\"]]: errored,\n              },\n            )}\n            labelWrapperClassName={styles[\"select-card-label\"]}\n            checked={inputChecked}\n            defaultChecked={inputDefaultChecked}\n            onChange={handleChange}\n            disabled={disabled}\n            ref={ref}\n            name={context.radioName}\n            label={\n              <Card\n                {...rest}\n                className={contentClassName}\n                flex={showIndicator ? \"1\" : undefined}\n                gap={showIndicator ? \"2\" : undefined}\n                alignItems={showIndicator ? \"flex-start\" : undefined}\n              >\n                {showIndicator ? (\n                  <>\n                    <span className={styles[\"icon-wrapper\"]} aria-hidden>\n                      <Icon\n                        size=\"large\"\n                        svg={isChecked ? RadioChecked : RadioOutline}\n                        className={iconClassNames}\n                      />\n                    </span>\n                    {children}\n                  </>\n                ) : (\n                  children\n                )}\n              </Card>\n            }\n            hideRadio\n          />\n        )}\n      </>\n    );\n  },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n *   id=\"option-1\"\n *   onChange={(checked) => console.log('Selected:', checked)}\n * >\n *   <Text variant=\"headline\" size=\"small\">Option 1</Text>\n *   <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n  /**\n   * SelectCardGroup component for managing groups of selectable cards.\n   *\n   * Features:\n   * - Manages selection state for multiple SelectCard components\n   * - Supports both single and multiple selection modes\n   * - Provides proper accessibility with legends and ARIA labels\n   * - Handles required field validation\n   * - Automatic radio button grouping for single selection\n   * - Context provider for child SelectCard components\n   *\n   * @example\n   * <SelectCard.Group\n   *   legend=\"Choose your plan\"\n   *   selectionMode=\"single\"\n   *   onChange={(e, state) => console.log('Selection changed:', state)}\n   * >\n   *   <SelectCard id=\"basic\" onChange={() => {}}>\n   *     <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n   *   </SelectCard>\n   *   <SelectCard id=\"premium\" onChange={() => {}}>\n   *     <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n   *   </SelectCard>\n   * </SelectCard.Group>\n   */\n  Group: SelectCardGroup,\n});\n"],"names":["CheckboxChecked","CheckboxOutline","RadioChecked","RadioOutline"],"mappings":"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"}

package/dist/SelectCard.css

@@ -1,84 +1,137 @@
-@layer starter, reset, base, state, application;
-@layer base {
-  ._select-card_1grbf_2 {
-    --box-shadow-size: 0rem 0.125rem 0.5rem;
-    --box-shadow-color: var(--shadow-color, rgba(20, 20, 20, 0.0784313725));
-    box-shadow: var(--box-shadow-size) var(--box-shadow-color);
-    cursor: pointer;
-    transition-property: box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms;
-    isolation: isolate;
-    position: relative;
-    width: 100%;
-  }
-  ._select-card_1grbf_2::before {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border-radius: inherit;
-  }
-  ._select-card-wrapper_1grbf_20 {
-    display: flex;
-  }
-  ._select-card-label_1grbf_23 {
-    flex: 1;
-  }
-  ._icon-wrapper_1grbf_26 {
-    --a2-checkbox-indicator-icon-checked-display: none;
-    --a2-checkbox-indicator-icon-unchecked-display: inline-flex;
-    --a2-checkbox-indicator-icon-color: var(
-      --checkbox-unchecked-fill-color-default
-    );
-  }
-  ._icon-wrapper_1grbf_26 ._icon-checked_1grbf_33,
-  ._icon-wrapper_1grbf_26 ._icon-unchecked_1grbf_34 {
-    color: var(--a2-checkbox-indicator-icon-color);
-  }
-  ._icon-wrapper_1grbf_26 ._icon-checked_1grbf_33 {
-    display: var(--a2-checkbox-indicator-icon-checked-display);
-  }
-  ._icon-wrapper_1grbf_26 ._icon-unchecked_1grbf_34 {
-    display: var(--a2-checkbox-indicator-icon-unchecked-display);
-  }
+.anvil2{@layer starter, reset, base, state, application;._select-card_qn7fm_1 {
+  --a2-internal-select-card-checkbox-foreground-color: var(
+    --a2-mod-select-card-checkbox-foreground-color
+  );
+  --a2-mod-select-card-background-color-active: var(--a2-select-card-unchecked-default-background-color-active, var(--a2-background-color-default-active, light-dark(var(--a2-color-neutral-40, #f1f1f1), var(--a2-color-neutral-700, #404040))));
+  --a2-mod-select-card-background-color-hover: var(--a2-select-card-unchecked-default-background-color-hover, var(--a2-background-color-default-hover, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+  --a2-mod-select-card-background-color: var(--a2-select-card-unchecked-default-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  --a2-mod-select-card-border-color: var(--a2-select-card-unchecked-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
+  --a2-mod-select-card-border-width: var(--a2-size-quarter, 0.0625rem);
+  --a2-mod-select-card-box-shadow: var(--a2-shadow-size-float, var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem))
+    var(--a2-mod-select-card-shadow-color);
+  --a2-mod-select-card-checkbox-foreground-color: var(--a2-select-card-unchecked-foreground-color, var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
+  --a2-mod-select-card-checkbox-foreground-color-active: var(--a2-select-card-unchecked-foreground-color-active, var(--a2-foreground-color-primary-active, light-dark(var(--a2-color-blue-800, #003472), var(--a2-color-blue-200, #9ecaff))));
+  --a2-mod-select-card-checkbox-foreground-color-hover: var(--a2-select-card-unchecked-foreground-color-hover, var(--a2-foreground-color-primary-hover, light-dark(var(--a2-color-blue-700, #1d4ca3), var(--a2-color-blue-200, #9ecaff))));
+  --a2-mod-select-card-cursor: pointer;
+  --a2-mod-select-card-focus-ring-color: var(--a2-select-card-unchecked-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
+  --a2-mod-select-card-icon-checked-display: none;
+  --a2-mod-select-card-icon-color: var(--a2-select-card-unchecked-icon-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-select-card-icon-unchecked-display: inline-flex;
+  --a2-mod-select-card-opacity: 1;
+  --a2-mod-select-card-outline-color: transparent;
+  --a2-mod-select-card-outline-width: 0;
+  --a2-mod-select-card-shadow-color: var(--a2-select-card-unchecked-shadow-color, var(--a2-shadow-color-default, light-dark(rgba(26, 26, 26, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
+  box-shadow: var(--a2-mod-select-card-box-shadow);
+  cursor: var(--a2-mod-select-card-cursor);
+  isolation: isolate;
+  opacity: var(--a2-mod-select-card-opacity);
+  outline-width: var(--a2-mod-select-card-border-width);
+  outline-color: var(--a2-mod-select-card-border-color);
+  outline-style: solid;
+  outline-offset: calc(var(--a2-mod-select-card-border-width) * -1);
+  position: relative;
+  transition-duration: var(--a2-duration-default, 200ms);
+  transition-property: box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: var(--a2-transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
+  width: 100%;
+}._icon-wrapper_qn7fm_39 {
+  height: var(--a2-size-6, 1.5rem);
+}._icon-checked_qn7fm_43 {
+  color: var(--a2-select-card-checked-icon-color, var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
+}._icon-unchecked_qn7fm_47 {
+  color: var(--a2-select-card-unchecked-icon-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+}._icon-checked-error_qn7fm_51 {
+  color: var(--a2-select-card-checked-error-icon-color, var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
+}._icon-checked-disabled_qn7fm_55 {
+  color: var(--a2-select-card-checked-icon-color-disabled, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+}._select-card-checkbox-unchecked_qn7fm_59 {
+  --a2-mod-checkbox-label-border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  --a2-mod-checkbox-label-focus-ring-color: var(--a2-select-card-unchecked-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
+  --a2-mod-radio-label-border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  --a2-mod-radio-label-focus-ring-color: var(--a2-select-card-unchecked-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
+}._select-card-checkbox-checked_qn7fm_66 {
+  --a2-mod-checkbox-label-border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  --a2-mod-checkbox-label-focus-ring-color: var(--a2-select-card-checked-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
+  --a2-mod-radio-label-border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  --a2-mod-radio-label-focus-ring-color: var(--a2-select-card-checked-focus-ring-color, var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)))));
+}._select-card-checkbox-error_qn7fm_73 {
+  --a2-mod-checkbox-label-border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  --a2-mod-checkbox-label-focus-ring-color: var(--a2-select-card-checked-error-focus-ring-color, var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))));
+  --a2-mod-radio-label-border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  --a2-mod-radio-label-focus-ring-color: var(--a2-select-card-checked-error-focus-ring-color, var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))));
+}._select-card_qn7fm_1:hover {
+  --a2-internal-select-card-checkbox-foreground-color: var(
+    --a2-mod-select-card-checkbox-foreground-color-hover
+  );
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-default-background-color-hover, var(--a2-background-color-default-hover, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+}._select-card_qn7fm_1:active {
+  --a2-internal-select-card-checkbox-foreground-color: var(
+    --a2-mod-select-card-checkbox-foreground-color-active
+  );
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-default-background-color-active, var(--a2-background-color-default-active, light-dark(var(--a2-color-neutral-40, #f1f1f1), var(--a2-color-neutral-700, #404040))));
+}._select-card-bg-strong_qn7fm_93 {
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-strong-background-color, var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+}._select-card-bg-strong_qn7fm_93:hover, ._select-card-bg-strong_qn7fm_93[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-strong-background-color-hover, var(--a2-background-color-strong-hover, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+}._select-card-bg-strong_qn7fm_93:active, ._select-card-bg-strong_qn7fm_93[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-strong-background-color-active, var(--a2-background-color-strong-active, light-dark(var(--a2-color-neutral-70, #e8e8e8), var(--a2-color-neutral-600, #545454))));
+}._select-card-bg-stronger_qn7fm_103 {
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-stronger-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+}._select-card-bg-stronger_qn7fm_103:hover, ._select-card-bg-stronger_qn7fm_103[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-stronger-background-color-hover, var(--a2-background-color-stronger-hover, light-dark(var(--a2-color-neutral-90, #e5e5e5), var(--a2-color-neutral-600, #545454))));
+}._select-card-bg-stronger_qn7fm_103:active, ._select-card-bg-stronger_qn7fm_103[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-unchecked-stronger-background-color-active, var(--a2-background-color-stronger-active, light-dark(var(--a2-color-neutral-100, #dfdfdf), var(--a2-color-neutral-500, #707070))));
+}._select-card--selected_qn7fm_113 {
+  --a2-mod-select-card-border-color: var(--a2-select-card-checked-border-color, var(--a2-border-color-strong, light-dark(var(--a2-color-neutral-700, #404040), var(--a2-color-neutral-80, #e6e6e6))));
+  --a2-mod-select-card-border-width: var(--a2-size-half, 0.125rem);
+}._select-card--selected_qn7fm_113:hover, ._select-card--selected_qn7fm_113[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-default-background-color-hover, var(--a2-background-color-default-hover, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+}._select-card--selected_qn7fm_113:active, ._select-card--selected_qn7fm_113[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-default-background-color-active, var(--a2-background-color-default-active, light-dark(var(--a2-color-neutral-40, #f1f1f1), var(--a2-color-neutral-700, #404040))));
+}._select-card--selected_qn7fm_113._select-card-bg-strong_qn7fm_93 {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-strong-background-color, var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+}._select-card--selected_qn7fm_113._select-card-bg-strong_qn7fm_93:hover, ._select-card--selected_qn7fm_113._select-card-bg-strong_qn7fm_93[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-strong-background-color-hover, var(--a2-background-color-strong-hover, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+}._select-card--selected_qn7fm_113._select-card-bg-strong_qn7fm_93:active, ._select-card--selected_qn7fm_113._select-card-bg-strong_qn7fm_93[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-strong-background-color-active, var(--a2-background-color-strong-active, light-dark(var(--a2-color-neutral-70, #e8e8e8), var(--a2-color-neutral-600, #545454))));
+}._select-card--selected_qn7fm_113._select-card-bg-stronger_qn7fm_103 {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-stronger-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+}._select-card--selected_qn7fm_113._select-card-bg-stronger_qn7fm_103:hover, ._select-card--selected_qn7fm_113._select-card-bg-stronger_qn7fm_103[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-stronger-background-color-hover, var(--a2-background-color-stronger-hover, light-dark(var(--a2-color-neutral-90, #e5e5e5), var(--a2-color-neutral-600, #545454))));
+}._select-card--selected_qn7fm_113._select-card-bg-stronger_qn7fm_103:active, ._select-card--selected_qn7fm_113._select-card-bg-stronger_qn7fm_103[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-stronger-background-color-active, var(--a2-background-color-stronger-active, light-dark(var(--a2-color-neutral-100, #dfdfdf), var(--a2-color-neutral-500, #707070))));
+}._select-card--checked_qn7fm_144 {
+  --a2-mod-select-card-icon-color: var(
+    --a2-internal-select-card-checkbox-foreground-color
+  );
+}._select-card--errored_qn7fm_150 {
+  --a2-mod-select-card-border-color: var(--a2-select-card-checked-error-border-color, var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e))));
+  --a2-mod-select-card-border-width: var(--a2-size-half, 0.125rem);
+  --a2-mod-select-card-icon-color: var(--a2-select-card-checked-error-icon-color, var(--a2-foreground-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
+}._select-card--errored_qn7fm_150:hover, ._select-card--errored_qn7fm_150[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-default-background-color-hover, var(--a2-background-color-default-hover, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+}._select-card--errored_qn7fm_150:active, ._select-card--errored_qn7fm_150[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-default-background-color-active, var(--a2-background-color-default-active, light-dark(var(--a2-color-neutral-40, #f1f1f1), var(--a2-color-neutral-700, #404040))));
+}._select-card--errored_qn7fm_150._select-card-bg-strong_qn7fm_93 {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-strong-background-color, var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929))));
+}._select-card--errored_qn7fm_150._select-card-bg-strong_qn7fm_93:hover, ._select-card--errored_qn7fm_150._select-card-bg-strong_qn7fm_93[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-strong-background-color-hover, var(--a2-background-color-strong-hover, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+}._select-card--errored_qn7fm_150._select-card-bg-strong_qn7fm_93:active, ._select-card--errored_qn7fm_150._select-card-bg-strong_qn7fm_93[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-strong-background-color-active, var(--a2-background-color-strong-active, light-dark(var(--a2-color-neutral-70, #e8e8e8), var(--a2-color-neutral-600, #545454))));
+}._select-card--errored_qn7fm_150._select-card-bg-stronger_qn7fm_103 {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-stronger-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+}._select-card--errored_qn7fm_150._select-card-bg-stronger_qn7fm_103:hover, ._select-card--errored_qn7fm_150._select-card-bg-stronger_qn7fm_103[data-interactive=hover] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-stronger-background-color-hover, var(--a2-background-color-stronger-hover, light-dark(var(--a2-color-neutral-90, #e5e5e5), var(--a2-color-neutral-600, #545454))));
+}._select-card--errored_qn7fm_150._select-card-bg-stronger_qn7fm_103:active, ._select-card--errored_qn7fm_150._select-card-bg-stronger_qn7fm_103[data-interactive=active] {
+  --a2-mod-card-background-color: var(--a2-select-card-checked-error-stronger-background-color-active, var(--a2-background-color-stronger-active, light-dark(var(--a2-color-neutral-100, #dfdfdf), var(--a2-color-neutral-500, #707070))));
+}._select-card--disabled_qn7fm_182 {
+  --a2-mod-select-card-cursor: not-allowed;
+  --a2-mod-select-card-opacity: 0.4;
+}._select-card--remove-drop-shadow_qn7fm_187 {
+  --a2-mod-select-card-box-shadow: none;
+}._select-card-wrapper_qn7fm_191 {
+  display: flex;
+}._select-card-label_qn7fm_195 {
+  flex: 1;
 }
-@layer state {
-  ._select-card--selected_1grbf_45 {
-    border: 0.0625rem solid var(--border-color-strong, #444445);
-    outline: 0.0625rem solid var(--border-color-strong, #444445);
-  }
-  ._select-card_1grbf_2:hover::before {
-    content: "";
-    background-color: var(--overlay-color-hover, rgba(20, 20, 20, 0.0784313725));
-  }
-  ._select-card_1grbf_2:active::before {
-    content: "";
-    background-color: var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137));
-  }
-  ._select-card_1grbf_2:focus {
-    outline: 0.25rem solid var(--focus-ring-color, #0265DC);
-    outline-offset: 0.125rem;
-  }
-  ._select-card--checked_1grbf_61 ._icon-wrapper_1grbf_26 {
-    --a2-checkbox-indicator-icon-checked-display: inline-flex;
-    --a2-checkbox-indicator-icon-unchecked-display: none;
-    --a2-checkbox-indicator-icon-color: var(
-      --checkbox-checked-fill-color-default
-    );
-  }
-  ._select-card--errored_1grbf_68 {
-    border: 2px solid var(--border-color-danger, #e13212);
-  }
-  ._select-card--errored_1grbf_68 ._icon-wrapper_1grbf_26 {
-    --a2-checkbox-indicator-icon-color: var(
-      --checkbox-checked-error-fill-color-default
-    );
-  }
-  ._select-card--disabled_1grbf_76 {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-  ._select-card--remove-drop-shadow_1grbf_80 {
-    box-shadow: none;
-  }
 }