@cambly/syntax-core 10.8.1 → 10.10.0

package/dist/__chunks/{RRAXSCWL.js.map → UPLN7GFR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = Omit<\n  RichSelectBoxProps,\n  \"accessibilityLabel\"\n> & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n      >\n        <ReactAriaLabel\n          data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n          className={classNames(\n            styles.selectContainer,\n            styles.outerTextContainer,\n          )}\n          {...labelProps}\n          onClick={() => {\n            if (disabled) return;\n            fieldRef.current?.focus();\n            setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n          }}\n        >\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </ReactAriaLabel>\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          accessibilityLabel={label}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                accessibilityLabel={label}\n                {...richSelectBoxProps}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(styles.selectBox, styles[size], {\n                  [styles.unselected]:\n                    !errorText && selectedKeys !== \"all\" && !selectedKeys.size,\n                  [styles.selected]:\n                    !errorText && (selectedKeys === \"all\" || selectedKeys.size),\n                  [styles.selectError]: errorText,\n                })}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={iconSize[size]}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <div className={styles.outerTextContainer}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </div>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AACP,OAAO,gBAAgB;AAQvB;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,OACP;AACP,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;;;ACnB6D,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;ADiCjlB,SAAS,gBAAgB;AA2Jf,cAqCE,YArCF;AAzJV,IAAM,OAAO,MAAM;AAEnB,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA2DA,SAAS,eAAe,OAA0C;AAChE,QAgBI,YAfF;AAAA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,uBAAuB;AAAA,IACvB,OAAO;AAAA,EAnHX,IAqHM,IADC,+BACD,IADC;AAAA,IAdH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAGhC,QAAM,oBAAoB,OAA0B,CAAC,CAAC;AAEtD,QAAM,mBAAmB;AAAA,IACvB,MAAM,iBAAiB,kBAAkB;AAAA,IACzC,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,iBAAiB,2BAA2B,oBAAI,IAAI,CAAC;AAAA,IAC3D,CAAC,yBAAyB;AAAA,EAC5B;AACA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA;AAAA,IACA;AAAA,IACA,CAAC,UAAU;AAxIf,UAAAA,KAAA;AAyIM,YAAM,SAAS,UAAU,QAAQ,QAAQ,CAAC,GAAG,KAAK,EAAE,IAAI,MAAM;AAC9D,eAAS,MAAM;AACf,UAAI,CAAC;AAAU,eAAAA,MAAA,kBAAkB,SAAQ,UAA1B,wBAAAA;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,QAAQ,MAAM;AA/I1C,QAAAA;AAgJI,QAAI;AACF,cACEA,MAAA;AAAA,QACE,iBAAiB,QAAQ,QAAQ,CAAC,GAAG,YAAY,EAAE,IAAI,MAAM;AAAA,MAC/D,MAFA,OAAAA,MAEK;AAET,QAAI,iBAAiB;AAAO,aAAO;AACnC,QAAI,aAAa;AAAM,aAAO,GAAG,aAAa;AAC9C,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,eAAe,CAAC;AAEnD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,EAAE,YAAY,YAAY,kBAAkB,kBAAkB,IAClE,SAAS;AAAA,IACP;AAAA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,EAChB,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,QACN,CAAC,sBAAsB,EAAE,WAAW,KAAK,CAAC;AAAA,QAC1C,CAAC,eAAe,EAAE,SAAS,WAAW,SAAY,EAAE,CAAC;AAAA;AAAA,MACvD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,YAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,UAC3B,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,CAAC,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,gBAC3D,WAAW;AAAA,kBACT,0BAAO;AAAA,kBACP,0BAAO;AAAA,gBACT;AAAA,iBACI,aANL;AAAA,gBAOC,SAAS,MAAM;AAtLzB,sBAAAA;AAuLY,sBAAI;AAAU;AACd,mBAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAClB,yCAAuB,UAAU;AAAA,gBACnC;AAAA,gBAEA,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL;AAAA,gBACA,oBAAoB;AAAA,gBACpB;AAAA;AAAA,kBAEE;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAS,WAAW,SAAY;AAAA,sBAChC,2BACE,WAAW,SAAY,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE;AAAA,sBAGzD;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA,gBAAgB;AAAA,0BAChB,uBAAuB;AAAA,0BACvB,UAAU,CAAC,aAAa,gBAAgB,IAAI,IAAI,QAAQ,CAAC;AAAA,0BACzD,oBAAoB;AAAA,2BAChB,qBANL;AAAA,0BAQE;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA;AAAA,gBAGF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa;AAAA,oBACb;AAAA,oBACA;AAAA,oBACA,UAAU,SAAS,OAAO,OAAO;AAAA,qBAC7B,aALL;AAAA,oBAMC,KAAK;AAAA,oBAEL,+BAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,4BACpD,CAAC,0BAAO,UAAU,GAChB,CAAC,aAAa,iBAAiB,SAAS,CAAC,aAAa;AAAA,4BACxD,CAAC,0BAAO,QAAQ,GACd,CAAC,cAAc,iBAAiB,SAAS,aAAa;AAAA,4BACxD,CAAC,0BAAO,WAAW,GAAG;AAAA,0BACxB,CAAC;AAAA,0BAEA;AAAA;AAAA,sBACH;AAAA,sBACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,eAAY;AAAA,0BACZ,SAAQ;AAAA,0BACR,OAAO,SAAS,IAAI;AAAA,0BAEpB;AAAA,4BAAC;AAAA;AAAA,8BACC,MACE,YAAY,0BAA0B;AAAA,8BAExC,GAAE;AAAA;AAAA,0BACJ;AAAA;AAAA,sBACF,GACF;AAAA,uBACF;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO,YAAY,wBAAwB;AAAA,iBACtC,YAAY,oBAAoB,mBAHtC;AAAA,gBAKE,sBAAY,YAAY;AAAA;AAAA,YAC3B,GACF;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ,OAAO,OAAO,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AACf,CAAC;","names":["_a"]}
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = Omit<\n  RichSelectBoxProps,\n  \"accessibilityLabel\"\n> & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n      >\n        <ReactAriaLabel\n          data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n          className={classNames(\n            styles.selectContainer,\n            styles.outerTextContainer,\n          )}\n          {...labelProps}\n          onClick={() => {\n            if (disabled) return;\n            fieldRef.current?.focus();\n            setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n          }}\n        >\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </ReactAriaLabel>\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          accessibilityLabel={label}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                accessibilityLabel={label}\n                {...richSelectBoxProps}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(styles.selectBox, styles[size], {\n                  [styles.unselected]:\n                    !errorText && selectedKeys !== \"all\" && !selectedKeys.size,\n                  [styles.selected]:\n                    !errorText && (selectedKeys === \"all\" || selectedKeys.size),\n                  [styles.selectError]: errorText,\n                })}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={iconSize[size]}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <div className={styles.outerTextContainer}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </div>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AACP,OAAO,gBAAgB;AAQvB;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,OACP;AACP,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;;;ACnB6D,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;ADiCjlB,SAAS,gBAAgB;AA2Jf,cAqCE,YArCF;AAzJV,IAAM,OAAO,MAAM;AAEnB,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA2DA,SAAS,eAAe,OAA0C;AAChE,QAgBI,YAfF;AAAA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,uBAAuB;AAAA,IACvB,OAAO;AAAA,EAnHX,IAqHM,IADC,+BACD,IADC;AAAA,IAdH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAGhC,QAAM,oBAAoB,OAA0B,CAAC,CAAC;AAEtD,QAAM,mBAAmB;AAAA,IACvB,MAAM,iBAAiB,kBAAkB;AAAA,IACzC,CAAC,kBAAkB;AAAA,EACrB;AACA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,iBAAiB,2BAA2B,oBAAI,IAAI,CAAC;AAAA,IAC3D,CAAC,yBAAyB;AAAA,EAC5B;AACA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA;AAAA,IACA;AAAA,IACA,CAAC,UAAU;AAxIf,UAAAA,KAAA;AAyIM,YAAM,SAAS,UAAU,QAAQ,QAAQ,CAAC,GAAG,KAAK,EAAE,IAAI,MAAM;AAC9D,eAAS,MAAM;AACf,UAAI,CAAC;AAAU,eAAAA,MAAA,kBAAkB,SAAQ,UAA1B,wBAAAA;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,QAAQ,MAAM;AA/I1C,QAAAA;AAgJI,QAAI;AACF,cACEA,MAAA;AAAA,QACE,iBAAiB,QAAQ,QAAQ,CAAC,GAAG,YAAY,EAAE,IAAI,MAAM;AAAA,MAC/D,MAFA,OAAAA,MAEK;AAET,QAAI,iBAAiB;AAAO,aAAO;AACnC,QAAI,aAAa;AAAM,aAAO,GAAG,aAAa;AAC9C,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,eAAe,CAAC;AAEnD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,EAAE,YAAY,YAAY,kBAAkB,kBAAkB,IAClE,SAAS;AAAA,IACP;AAAA;AAAA,IACA,aAAa;AAAA,IACb,cAAc;AAAA,EAChB,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,QACN,CAAC,sBAAsB,EAAE,WAAW,KAAK,CAAC;AAAA,QAC1C,CAAC,eAAe,EAAE,SAAS,WAAW,SAAY,EAAE,CAAC;AAAA;AAAA,MACvD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,YAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,UAC3B,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAa,CAAC,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,gBAC3D,WAAW;AAAA,kBACT,0BAAO;AAAA,kBACP,0BAAO;AAAA,gBACT;AAAA,iBACI,aANL;AAAA,gBAOC,SAAS,MAAM;AAtLzB,sBAAAA;AAuLY,sBAAI;AAAU;AACd,mBAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAClB,yCAAuB,UAAU;AAAA,gBACnC;AAAA,gBAEA,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL;AAAA,gBACA,oBAAoB;AAAA,gBACpB;AAAA;AAAA,kBAEE;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAS,WAAW,SAAY;AAAA,sBAChC,2BACE,WAAW,SAAY,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE;AAAA,sBAGzD;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA,gBAAgB;AAAA,0BAChB,uBAAuB;AAAA,0BACvB,UAAU,CAAC,aAAa,gBAAgB,IAAI,IAAI,QAAQ,CAAC;AAAA,0BACzD,oBAAoB;AAAA,2BAChB,qBANL;AAAA,0BAQE;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA;AAAA,gBAGF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa;AAAA,oBACb;AAAA,oBACA;AAAA,oBACA,UAAU,SAAS,OAAO,OAAO;AAAA,qBAC7B,aALL;AAAA,oBAMC,KAAK;AAAA,oBAEL,+BAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,4BACpD,CAAC,0BAAO,UAAU,GAChB,CAAC,aAAa,iBAAiB,SAAS,CAAC,aAAa;AAAA,4BACxD,CAAC,0BAAO,QAAQ,GACd,CAAC,cAAc,iBAAiB,SAAS,aAAa;AAAA,4BACxD,CAAC,0BAAO,WAAW,GAAG;AAAA,0BACxB,CAAC;AAAA,0BAEA;AAAA;AAAA,sBACH;AAAA,sBACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,eAAY;AAAA,0BACZ,SAAQ;AAAA,0BACR,OAAO,SAAS,IAAI;AAAA,0BAEpB;AAAA,4BAAC;AAAA;AAAA,8BACC,MACE,YAAY,0BAA0B;AAAA,8BAExC,GAAE;AAAA;AAAA,0BACJ;AAAA;AAAA,sBACF,GACF;AAAA,uBACF;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO,YAAY,wBAAwB;AAAA,iBACtC,YAAY,oBAAoB,mBAHtC;AAAA,gBAKE,sBAAY,YAAY;AAAA;AAAA,YAC3B,GACF;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ,OAAO,OAAO,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AACf,CAAC;","names":["_a"]}

