@servicetitan/anvil2 2.9.0 → 3.0.0

package/dist/SearchField.css

@@ -1,41 +1,24 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._searchfield_12ckm_2 input[type=search]::-webkit-search-cancel-button {
-    display: none;
-  }
+.anvil2{@layer starter, reset, base, state, application;._input-wrapper_14btk_1 {
+  padding-inline-end: var(--a2-size-2, 0.5rem);
+  position: relative;
+}._input-wrapper_14btk_1:has(._clear_14btk_5:active) {
+  outline: var(--a2-size-half, 0.125rem) solid var(--a2-text-field-focus-ring-color-default, 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)))));
+  outline-offset: var(--a2-size-half, 0.125rem);
+}._input_14btk_1[type=search]::-webkit-search-cancel-button {
+  display: none;
+}._input_14btk_1[type=search] {
+  padding-inline-end: var(--a2-mod-searchfield-input-padding-inline-end, var(--a2-size-2, 0.5rem));
+}._input_14btk_1[type=search]::-moz-placeholder {
+  color: var(--a2-text-field-input-placeholder-foreground-color, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+}._input_14btk_1[type=search]::placeholder {
+  color: var(--a2-text-field-input-placeholder-foreground-color, var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4))));
+}._input--has-value_14btk_21 {
+  --a2-mod-searchfield-input-padding-inline-end: var(--a2-size-8, 2rem);
+}._clear_14btk_5 {
+  border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem));
+  cursor: pointer;
+  inset-inline-end: var(--a2-size-2, 0.5rem);
+  padding: var(--a2-size-1, 0.25rem);
+  position: absolute;
 }
