@cambly/syntax-core 10.15.0 → 10.17.0

package/dist/__chunks/TN6NRPAZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n  sm: 400,\n  lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  size = \"sm\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image size should be 400w x 200h.\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The size of the card\n   *\n   * * `sm`: 400px\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   */\n  size?: keyof typeof sizeWidth;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  const { themeName } = useTheme();\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={classnames(\n              styles.backdrop,\n              themeName === \"classic\"\n                ? styles.backdropClassic\n                : styles.backdropCambio,\n            )}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"xl\"\n              display=\"flex\"\n              direction=\"column\"\n              minWidth={240}\n              maxWidth={sizeWidth[size]}\n              width=\"100%\"\n              dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n            >\n              <Box position=\"relative\">\n                <button\n                  aria-label={accessibilityCloseLabel}\n                  type=\"button\"\n                  className={classnames(\n                    styles.closeButton,\n                    themeName === \"classic\"\n                      ? styles.closeButtonClassic\n                      : styles.closeButtonCambio,\n                    {\n                      [styles.closeButtonWithImage]:\n                        !!image && themeName === \"classic\",\n                    },\n                  )}\n                  onClick={onDismiss}\n                >\n                  <XIcon\n                    color={image && themeName === \"classic\" ? \"#fff\" : \"#000\"}\n                  />\n                </button>\n              </Box>\n              {image && <Box maxHeight={200}>{image}</Box>}\n              <Box\n                display=\"flex\"\n                gap={3}\n                direction=\"column\"\n                padding={themeName === \"classic\" ? 9 : 3}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={themeName === \"classic\" ? 500 : 400}\n                  fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n                >\n                  {header}\n                </Heading>\n                <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_tqzb0_1\",\"backdropClassic\":\"_backdropClassic_tqzb0_11\",\"backdropCambio\":\"_backdropCambio_tqzb0_15\",\"closeButton\":\"_closeButton_tqzb0_19\",\"closeButtonClassic\":\"_closeButtonClassic_tqzb0_34\",\"closeButtonCambio\":\"_closeButtonCambio_tqzb0_41\",\"closeButtonWithImage\":\"_closeButtonWithImage_tqzb0_53\"}"],"mappings":"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","names":[]}

package/dist/__chunks/UTSVZIEK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  createContext,\n  useContext,\n  type ReactElement,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype Size =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  /* `xl` is deprecated and mapped to `lg` in Cambio */\n  | \"xl\";\ntype Orientation = \"standard\" | \"reverse\";\n\ntype AvatarGroupContextType = {\n  size: Size;\n  orientation: Orientation;\n};\n\nconst AvatarGroupContext = createContext<AvatarGroupContextType | null>(null);\n\nexport function useAvatarGroup(): AvatarGroupContextType | null {\n  const context = useContext(AvatarGroupContext);\n  return !context ? null : context;\n}\n\n/**\n * [AvatarGroup](https://cambly-syntax.vercel.app/?path=/docs/components-avatargroup--docs) is a stack of avatars to represent a group of people\n *\n * Pass in Avatar components as children to the AvatarGroup component. The size prop that is passed into the AvatarGroup component will override Avatar's size prop..\n *\n * Usage:\n *\n * <AvatarGroup size=\"xl\" orientation=\"standard\">\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * </AvatarGroup>\n *\n */\nexport default function AvatarGroup({\n  size = \"md\",\n  orientation = \"standard\",\n  children,\n}: {\n  /**\n   * Size of the avatars in the AvatarGroup.\n   *\n   * Classic:\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)\n   *\n   * @defaultValue `md`\n   */\n  size?: Size;\n  /**\n   * Orientation of the AvatarGroup.\n   * This describes the order of rendering of the Avatar components.\n   * Standard renders the Avatar components with the right component on top.\n   * Reverse renders the Avatar components with the left component on top.\n   *\n   * @defaultValue `standard`\n   */\n  orientation?: Orientation;\n  /**\n   * Avatars to be rendered within the AvatarGroup.\n   */\n  children: ReactNode;\n}): ReactElement {\n  const { themeName } = useTheme();\n  const parsedSize = themeName === \"cambio\" && size === \"xl\" ? \"lg\" : size;\n\n  return (\n    <AvatarGroupContext.Provider value={{ size: parsedSize, orientation }}>\n      <Box\n        display=\"flex\"\n        justifyContent={orientation === \"standard\" ? \"start\" : \"end\"}\n        dangerouslySetInlineStyle={{\n          __style: {\n            flexDirection: orientation === \"standard\" ? \"row\" : \"row-reverse\",\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </AvatarGroupContext.Provider>\n  );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":";;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAgFD;AA/DN,IAAM,qBAAqB,cAA6C,IAAI;AAErE,SAAS,iBAAgD;AAC9D,QAAM,UAAU,WAAW,kBAAkB;AAC7C,SAAO,CAAC,UAAU,OAAO;AAC3B;AAgBe,SAAR,YAA6B;AAAA,EAClC,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GAgCiB;AACf,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,aAAa,cAAc,YAAY,SAAS,OAAO,OAAO;AAEpE,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,YAAY,GAClE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAgB,gBAAgB,aAAa,UAAU;AAAA,MACvD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,eAAe,gBAAgB,aAAa,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/__chunks/VL5ONCQD.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AA4DnB;AA5CJ,IAAM,iBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe,WAAW,eAAe,IAAI,GAAG;AAAA,QAChD,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\ntype DialogRounding = \"lg\" | \"xl\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToRounding: Record<DialogSize, DialogRounding> = {\n  sm: \"lg\",\n  md: \"lg\",\n  lg: \"xl\",\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles[`rounding${sizeToRounding[size]}`],\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"]}

