@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/Forms/Inputs/Select/Select.js

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var ZIndex = require('../../../../constants/ZIndex.js');
+var functionUtils = require('../../../../utils/functionUtils.js');
+var typeUtils = require('../../../../utils/typeUtils.js');
+var useFormFieldProps = require('../../useFormFieldProps.js');
+var Overlay_types = require('../../../Overlay/Overlay.types.js');
+var Text = require('../../../Text/Text.js');
+var Select_types = require('./Select.types.js');
+var Select_styled = require('./Select.styled.js');
+var Icon = require('../../../Icon/Icon.js');
+var Icon_types = require('../../../Icon/Icon.types.js');
+var Typography = require('../../../../foundation/Typography.js');
+
+const SELECT_CONTAINER_TEST_ID = 'bezier-react-select-container';
+const SELECT_TRIGGER_TEST_ID = 'bezier-react-select-trigger';
+const SELECT_TRIGGER_TEXT_TEST_ID = 'bezier-react-select-trigger-text';
+const SELECT_DROPDOWN_TEST_ID = 'bezier-react-select-dropdown';
+const DEFAULT_DROPDOWN_MARGIN_Y = 6;
+const DEFAULT_DROPDOWN_Z_INDEX = ZIndex.ZIndex.Overlay;
+function Select({
+  testId = SELECT_CONTAINER_TEST_ID,
+  triggerTestId = SELECT_TRIGGER_TEST_ID,
+  triggerTextTestId = SELECT_TRIGGER_TEXT_TEST_ID,
+  dropdownTestId = SELECT_DROPDOWN_TEST_ID,
+  as,
+  style,
+  className,
+  interpolation,
+  dropdownInterpolation,
+  size = Select_types.SelectSize.M,
+  defaultFocus = false,
+  placeholder = '',
+  leftContent,
+  rightContent,
+  iconColor = 'txt-black-dark',
+  text,
+  textColor = 'txt-black-darkest',
+  withoutChevron = false,
+  dropdownStyle,
+  dropdownClassName,
+  dropdownContainer,
+  dropdownMarginX,
+  dropdownMarginY = DEFAULT_DROPDOWN_MARGIN_Y,
+  dropdownZIndex = DEFAULT_DROPDOWN_Z_INDEX,
+  dropdownPosition = Overlay_types.OverlayPosition.BottomLeft,
+  onClickTrigger = functionUtils.noop,
+  onHideDropdown = functionUtils.noop,
+  children,
+  ...rest
+}, forwardedRef) {
+  const {
+    disabled,
+    readOnly,
+    hasError,
+    ...ownProps
+  } = useFormFieldProps.default(rest);
+  const containerRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const [isDropdownOpened, setIsDropdownOpened] = React.useState(false);
+  const LeftComponent = React.useMemo(() => {
+    if (bezierIcons.isBezierIcon(leftContent)) {
+      return /*#__PURE__*/React.createElement(Icon.Icon, {
+        source: leftContent,
+        size: Icon_types.IconSize.XS,
+        marginRight: 6,
+        color: iconColor
+      });
+    }
+    return leftContent;
+  }, [leftContent, iconColor]);
+  const RightComponent = React.useMemo(() => {
+    if (bezierIcons.isBezierIcon(rightContent)) {
+      return /*#__PURE__*/React.createElement(Icon.Icon, {
+        source: rightContent,
+        size: Icon_types.IconSize.XS,
+        marginRight: 6,
+        color: iconColor
+      });
+    }
+    return rightContent;
+  }, [rightContent, iconColor]);
+  const handleClickTrigger = React.useCallback(event => {
+    if (!disabled && !readOnly) {
+      setIsDropdownOpened(prevState => !prevState);
+      onClickTrigger(event);
+    }
+  }, [disabled, readOnly, onClickTrigger]);
+  const handleHideDropdown = React.useCallback(() => {
+    setIsDropdownOpened(false);
+    onHideDropdown();
+  }, [onHideDropdown]);
+  const getDOMNode = React.useCallback(() => triggerRef.current, []);
+  const handle = React.useMemo(() => ({
+    handleClickTrigger,
+    handleHideDropdown,
+    getDOMNode
+  }), [handleClickTrigger, handleHideDropdown, getDOMNode]);
+  React.useEffect(() => {
+    if (defaultFocus && !disabled && !readOnly) {
+      setIsDropdownOpened(true);
+    }
+  }, [defaultFocus, disabled, readOnly]);
+  React.useImperativeHandle(forwardedRef, () => handle);
+  const hasContent = !typeUtils.isEmpty(text);
+  return /*#__PURE__*/React.createElement(Select_styled.Container, {
+    "data-testid": testId,
+    ref: containerRef,
+    style: style,
+    className: className,
+    interpolation: interpolation
+  }, /*#__PURE__*/React.createElement(Select_styled.Trigger, Object.assign({
+    type: "button",
+    "data-testid": triggerTestId,
+    as: as,
+    ref: triggerRef,
+    size: size,
+    hasError: hasError,
+    disabled: disabled,
+    readOnly: readOnly,
+    active: isDropdownOpened,
+    onClick: handleClickTrigger
+  }, ownProps), /*#__PURE__*/React.createElement(Select_styled.MainContentWrapper, null, LeftComponent, /*#__PURE__*/React.createElement(Text.default, {
+    testId: triggerTextTestId,
+    typo: Typography.Typography.Size14,
+    truncated: true,
+    color: hasContent ? textColor : 'txt-black-dark'
+  }, hasContent ? text : placeholder), RightComponent), !withoutChevron && /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: isDropdownOpened ? bezierIcons.ChevronUpIcon : bezierIcons.ChevronDownIcon,
+    size: Icon_types.IconSize.XS,
+    color: readOnly ? 'txt-black-dark' : 'txt-black-darker',
+    marginLeft: 6
+  })), /*#__PURE__*/React.createElement(Select_styled.Dropdown, {
+    style: dropdownStyle,
+    className: dropdownClassName,
+    testId: dropdownTestId,
+    withTransition: true,
+    show: isDropdownOpened && !disabled,
+    zIndex: dropdownZIndex,
+    marginX: dropdownMarginX,
+    marginY: dropdownMarginY,
+    target: triggerRef.current,
+    container: dropdownContainer || containerRef.current,
+    position: dropdownPosition,
+    interpolation: dropdownInterpolation,
+    onHide: handleHideDropdown
+  }, children));
+}
+var Select$1 = /*#__PURE__*/React.forwardRef(Select);
+
+exports.SELECT_CONTAINER_TEST_ID = SELECT_CONTAINER_TEST_ID;
+exports.SELECT_DROPDOWN_TEST_ID = SELECT_DROPDOWN_TEST_ID;
+exports.SELECT_TRIGGER_TEST_ID = SELECT_TRIGGER_TEST_ID;
+exports.SELECT_TRIGGER_TEXT_TEST_ID = SELECT_TRIGGER_TEXT_TEST_ID;
+exports.default = Select$1;
+//# sourceMappingURL=Select.js.map