package/dist/__chunks/{LULBCTQR.js → UWGNJENA.js}

@@ -1,3 +1,4 @@
+"use client"
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -35,4 +36,4 @@ export {
   __spreadProps,
   __objRest
 };
-//# sourceMappingURL=LULBCTQR.js.map
+//# sourceMappingURL=UWGNJENA.js.map

package/dist/__chunks/{BANKR5VQ.js → UZODIMNK.js}

@@ -1,32 +1,33 @@
+"use client"
 import {
   padding_module_default
-} from "./652STTPK.js";
+} from "./ZOWOFYUE.js";
 import {
   Box_module_default
-} from "./KMIZI5PW.js";
+} from "./O3CEUWCC.js";
 import {
   rounding_module_default
-} from "./TPMQI44L.js";
+} from "./X5UGK633.js";
 import {
   Typography_default
-} from "./TGGJZ5GF.js";
+} from "./L7PPCZM5.js";
 import {
   colors_module_default
-} from "./5OB72SMM.js";
+} from "./JHJZ5COD.js";
 import {
   syntaxToReactAriaPlacement
-} from "./ARBLKS7D.js";
+} from "./SVZOETLJ.js";
 import {
   Triggerable_default
-} from "./JQ6POHCA.js";
+} from "./M26PGOYA.js";
 import {
   OverlayVisibility
-} from "./XKDASN7N.js";
+} from "./E5KMIBEU.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./LULBCTQR.js";
+} from "./UWGNJENA.js";
 
 // src/Tooltip/Tooltip.tsx
 import { forwardRef } from "react";
@@ -161,4 +162,4 @@ export {
   AriaTooltip,
   Tooltip_default
 };
-//# sourceMappingURL=BANKR5VQ.js.map
+//# sourceMappingURL=UZODIMNK.js.map