package/dist/__chunks/VOLO4QB4.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n  useId,\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\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\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  /**\n   * RichSelectList id, if not provided, a unique id will be generated\n   */\n  id?: 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    id,\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 reactId = useId();\n  const inputId = id ?? reactId;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\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          [styles.selectContainerCambio]: themeName === \"cambio\",\n        })}\n      >\n        {label && (\n          <>\n            <ReactAriaLabel\n              data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n              className={classNames(\n                themeName === \"cambio\" && styles.labelCambio,\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              <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n                <Typography size={100} color=\"gray700\">\n                  {label}\n                </Typography>\n              </Box>\n            </ReactAriaLabel>\n          </>\n        )}\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\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                {...richSelectBoxProps}\n                accessibilityLabel={inputId}\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(\n                  styles.selectBox,\n                  themeName === \"classic\"\n                    ? styles.selectBoxClassic\n                    : styles.selectBoxCambio,\n                  themeName === \"classic\" && styles[size],\n                  {\n                    [styles.unselected]:\n                      !errorText &&\n                      selectedKeys !== \"all\" &&\n                      !selectedKeys.size,\n                    [styles.selected]:\n                      !errorText &&\n                      (selectedKeys === \"all\" || selectedKeys.size),\n                    [themeName === \"classic\"\n                      ? styles.selectError\n                      : styles.selectErrorCambio]: errorText,\n                  },\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          <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </Box>\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_hzvfu_1\",\"selectContainerCambio\":\"_selectContainerCambio_hzvfu_7\",\"opacityOverlay\":\"_opacityOverlay_hzvfu_11\",\"labelCambio\":\"_labelCambio_hzvfu_15\",\"selectWrapper\":\"_selectWrapper_hzvfu_26\",\"selectBox\":\"_selectBox_hzvfu_31\",\"selectBoxClassic\":\"_selectBoxClassic_hzvfu_47\",\"selectBoxCambio\":\"_selectBoxCambio_hzvfu_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_hzvfu_61\",\"unselected\":\"_unselected_hzvfu_66\",\"selected\":\"_selected_hzvfu_70\",\"arrowIcon\":\"_arrowIcon_hzvfu_74\",\"sm\":\"_sm_hzvfu_88\",\"md\":\"_md_hzvfu_94\",\"lg\":\"_lg_hzvfu_100\",\"selectError\":\"_selectError_hzvfu_106\",\"selectErrorCambio\":\"_selectErrorCambio_hzvfu_112\"}"]}