package/dist/cjs/components/Forms/Inputs/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Forms/Inputs/Select/Select.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { noop } from '~/src/utils/functionUtils'\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport { OverlayPosition } from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\nimport type SelectProps from './Select.types'\nimport { type SelectRef } from './Select.types'\nimport { SelectSize } from './Select.types'\n\nimport * as Styled from './Select.styled'\n\nexport const SELECT_CONTAINER_TEST_ID = 'bezier-react-select-container'\nexport const SELECT_TRIGGER_TEST_ID = 'bezier-react-select-trigger'\nexport const SELECT_TRIGGER_TEXT_TEST_ID = 'bezier-react-select-trigger-text'\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-react-select-dropdown'\n\nconst DEFAULT_DROPDOWN_MARGIN_Y = 6\nconst DEFAULT_DROPDOWN_Z_INDEX = ZIndex.Overlay\n\nfunction Select({\n  testId = SELECT_CONTAINER_TEST_ID,\n  triggerTestId = SELECT_TRIGGER_TEST_ID,\n  triggerTextTestId = SELECT_TRIGGER_TEXT_TEST_ID,\n  dropdownTestId = SELECT_DROPDOWN_TEST_ID,\n  as,\n  style,\n  className,\n  interpolation,\n  dropdownInterpolation,\n  size = SelectSize.M,\n  defaultFocus = false,\n  placeholder = '',\n  leftContent,\n  rightContent,\n  iconColor = 'txt-black-dark',\n  text,\n  textColor = 'txt-black-darkest',\n  withoutChevron = false,\n  dropdownStyle,\n  dropdownClassName,\n  dropdownContainer,\n  dropdownMarginX,\n  dropdownMarginY = DEFAULT_DROPDOWN_MARGIN_Y,\n  dropdownZIndex = DEFAULT_DROPDOWN_Z_INDEX,\n  dropdownPosition = OverlayPosition.BottomLeft,\n  onClickTrigger = noop,\n  onHideDropdown = noop,\n  children,\n  ...rest\n}: SelectProps,\nforwardedRef: Ref<SelectRef>,\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const LeftComponent = useMemo(() => {\n    if (isBezierIcon(leftContent)) {\n      return (\n        <Icon\n          source={leftContent}\n          size={IconSize.XS}\n          marginRight={6}\n          color={iconColor}\n        />\n      )\n    }\n\n    return leftContent\n  }, [\n    leftContent,\n    iconColor,\n  ])\n\n  const RightComponent = useMemo(() => {\n    if (isBezierIcon(rightContent)) {\n      return (\n        <Icon\n          source={rightContent}\n          size={IconSize.XS}\n          marginRight={6}\n          color={iconColor}\n        />\n      )\n    }\n\n    return rightContent\n  }, [\n    rightContent,\n    iconColor,\n  ])\n\n  const handleClickTrigger = useCallback((event: React.MouseEvent) => {\n    if (!disabled && !readOnly) {\n      setIsDropdownOpened(prevState => !prevState)\n      onClickTrigger(event)\n    }\n  }, [\n    disabled,\n    readOnly,\n    onClickTrigger,\n  ])\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo((): SelectRef => ({ handleClickTrigger, handleHideDropdown, getDOMNode }), [\n    handleClickTrigger,\n    handleHideDropdown,\n    getDOMNode,\n  ])\n\n  useEffect(() => {\n    if (defaultFocus && !disabled && !readOnly) {\n      setIsDropdownOpened(true)\n    }\n  }, [\n    defaultFocus,\n    disabled,\n    readOnly,\n  ])\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  return (\n    <Styled.Container\n      data-testid={testId}\n      ref={containerRef}\n      style={style}\n      className={className}\n      interpolation={interpolation}\n    >\n      <Styled.Trigger\n        type=\"button\"\n        data-testid={triggerTestId}\n        as={as}\n        ref={triggerRef}\n        size={size}\n        hasError={hasError}\n        disabled={disabled}\n        readOnly={readOnly}\n        active={isDropdownOpened}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <Styled.MainContentWrapper>\n          { LeftComponent }\n          <Text\n            testId={triggerTextTestId}\n            typo={Typography.Size14}\n            truncated\n            color={hasContent ? textColor : 'txt-black-dark'}\n          >\n            { hasContent ? text : placeholder }\n          </Text>\n          { RightComponent }\n        </Styled.MainContentWrapper>\n        { !withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size={IconSize.XS}\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        ) }\n      </Styled.Trigger>\n\n      <Styled.Dropdown\n        style={dropdownStyle}\n        className={dropdownClassName}\n        testId={dropdownTestId}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        zIndex={dropdownZIndex}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        interpolation={dropdownInterpolation}\n        onHide={handleHideDropdown}\n      >\n        { children }\n      </Styled.Dropdown>\n    </Styled.Container>\n  )\n}\n\nexport default forwardRef(Select)\n"],"names":["SELECT_CONTAINER_TEST_ID","SELECT_TRIGGER_TEST_ID","SELECT_TRIGGER_TEXT_TEST_ID","SELECT_DROPDOWN_TEST_ID","DEFAULT_DROPDOWN_MARGIN_Y","DEFAULT_DROPDOWN_Z_INDEX","ZIndex","Overlay","Select","testId","triggerTestId","triggerTextTestId","dropdownTestId","as","style","className","interpolation","dropdownInterpolation","size","SelectSize","M","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","OverlayPosition","BottomLeft","onClickTrigger","noop","onHideDropdown","children","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","LeftComponent","useMemo","isBezierIcon","React","createElement","Icon","source","IconSize","XS","marginRight","color","RightComponent","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useEffect","useImperativeHandle","hasContent","isEmpty","Styled","ref","Object","assign","type","active","onClick","Text","typo","Typography","Size14","truncated","ChevronUpIcon","ChevronDownIcon","marginLeft","withTransition","show","zIndex","marginX","marginY","target","container","position","onHide","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/Select/Select.styled.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var DisabledOpacity = require('../../../../constants/DisabledOpacity.js');
+var mixins = require('../mixins.js');
+var Overlay = require('../../../Overlay/Overlay.js');
+var FoundationStyledComponent = require('../../../../foundation/FoundationStyledComponent.js');
+
+const Container = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Selectstyled__Container",
+  componentId: "sc-r4extr-0"
+})(["position:relative;", ";"], ({
+  interpolation
+}) => interpolation);
+const focusedStyle = FoundationStyledComponent.css`
+  ${mixins.focusedInputWrapperStyle};
+  background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-grey-lighter']};
+`;
+const Trigger = /*#__PURE__*/FoundationStyledComponent.styled.button.withConfig({
+  displayName: "Selectstyled__Trigger",
+  componentId: "sc-r4extr-1"
+})(["all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:", "px;padding:8px 12px;cursor:pointer;user-select:none;background-color:", ";", " ", " ", " ", " ", " ", " ", " &:disabled{cursor:not-allowed;opacity:", ";}&:not(:disabled):focus{", "}", ""], ({
+  size
+}) => size, ({
+  foundation
+}) => foundation?.theme?.['bg-grey-lightest'], mixins.inputTextStyle, mixins.inputWrapperStyle, ({
+  foundation
+}) => foundation?.rounding?.round8, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['background-color', 'box-shadow']), ({
+  active
+}) => active && focusedStyle, ({
+  hasError
+}) => hasError && mixins.erroredInputWrapperStyle, ({
+  readOnly
+}) => readOnly && FoundationStyledComponent.css`
+    cursor: initial;
+    background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-grey-lighter']};
+  `, DisabledOpacity.default, focusedStyle, ({
+  readOnly
+}) => !readOnly && FoundationStyledComponent.css`
+    &:not(:disabled):hover {
+      background-color: ${({
+  foundation
+}) => foundation?.theme?.['bg-grey-lighter']};
+    }
+  `);
+const MainContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Selectstyled__MainContentWrapper",
+  componentId: "sc-r4extr-2"
+})(["display:flex;align-items:center;overflow:hidden;"]);
+const Dropdown = /*#__PURE__*/FoundationStyledComponent.styled(Overlay.default).withConfig({
+  displayName: "Selectstyled__Dropdown",
+  componentId: "sc-r4extr-3"
+})(["z-index:", ";min-width:200px;min-height:42px;max-height:640px;", ";", ";", ""], ({
+  zIndex
+}) => zIndex, ({
+  foundation
+}) => foundation?.rounding?.round8, ({
+  foundation
+}) => foundation?.elevation?.ev3(), ({
+  interpolation
+}) => interpolation);
+
+exports.Container = Container;
+exports.Dropdown = Dropdown;
+exports.MainContentWrapper = MainContentWrapper;
+exports.Trigger = Trigger;
+//# sourceMappingURL=Select.styled.js.map