package/dist/__chunks/{BANKR5VQ.js.map → UZODIMNK.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  composeRenderProps,\n  OverlayArrow as ReactAriaOverlayArrow,\n  type OverlayArrowProps as ReactAriaOverlayArrowProps,\n  Tooltip as ReactAriaTooltip,\n  TooltipTrigger as ReactAriaTooltipTrigger,\n  type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {\n  return (\n    <ReactAriaOverlayArrow {...props}>\n      {({ placement }) => {\n        if (placement === \"center\") return null;\n        if (placement === \"left\") return null;\n        if (placement === \"right\") return null;\n        return (\n          <div\n            className={classNames([\n              boxStyles.block,\n              styles[`arrowPlacement${placement}`],\n            ])}\n          >\n            <svg\n              className={classNames([boxStyles.block])}\n              width={40}\n              height={5}\n              viewBox=\"0 0 40 5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n            </svg>\n          </div>\n        );\n      }}\n    </ReactAriaOverlayArrow>\n  );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n  HTMLDivElement,\n  ReactAriaTooltipProps & {\n    /** Optional handler for change of visibility for overlaid content, for analytics timing */\n    onChangeContentVisibility?: (visible: boolean) => void;\n  }\n>(function AriaTooltip(\n  { children: childrenProp, onChangeContentVisibility, ...otherProps },\n  ref,\n): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    colorStyles.gray900Color,\n    colorStyles.gray900BackgroundColor,\n    paddingStyles.paddingY2,\n    paddingStyles.paddingX3,\n    roundingStyles.roundingsm,\n    styles.tooltip,\n  ]);\n  return (\n    <ReactAriaTooltip\n      ref={ref}\n      {...mergeProps(\n        {\n          className,\n          offset: 8,\n          crossOffset: 0,\n        },\n        otherProps,\n      )}\n    >\n      {composeRenderProps(\n        childrenProp,\n        (children, { isEntering, isExiting }) => (\n          <>\n            <TooltipArrow />\n            <Typography size={100} color=\"white\">\n              {children}\n            </Typography>\n            <OverlayVisibility\n              isEntering={isEntering}\n              isExiting={isExiting}\n              onChange={onChangeContentVisibility}\n            />\n          </>\n        ),\n      )}\n    </ReactAriaTooltip>\n  );\n});\n\ntype TooltipProps = {\n  /**\n   * Test id for the floating tooltip\n   */\n  \"data-testid\"?: string;\n  /**\n   * How long a user hovers before tooltip shows (in ms)\n   * @defaultValue 0\n   */\n  delay?: number;\n  /** Optional boolean to disable tooltip trigger behavior */\n  disabled?: boolean;\n  /** Optional aria-label for the tooltip (content element) */\n  accessibilityLabel?: string;\n  /** Required trigger element */\n  children: ReactElement;\n  /** Content to be shown inside the tooltip. */\n  content: ReactNode;\n  /** If set to true the tooltip will render initially open */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of tooltip externally */\n  open?: boolean;\n  /**\n   * Location of the tooltip content relative to anchor element\n   * @defaultValue \"top-end\"\n   */\n  placement?: Placement;\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Tooltip\n    delay={200}\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  props,\n  ref,\n): ReactElement {\n  const {\n    accessibilityLabel,\n    \"data-testid\": dataTestId,\n    delay = 0,\n    disabled = false,\n    children,\n    content,\n    initialOpen,\n    onChangeContentVisibility,\n    onOpenChange,\n    open,\n    placement = \"top\",\n  } = props;\n\n  return (\n    <ReactAriaTooltipTrigger\n      defaultOpen={initialOpen}\n      delay={delay}\n      closeDelay={500}\n      isDisabled={disabled}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {/* transfer focus handlers to child element if it is focusable */}\n      <Triggerable>{children}</Triggerable>\n      <AriaTooltip\n        ref={ref}\n        placement={syntaxToReactAriaPlacement(placement)}\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        onChangeContentVisibility={onChangeContentVisibility}\n      >\n        {content}\n      </AriaTooltip>\n    </ReactAriaTooltipTrigger>\n  );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAqD;AACrE,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,EAEhB,WAAW;AAAA,EACX,kBAAkB;AAAA,OAEb;AAKP,OAAO,gBAAgB;;;ACduE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,qBAAoB,8BAA6B,wBAAuB,iCAAgC;;;AD8CrO,SAgDJ,UAhDI,KAgDJ,YAhDI;AArBd,SAAS,aAAa,OAAiD;AACrE,SACE,oBAAC,wDAA0B,QAA1B,EACE,WAAC,EAAE,UAAU,MAAM;AAClB,QAAI,cAAc;AAAU,aAAO;AACnC,QAAI,cAAc;AAAQ,aAAO;AACjC,QAAI,cAAc;AAAS,aAAO;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,mBAAU;AAAA,UACV,uBAAO,iBAAiB,WAAW;AAAA,QACrC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,CAAC,mBAAU,KAAK,CAAC;AAAA,YACvC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ,IACF;AAEJ;AAOO,IAAM,cAAc,WAMzB,SAASA,aACT,IACA,KACc;AAFd,eAAE,YAAU,cAAc,0BAnE5B,IAmEE,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,sBAAY;AAAA,IACZ,sBAAY;AAAA,IACZ,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,wBAAe;AAAA,IACf,uBAAO;AAAA,EACT,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,OACI;AAAA,MACF;AAAA,QACE;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA;AAAA,IACF,IATD;AAAA,MAWE;AAAA,QACC;AAAA,QACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,sBAAW,MAAM,KAAK,OAAM,SAC1B,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ,CAAC;AAwDD,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MAGA;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,2BAA2B,SAAS;AAAA,YAC/C,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["AriaTooltip","Tooltip"]}
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  composeRenderProps,\n  OverlayArrow as ReactAriaOverlayArrow,\n  type OverlayArrowProps as ReactAriaOverlayArrowProps,\n  Tooltip as ReactAriaTooltip,\n  TooltipTrigger as ReactAriaTooltipTrigger,\n  type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {\n  return (\n    <ReactAriaOverlayArrow {...props}>\n      {({ placement }) => {\n        if (placement === \"center\") return null;\n        if (placement === \"left\") return null;\n        if (placement === \"right\") return null;\n        return (\n          <div\n            className={classNames([\n              boxStyles.block,\n              styles[`arrowPlacement${placement}`],\n            ])}\n          >\n            <svg\n              className={classNames([boxStyles.block])}\n              width={40}\n              height={5}\n              viewBox=\"0 0 40 5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n            </svg>\n          </div>\n        );\n      }}\n    </ReactAriaOverlayArrow>\n  );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n  HTMLDivElement,\n  ReactAriaTooltipProps & {\n    /** Optional handler for change of visibility for overlaid content, for analytics timing */\n    onChangeContentVisibility?: (visible: boolean) => void;\n  }\n>(function AriaTooltip(\n  { children: childrenProp, onChangeContentVisibility, ...otherProps },\n  ref,\n): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    colorStyles.gray900Color,\n    colorStyles.gray900BackgroundColor,\n    paddingStyles.paddingY2,\n    paddingStyles.paddingX3,\n    roundingStyles.roundingsm,\n    styles.tooltip,\n  ]);\n  return (\n    <ReactAriaTooltip\n      ref={ref}\n      {...mergeProps(\n        {\n          className,\n          offset: 8,\n          crossOffset: 0,\n        },\n        otherProps,\n      )}\n    >\n      {composeRenderProps(\n        childrenProp,\n        (children, { isEntering, isExiting }) => (\n          <>\n            <TooltipArrow />\n            <Typography size={100} color=\"white\">\n              {children}\n            </Typography>\n            <OverlayVisibility\n              isEntering={isEntering}\n              isExiting={isExiting}\n              onChange={onChangeContentVisibility}\n            />\n          </>\n        ),\n      )}\n    </ReactAriaTooltip>\n  );\n});\n\ntype TooltipProps = {\n  /**\n   * Test id for the floating tooltip\n   */\n  \"data-testid\"?: string;\n  /**\n   * How long a user hovers before tooltip shows (in ms)\n   * @defaultValue 0\n   */\n  delay?: number;\n  /** Optional boolean to disable tooltip trigger behavior */\n  disabled?: boolean;\n  /** Optional aria-label for the tooltip (content element) */\n  accessibilityLabel?: string;\n  /** Required trigger element */\n  children: ReactElement;\n  /** Content to be shown inside the tooltip. */\n  content: ReactNode;\n  /** If set to true the tooltip will render initially open */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of tooltip externally */\n  open?: boolean;\n  /**\n   * Location of the tooltip content relative to anchor element\n   * @defaultValue \"top-end\"\n   */\n  placement?: Placement;\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Tooltip\n    delay={200}\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  props,\n  ref,\n): ReactElement {\n  const {\n    accessibilityLabel,\n    \"data-testid\": dataTestId,\n    delay = 0,\n    disabled = false,\n    children,\n    content,\n    initialOpen,\n    onChangeContentVisibility,\n    onOpenChange,\n    open,\n    placement = \"top\",\n  } = props;\n\n  return (\n    <ReactAriaTooltipTrigger\n      defaultOpen={initialOpen}\n      delay={delay}\n      closeDelay={500}\n      isDisabled={disabled}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {/* transfer focus handlers to child element if it is focusable */}\n      <Triggerable>{children}</Triggerable>\n      <AriaTooltip\n        ref={ref}\n        placement={syntaxToReactAriaPlacement(placement)}\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        onChangeContentVisibility={onChangeContentVisibility}\n      >\n        {content}\n      </AriaTooltip>\n    </ReactAriaTooltipTrigger>\n  );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAqD;AACrE,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,EAEhB,WAAW;AAAA,EACX,kBAAkB;AAAA,OAEb;AAKP,OAAO,gBAAgB;;;ACduE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,qBAAoB,8BAA6B,wBAAuB,iCAAgC;;;AD8CrO,SAgDJ,UAhDI,KAgDJ,YAhDI;AArBd,SAAS,aAAa,OAAiD;AACrE,SACE,oBAAC,wDAA0B,QAA1B,EACE,WAAC,EAAE,UAAU,MAAM;AAClB,QAAI,cAAc;AAAU,aAAO;AACnC,QAAI,cAAc;AAAQ,aAAO;AACjC,QAAI,cAAc;AAAS,aAAO;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,mBAAU;AAAA,UACV,uBAAO,iBAAiB,WAAW;AAAA,QACrC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,CAAC,mBAAU,KAAK,CAAC;AAAA,YACvC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ,IACF;AAEJ;AAOO,IAAM,cAAc,WAMzB,SAASA,aACT,IACA,KACc;AAFd,eAAE,YAAU,cAAc,0BAnE5B,IAmEE,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,sBAAY;AAAA,IACZ,sBAAY;AAAA,IACZ,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,wBAAe;AAAA,IACf,uBAAO;AAAA,EACT,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,OACI;AAAA,MACF;AAAA,QACE;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA;AAAA,IACF,IATD;AAAA,MAWE;AAAA,QACC;AAAA,QACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,sBAAW,MAAM,KAAK,OAAM,SAC1B,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ,CAAC;AAwDD,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MAGA;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,2BAA2B,SAAS;AAAA,YAC/C,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["AriaTooltip","Tooltip"]}

package/dist/__chunks/{FKV5VN7F.js → V6DB6ZQU.js}

@@ -1,12 +1,13 @@
+"use client"
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 import {
   Typography_default
-} from "./TGGJZ5GF.js";
+} from "./L7PPCZM5.js";
 import {
   useIsHydrated
-} from "./YJ7YDIGB.js";
+} from "./JB65NEXK.js";
 
 // src/TextArea/TextArea.tsx
 import { useId, forwardRef } from "react";
@@ -94,4 +95,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=FKV5VN7F.js.map
+//# sourceMappingURL=V6DB6ZQU.js.map

package/dist/__chunks/{FKV5VN7F.js.map → V6DB6ZQU.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={200}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              textFieldStyles[size],\n              styles.textarea,\n              styles[size],\n              {\n                [textFieldStyles.inputError]: errorText,\n              },\n            )}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_11ro9_1\",\"sm\":\"_sm_11ro9_5\",\"md\":\"_md_11ro9_10\",\"lg\":\"_lg_11ro9_15\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"],"mappings":";;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,MAAK,eAAc,MAAK,gBAAe,MAAK,eAAc;;;ACAvG,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AFK5W,OAAO,gBAAgB;AAmFjB,SAaM,KAbN;AAxBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,yBAAgB,IAAI;AAAA,gBACpB,wBAAO;AAAA,gBACP,wBAAO,IAAI;AAAA,gBACX;AAAA,kBACE,CAAC,yBAAgB,UAAU,GAAG;AAAA,gBAChC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={200}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              textFieldStyles[size],\n              styles.textarea,\n              styles[size],\n              {\n                [textFieldStyles.inputError]: errorText,\n              },\n            )}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_11ro9_1\",\"sm\":\"_sm_11ro9_5\",\"md\":\"_md_11ro9_10\",\"lg\":\"_lg_11ro9_15\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,MAAK,eAAc,MAAK,gBAAe,MAAK,eAAc;;;ACAvG,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AFK5W,OAAO,gBAAgB;AAmFjB,SAaM,KAbN;AAxBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,yBAAgB,IAAI;AAAA,gBACpB,wBAAO;AAAA,gBACP,wBAAO,IAAI;AAAA,gBACX;AAAA,kBACE,CAAC,yBAAgB,UAAU,GAAG;AAAA,gBAChC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}

package/dist/__chunks/{5WQ23BQE.js → VBRCBEDC.js}

@@ -1,36 +1,37 @@
+"use client"
 import {
   loadingIconSize_default
-} from "./CGFXAKKI.js";
+} from "./QSC7CAQA.js";
 import {
   textVariant_default
-} from "./JXZMI4WT.js";
+} from "./Z5ZUAP2B.js";
 import {
   iconSize_default
-} from "./PKXXQ3OV.js";
+} from "./37PNBG3P.js";
 import {
   cambioColor,
   classicColor
-} from "./K3H7QFPB.js";
+} from "./GFKDPMFK.js";
 import {
   cambioForegroundColor,
   classicForegroundColor
-} from "./YHKD5YRY.js";
+} from "./JVOQF4CG.js";
 import {
   cambioBackgroundColor,
   classicBackgroundColor
-} from "./YOMN7RCA.js";
-import {
-  useTheme
-} from "./HVGUWZ5I.js";
+} from "./Y2OAIOQE.js";
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 import {
   Typography_default
-} from "./TGGJZ5GF.js";
+} from "./L7PPCZM5.js";
+import {
+  useTheme
+} from "./RN3PLPAG.js";
 import {
   useIsHydrated
-} from "./YJ7YDIGB.js";
+} from "./JB65NEXK.js";
 
 // src/Button/Button.tsx
 import { forwardRef } from "react";