package/dist/__chunks/YLJDLIHH.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n  sm: 400,\n  lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  size = \"sm\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image size should be 400w x 200h.\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The size of the card\n   *\n   * * `sm`: 400px\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   */\n  size?: keyof typeof sizeWidth;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  const { themeName } = useTheme();\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={classnames(\n              styles.backdrop,\n              themeName === \"classic\"\n                ? styles.backdropClassic\n                : styles.backdropCambio,\n            )}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"xl\"\n              display=\"flex\"\n              direction=\"column\"\n              minWidth={240}\n              maxWidth={sizeWidth[size]}\n              width=\"100%\"\n              dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n            >\n              <Box position=\"relative\">\n                <button\n                  aria-label={accessibilityCloseLabel}\n                  type=\"button\"\n                  className={classnames(\n                    styles.closeButton,\n                    themeName === \"classic\"\n                      ? styles.closeButtonClassic\n                      : styles.closeButtonCambio,\n                    {\n                      [styles.closeButtonWithImage]:\n                        !!image && themeName === \"classic\",\n                    },\n                  )}\n                  onClick={onDismiss}\n                >\n                  <XIcon\n                    color={image && themeName === \"classic\" ? \"#fff\" : \"#000\"}\n                  />\n                </button>\n              </Box>\n              {image && <Box maxHeight={200}>{image}</Box>}\n              <Box\n                display=\"flex\"\n                gap={3}\n                direction=\"column\"\n                padding={themeName === \"classic\" ? 9 : 3}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={themeName === \"classic\" ? 500 : 400}\n                  fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n                >\n                  {header}\n                </Heading>\n                <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_tqzb0_1\",\"backdropClassic\":\"_backdropClassic_tqzb0_11\",\"backdropCambio\":\"_backdropCambio_tqzb0_15\",\"closeButton\":\"_closeButton_tqzb0_19\",\"closeButtonClassic\":\"_closeButtonClassic_tqzb0_34\",\"closeButtonCambio\":\"_closeButtonCambio_tqzb0_41\",\"closeButtonWithImage\":\"_closeButtonWithImage_tqzb0_53\"}"]}

package/dist/__chunks/ZFX4HW2P.cjs