-@layer base {
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7 {
-    position: relative;
-    padding-inline-end: 0.5rem;
-  }
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7:has(._clear_12ckm_11:active) {
-    outline: 0.125rem solid var(--focus-ring-color, #0265DC);
-    outline-offset: 0.125rem;
-  }
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7 ._input_12ckm_7 {
-    padding-inline-end: 0.5rem;
-  }
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7 ._input_12ckm_7::-moz-placeholder {
-    color: var(--foreground-color-subdued, #737475);
-  }
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7 ._input_12ckm_7::placeholder {
-    color: var(--foreground-color-subdued, #737475);
-  }
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7 ._input_12ckm_7._input--has-value_12ckm_21 {
-    padding-inline-end: 2rem;
-  }
-  ._searchfield_12ckm_2 ._clear_12ckm_11 {
-    position: absolute;
-    inset-inline-end: 0.5rem;
-    border-radius: 0.375rem;
-    padding: 0.25rem;
-    cursor: pointer;
-  }
-}
-@layer state {
-  ._searchfield_12ckm_2 ._input-wrapper_12ckm_7:has(._clear_12ckm_11:active) {
-    outline: 0.125rem solid var(--focus-ring-color, #0265DC);
-    outline-offset: 0.125rem;
-  }
 }

package/dist/SearchField.js

@@ -1,2 +1,2 @@
-export { S as SearchField } from './SearchField-im7AHGYo.js';
+export { S as SearchField } from './SearchField-CsRGYZx3.js';
 //# sourceMappingURL=SearchField.js.map

package/dist/{SegmentedControl-B9NWUF7s.js → SegmentedControl-Chhqyyra.js}

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useRef, useId } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
-import { D as Duration } from './primitive-C3RFDRA8.js';
-import { I as Icon } from './Icon-DuIlne4x.js';
+import { D as DurationDefault } from './primitive-DXlHdTFb.js';
+import { I as Icon } from './Icon-BMMbp40n.js';
 import { u as useReducedMotion } from './use-reduced-motion-CqjZZ5QB.js';
 import { useTrackingId } from './useTrackingId.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
@@ -11,21 +11,19 @@ import { u as useOptionallyControlledState } from './useOptionallyControlledStat
 
 import './SegmentedControl.css';const SegmentedControlContext = createContext({});
 
-const legend = "_legend_1jy4v_3";
-const children = "_children_1jy4v_4";
-const segment = "_segment_1jy4v_2";
-const fill = "_fill_1jy4v_80";
-const small = "_small_1jy4v_83";
-const medium = "_medium_1jy4v_92";
+const segment = "_segment_12jil_1";
+const input = "_input_12jil_54";
+const fill = "_fill_12jil_98";
+const small = "_small_12jil_102";
+const medium = "_medium_12jil_113";
 const styles = {
-	"segmented-control": "_segmented-control_1jy4v_2",
-	legend: legend,
-	children: children,
-	"select-indicator": "_select-indicator_1jy4v_5",
+	"segmented-control": "_segmented-control_12jil_1",
 	segment: segment,
+	input: input,
+	"select-indicator": "_select-indicator_12jil_73",
 	fill: fill,
 	small: small,
-	"icon-only": "_icon-only_1jy4v_89",
+	"icon-only": "_icon-only_12jil_107",
 	medium: medium
 };
 
@@ -71,7 +69,8 @@ const SegmentedControlSegment = forwardRef((props, ref) => {
             value,
             onChange: () => setCurrent?.(value),
             checked: current === value,
-            "aria-checked": current === value
+            "aria-checked": current === value,
+            className: styles["input"]
           }
         ),
         icon ? /* @__PURE__ */ jsx(Icon, { svg: icon, "aria-hidden": true }) : null,
@@ -82,7 +81,7 @@ const SegmentedControlSegment = forwardRef((props, ref) => {
             layoutId: name,
             className: styles["select-indicator"],
             transition: {
-              duration: shouldReduceMotion ? 0 : +Duration.value.replace("ms", "") / 1e3
+              duration: shouldReduceMotion ? 0 : +DurationDefault.value.replace("ms", "") / 1e3
             }
           }
         )
@@ -175,4 +174,4 @@ const SegmentedControl = Object.assign(
 SegmentedControl.displayName = "SegmentedControl";
 
 export { SegmentedControl as S, SegmentedControlSegment as a };
-//# sourceMappingURL=SegmentedControl-B9NWUF7s.js.map
+//# sourceMappingURL=SegmentedControl-Chhqyyra.js.map

package/dist/SegmentedControl-Chhqyyra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-Chhqyyra.js","sources":["../src/components/SegmentedControl/internal/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControlSegment.tsx","../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { SegmentedControlSegmentProps } from \"../SegmentedControlSegment\";\nimport { SegmentedControlProps } from \"../SegmentedControl\";\n\n/**\n * Context props for SegmentedControl internal state management\n */\nexport type SegmentedControlContextProps = {\n  /**\n   * Currently selected segment value\n   */\n  current?: SegmentedControlSegmentProps[\"value\"];\n  /**\n   * Function to set the current segment\n   */\n  setCurrent?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n  /**\n   * Change handler for the segmented control\n   */\n  onChange?: SegmentedControlProps[\"onChange\"];\n  /**\n   * Name attribute for radio inputs\n   */\n  name?: string;\n};\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextProps>({});\n","import {\n  useContext,\n  useRef,\n  forwardRef,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * State object returned by segment interactions\n */\nexport type SegmentState = {\n  /**\n   * Whether the segment is checked\n   */\n  checked: boolean;\n  /**\n   * The value of the segment\n   */\n  value?: SegmentedControlSegmentProps[\"value\"];\n};\n\n/**\n * Props for the SegmentedControlSegment component\n * @extends ComponentPropsWithoutRef<\"label\">\n */\nexport type SegmentedControlSegmentProps = ComponentPropsWithoutRef<\"label\"> & {\n  /**\n   * Optional icon to display in the segment\n   */\n  icon?: IconProps[\"svg\"];\n  /**\n   * Value of the segment\n   */\n  value: string;\n  /**\n   * The content to display in the segment\n   */\n  children?: React.ReactNode;\n} & DataTrackingId;\n\n/**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n * - Icon-only mode when no children provided\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n *   Option 1\n * </SegmentedControl.Segment>\n *\n * @example\n * <SegmentedControl.Segment value=\"icon-only\" icon={IconOnly} />\n */\nexport const SegmentedControlSegment = forwardRef<\n  HTMLLabelElement,\n  SegmentedControlSegmentProps\n>((props, ref) => {\n  const {\n    icon,\n    value,\n    children,\n    className,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const shouldReduceMotion = useReducedMotion();\n  const { current, setCurrent, name } = useContext(SegmentedControlContext);\n  const labelRef = useRef<HTMLSpanElement>(null);\n\n  const classNames = cx(styles.segment, className, {\n    [styles[\"icon-only\"]]: icon && !children,\n  });\n\n  const data = {\n    value: props.value,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"SegmentedControlSegment\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  // For icon-only segments (no children), use aria-label if provided, otherwise fall back to value\n  const computedAriaLabel = !children ? ariaLabel || value : undefined;\n\n  return (\n    <>\n      <label\n        className={classNames}\n        ref={useMergeRefs([labelRef, ref])}\n        data-tracking-id={trackingId}\n        data-anv=\"segmented-control-segment\"\n        aria-label={computedAriaLabel}\n        {...rest}\n      >\n        <input\n          type=\"radio\"\n          name={name}\n          value={value}\n          onChange={() => setCurrent?.(value)}\n          checked={current === value}\n          aria-checked={current === value}\n          className={styles[\"input\"]}\n        />\n        {icon ? <Icon svg={icon} aria-hidden /> : null}\n        {children}\n        {current === value && (\n          <motion.span\n            layoutId={name}\n            className={styles[\"select-indicator\"]}\n            transition={{\n              duration: shouldReduceMotion\n                ? 0\n                : +core.primitive.DurationDefault.value.replace(\"ms\", \"\") /\n                  1000,\n            }}\n          />\n        )}\n      </label>\n    </>\n  );\n});\n\nSegmentedControlSegment.displayName = \"SegmentedControlSegment\";\n","import { forwardRef, useId, ComponentPropsWithoutRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { motion } from \"motion/react\";\n\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\nimport {\n  SegmentedControlSegment,\n  SegmentedControlSegmentProps,\n} from \"./SegmentedControlSegment\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * Base props for SegmentedControl component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\">\n * @extends LayoutUtilProps\n */\ntype BaseSegmentedControlProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\"\n> &\n  LayoutUtilProps &\n  DataTrackingId & {\n    /**\n     * Callback when segment is changed\n     */\n    onChange?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n\n    /**\n     * Size of the segment\n     * @default \"medium\"\n     */\n    size?: Extract<Size, \"small\" | \"medium\">;\n\n    /**\n     * Whether to fill available width\n     * @default false\n     */\n    fill?: boolean;\n\n    /**\n     * Name attribute for radio inputs\n     * @remarks If empty, it will auto generate one using useId()\n     */\n    name?: string;\n\n    /**\n     * The segments to render within the segmented control\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * Props for controlled SegmentedControl\n */\ntype ControlledSegmentedControlProps = BaseSegmentedControlProps & {\n  /**\n   * Selected segment (controlled mode)\n   */\n  selected: SegmentedControlSegmentProps[\"value\"];\n  defaultSelected?: never;\n};\n\n/**\n * Props for uncontrolled SegmentedControl\n */\ntype UncontrolledSegmentedControlProps = BaseSegmentedControlProps & {\n  /**\n   * Initial selection (uncontrolled mode)\n   */\n  defaultSelected: SegmentedControlSegmentProps[\"value\"];\n  selected?: never;\n};\n\n/**\n * Props for the SegmentedControl component\n */\nexport type SegmentedControlProps =\n  | ControlledSegmentedControlProps\n  | UncontrolledSegmentedControlProps;\n\n/**\n * SegmentedControl component for selecting one option from a group of related choices.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Multiple size variants (small, medium)\n * - Optional fill width mode\n * - Smooth animations with motion\n * - Accessibility support with proper radio group semantics\n * - Layout utility props for positioning and spacing\n * - Context-based state management\n * - Auto-generated or custom name attributes\n * - Segment support via SegmentedControl.Segment\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl\n *   selected={selectedValue}\n *   onChange={setSelectedValue}\n *   size=\"medium\"\n * >\n *   <SegmentedControl.Segment value=\"option1\">Option 1</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"option2\">Option 2</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"option3\">Option 3</SegmentedControl.Segment>\n * </SegmentedControl>\n *\n * @example\n * <SegmentedControl\n *   defaultSelected=\"small\"\n *   size=\"small\"\n *   fill\n * >\n *   <SegmentedControl.Segment value=\"small\" icon={SmallIcon}>Small</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"large\" icon={LargeIcon}>Large</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nexport const SegmentedControl = Object.assign(\n  forwardRef<HTMLDivElement, SegmentedControlProps>(\n    function SegmentedControlInner(props, ref) {\n      const {\n        className,\n        onClick,\n        onChange,\n        children,\n        size = \"medium\",\n        defaultSelected,\n        selected,\n        name,\n        fill,\n        ...rest\n      } = props;\n\n      const [current, setCurrent] = useOptionallyControlledState({\n        controlledValue: selected,\n        defaultValue: defaultSelected,\n        onChange,\n      });\n\n      const segmentedControlRef = useRef<HTMLDivElement>(null);\n\n      const SegmentedControlClassNames = cx(\n        styles[\"segmented-control\"],\n        styles[size],\n        className,\n        {\n          [styles.fill]: fill,\n        },\n      );\n\n      const uid = useId();\n\n      const data = {\n        name: props.name,\n      };\n\n      const trackingId = useTrackingId({\n        name: \"SegmentedControl\",\n        data,\n        hasOverride: !!props[\"data-tracking-id\"],\n      });\n\n      return (\n        <motion.div\n          transition={{ duration: 0 }}\n          layout\n          role=\"radiogroup\"\n          className={SegmentedControlClassNames}\n          data-anv=\"segmented-control\"\n          data-tracking-id={trackingId}\n          ref={useMergeRefs([segmentedControlRef, ref])}\n          {...rest}\n        >\n          <SegmentedControlContext.Provider\n            value={{ current, setCurrent, name: name ?? uid }}\n          >\n            {children}\n          </SegmentedControlContext.Provider>\n        </motion.div>\n      );\n    },\n  ),\n  {\n    /**\n     * SegmentedControlSegment component for individual segments within a segmented control.\n     *\n     * Features:\n     * - Individual segment with radio input\n     * - Optional icon support\n     * - Animated selection indicator\n     * - Accessibility support with proper ARIA attributes\n     * - Context integration with parent SegmentedControl\n     * - Motion animations with reduced motion support\n     *\n     * @example\n     * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n     *   Option 1\n     * </SegmentedControl.Segment>\n     */\n    Segment: SegmentedControlSegment,\n  },\n);\nSegmentedControl.displayName = \"SegmentedControl\";\n\nexport default SegmentedControl;\n"],"names":["core.primitive.DurationDefault"],"mappings":"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"}

package/dist/SegmentedControl.css

@@ -1,124 +1,105 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._segmented-control_1jy4v_2,
-  ._legend_1jy4v_3,
-  ._children_1jy4v_4,
-  ._select-indicator_1jy4v_5,
-  ._segment_1jy4v_2 {
-    all: unset;
-  }
+.anvil2{@layer starter, reset, base, state, application;._segmented-control_12jil_1 {
+  --a2-mod-segmented-control-background-color: var(--a2-segmented-control-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
+  --a2-mod-segmented-control-background-color-active: var(--a2-segmented-control-segment-background-color-active, var(--a2-background-color-transparent-default-active, light-dark(rgba(139, 139, 139, 0.1607843137), rgba(255, 255, 255, 0.1607843137))));
+  --a2-mod-segmented-control-background-color-hover: var(--a2-segmented-control-segment-background-color-hover, var(--a2-background-color-transparent-default-hover, light-dark(rgba(139, 139, 139, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
+  --a2-mod-segmented-control-border-color: var(--a2-segmented-control-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
+  --a2-mod-segmented-control-button-background-color: var(--a2-segmented-control-button-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  --a2-mod-segmented-control-button-foreground-color: var(--a2-segmented-control-button-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
+  --a2-mod-segmented-control-focus-ring-color: var(--a2-segmented-control-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-segmented-control-height: var(--a2-size-10, 2.5rem);
+  --a2-mod-segmented-control-segment-padding: var(--a2-size-4, 1rem);
+  --a2-mod-segmented-control-shadow-color: var(--a2-segmented-control-shadow-color, var(--a2-shadow-color-default, light-dark(rgba(26, 26, 26, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
+  background-color: var(--a2-mod-segmented-control-background-color);
+  border-color: var(--a2-mod-segmented-control-border-color);
+  border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem));
+  border-style: solid;
+  border-width: var(--a2-size-quarter, 0.0625rem);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
+  gap: var(--a2-size-2, 0.5rem);
+  height: var(--a2-mod-segmented-control-height);
+  isolation: isolate;
+  max-width: 100%;
+  padding: var(--a2-size-1, 0.25rem);
+  position: relative;
+  width: -moz-fit-content;
+  width: fit-content;
+}._segmented-control_12jil_1:disabled {
+  opacity: var(--a2-opacity-disabled, 0.6);
+}._segmented-control_12jil_1 > * {
+  height: auto;
+}._segment_12jil_1 {
+  align-items: center;
+  background-color: transparent;
+  border-radius: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem));
+  color: var(--a2-mod-segmented-control-button-foreground-color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
+  gap: var(--a2-size-2, 0.5rem);
+  justify-content: center;
+  line-height: normal;
+  margin-block-end: 0;
+  padding-inline: var(--a2-mod-segmented-control-segment-padding);
+  position: relative;
+}._segment_12jil_1:has(._input_12jil_54:checked) {
+  pointer-events: none;
+}._segment_12jil_1::before {
+  height: 100%;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: background-color var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  width: 100%;
+  z-index: -1;
+}._segment_12jil_1:not(:has(._input_12jil_54:checked)):hover, ._segment_12jil_1:not(:has(._input_12jil_54:checked))[data-interactive=hover] {
+  background-color: var(--a2-mod-segmented-control-background-color-hover);
+}._segment_12jil_1:not(:has(._input_12jil_54:checked)):active, ._segment_12jil_1:not(:has(._input_12jil_54:checked))[data-interactive=active] {
+  background-color: var(--a2-mod-segmented-control-background-color-active);
+}._segment_12jil_1:has(._input_12jil_54:focus-visible) ._select-indicator_12jil_73, ._segment_12jil_1[data-interactive=focus-visible] ._select-indicator_12jil_73 {
+  outline-width: var(--a2-size-half, 0.125rem);
+}._input_12jil_54 {
+  height: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  position: absolute;
+}._select-indicator_12jil_73 {
+  background-color: var(--a2-mod-segmented-control-button-background-color);
+  border-radius: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem));
+  box-shadow: var(--a2-mod-segmented-control-shadow-color) var(--a2-shadow-size-float, var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem));
+  display: inline-block;
+  inset: 0;
+  outline: 0 solid var(--a2-mod-segmented-control-focus-ring-color);
+  outline-offset: var(--a2-size-half, 0.125rem);
+  position: absolute;
+  transition: outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
+  z-index: -1;
+}._fill_12jil_98 {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+}._small_12jil_102 {
+  --a2-mod-segmented-control-height: var(--a2-size-8, 2rem);
+  --a2-mod-segmented-control-segment-padding: var(--a2-size-3, 0.75rem);
+}._small_12jil_102 ._icon-only_12jil_107 {
+  --a2-mod-segmented-control-segment-padding: calc(
+    var(--a2-size-1, 0.25rem) - var(--a2-size-quarter, 0.0625rem)
+  );
+}._medium_12jil_113 {
+  --a2-mod-segmented-control-height: var(--a2-size-10, 2.5rem);
+  --a2-mod-segmented-control-segment-padding: var(--a2-size-4, 1rem);
+}._medium_12jil_113 ._icon-only_12jil_107 {
+  --a2-mod-segmented-control-segment-padding: calc(
+    var(--a2-size-2, 0.5rem) - var(--a2-size-quarter, 0.0625rem)
+  );
 }
-@layer base {
-  ._segmented-control_1jy4v_2 {
-    max-width: 100%;
-    width: -moz-fit-content;
-    width: fit-content;
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    background-color: var(--background-color-stronger, #eeeeee);
-    position: relative;
-    border-radius: 0.375rem;
-    border-style: solid;
-    border-color: var(--border-color-subdued, #dfe0e1);
-    border-width: 0.0625rem;
-    padding: 0.25rem;
-    gap: 0.5rem;
-    isolation: isolate;
-    box-sizing: border-box;
-    font-size: 1rem;
-  }
-  ._segmented-control_1jy4v_2:disabled {
-    opacity: 0.6;
-  }
-  ._segment_1jy4v_2 {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    flex-shrink: 0;
-    flex-grow: 1;
-    gap: 0.5rem;
-    color: var(--foreground-color, #141414);
-    border-radius: 0.1875rem;
-    font-size: 1rem;
-  }
-  ._segment_1jy4v_2 input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    top: 0;
-    left: 0;
-  }
-  ._segment_1jy4v_2:has(input:checked) {
-    pointer-events: none;
-  }
-  ._segment_1jy4v_2::before {
-    position: absolute;
-    pointer-events: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    width: 100%;
-    height: 100%;
-    inset: 0;
-    transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1);
-    z-index: -1;
-  }
-  ._select-indicator_1jy4v_5 {
-    display: inline-block;
-    position: absolute;
-    inset: 0;
-    background-color: var(--background-color, #ffffff);
-    border-radius: 0.1875rem;
-    box-shadow: var(--shadow-color, rgba(20, 20, 20, 0.0784313725)) 0rem 0.125rem 0.5rem;
-    outline: 0 solid var(--focus-ring-color, #0265DC);
-    outline-offset: 0.125rem;
-    z-index: -1;
-    transition: outline 200ms cubic-bezier(0, 0, 0.4, 1);
-  }
-}
-@layer state {
-  ._segmented-control_1jy4v_2._fill_1jy4v_80 {
-    width: -webkit-fill-available;
-    width: -moz-available;
-    width: stretch;
-  }
-  ._segmented-control_1jy4v_2._small_1jy4v_83 {
-    height: 2rem;
-  }
-  ._segmented-control_1jy4v_2._small_1jy4v_83 ._segment_1jy4v_2 {
-    padding-inline: 0.75rem;
-  }
-  ._segmented-control_1jy4v_2._small_1jy4v_83 ._segment_1jy4v_2._icon-only_1jy4v_89 {
-    padding-inline: 0.1875rem;
-  }
-  ._segmented-control_1jy4v_2._medium_1jy4v_92 {
-    height: 2.5rem;
-  }
-  ._segmented-control_1jy4v_2._medium_1jy4v_92 ._segment_1jy4v_2 {
-    padding-inline: 1rem;
-  }
-  ._segmented-control_1jy4v_2._medium_1jy4v_92 ._segment_1jy4v_2._icon-only_1jy4v_89 {
-    padding-inline: 0.4375rem;
-  }
-  ._segment_1jy4v_2:has(input:focus-visible) ._select-indicator_1jy4v_5,
-  ._segment_1jy4v_2[data-interactive=focus-visible] ._select-indicator_1jy4v_5 {
-    outline-width: 0.125rem;
-  }
-  ._segment_1jy4v_2:not(:has(input:checked)):hover,
-  ._segment_1jy4v_2:not(:has(input:checked))[data-interactive=hover] {
-    background-color: var(--overlay-color-hover, rgba(20, 20, 20, 0.0784313725));
-  }
-  ._segment_1jy4v_2:not(:has(input:checked)):active,
-  ._segment_1jy4v_2:not(:has(input:checked))[data-interactive=active] {
-    background-color: var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137));
-  }
-}
-@layer application {
-  ._segmented-control_1jy4v_2 > * {
-    height: auto;
-  }
 }

package/dist/SegmentedControl.js

@@ -1,2 +1,2 @@
-export { S as SegmentedControl, a as SegmentedControlSegment, S as default } from './SegmentedControl-B9NWUF7s.js';
+export { S as SegmentedControl, a as SegmentedControlSegment, S as default } from './SegmentedControl-Chhqyyra.js';
 //# sourceMappingURL=SegmentedControl.js.map