@@ -132,4 +133,4 @@ var Button_default = Button;
 export {
   Button_default
 };
-//# sourceMappingURL=5WQ23BQE.js.map
+//# sourceMappingURL=VBRCBEDC.js.map

package/dist/__chunks/{5WQ23BQE.js.map → VBRCBEDC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n  /**\n   * The type you want to set for the primitive <button/>\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && themeName === \"classic\" && (\n          <StartIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                // Temporary - until we have cambio colors on Typogrphay\n                className={foregroundColorClass}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && themeName === \"classic\" && (\n          <EndIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n  /**\n   * The type you want to set for the primitive <button/>\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && themeName === \"classic\" && (\n          <StartIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                // Temporary - until we have cambio colors on Typogrphay\n                className={foregroundColorClass}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && themeName === \"classic\" && (\n          <EndIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{7GJ2SD7O.cjs → VF7PQHZP.cjs}

@@ -1,7 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:../rounding.module.css#css-module
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:../rounding.module.css#css-module
 var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd": "_roundingmd_1bo6p_6", "roundinglg": "_roundinglg_1bo6p_10", "roundingxl": "_roundingxl_1bo6p_14", "roundingfull": "_roundingfull_1bo6p_18" };
 
 
 
 exports.rounding_module_default = rounding_module_default;
-//# sourceMappingURL=7GJ2SD7O.cjs.map
+//# sourceMappingURL=VF7PQHZP.cjs.map

package/dist/__chunks/VF7PQHZP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"names":[],"mappings":";;;AAAuF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,yBAAwB","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1bo6p_2\",\"roundingmd\":\"_roundingmd_1bo6p_6\",\"roundinglg\":\"_roundinglg_1bo6p_10\",\"roundingxl\":\"_roundingxl_1bo6p_14\",\"roundingfull\":\"_roundingfull_1bo6p_18\"}"]}

package/dist/__chunks/{4YO26FWL.cjs → VKB7KOAH.cjs}

@@ -1,7 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:./colors.module.css#css-module
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:./colors.module.css#css-module
 var colors_module_default = { "inheritColor": "_inheritColor_178qd_2", "destructive700Color": "_destructive700Color_178qd_6", "gray700Color": "_gray700Color_178qd_10", "gray900Color": "_gray900Color_178qd_14", "primary700Color": "_primary700Color_178qd_18", "success700Color": "_success700Color_178qd_22", "whiteColor": "_whiteColor_178qd_26", "blackBackgroundColor": "_blackBackgroundColor_178qd_31", "destructive100BackgroundColor": "_destructive100BackgroundColor_178qd_35", "destructive200BackgroundColor": "_destructive200BackgroundColor_178qd_39", "destructive300BackgroundColor": "_destructive300BackgroundColor_178qd_43", "destructive700BackgroundColor": "_destructive700BackgroundColor_178qd_47", "destructive800BackgroundColor": "_destructive800BackgroundColor_178qd_51", "destructive900BackgroundColor": "_destructive900BackgroundColor_178qd_55", "gray10BackgroundColor": "_gray10BackgroundColor_178qd_59", "gray30BackgroundColor": "_gray30BackgroundColor_178qd_63", "gray60BackgroundColor": "_gray60BackgroundColor_178qd_67", "gray80BackgroundColor": "_gray80BackgroundColor_178qd_71", "gray100BackgroundColor": "_gray100BackgroundColor_178qd_75", "gray200BackgroundColor": "_gray200BackgroundColor_178qd_79", "gray300BackgroundColor": "_gray300BackgroundColor_178qd_83", "gray700BackgroundColor": "_gray700BackgroundColor_178qd_87", "gray800BackgroundColor": "_gray800BackgroundColor_178qd_91", "gray900BackgroundColor": "_gray900BackgroundColor_178qd_95", "orange100BackgroundColor": "_orange100BackgroundColor_178qd_99", "orange200BackgroundColor": "_orange200BackgroundColor_178qd_103", "orange300BackgroundColor": "_orange300BackgroundColor_178qd_107", "orange700BackgroundColor": "_orange700BackgroundColor_178qd_111", "orange800BackgroundColor": "_orange800BackgroundColor_178qd_115", "orange900BackgroundColor": "_orange900BackgroundColor_178qd_119", "primary100BackgroundColor": "_primary100BackgroundColor_178qd_123", "primary200BackgroundColor": "_primary200BackgroundColor_178qd_127", "primary300BackgroundColor": "_primary300BackgroundColor_178qd_131", "primary700BackgroundColor": "_primary700BackgroundColor_178qd_135", "primary800BackgroundColor": "_primary800BackgroundColor_178qd_139", "primary900BackgroundColor": "_primary900BackgroundColor_178qd_143", "success100BackgroundColor": "_success100BackgroundColor_178qd_147", "success200BackgroundColor": "_success200BackgroundColor_178qd_151", "success300BackgroundColor": "_success300BackgroundColor_178qd_155", "success700BackgroundColor": "_success700BackgroundColor_178qd_159", "success800BackgroundColor": "_success800BackgroundColor_178qd_163", "success900BackgroundColor": "_success900BackgroundColor_178qd_167", "purple100BackgroundColor": "_purple100BackgroundColor_178qd_171", "purple200BackgroundColor": "_purple200BackgroundColor_178qd_175", "purple300BackgroundColor": "_purple300BackgroundColor_178qd_179", "purple700BackgroundColor": "_purple700BackgroundColor_178qd_183", "purple800BackgroundColor": "_purple800BackgroundColor_178qd_187", "purple900BackgroundColor": "_purple900BackgroundColor_178qd_191", "whiteBackgroundColor": "_whiteBackgroundColor_178qd_195", "yellow100BackgroundColor": "_yellow100BackgroundColor_178qd_199", "yellow200BackgroundColor": "_yellow200BackgroundColor_178qd_203", "yellow300BackgroundColor": "_yellow300BackgroundColor_178qd_207", "yellow700BackgroundColor": "_yellow700BackgroundColor_178qd_211", "yellow800BackgroundColor": "_yellow800BackgroundColor_178qd_215", "yellow900BackgroundColor": "_yellow900BackgroundColor_178qd_219", "cambioBlackColor": "_cambioBlackColor_178qd_224", "cambioWhiteColor": "_cambioWhiteColor_178qd_228", "cambioGray100Color": "_cambioGray100Color_178qd_232", "cambioGray200Color": "_cambioGray200Color_178qd_236", "cambioGray300Color": "_cambioGray300Color_178qd_240", "cambioGray370Color": "_cambioGray370Color_178qd_244", "cambioGray700Color": "_cambioGray700Color_178qd_248", "cambioGray800Color": "_cambioGray800Color_178qd_252", "cambioGray870Color": "_cambioGray870Color_178qd_256", "cambioGray900Color": "_cambioGray900Color_178qd_260", "cambioDestructive100Color": "_cambioDestructive100Color_178qd_264", "cambioDestructive300Color": "_cambioDestructive300Color_178qd_268", "cambioDestructive370Color": "_cambioDestructive370Color_178qd_272", "cambioDestructive700Color": "_cambioDestructive700Color_178qd_276", "cambioDestructive770Color": "_cambioDestructive770Color_178qd_280", "cambioDestructive900Color": "_cambioDestructive900Color_178qd_284", "cambioSuccess100Color": "_cambioSuccess100Color_178qd_288", "cambioSuccess300Color": "_cambioSuccess300Color_178qd_292", "cambioSuccess370Color": "_cambioSuccess370Color_178qd_296", "cambioSuccess700Color": "_cambioSuccess700Color_178qd_300", "cambioSuccess770Color": "_cambioSuccess770Color_178qd_304", "cambioSuccess900Color": "_cambioSuccess900Color_178qd_308", "cambioRedColor": "_cambioRedColor_178qd_312", "cambioOrangeColor": "_cambioOrangeColor_178qd_316", "cambioTanColor": "_cambioTanColor_178qd_320", "cambioCreamColor": "_cambioCreamColor_178qd_324", "cambioPurpleColor": "_cambioPurpleColor_178qd_328", "cambioLilacColor": "_cambioLilacColor_178qd_332", "cambioThistleColor": "_cambioThistleColor_178qd_336", "cambioPinkColor": "_cambioPinkColor_178qd_340", "cambioNavyColor": "_cambioNavyColor_178qd_344", "cambioTealColor": "_cambioTealColor_178qd_348", "cambioSlateColor": "_cambioSlateColor_178qd_352", "cambioSkyColor": "_cambioSkyColor_178qd_356", "cambioYellow700Color": "_cambioYellow700Color_178qd_360", "cambioTransparentFullBackgroundColor": "_cambioTransparentFullBackgroundColor_178qd_364", "cambioBlackBackgroundColor": "_cambioBlackBackgroundColor_178qd_368", "cambioWhiteBackgroundColor": "_cambioWhiteBackgroundColor_178qd_372", "cambioGray100BackgroundColor": "_cambioGray100BackgroundColor_178qd_376", "cambioGray200BackgroundColor": "_cambioGray200BackgroundColor_178qd_380", "cambioGray300BackgroundColor": "_cambioGray300BackgroundColor_178qd_384", "cambioGray370BackgroundColor": "_cambioGray370BackgroundColor_178qd_388", "cambioGray700BackgroundColor": "_cambioGray700BackgroundColor_178qd_392", "cambioGray800BackgroundColor": "_cambioGray800BackgroundColor_178qd_396", "cambioGray870BackgroundColor": "_cambioGray870BackgroundColor_178qd_400", "cambioGray900BackgroundColor": "_cambioGray900BackgroundColor_178qd_404", "cambioDestructive100BackgroundColor": "_cambioDestructive100BackgroundColor_178qd_408", "cambioDestructive300BackgroundColor": "_cambioDestructive300BackgroundColor_178qd_412", "cambioDestructive370BackgroundColor": "_cambioDestructive370BackgroundColor_178qd_416", "cambioDestructive700BackgroundColor": "_cambioDestructive700BackgroundColor_178qd_420", "cambioDestructive770BackgroundColor": "_cambioDestructive770BackgroundColor_178qd_424", "cambioDestructive900BackgroundColor": "_cambioDestructive900BackgroundColor_178qd_428", "cambioSuccess100BackgroundColor": "_cambioSuccess100BackgroundColor_178qd_432", "cambioSuccess300BackgroundColor": "_cambioSuccess300BackgroundColor_178qd_436", "cambioSuccess370BackgroundColor": "_cambioSuccess370BackgroundColor_178qd_440", "cambioSuccess700BackgroundColor": "_cambioSuccess700BackgroundColor_178qd_444", "cambioSuccess770BackgroundColor": "_cambioSuccess770BackgroundColor_178qd_448", "cambioSuccess900BackgroundColor": "_cambioSuccess900BackgroundColor_178qd_452", "cambioRedBackgroundColor": "_cambioRedBackgroundColor_178qd_456", "cambioOrangeBackgroundColor": "_cambioOrangeBackgroundColor_178qd_460", "cambioTanBackgroundColor": "_cambioTanBackgroundColor_178qd_464", "cambioCreamBackgroundColor": "_cambioCreamBackgroundColor_178qd_468", "cambioPurpleBackgroundColor": "_cambioPurpleBackgroundColor_178qd_472", "cambioLilacBackgroundColor": "_cambioLilacBackgroundColor_178qd_476", "cambioThistleBackgroundColor": "_cambioThistleBackgroundColor_178qd_480", "cambioPinkBackgroundColor": "_cambioPinkBackgroundColor_178qd_484", "cambioNavyBackgroundColor": "_cambioNavyBackgroundColor_178qd_488", "cambioTealBackgroundColor": "_cambioTealBackgroundColor_178qd_492", "cambioSlateBackgroundColor": "_cambioSlateBackgroundColor_178qd_496", "cambioSkyBackgroundColor": "_cambioSkyBackgroundColor_178qd_500", "cambioYellow700BackgroundColor": "_cambioYellow700BackgroundColor_178qd_504" };
 
 
 
 exports.colors_module_default = colors_module_default;
-//# sourceMappingURL=4YO26FWL.cjs.map
+//# sourceMappingURL=VKB7KOAH.cjs.map

package/dist/__chunks/VKB7KOAH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./colors.module.css#css-module"],"names":[],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,gBAAe,yBAAwB,uBAAsB,gCAA+B,gBAAe,0BAAyB,gBAAe,0BAAyB,mBAAkB,6BAA4B,mBAAkB,6BAA4B,cAAa,wBAAuB,wBAAuB,kCAAiC,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,iCAAgC,2CAA0C,yBAAwB,mCAAkC,yBAAwB,mCAAkC,yBAAwB,mCAAkC,yBAAwB,mCAAkC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,0BAAyB,oCAAmC,4BAA2B,sCAAqC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,wBAAuB,mCAAkC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,4BAA2B,uCAAsC,oBAAmB,+BAA8B,oBAAmB,+BAA8B,sBAAqB,iCAAgC,sBAAqB,iCAAgC,sBAAqB,iCAAgC,sBAAqB,iCAAgC,sBAAqB,iCAAgC,sBAAqB,iCAAgC,sBAAqB,iCAAgC,sBAAqB,iCAAgC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,yBAAwB,oCAAmC,yBAAwB,oCAAmC,yBAAwB,oCAAmC,yBAAwB,oCAAmC,yBAAwB,oCAAmC,yBAAwB,oCAAmC,kBAAiB,6BAA4B,qBAAoB,gCAA+B,kBAAiB,6BAA4B,oBAAmB,+BAA8B,qBAAoB,gCAA+B,oBAAmB,+BAA8B,sBAAqB,iCAAgC,mBAAkB,8BAA6B,mBAAkB,8BAA6B,mBAAkB,8BAA6B,oBAAmB,+BAA8B,kBAAiB,6BAA4B,wBAAuB,mCAAkC,wCAAuC,mDAAkD,8BAA6B,yCAAwC,8BAA6B,yCAAwC,gCAA+B,2CAA0C,gCAA+B,2CAA0C,gCAA+B,2CAA0C,gCAA+B,2CAA0C,gCAA+B,2CAA0C,gCAA+B,2CAA0C,gCAA+B,2CAA0C,gCAA+B,2CAA0C,uCAAsC,kDAAiD,uCAAsC,kDAAiD,uCAAsC,kDAAiD,uCAAsC,kDAAiD,uCAAsC,kDAAiD,uCAAsC,kDAAiD,mCAAkC,8CAA6C,mCAAkC,8CAA6C,mCAAkC,8CAA6C,mCAAkC,8CAA6C,mCAAkC,8CAA6C,mCAAkC,8CAA6C,4BAA2B,uCAAsC,+BAA8B,0CAAyC,4BAA2B,uCAAsC,8BAA6B,yCAAwC,+BAA8B,0CAAyC,8BAA6B,yCAAwC,gCAA+B,2CAA0C,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,8BAA6B,yCAAwC,4BAA2B,uCAAsC,kCAAiC,4CAA2C","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"inheritColor\":\"_inheritColor_178qd_2\",\"destructive700Color\":\"_destructive700Color_178qd_6\",\"gray700Color\":\"_gray700Color_178qd_10\",\"gray900Color\":\"_gray900Color_178qd_14\",\"primary700Color\":\"_primary700Color_178qd_18\",\"success700Color\":\"_success700Color_178qd_22\",\"whiteColor\":\"_whiteColor_178qd_26\",\"blackBackgroundColor\":\"_blackBackgroundColor_178qd_31\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_178qd_35\",\"destructive200BackgroundColor\":\"_destructive200BackgroundColor_178qd_39\",\"destructive300BackgroundColor\":\"_destructive300BackgroundColor_178qd_43\",\"destructive700BackgroundColor\":\"_destructive700BackgroundColor_178qd_47\",\"destructive800BackgroundColor\":\"_destructive800BackgroundColor_178qd_51\",\"destructive900BackgroundColor\":\"_destructive900BackgroundColor_178qd_55\",\"gray10BackgroundColor\":\"_gray10BackgroundColor_178qd_59\",\"gray30BackgroundColor\":\"_gray30BackgroundColor_178qd_63\",\"gray60BackgroundColor\":\"_gray60BackgroundColor_178qd_67\",\"gray80BackgroundColor\":\"_gray80BackgroundColor_178qd_71\",\"gray100BackgroundColor\":\"_gray100BackgroundColor_178qd_75\",\"gray200BackgroundColor\":\"_gray200BackgroundColor_178qd_79\",\"gray300BackgroundColor\":\"_gray300BackgroundColor_178qd_83\",\"gray700BackgroundColor\":\"_gray700BackgroundColor_178qd_87\",\"gray800BackgroundColor\":\"_gray800BackgroundColor_178qd_91\",\"gray900BackgroundColor\":\"_gray900BackgroundColor_178qd_95\",\"orange100BackgroundColor\":\"_orange100BackgroundColor_178qd_99\",\"orange200BackgroundColor\":\"_orange200BackgroundColor_178qd_103\",\"orange300BackgroundColor\":\"_orange300BackgroundColor_178qd_107\",\"orange700BackgroundColor\":\"_orange700BackgroundColor_178qd_111\",\"orange800BackgroundColor\":\"_orange800BackgroundColor_178qd_115\",\"orange900BackgroundColor\":\"_orange900BackgroundColor_178qd_119\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_178qd_123\",\"primary200BackgroundColor\":\"_primary200BackgroundColor_178qd_127\",\"primary300BackgroundColor\":\"_primary300BackgroundColor_178qd_131\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_178qd_135\",\"primary800BackgroundColor\":\"_primary800BackgroundColor_178qd_139\",\"primary900BackgroundColor\":\"_primary900BackgroundColor_178qd_143\",\"success100BackgroundColor\":\"_success100BackgroundColor_178qd_147\",\"success200BackgroundColor\":\"_success200BackgroundColor_178qd_151\",\"success300BackgroundColor\":\"_success300BackgroundColor_178qd_155\",\"success700BackgroundColor\":\"_success700BackgroundColor_178qd_159\",\"success800BackgroundColor\":\"_success800BackgroundColor_178qd_163\",\"success900BackgroundColor\":\"_success900BackgroundColor_178qd_167\",\"purple100BackgroundColor\":\"_purple100BackgroundColor_178qd_171\",\"purple200BackgroundColor\":\"_purple200BackgroundColor_178qd_175\",\"purple300BackgroundColor\":\"_purple300BackgroundColor_178qd_179\",\"purple700BackgroundColor\":\"_purple700BackgroundColor_178qd_183\",\"purple800BackgroundColor\":\"_purple800BackgroundColor_178qd_187\",\"purple900BackgroundColor\":\"_purple900BackgroundColor_178qd_191\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_178qd_195\",\"yellow100BackgroundColor\":\"_yellow100BackgroundColor_178qd_199\",\"yellow200BackgroundColor\":\"_yellow200BackgroundColor_178qd_203\",\"yellow300BackgroundColor\":\"_yellow300BackgroundColor_178qd_207\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_178qd_211\",\"yellow800BackgroundColor\":\"_yellow800BackgroundColor_178qd_215\",\"yellow900BackgroundColor\":\"_yellow900BackgroundColor_178qd_219\",\"cambioBlackColor\":\"_cambioBlackColor_178qd_224\",\"cambioWhiteColor\":\"_cambioWhiteColor_178qd_228\",\"cambioGray100Color\":\"_cambioGray100Color_178qd_232\",\"cambioGray200Color\":\"_cambioGray200Color_178qd_236\",\"cambioGray300Color\":\"_cambioGray300Color_178qd_240\",\"cambioGray370Color\":\"_cambioGray370Color_178qd_244\",\"cambioGray700Color\":\"_cambioGray700Color_178qd_248\",\"cambioGray800Color\":\"_cambioGray800Color_178qd_252\",\"cambioGray870Color\":\"_cambioGray870Color_178qd_256\",\"cambioGray900Color\":\"_cambioGray900Color_178qd_260\",\"cambioDestructive100Color\":\"_cambioDestructive100Color_178qd_264\",\"cambioDestructive300Color\":\"_cambioDestructive300Color_178qd_268\",\"cambioDestructive370Color\":\"_cambioDestructive370Color_178qd_272\",\"cambioDestructive700Color\":\"_cambioDestructive700Color_178qd_276\",\"cambioDestructive770Color\":\"_cambioDestructive770Color_178qd_280\",\"cambioDestructive900Color\":\"_cambioDestructive900Color_178qd_284\",\"cambioSuccess100Color\":\"_cambioSuccess100Color_178qd_288\",\"cambioSuccess300Color\":\"_cambioSuccess300Color_178qd_292\",\"cambioSuccess370Color\":\"_cambioSuccess370Color_178qd_296\",\"cambioSuccess700Color\":\"_cambioSuccess700Color_178qd_300\",\"cambioSuccess770Color\":\"_cambioSuccess770Color_178qd_304\",\"cambioSuccess900Color\":\"_cambioSuccess900Color_178qd_308\",\"cambioRedColor\":\"_cambioRedColor_178qd_312\",\"cambioOrangeColor\":\"_cambioOrangeColor_178qd_316\",\"cambioTanColor\":\"_cambioTanColor_178qd_320\",\"cambioCreamColor\":\"_cambioCreamColor_178qd_324\",\"cambioPurpleColor\":\"_cambioPurpleColor_178qd_328\",\"cambioLilacColor\":\"_cambioLilacColor_178qd_332\",\"cambioThistleColor\":\"_cambioThistleColor_178qd_336\",\"cambioPinkColor\":\"_cambioPinkColor_178qd_340\",\"cambioNavyColor\":\"_cambioNavyColor_178qd_344\",\"cambioTealColor\":\"_cambioTealColor_178qd_348\",\"cambioSlateColor\":\"_cambioSlateColor_178qd_352\",\"cambioSkyColor\":\"_cambioSkyColor_178qd_356\",\"cambioYellow700Color\":\"_cambioYellow700Color_178qd_360\",\"cambioTransparentFullBackgroundColor\":\"_cambioTransparentFullBackgroundColor_178qd_364\",\"cambioBlackBackgroundColor\":\"_cambioBlackBackgroundColor_178qd_368\",\"cambioWhiteBackgroundColor\":\"_cambioWhiteBackgroundColor_178qd_372\",\"cambioGray100BackgroundColor\":\"_cambioGray100BackgroundColor_178qd_376\",\"cambioGray200BackgroundColor\":\"_cambioGray200BackgroundColor_178qd_380\",\"cambioGray300BackgroundColor\":\"_cambioGray300BackgroundColor_178qd_384\",\"cambioGray370BackgroundColor\":\"_cambioGray370BackgroundColor_178qd_388\",\"cambioGray700BackgroundColor\":\"_cambioGray700BackgroundColor_178qd_392\",\"cambioGray800BackgroundColor\":\"_cambioGray800BackgroundColor_178qd_396\",\"cambioGray870BackgroundColor\":\"_cambioGray870BackgroundColor_178qd_400\",\"cambioGray900BackgroundColor\":\"_cambioGray900BackgroundColor_178qd_404\",\"cambioDestructive100BackgroundColor\":\"_cambioDestructive100BackgroundColor_178qd_408\",\"cambioDestructive300BackgroundColor\":\"_cambioDestructive300BackgroundColor_178qd_412\",\"cambioDestructive370BackgroundColor\":\"_cambioDestructive370BackgroundColor_178qd_416\",\"cambioDestructive700BackgroundColor\":\"_cambioDestructive700BackgroundColor_178qd_420\",\"cambioDestructive770BackgroundColor\":\"_cambioDestructive770BackgroundColor_178qd_424\",\"cambioDestructive900BackgroundColor\":\"_cambioDestructive900BackgroundColor_178qd_428\",\"cambioSuccess100BackgroundColor\":\"_cambioSuccess100BackgroundColor_178qd_432\",\"cambioSuccess300BackgroundColor\":\"_cambioSuccess300BackgroundColor_178qd_436\",\"cambioSuccess370BackgroundColor\":\"_cambioSuccess370BackgroundColor_178qd_440\",\"cambioSuccess700BackgroundColor\":\"_cambioSuccess700BackgroundColor_178qd_444\",\"cambioSuccess770BackgroundColor\":\"_cambioSuccess770BackgroundColor_178qd_448\",\"cambioSuccess900BackgroundColor\":\"_cambioSuccess900BackgroundColor_178qd_452\",\"cambioRedBackgroundColor\":\"_cambioRedBackgroundColor_178qd_456\",\"cambioOrangeBackgroundColor\":\"_cambioOrangeBackgroundColor_178qd_460\",\"cambioTanBackgroundColor\":\"_cambioTanBackgroundColor_178qd_464\",\"cambioCreamBackgroundColor\":\"_cambioCreamBackgroundColor_178qd_468\",\"cambioPurpleBackgroundColor\":\"_cambioPurpleBackgroundColor_178qd_472\",\"cambioLilacBackgroundColor\":\"_cambioLilacBackgroundColor_178qd_476\",\"cambioThistleBackgroundColor\":\"_cambioThistleBackgroundColor_178qd_480\",\"cambioPinkBackgroundColor\":\"_cambioPinkBackgroundColor_178qd_484\",\"cambioNavyBackgroundColor\":\"_cambioNavyBackgroundColor_178qd_488\",\"cambioTealBackgroundColor\":\"_cambioTealBackgroundColor_178qd_492\",\"cambioSlateBackgroundColor\":\"_cambioSlateBackgroundColor_178qd_496\",\"cambioSkyBackgroundColor\":\"_cambioSkyBackgroundColor_178qd_500\",\"cambioYellow700BackgroundColor\":\"_cambioYellow700BackgroundColor_178qd_504\"}"]}

package/dist/__chunks/{ZQFEITZH.cjs → WEIWUACW.cjs}

@@ -1,21 +1,22 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
-var _4QLZTDKEcjs = require('./4QLZTDKE.cjs');
 
+var _WYWNQJ3Bcjs = require('./WYWNQJ3B.cjs');
 
-var _GYI2PBXYcjs = require('./GYI2PBXY.cjs');
 
+var _3K37FYOTcjs = require('./3K37FYOT.cjs');
 
 
-var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 
 // src/RichSelect/RichSelectChip.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 var RichSelectChip_default = _react.forwardRef.call(void 0, 
   function RichSelectChip(props, ref) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GYI2PBXYcjs.RichSelectItem_default, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _4QLZTDKEcjs.Chip_default,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3K37FYOTcjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _WYWNQJ3Bcjs.Chip_default,
       {
         text: props.label,
         selected: isSelected,
@@ -30,4 +31,4 @@ var RichSelectChip_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectChip_default = RichSelectChip_default;
-//# sourceMappingURL=ZQFEITZH.cjs.map
+//# sourceMappingURL=WEIWUACW.cjs.map

package/dist/__chunks/WEIWUACW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectChip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,SAAmC,kBAAqC;AAc9D;AARV,IAAO,yBAAQ;AAAA,EACb,SAAS,eACP,OACA,KACc;AACd,WACE,oBAAC,yDAAmB,QAAnB,EAA0B,KACxB,WAAC,EAAE,YAAY,gBAAgB,WAAW,MACzC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,6BAA6B;AAAA,QAC7B,UAAU,MAAM;AAAA;AAAA,IAClB,IAEJ;AAAA,EAEJ;AACF","sourcesContent":["import React, { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport Chip from \"../Chip/Chip\";\nimport RichSelectItem, { type RichSelectItemProps } from \"./RichSelectItem\";\n\ntype RichSelectChipProps = RichSelectItemProps;\n\nexport default forwardRef<HTMLDivElement, RichSelectChipProps>(\n  function RichSelectChip(\n    props: RichSelectChipProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ): ReactElement {\n    return (\n      <RichSelectItem {...props} ref={ref}>\n        {({ isSelected, isFocusVisible, isDisabled }) => (\n          <Chip\n            text={props.label}\n            selected={isSelected}\n            disabled={isDisabled}\n            dangerouslyForceFocusStyles={isFocusVisible}\n            onChange={() => undefined}\n          />\n        )}\n      </RichSelectItem>\n    );\n  },\n);\n"]}

package/dist/__chunks/WFVGNGEP.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client"
+//# sourceMappingURL=WFVGNGEP.cjs.map

package/dist/__chunks/{SZCVEBN2.cjs → WJRIAS4W.cjs}

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 
+var _VF7PQHZPcjs = require('./VF7PQHZP.cjs');
 
-var _TF76F532cjs = require('./TF76F532.cjs');
 
+var _X2LNODY7cjs = require('./X2LNODY7.cjs');
 
 
 
-var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 
 // src/Box/Box.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -27,7 +28,7 @@ var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
   var _c;
-  const _a = props, { as: BoxElement = "div", children } = _a, boxProps = _I64JGYX7cjs.__objRest.call(void 0, _a, ["as", "children"]);
+  const _a = props, { as: BoxElement = "div", children } = _a, boxProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["as", "children"]);
   const _b = boxProps, {
     alignItems: alignItems,
     smAlignItems,
@@ -82,7 +83,7 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
     minHeight,
     minWidth,
     width
-  } = _b, maybePassThroughProps = _I64JGYX7cjs.__objRest.call(void 0, _b, [
+  } = _b, maybePassThroughProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, [
     // Classname
     "alignItems",
     "smAlignItems",
@@ -149,7 +150,7 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
       smAlignItems && Box_module_default[`alignItems${smAlignItems}Small`],
       lgAlignItems && Box_module_default[`alignItems${lgAlignItems}Large`],
       alignSelf && Box_module_default[`alignSelf${alignSelf}`],
-      backgroundColor && _TF76F532cjs.colors_module_default[`${backgroundColor}BackgroundColor`],
+      backgroundColor && _X2LNODY7cjs.colors_module_default[`${backgroundColor}BackgroundColor`],
       direction && Box_module_default[direction],
       smDirection && Box_module_default[`${smDirection}Small`],
       lgDirection && Box_module_default[`${lgDirection}Large`],
@@ -199,12 +200,12 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
       smJustifyContent && Box_module_default[`justifyContent${smJustifyContent}Small`],
       lgJustifyContent && Box_module_default[`justifyContent${lgJustifyContent}Large`],
       position && position !== "static" && Box_module_default[position],
-      rounding && rounding !== "none" && _7GJ2SD7Ocjs.rounding_module_default[`rounding${rounding}`],
+      rounding && rounding !== "none" && _VF7PQHZPcjs.rounding_module_default[`rounding${rounding}`],
       overflow && Box_module_default[`overflow${overflow}`],
       overflowX && Box_module_default[`overflowX${overflowX}`],
       overflowY && Box_module_default[`overflowY${overflowY}`]
     ),
-    style: _I64JGYX7cjs.__spreadValues.call(void 0, {
+    style: _X2SDR4SDcjs.__spreadValues.call(void 0, {
       height,
       maxHeight,
       maxWidth,
@@ -219,11 +220,11 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
     }
     return acc;
   }, {});
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoxElement, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, parsedProps), passthroughProps), { ref, children }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoxElement, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, parsedProps), passthroughProps), { ref, children }));
 });
 var Box_default = Box;
 
 
 
 exports.Box_default = Box_default;
-//# sourceMappingURL=SZCVEBN2.cjs.map
+//# sourceMappingURL=WJRIAS4W.cjs.map