package/dist/cjs/components/Forms/Inputs/Select/Select.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styled.js","sources":["../../../../../../src/components/Forms/Inputs/Select/Select.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n  inputTextStyle,\n  inputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\nimport { Overlay } from '~/src/components/Overlay'\n\nimport { type SelectSize } from './Select.types'\n\nexport const Container = styled.div<InterpolationProps>`\n  position: relative;\n\n  ${({ interpolation }) => interpolation};\n`\n\ninterface TriggerProps {\n  hasError: boolean\n  disabled: boolean\n  readOnly: boolean\n  active: boolean\n  size: SelectSize\n}\n\nconst focusedStyle = css`\n  ${focusedInputWrapperStyle};\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lighter']};\n`\n\nexport const Trigger = styled.button<TriggerProps>`\n  all: unset;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: ${({ size }) => size}px;\n  padding: 8px 12px;\n  cursor: pointer;\n  user-select: none;\n  background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lightest']};\n\n  ${inputTextStyle}\n\n  ${inputWrapperStyle}\n\n  ${({ foundation }) => foundation?.rounding?.round8}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'box-shadow'])}\n\n  ${({ active }) => active && focusedStyle}\n\n  ${({ hasError }) => hasError && erroredInputWrapperStyle}\n\n  ${({ readOnly }) => readOnly && css`\n    cursor: initial;\n    background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lighter']};\n  `}\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: ${DisabledOpacity};\n  }\n\n  &:not(:disabled):focus {\n    ${focusedStyle}\n  }\n\n  ${({ readOnly }) => !readOnly && css`\n    &:not(:disabled):hover {\n      background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lighter']};\n    }\n  `}\n`\n\nexport const MainContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`\n\ninterface DropdownProps extends InterpolationProps {\n  zIndex: number\n}\n\nexport const Dropdown = styled(Overlay)<DropdownProps>`\n  z-index: ${({ zIndex }) => zIndex};\n  min-width: 200px;\n  min-height: 42px;\n  max-height: 640px;\n\n  ${({ foundation }) => foundation?.rounding?.round8};\n  ${({ foundation }) => foundation?.elevation?.ev3()};\n\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["Container","styled","div","withConfig","displayName","componentId","interpolation","focusedStyle","css","focusedInputWrapperStyle","foundation","theme","Trigger","button","size","inputTextStyle","inputWrapperStyle","rounding","round8","transition","getTransitionsCSS","active","hasError","erroredInputWrapperStyle","readOnly","DisabledOpacity","MainContentWrapper","Dropdown","Overlay","zIndex","elevation","ev3"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/Select/Select.types.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var FormFieldSize = require('../../FormFieldSize.js');
+
+let SelectSize = function (SelectSize) {
+  SelectSize[SelectSize["XL"] = FormFieldSize.default.XL] = "XL";
+  SelectSize[SelectSize["L"] = FormFieldSize.default.L] = "L";
+  SelectSize[SelectSize["M"] = FormFieldSize.default.M] = "M";
+  SelectSize[SelectSize["S"] = FormFieldSize.default.XS] = "S";
+  return SelectSize;
+}({});
+
+exports.SelectSize = SelectSize;
+//# sourceMappingURL=Select.types.js.map

package/dist/cjs/components/Forms/Inputs/Select/Select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.js","sources":["../../../../../../src/components/Forms/Inputs/Select/Select.types.ts"],"sourcesContent":["import { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport type {\n  AdditionalColorProps,\n  AdditionalStylableProps,\n  AdditionalTestIdProps,\n  BezierComponentProps,\n  ChildrenProps,\n  SideContentProps,\n  SizeProps,\n} from '~/src/types/ComponentProps'\n\nimport type { FormComponentProps } from '~/src/components/Forms'\nimport { FormFieldSize } from '~/src/components/Forms'\nimport type { OverlayProps } from '~/src/components/Overlay'\n\nexport enum SelectSize {\n  XL = FormFieldSize.XL,\n  L = FormFieldSize.L,\n  M = FormFieldSize.M,\n  S = FormFieldSize.XS,\n}\n\nexport interface SelectRef {\n  handleClickTrigger(event: React.MouseEvent): void\n  handleHideDropdown(): void\n  getDOMNode(): Element | Text | null\n}\n\ninterface SelectOptions {\n  defaultFocus?: boolean\n  placeholder?: string\n  text?: string\n  withoutChevron?: boolean\n  dropdownContainer?: HTMLElement | null\n  dropdownMarginX?: OverlayProps['marginX']\n  dropdownMarginY?: OverlayProps['marginY']\n  dropdownZIndex?: number\n  dropdownPosition?: OverlayProps['position']\n  onClickTrigger?: React.MouseEventHandler\n  onHideDropdown?: () => void\n}\n\ninterface SelectProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  SizeProps<SelectSize>,\n  SideContentProps<BezierIcon | React.ReactNode, BezierIcon | React.ReactNode>,\n  AdditionalTestIdProps<['trigger', 'triggerText', 'dropdown']>,\n  AdditionalStylableProps<'dropdown'>,\n  AdditionalColorProps<['icon', 'text']>,\n  FormComponentProps,\n  SelectOptions {}\n\nexport default SelectProps\n"],"names":["SelectSize","FormFieldSize","XL","L","M","XS"],"mappings":";;;;AAgBYA,IAAAA,UAAU,aAAVA,UAAU,EAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CACfC,IAAAA,CAAAA,GAAAA,qBAAa,CAACC,EAAE,CAAA,GAAA,IAAA,CAAA;AADXF,EAAAA,UAAU,CAAVA,UAAU,CAEhBC,GAAAA,CAAAA,GAAAA,qBAAa,CAACE,CAAC,CAAA,GAAA,GAAA,CAAA;AAFTH,EAAAA,UAAU,CAAVA,UAAU,CAGhBC,GAAAA,CAAAA,GAAAA,qBAAa,CAACG,CAAC,CAAA,GAAA,GAAA,CAAA;AAHTJ,EAAAA,UAAU,CAAVA,UAAU,CAIhBC,GAAAA,CAAAA,GAAAA,qBAAa,CAACI,EAAE,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAJVL,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useMergeRefs = require('../../../../hooks/useMergeRefs.js');
+var CommonImeControlKeys = require('../constants/CommonImeControlKeys.js');
+var useFormFieldProps = require('../../useFormFieldProps.js');
+var useKeyboardActionLockerWhileComposing = require('../../useKeyboardActionLockerWhileComposing.js');
+var TextArea_types = require('./TextArea.types.js');
+var utils = require('./utils.js');
+var TextArea_styled = require('./TextArea.styled.js');
+
+const TEXT_AREA_TEST_ID = 'bezier-react-text-area';
+function TextArea({
+  interpolation,
+  wrapperInterpolation,
+  className,
+  wrapperClassName,
+  style,
+  wrapperStyle,
+  testId = TEXT_AREA_TEST_ID,
+  minRows = TextArea_types.TextAreaHeight.Row6,
+  maxRows = TextArea_types.TextAreaHeight.Row6,
+  autoFocus = false,
+  value = '',
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  ...rest
+}, forwardedRef) {
+  const {
+    disabled,
+    readOnly,
+    hasError,
+    ...ownProps
+  } = useFormFieldProps.default(rest);
+  const inputRef = React.useRef(null);
+  const mergedInputRef = useMergeRefs.default(inputRef, forwardedRef);
+  const activeInput = !disabled && !readOnly;
+  const [focused, setFocused] = React.useState(false);
+  const bgColorSemanticName = React.useMemo(() => utils.getTextAreaBgColorSemanticName({
+    focused,
+    hasError,
+    readOnly
+  }), [focused, hasError, readOnly]);
+  const handleFocus = React.useCallback(event => {
+    if (!activeInput) {
+      return;
+    }
+    setFocused(true);
+    onFocus?.(event);
+  }, [onFocus, activeInput]);
+  const handleBlur = React.useCallback(event => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur]);
+  const {
+    handleKeyDown,
+    handleKeyUp
+  } = useKeyboardActionLockerWhileComposing.default({
+    keysToLock: CommonImeControlKeys.COMMON_IME_CONTROL_KEYS,
+    onKeyDown,
+    onKeyUp
+  });
+
+  // eslint-disable-next-line prefer-arrow-callback
+  React.useLayoutEffect(function initialAutoFocus() {
+    function setSelectionToEnd() {
+      inputRef.current?.setSelectionRange(inputRef.current?.value.length, inputRef.current?.value.length);
+    }
+    if (autoFocus) {
+      inputRef.current?.focus();
+      setSelectionToEnd();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(TextArea_styled.default.Wrapper, {
+    className: className,
+    interpolation: interpolation,
+    focused: focused,
+    hasError: hasError,
+    disabled: disabled,
+    bgColor: bgColorSemanticName,
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(TextArea_styled.default.TextAreaAutoSizeBase, Object.assign({}, ownProps, {
+    ref: mergedInputRef,
+    value: value,
+    disabled: disabled,
+    readOnly: readOnly,
+    maxRows: maxRows,
+    minRows: minRows,
+    onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  })));
+}
+var TextArea$1 = /*#__PURE__*/React.forwardRef(TextArea);
+
+exports.TEXT_AREA_TEST_ID = TEXT_AREA_TEST_ID;
+exports.default = TextArea$1;
+//# sourceMappingURL=TextArea.js.map

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { COMMON_IME_CONTROL_KEYS } from '~/src/components/Forms/Inputs/constants/CommonImeControlKeys'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport useKeyboardActionLockerWhileComposing from '~/src/components/Forms/useKeyboardActionLockerWhileComposing'\n\nimport type TextAreaProps from './TextArea.types'\nimport { TextAreaHeight } from './TextArea.types'\nimport { getTextAreaBgColorSemanticName } from './utils'\n\nimport Styled from './TextArea.styled'\n\nexport const TEXT_AREA_TEST_ID = 'bezier-react-text-area'\n\nfunction TextArea({\n  interpolation,\n  wrapperInterpolation,\n  className,\n  wrapperClassName,\n  style,\n  wrapperStyle,\n  testId = TEXT_AREA_TEST_ID,\n  minRows = TextAreaHeight.Row6,\n  maxRows = TextAreaHeight.Row6,\n  autoFocus = false,\n  value = '',\n  onFocus,\n  onBlur,\n  onChange,\n  onKeyDown,\n  onKeyUp,\n  ...rest\n}: TextAreaProps,\nforwardedRef: Ref<HTMLTextAreaElement>,\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const inputRef = useRef<HTMLTextAreaElement | null>(null)\n  const mergedInputRef = useMergeRefs<HTMLTextAreaElement>(inputRef, forwardedRef)\n\n  const activeInput = !disabled && !readOnly\n\n  const [focused, setFocused] = useState(false)\n\n  const bgColorSemanticName = useMemo(() => (\n    getTextAreaBgColorSemanticName({\n      focused,\n      hasError,\n      readOnly,\n    })\n  ), [\n    focused,\n    hasError,\n    readOnly,\n  ])\n\n  const handleFocus = useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (!activeInput) { return }\n    setFocused(true)\n    onFocus?.(event)\n  }, [\n    onFocus,\n    activeInput,\n  ])\n\n  const handleBlur = useCallback((event: React.FocusEvent<HTMLTextAreaElement>) => {\n    setFocused(false)\n    onBlur?.(event)\n  }, [onBlur])\n\n  const {\n    handleKeyDown,\n    handleKeyUp,\n  } = useKeyboardActionLockerWhileComposing({\n    keysToLock: COMMON_IME_CONTROL_KEYS,\n    onKeyDown,\n    onKeyUp,\n  })\n\n  // eslint-disable-next-line prefer-arrow-callback\n  useLayoutEffect(function initialAutoFocus() {\n    function setSelectionToEnd() {\n      inputRef.current?.setSelectionRange(inputRef.current?.value.length, inputRef.current?.value.length)\n    }\n\n    if (autoFocus) {\n      inputRef.current?.focus()\n      setSelectionToEnd()\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return (\n    <Styled.Wrapper\n      className={className}\n      interpolation={interpolation}\n      focused={focused}\n      hasError={hasError}\n      disabled={disabled}\n      bgColor={bgColorSemanticName}\n      data-testid={testId}\n    >\n      <Styled.TextAreaAutoSizeBase\n        {...ownProps}\n        ref={mergedInputRef}\n        value={value}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxRows={maxRows}\n        minRows={minRows}\n        onChange={onChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n      />\n    </Styled.Wrapper>\n  )\n}\n\nexport default forwardRef(TextArea)\n"],"names":["TEXT_AREA_TEST_ID","TextArea","interpolation","wrapperInterpolation","className","wrapperClassName","style","wrapperStyle","testId","minRows","TextAreaHeight","Row6","maxRows","autoFocus","value","onFocus","onBlur","onChange","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","activeInput","focused","setFocused","useState","bgColorSemanticName","useMemo","getTextAreaBgColorSemanticName","handleFocus","useCallback","event","handleBlur","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useLayoutEffect","initialAutoFocus","setSelectionToEnd","current","setSelectionRange","length","focus","React","createElement","Styled","Wrapper","bgColor","TextAreaAutoSizeBase","Object","assign","ref","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.styled.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactTextareaAutosize_esm = require('../../../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.js');
+var DisabledOpacity = require('../../../../constants/DisabledOpacity.js');
+var mixins = require('../mixins.js');
+var Mixins = require('../../../../foundation/Mixins.js');
+var FoundationStyledComponent = require('../../../../foundation/FoundationStyledComponent.js');
+var Typography = require('../../../../foundation/Typography.js');
+
+const Wrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "TextAreastyled__Wrapper",
+  componentId: "sc-14a5gh6-0"
+})(["", ";box-sizing:border-box;display:flex;align-items:center;background-color:", ";opacity:", ";", " ", " ", " ", ";", ""], mixins.inputWrapperStyle, ({
+  foundation,
+  bgColor
+}) => foundation?.theme?.[bgColor], ({
+  disabled
+}) => disabled && DisabledOpacity.default, ({
+  focused
+}) => focused && mixins.focusedInputWrapperStyle, ({
+  hasError
+}) => hasError && mixins.erroredInputWrapperStyle, ({
+  foundation
+}) => foundation?.rounding.round8, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow']), ({
+  interpolation
+}) => interpolation);
+const TextAreaAutoSizeBase = /*#__PURE__*/FoundationStyledComponent.styled(reactTextareaAutosize_esm.default).withConfig({
+  displayName: "TextAreastyled__TextAreaAutoSizeBase",
+  componentId: "sc-14a5gh6-1"
+})(["box-sizing:border-box;width:100%;padding:8px 12px;margin:0;cursor:", ";resize:none;background:none;border:none;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'auto', Mixins.hideScrollbars(), Typography.Typography.Size14, mixins.inputTextStyle, mixins.inputPlaceholderStyle, Typography.Typography.Size14, ({
+  interpolation
+}) => interpolation);
+var Styled = {
+  Wrapper,
+  TextAreaAutoSizeBase
+};
+
+exports.default = Styled;
+//# sourceMappingURL=TextArea.styled.js.map

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styled.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.styled.ts"],"sourcesContent":["import TextareaAutosize from 'react-textarea-autosize'\n\nimport {\n  type SemanticNames,\n  Typography,\n  hideScrollbars,\n  styled,\n} from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport {\n  erroredInputWrapperStyle,\n  focusedInputWrapperStyle,\n  inputPlaceholderStyle,\n  inputTextStyle,\n  inputWrapperStyle,\n} from '~/src/components/Forms/Inputs/mixins'\n\ninterface WrapperProps extends InterpolationProps {\n  focused: boolean\n  hasError?: boolean\n  bgColor: SemanticNames\n  disabled: boolean\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  ${inputWrapperStyle};\n\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background-color: ${({ foundation, bgColor }) => foundation?.theme?.[bgColor]};\n  opacity: ${({ disabled }) => disabled && DisabledOpacity};\n\n  ${({ focused }) => focused && focusedInputWrapperStyle}\n\n  ${({ hasError }) => hasError && erroredInputWrapperStyle}\n\n  ${({ foundation }) => foundation?.rounding.round8}\n\n  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['border-color', 'box-shadow'])};\n\n  ${({ interpolation }) => interpolation}\n`\n\ninterface TextAreaAutoSizeBaseProps extends InterpolationProps {\n  disabled: boolean\n  readOnly: boolean\n}\n\nconst TextAreaAutoSizeBase = styled(TextareaAutosize)<TextAreaAutoSizeBaseProps>`\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 12px;\n  margin: 0;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};\n  resize: none;\n  background: none;\n  border: none;\n  outline: none;\n\n  ${hideScrollbars()}\n\n  ${Typography.Size14}\n\n  ${inputTextStyle}\n\n  ${inputPlaceholderStyle}\n\n  &::placeholder {\n    ${Typography.Size14}\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  Wrapper,\n  TextAreaAutoSizeBase,\n}\n"],"names":["Wrapper","styled","div","withConfig","displayName","componentId","inputWrapperStyle","foundation","bgColor","theme","disabled","DisabledOpacity","focused","focusedInputWrapperStyle","hasError","erroredInputWrapperStyle","rounding","round8","transition","getTransitionsCSS","interpolation","TextAreaAutoSizeBase","TextareaAutosize","hideScrollbars","Typography","Size14","inputTextStyle","inputPlaceholderStyle"],"mappings":";;;;;;;;;;;AA2BA,MAAMA,OAAO,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACtBC,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,0EAAAA,EAAAA,WAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,wBAAiB,EAKC,CAAC;EAAEC,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGD,OAAO,CAAC,EAClE,CAAC;AAAEE,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,uBAAe,EAEtD,CAAC;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKA,OAAO,IAAIC,+BAAwB,EAEpD,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAKA,QAAQ,IAAIC,+BAAwB,EAEtD,CAAC;AAAER,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAES,QAAQ,CAACC,MAAM,EAE/C,CAAC;AAAEV,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEW,UAAU,EAAEC,iBAAiB,CAAC,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAE7F,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAOD,MAAMC,oBAAoB,gBAAGpB,gCAAM,CAACqB,iCAAgB,CAAC,CAAAnB,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oEAAA,EAAA,wDAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,kBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAKzC,CAAC;AAAEK,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAG,aAAa,GAAG,MAAO,EAM7Da,qBAAc,EAAE,EAEhBC,qBAAU,CAACC,MAAM,EAEjBC,qBAAc,EAEdC,4BAAqB,EAGnBH,qBAAU,CAACC,MAAM,EAGnB,CAAC;AAAEL,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAED,aAAe;EACbpB,OAAO;AACPqB,EAAAA,oBAAAA;AACF,CAAC;;;;"}

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.types.js