@@ -1,122 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-var _27K33DEMcjs = require('./27K33DEM.cjs');
-
-
-var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
-
-
-var _6W5WRS53cjs = require('./6W5WRS53.cjs');
-
-
-var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
-
-// src/TextArea/TextArea.tsx
-var _react = require('react');
-
-// css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "textarea": "_textarea_1w1b8_1", "sm": "_sm_1w1b8_5", "md": "_md_1w1b8_10", "lg": "_lg_1w1b8_15", "textareaCambio": "_textareaCambio_1w1b8_20", "fixTextareaHeight": "_fixTextareaHeight_1w1b8_24", "labelCambio": "_labelCambio_1w1b8_28" };
-
-// css-module:../TextField/TextField.module.css#css-module
-var TextField_module_default = { "textfield": "_textfield_15iys_1", "textfieldClassic": "_textfieldClassic_15iys_10", "textfieldCambio": "_textfieldCambio_15iys_14", "label": "_label_15iys_29", "labelCambio": "_labelCambio_15iys_33", "labelCambioTextfield": "_labelCambioTextfield_15iys_42", "sm": "_sm_15iys_46", "smCambio": "_smCambio_15iys_53", "mdCambio": "_mdCambio_15iys_57", "lgCambio": "_lgCambio_15iys_61", "heightCambio": "_heightCambio_15iys_65", "smHeight": "_smHeight_15iys_69", "md": "_md_15iys_57", "mdHeight": "_mdHeight_15iys_80", "lg": "_lg_15iys_61", "lgHeight": "_lgHeight_15iys_91", "inputError": "_inputError_15iys_95", "inputErrorCambio": "_inputErrorCambio_15iys_105" };
-
-// src/TextArea/TextArea.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _jsxruntime = require('react/jsx-runtime');
-var TextArea = _react.forwardRef.call(void 0, 
-  function TextArea2({
-    "data-testid": dataTestId,
-    disabled: disabledProp = false,
-    errorText = "",
-    helperText = "",
-    id,
-    label,
-    maxLength = 1024,
-    placeholder = "",
-    rows = 3,
-    size = "md",
-    value = "",
-    onChange
-  }, forwardedRef) {
-    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-    const disabled = !isHydrated || disabledProp;
-    const reactId = _react.useId.call(void 0, );
-    const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
-    const inputId = id != null ? id : reactId;
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _27K33DEMcjs.Box_default,
-      {
-        display: "flex",
-        direction: "column",
-        gap: 2,
-        width: "100%",
-        dangerouslySetInlineStyle: {
-          __style: {
-            opacity: disabled ? 0.5 : 1
-          }
-        },
-        position: themeName === "cambio" ? "relative" : void 0,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "label",
-            {
-              className: _classnames2.default.call(void 0, 
-                themeName === "classic" ? TextField_module_default.label : TextField_module_default.labelCambio,
-                themeName === "cambio" && TextArea_module_default.labelCambio
-              ),
-              htmlFor: inputId,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 3, width: "100%", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WGRHH5TFcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WGRHH5TFcjs.Typography_default, { size: themeName === "cambio" ? 100 : 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "div",
-            {
-              className: _classnames2.default.call(void 0, 
-                themeName === "cambio" && TextArea_module_default.fixTextareaHeight
-              ),
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "textarea",
-                {
-                  "data-testid": dataTestId,
-                  ref: forwardedRef,
-                  className: _classnames2.default.call(void 0, 
-                    TextField_module_default.textfield,
-                    themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
-                    themeName === "classic" && TextField_module_default[size],
-                    themeName === "classic" && TextArea_module_default[size],
-                    themeName === "classic" ? TextArea_module_default.textarea : TextArea_module_default.textareaCambio,
-                    {
-                      [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
-                    }
-                  ),
-                  id: inputId,
-                  placeholder,
-                  maxLength,
-                  onChange,
-                  rows,
-                  value,
-                  disabled
-                }
-              )
-            }
-          ) }),
-          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _WGRHH5TFcjs.Typography_default,
-            {
-              size: 100,
-              color: errorText ? "destructive-primary" : "gray700",
-              children: errorText || helperText
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-var TextArea_default = TextArea;
-
-
-
-exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=ZFX4HW2P.cjs.map

package/dist/__chunks/ZFX4HW2P.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"names":["TextArea"],"mappings":"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","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\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\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   * Cambio only supports `md`\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 { themeName } = useTheme();\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        position={themeName === \"cambio\" ? \"relative\" : undefined}\n      >\n        <label\n          className={classNames(\n            themeName === \"classic\"\n              ? textFieldStyles.label\n              : textFieldStyles.labelCambio,\n            themeName === \"cambio\" && styles.labelCambio,\n          )}\n          htmlFor={inputId}\n        >\n          <Box paddingX={themeName === \"classic\" ? 1 : 3} width=\"100%\">\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={themeName === \"cambio\" ? 100 : 200}>\n          <div\n            className={classNames(\n              themeName === \"cambio\" && styles.fixTextareaHeight,\n            )}\n          >\n            <textarea\n              data-testid={dataTestId}\n              ref={forwardedRef}\n              className={classNames(\n                textFieldStyles.textfield,\n                themeName === \"classic\"\n                  ? textFieldStyles.textfieldClassic\n                  : textFieldStyles.textfieldCambio,\n                themeName === \"classic\" && textFieldStyles[size],\n                themeName === \"classic\" && styles[size],\n                themeName === \"classic\"\n                  ? styles.textarea\n                  : styles.textareaCambio,\n                {\n                  [themeName === \"classic\"\n                    ? textFieldStyles.inputError\n                    : textFieldStyles.inputErrorCambio]: 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          </div>\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={themeName === \"classic\" ? 1 : 0}>\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_1w1b8_1\",\"sm\":\"_sm_1w1b8_5\",\"md\":\"_md_1w1b8_10\",\"lg\":\"_lg_1w1b8_15\",\"textareaCambio\":\"_textareaCambio_1w1b8_20\",\"fixTextareaHeight\":\"_fixTextareaHeight_1w1b8_24\",\"labelCambio\":\"_labelCambio_1w1b8_28\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_15iys_1\",\"textfieldClassic\":\"_textfieldClassic_15iys_10\",\"textfieldCambio\":\"_textfieldCambio_15iys_14\",\"label\":\"_label_15iys_29\",\"labelCambio\":\"_labelCambio_15iys_33\",\"labelCambioTextfield\":\"_labelCambioTextfield_15iys_42\",\"sm\":\"_sm_15iys_46\",\"smCambio\":\"_smCambio_15iys_53\",\"mdCambio\":\"_mdCambio_15iys_57\",\"lgCambio\":\"_lgCambio_15iys_61\",\"heightCambio\":\"_heightCambio_15iys_65\",\"smHeight\":\"_smHeight_15iys_69\",\"md\":\"_md_15iys_57\",\"mdHeight\":\"_mdHeight_15iys_80\",\"lg\":\"_lg_15iys_61\",\"lgHeight\":\"_lgHeight_15iys_91\",\"inputError\":\"_inputError_15iys_95\",\"inputErrorCambio\":\"_inputErrorCambio_15iys_105\"}"]}