@@ -0,0 +1,14 @@
+'use strict';
+
+let TextAreaHeight = /*#__PURE__*/function (TextAreaHeight) {
+  TextAreaHeight[TextAreaHeight["Row3"] = 3] = "Row3";
+  TextAreaHeight[TextAreaHeight["Row6"] = 6] = "Row6";
+  TextAreaHeight[TextAreaHeight["Row10"] = 10] = "Row10";
+  TextAreaHeight[TextAreaHeight["Row16"] = 16] = "Row16";
+  TextAreaHeight[TextAreaHeight["Row24"] = 24] = "Row24";
+  TextAreaHeight[TextAreaHeight["Row36"] = 36] = "Row36";
+  return TextAreaHeight;
+}({});
+
+exports.TextAreaHeight = TextAreaHeight;
+//# sourceMappingURL=TextArea.types.js.map

package/dist/cjs/components/Forms/Inputs/TextArea/TextArea.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/TextArea.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport type {\n  AdditionalStylableProps,\n  BezierComponentProps,\n} from '~/src/types/ComponentProps'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport enum TextAreaHeight {\n  Row3 = 3,\n  Row6 = 6,\n  Row10 = 10,\n  Row16 = 16,\n  Row24 = 24,\n  Row36 = 36,\n}\n\ntype TextAreaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>\n\ninterface TextAreaOptions {\n  minRows?: TextAreaHeight\n  maxRows?: TextAreaHeight\n  autoFocus?: boolean\n  onFocus?: TextAreaChangeEventHandler\n  onBlur?: TextAreaChangeEventHandler\n  onChange?: TextAreaChangeEventHandler\n}\n\ntype OmittedTextareaHTMLAttributes = keyof FormComponentProps | 'onFocus' | 'onBlur'\n\nexport default interface TextAreaProps extends\n  BezierComponentProps,\n  FormComponentProps,\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, OmittedTextareaHTMLAttributes>,\n  AdditionalStylableProps<'wrapper'>,\n  TextAreaOptions {}\n"],"names":["TextAreaHeight"],"mappings":";;AASYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,EAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Forms/Inputs/TextArea/utils.js

@@ -0,0 +1,18 @@
+'use strict';
+
+function getTextAreaBgColorSemanticName({
+  focused,
+  hasError,
+  readOnly
+}) {
+  if (readOnly) {
+    return 'bg-grey-lighter';
+  }
+  if (focused || hasError) {
+    return 'bg-white-normal';
+  }
+  return 'bg-grey-lightest';
+}
+
+exports.getTextAreaBgColorSemanticName = getTextAreaBgColorSemanticName;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/components/Forms/Inputs/TextArea/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Forms/Inputs/TextArea/utils.ts"],"sourcesContent":["import { type SemanticNames } from '~/src/foundation'\n\ninterface CalculateBgColorProps {\n  focused: boolean\n  hasError: boolean\n  readOnly: boolean\n}\n\nexport function getTextAreaBgColorSemanticName({\n  focused,\n  hasError,\n  readOnly,\n}: CalculateBgColorProps): SemanticNames {\n  if (readOnly) { return 'bg-grey-lighter' }\n  if (focused || hasError) { return 'bg-white-normal' }\n  return 'bg-grey-lightest'\n}\n"],"names":["getTextAreaBgColorSemanticName","focused","hasError","readOnly"],"mappings":";;AAQO,SAASA,8BAA8BA,CAAC;EAC7CC,OAAO;EACPC,QAAQ;AACRC,EAAAA,QAAAA;AACqB,CAAC,EAAiB;AACvC,EAAA,IAAIA,QAAQ,EAAE;AAAE,IAAA,OAAO,iBAAiB,CAAA;AAAC,GAAA;EACzC,IAAIF,OAAO,IAAIC,QAAQ,EAAE;AAAE,IAAA,OAAO,iBAAiB,CAAA;AAAC,GAAA;AACpD,EAAA,OAAO,kBAAkB,CAAA;AAC3B;;;;"}