@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/Forms/FormControl/FormControl.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var React = require('react');
+var useId = require('../../../hooks/useId.js');
+var propsUtils = require('../../../utils/propsUtils.js');
+var typeUtils = require('../../../utils/typeUtils.js');
+var FormFieldSize = require('../FormFieldSize.js');
+var FormControlContext = require('./FormControlContext.js');
+var FormControl_styled = require('./FormControl.styled.js');
+var AlphaStack = require('../../AlphaStack/AlphaStack.js');
+var Typography = require('../../../foundation/Typography.js');
+
+const FORM_CONTROL_TEST_ID = 'bezier-react-form-control';
+const Container = /*#__PURE__*/React.forwardRef(function Container({
+  labelPosition,
+  children,
+  testId,
+  ...rest
+}, forwardedRef) {
+  switch (labelPosition) {
+    case 'top':
+      return /*#__PURE__*/React.createElement(AlphaStack.AlphaStack, Object.assign({
+        ref: forwardedRef,
+        direction: "vertical",
+        testId: testId
+      }, rest), children);
+    case 'left':
+    default:
+      return /*#__PURE__*/React.createElement(FormControl_styled.Grid, Object.assign({
+        ref: forwardedRef,
+        "data-testid": testId
+      }, rest), children);
+  }
+});
+const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
+  id: idProp,
+  testId = FORM_CONTROL_TEST_ID,
+  labelPosition = 'top',
+  leftLabelWrapperHeight = FormFieldSize.default.M,
+  style,
+  children,
+  ...rest
+}, forwardedRef) {
+  const [groupNode, setGroupNode] = React.useState(null);
+  const [helperTextNode, setHelperTextNode] = React.useState(null);
+  const [errorMessageNode, setErrorMessageNode] = React.useState(null);
+  const id = useId.default(idProp, 'field');
+  const groupId = `${id}-group`;
+  const labelId = `${id}-label`;
+  const helperTextId = `${id}-help-text`;
+  const errorMessageId = `${id}-error-message`;
+  const fieldId = groupNode ? undefined : id;
+  const describerId = React.useMemo(() => {
+    if (errorMessageNode) {
+      return errorMessageId;
+    }
+    if (helperTextNode) {
+      return helperTextId;
+    }
+    return undefined;
+  }, [errorMessageNode, helperTextNode, errorMessageId, helperTextId]);
+  const bezierProps = React.useMemo(() => propsUtils.pickBezierComponentProps(rest), [rest]);
+  const formCommonProps = React.useMemo(() => propsUtils.omitBezierComponentProps(rest), [rest]);
+  const getGroupProps = React.useCallback(ownProps => ({
+    id: groupId,
+    'aria-labelledby': labelId,
+    'aria-describedby': describerId,
+    ref: setGroupNode,
+    ...ownProps
+  }), [groupId, labelId, describerId]);
+  const getLabelProps = React.useCallback(ownProps => ({
+    id: labelId,
+    htmlFor: fieldId,
+    typo: labelPosition === 'top' ? Typography.Typography.Size13 : Typography.Typography.Size14,
+    Wrapper: labelPosition === 'top' ? FormControl_styled.TopLabelWrapper : FormControl_styled.LeftLabelWrapper,
+    ...ownProps
+  }), [fieldId, labelId, labelPosition]);
+  const getFieldProps = React.useCallback(ownProps => ({
+    id: fieldId,
+    'aria-describedby': groupNode ? undefined : describerId,
+    ...formCommonProps,
+    ...ownProps
+  }), [fieldId, describerId, formCommonProps, groupNode]);
+  const getHelperTextProps = React.useCallback(ownProps => ({
+    id: helperTextId,
+    visible: typeUtils.isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,
+    ref: setHelperTextNode,
+    Wrapper: labelPosition === 'top' ? FormControl_styled.TopHelperTextWrapper : FormControl_styled.LeftHelperTextWrapper,
+    ...ownProps
+  }), [helperTextId, labelPosition, formCommonProps]);
+  const getErrorMessageProps = React.useCallback(ownProps => ({
+    id: errorMessageId,
+    visible: typeUtils.isNil(formCommonProps?.hasError) || formCommonProps?.hasError,
+    ref: setErrorMessageNode,
+    Wrapper: labelPosition === 'top' ? FormControl_styled.TopHelperTextWrapper : FormControl_styled.LeftHelperTextWrapper,
+    ...ownProps
+  }), [errorMessageId, labelPosition, formCommonProps]);
+  const contextValue = React.useMemo(() => ({
+    id,
+    labelId,
+    helperTextId,
+    errorMessageId,
+    getGroupProps,
+    getLabelProps,
+    getFieldProps,
+    getHelperTextProps,
+    getErrorMessageProps,
+    ...formCommonProps
+  }), [id, labelId, helperTextId, errorMessageId, getGroupProps, getLabelProps, getFieldProps, getHelperTextProps, getErrorMessageProps, formCommonProps]);
+  const containerStyle = React.useMemo(() => ({
+    ...style,
+    '--bezier-form-control-left-label-wrapper-height': `${leftLabelWrapperHeight}px`
+  }), [style, leftLabelWrapperHeight]);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormControlContext.FormControlContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Container, Object.assign({}, bezierProps, {
+    ref: forwardedRef,
+    style: containerStyle,
+    testId: testId,
+    labelPosition: labelPosition
+  }), children));
+});
+
+exports.FORM_CONTROL_TEST_ID = FORM_CONTROL_TEST_ID;
+exports.FormControl = FormControl;
+//# sourceMappingURL=FormControl.js.map

package/dist/cjs/components/Forms/FormControl/FormControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport useId from '~/src/hooks/useId'\nimport {\n  omitBezierComponentProps,\n  pickBezierComponentProps,\n} from '~/src/utils/propsUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\n\n// eslint-disable-next-line no-restricted-imports\nimport FormFieldSize from '../FormFieldSize'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\nimport { FormControlContext } from './FormControlContext'\n\nimport * as Styled from './FormControl.styled'\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-react-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container({\n  labelPosition,\n  children,\n  testId,\n  ...rest\n}, forwardedRef) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <AlphaStack\n          ref={forwardedRef}\n          direction=\"vertical\"\n          testId={testId}\n          {...rest}\n        >\n          { children }\n        </AlphaStack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <Styled.Grid\n          ref={forwardedRef}\n          data-testid={testId}\n          {...rest}\n        >\n          { children }\n        </Styled.Grid>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(function FormControl({\n  id: idProp,\n  testId = FORM_CONTROL_TEST_ID,\n  labelPosition = 'top',\n  leftLabelWrapperHeight = FormFieldSize.M,\n  style,\n  children,\n  ...rest\n}, forwardedRef) {\n  const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n  const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(null)\n  const [errorMessageNode, setErrorMessageNode] = useState<HTMLElement | null>(null)\n\n  const id = useId(idProp, 'field')\n  const groupId = `${id}-group`\n  const labelId = `${id}-label`\n  const helperTextId = `${id}-help-text`\n  const errorMessageId = `${id}-error-message`\n\n  const fieldId = groupNode ? undefined : id\n\n  const describerId = useMemo(() => {\n    if (errorMessageNode) { return errorMessageId }\n    if (helperTextNode) { return helperTextId }\n    return undefined\n  }, [\n    errorMessageNode,\n    helperTextNode,\n    errorMessageId,\n    helperTextId,\n  ])\n\n  const bezierProps = useMemo(() => pickBezierComponentProps(rest), [rest])\n  const formCommonProps = useMemo(() => omitBezierComponentProps(rest), [rest])\n\n  const getGroupProps = useCallback<GroupPropsGetter>(ownProps => ({\n    id: groupId,\n    'aria-labelledby': labelId,\n    'aria-describedby': describerId,\n    ref: setGroupNode,\n    ...ownProps,\n  }), [\n    groupId,\n    labelId,\n    describerId,\n  ])\n\n  const getLabelProps = useCallback<LabelPropsGetter>(ownProps => ({\n    id: labelId,\n    htmlFor: fieldId,\n    typo: labelPosition === 'top' ? Typography.Size13 : Typography.Size14,\n    Wrapper: labelPosition === 'top'\n      ? Styled.TopLabelWrapper\n      : Styled.LeftLabelWrapper,\n    ...ownProps,\n  }), [\n    fieldId,\n    labelId,\n    labelPosition,\n  ])\n\n  const getFieldProps = useCallback<FieldPropsGetter>(ownProps => ({\n    id: fieldId,\n    'aria-describedby': groupNode ? undefined : describerId,\n    ...formCommonProps,\n    ...ownProps,\n  }), [\n    fieldId,\n    describerId,\n    formCommonProps,\n    groupNode,\n  ])\n\n  const getHelperTextProps = useCallback<HelperTextPropsGetter>(ownProps => ({\n    id: helperTextId,\n    visible: isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,\n    ref: setHelperTextNode,\n    Wrapper: labelPosition === 'top'\n      ? Styled.TopHelperTextWrapper\n      : Styled.LeftHelperTextWrapper,\n    ...ownProps,\n  }), [\n    helperTextId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(ownProps => ({\n    id: errorMessageId,\n    visible: isNil(formCommonProps?.hasError) || formCommonProps?.hasError,\n    ref: setErrorMessageNode,\n    Wrapper: labelPosition === 'top'\n      ? Styled.TopHelperTextWrapper\n      : Styled.LeftHelperTextWrapper,\n    ...ownProps,\n  }), [\n    errorMessageId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const contextValue = useMemo(() => ({\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    ...formCommonProps,\n  }), [\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    formCommonProps,\n  ])\n\n  const containerStyle = useMemo(() => ({\n    ...style,\n    '--bezier-form-control-left-label-wrapper-height': `${leftLabelWrapperHeight}px`,\n  } as React.CSSProperties), [\n    style,\n    leftLabelWrapperHeight,\n  ])\n\n  if (!children) { return null }\n\n  return (\n    <FormControlContext.Provider value={contextValue}>\n      <Container\n        {...bezierProps}\n        ref={forwardedRef}\n        style={containerStyle}\n        testId={testId}\n        labelPosition={labelPosition}\n      >\n        { children }\n      </Container>\n    </FormControlContext.Provider>\n  )\n})\n"],"names":["FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","testId","rest","forwardedRef","React","createElement","AlphaStack","Object","assign","ref","direction","Styled","FormControl","id","idProp","leftLabelWrapperHeight","FormFieldSize","M","style","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","undefined","describerId","useMemo","bezierProps","pickBezierComponentProps","formCommonProps","omitBezierComponentProps","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","typo","Typography","Size13","Size14","Wrapper","getFieldProps","getHelperTextProps","visible","isNil","hasError","getErrorMessageProps","contextValue","containerStyle","FormControlContext","Provider","value"],"mappings":"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"}

package/dist/cjs/components/Forms/FormControl/FormControl.styled.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+
+const LEFT_LABEL_MIN_WIDTH = 150;
+const Box = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "FormControlstyled__Box",
+  componentId: "sc-1ae9o3x-0"
+})(["position:relative;", ""], ({
+  interpolation
+}) => interpolation);
+const TopLabelWrapper = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
+  displayName: "FormControlstyled__TopLabelWrapper",
+  componentId: "sc-1ae9o3x-1"
+})(["padding:0 2px;margin-bottom:4px;"]);
+const TopHelperTextWrapper = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
+  displayName: "FormControlstyled__TopHelperTextWrapper",
+  componentId: "sc-1ae9o3x-2"
+})(["padding:0 2px;margin-top:4px;"]);
+const Grid = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
+  displayName: "FormControlstyled__Grid",
+  componentId: "sc-1ae9o3x-3"
+})(["display:grid;grid-template-rows:repeat(2,auto);grid-template-columns:", "px 1fr;grid-column-gap:12px;align-items:center;"], LEFT_LABEL_MIN_WIDTH);
+const LeftLabelWrapper = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
+  displayName: "FormControlstyled__LeftLabelWrapper",
+  componentId: "sc-1ae9o3x-4"
+})(["display:flex;grid-row:1 / 1;grid-column:1 / 1;align-items:center;align-self:start;height:var(--bezier-form-control-left-label-wrapper-height);"]);
+const LeftHelperTextWrapper = /*#__PURE__*/FoundationStyledComponent.styled(TopHelperTextWrapper).withConfig({
+  displayName: "FormControlstyled__LeftHelperTextWrapper",
+  componentId: "sc-1ae9o3x-5"
+})(["grid-row:2 / 2;grid-column:2;"]);
+
+exports.Grid = Grid;
+exports.LeftHelperTextWrapper = LeftHelperTextWrapper;
+exports.LeftLabelWrapper = LeftLabelWrapper;
+exports.TopHelperTextWrapper = TopHelperTextWrapper;
+exports.TopLabelWrapper = TopLabelWrapper;
+//# sourceMappingURL=FormControl.styled.js.map

package/dist/cjs/components/Forms/FormControl/FormControl.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.styled.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nconst LEFT_LABEL_MIN_WIDTH = 150\n\nconst Box = styled.div<InterpolationProps>`\n  position: relative;\n  ${({ interpolation }) => interpolation}\n`\n\nexport const TopLabelWrapper = styled(Box)`\n  padding: 0 2px;\n  margin-bottom: 4px;\n`\n\nexport const TopHelperTextWrapper = styled(Box)`\n  padding: 0 2px;\n  margin-top: 4px;\n`\n\nexport const Grid = styled(Box)`\n  display: grid;\n  grid-template-rows: repeat(2, auto);\n  grid-template-columns: ${LEFT_LABEL_MIN_WIDTH}px 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n`\n\nexport const LeftLabelWrapper = styled(Box)`\n  display: flex;\n  grid-row: 1 / 1;\n  grid-column: 1 / 1;\n  align-items: center;\n  align-self: start;\n  height: var(--bezier-form-control-left-label-wrapper-height);\n`\n\nexport const LeftHelperTextWrapper = styled(TopHelperTextWrapper)`\n  grid-row: 2 / 2;\n  grid-column: 2;\n`\n"],"names":["LEFT_LABEL_MIN_WIDTH","Box","styled","div","withConfig","displayName","componentId","interpolation","TopLabelWrapper","TopHelperTextWrapper","Grid","LeftLabelWrapper","LeftHelperTextWrapper"],"mappings":";;;;AAIA,MAAMA,oBAAoB,GAAG,GAAG,CAAA;AAEhC,MAAMC,GAAG,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,EAAA,CAAA,EAElB,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAEM,MAAMC,eAAe,gBAAGN,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAGzC,CAAA,CAAA,CAAA,kCAAA,CAAA,EAAA;AAEM,MAAMG,oBAAoB,gBAAGP,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAG9C,CAAA,CAAA,CAAA,+BAAA,CAAA,EAAA;AAEM,MAAMI,IAAI,gBAAGR,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,iDAAA,CAAA,EAGJN,oBAAoB,EAG9C;AAEM,MAAMW,gBAAgB,gBAAGT,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAO1C,CAAA,CAAA,CAAA,gJAAA,CAAA,EAAA;AAEM,MAAMM,qBAAqB,gBAAGV,gCAAM,CAACO,oBAAoB,CAAC,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,0CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAGhE,CAAA,CAAA,CAAA,+BAAA,CAAA;;;;;;;;"}

package/dist/cjs/components/Forms/FormControl/FormControlContext.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var React = require('react');
+
+const FormControlContext = /*#__PURE__*/React.createContext(undefined);
+
+exports.FormControlContext = FormControlContext;
+//# sourceMappingURL=FormControlContext.js.map

package/dist/cjs/components/Forms/FormControl/FormControlContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlContext.js","sources":["../../../../../src/components/Forms/FormControl/FormControlContext.ts"],"sourcesContent":["import { createContext } from 'react'\n\nimport { type FormControlContextValue } from '~/src/components/Forms/FormControl'\n\nexport const FormControlContext = createContext<FormControlContextValue | undefined>(undefined)\n"],"names":["FormControlContext","createContext","undefined"],"mappings":";;;;MAIaA,kBAAkB,gBAAGC,mBAAa,CAAsCC,SAAS;;;;"}

package/dist/cjs/components/Forms/FormFieldSize.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FormFieldSize = /*#__PURE__*/function (FormFieldSize) {
+  FormFieldSize[FormFieldSize["XL"] = 54] = "XL";
+  FormFieldSize[FormFieldSize["L"] = 44] = "L";
+  FormFieldSize[FormFieldSize["M"] = 36] = "M";
+  FormFieldSize[FormFieldSize["XS"] = 28] = "XS";
+  return FormFieldSize;
+}(FormFieldSize || {});
+var FormFieldSize$1 = FormFieldSize;
+
+exports.default = FormFieldSize$1;
+//# sourceMappingURL=FormFieldSize.js.map

package/dist/cjs/components/Forms/FormFieldSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldSize.js","sources":["../../../../src/components/Forms/FormFieldSize.ts"],"sourcesContent":["enum FormFieldSize {\n  XL = 54,\n  L = 44,\n  M = 36,\n  XS = 28,\n}\n\nexport default FormFieldSize\n"],"names":["FormFieldSize"],"mappings":";;;;AAAKA,IAAAA,aAAa,0BAAbA,aAAa,EAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAbA,aAAa,CAAA;AAAA,CAAA,CAAbA,aAAa,IAAA,EAAA,CAAA,CAAA;AAOlB,sBAAeA,aAAa;;;;"}

package/dist/cjs/components/Forms/FormGroup/FormGroup.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useMergeRefs = require('../../../hooks/useMergeRefs.js');
+var functionUtils = require('../../../utils/functionUtils.js');
+var useFormControlContext = require('../useFormControlContext.js');
+var FormGroup_styled = require('./FormGroup.styled.js');
+
+const FORM_GROUP_TEST_ID = 'bezier-react-form-group';
+function FormGroup({
+  testId = FORM_GROUP_TEST_ID,
+  spacing = 6,
+  direction = 'vertical',
+  role = 'group',
+  children,
+  ...rest
+}, forwardedRef) {
+  const contextValue = useFormControlContext.default();
+  const {
+    ref,
+    ...ownProps
+  } = contextValue?.getGroupProps(rest) ?? {
+    ref: functionUtils.noop,
+    ...rest
+  };
+  const mergedRef = useMergeRefs.default(ref, forwardedRef);
+  return /*#__PURE__*/React.createElement(FormGroup_styled.Stack, Object.assign({}, ownProps, {
+    "data-testid": testId,
+    ref: mergedRef,
+    justify: "start",
+    align: "stretch",
+    spacing: spacing,
+    direction: direction,
+    role: role
+  }), children);
+}
+var FormGroup$1 = /*#__PURE__*/React.forwardRef(FormGroup);
+
+exports.default = FormGroup$1;
+//# sourceMappingURL=FormGroup.js.map

package/dist/cjs/components/Forms/FormGroup/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sources":["../../../../../src/components/Forms/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport useFormControlContext from '~/src/components/Forms/useFormControlContext'\n\nimport type FormGroupProps from './FormGroup.types'\n\nimport * as Styled from './FormGroup.styled'\n\nconst FORM_GROUP_TEST_ID = 'bezier-react-form-group'\n\nfunction FormGroup({\n  testId = FORM_GROUP_TEST_ID,\n  spacing = 6,\n  direction = 'vertical',\n  role = 'group',\n  children,\n  ...rest\n}: FormGroupProps,\nforwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const contextValue = useFormControlContext()\n\n  const {\n    ref,\n    ...ownProps\n  } = contextValue?.getGroupProps(rest) ?? {\n    ref: noop,\n    ...rest,\n  }\n\n  const mergedRef = useMergeRefs(ref, forwardedRef)\n\n  return (\n    <Styled.Stack\n      {...ownProps}\n      data-testid={testId}\n      ref={mergedRef}\n      justify=\"start\"\n      align=\"stretch\"\n      spacing={spacing}\n      direction={direction}\n      role={role}\n    >\n      { children }\n    </Styled.Stack>\n  )\n}\n\nexport default forwardRef(FormGroup)\n"],"names":["FORM_GROUP_TEST_ID","FormGroup","testId","spacing","direction","role","children","rest","forwardedRef","contextValue","useFormControlContext","ref","ownProps","getGroupProps","noop","mergedRef","useMergeRefs","React","createElement","Styled","Object","assign","justify","align","forwardRef"],"mappings":";;;;;;;;;;AAWA,MAAMA,kBAAkB,GAAG,yBAAyB,CAAA;AAEpD,SAASC,SAASA,CAAC;AACjBC,EAAAA,MAAM,GAAGF,kBAAkB;AAC3BG,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,UAAU;AACtBC,EAAAA,IAAI,GAAG,OAAO;EACdC,QAAQ;EACR,GAAGC,IAAAA;AACW,CAAC,EACjBC,YAAuC,EACrC;AACA,EAAA,MAAMC,YAAY,GAAGC,6BAAqB,EAAE,CAAA;EAE5C,MAAM;IACJC,GAAG;IACH,GAAGC,QAAAA;AACL,GAAC,GAAGH,YAAY,EAAEI,aAAa,CAACN,IAAI,CAAC,IAAI;AACvCI,IAAAA,GAAG,EAAEG,kBAAI;IACT,GAAGP,IAAAA;GACJ,CAAA;AAED,EAAA,MAAMQ,SAAS,GAAGC,oBAAY,CAACL,GAAG,EAAEH,YAAY,CAAC,CAAA;AAEjD,EAAA,oBACES,KAAA,CAAAC,aAAA,CAACC,sBAAY,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACPT,QAAQ,EAAA;AACZ,IAAA,aAAA,EAAaV,MAAO;AACpBS,IAAAA,GAAG,EAAEI,SAAU;AACfO,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,KAAK,EAAC,SAAS;AACfpB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,CAAA,EAETC,QACU,CAAC,CAAA;AAEnB,CAAA;AAEA,kBAAekB,aAAAA,gBAAU,CAACvB,SAAS,CAAC;;;;"}

package/dist/cjs/components/Forms/FormGroup/FormGroup.styled.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var AlphaStack = require('../../AlphaStack/AlphaStack.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+
+const Stack = /*#__PURE__*/FoundationStyledComponent.styled(AlphaStack.AlphaStack).withConfig({
+  displayName: "FormGroupstyled__Stack",
+  componentId: "sc-19heson-0"
+})(["flex-wrap:wrap;"]);
+
+exports.Stack = Stack;
+//# sourceMappingURL=FormGroup.styled.js.map

package/dist/cjs/components/Forms/FormGroup/FormGroup.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.styled.js","sources":["../../../../../src/components/Forms/FormGroup/FormGroup.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { AlphaStack } from '~/src/components/AlphaStack'\n\nexport const Stack = styled(AlphaStack)`\n  flex-wrap: wrap;\n`\n"],"names":["Stack","styled","AlphaStack","withConfig","displayName","componentId"],"mappings":";;;;;AAIO,MAAMA,KAAK,gBAAGC,gCAAM,CAACC,qBAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAEtC,CAAA,CAAA,CAAA,iBAAA,CAAA;;;;"}

package/dist/cjs/components/Forms/FormHelperText/FormHelperText.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var React = require('react');
+var useMergeRefs = require('../../../hooks/useMergeRefs.js');
+var functionUtils = require('../../../utils/functionUtils.js');
+var typeUtils = require('../../../utils/typeUtils.js');
+var useFormControlContext = require('../useFormControlContext.js');
+var FormHelperText_styled = require('./FormHelperText.styled.js');
+var Typography = require('../../../foundation/Typography.js');
+
+const FORM_HELPER_TEXT_TEST_ID = 'bezier-react-form-helper-text';
+const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-react-form-error-message';
+const BaseHelperText = /*#__PURE__*/React.forwardRef(({
+  as = 'p',
+  type,
+  typo = Typography.Typography.Size13,
+  children,
+  ...rest
+}, forwardedRef) => {
+  const contextValue = useFormControlContext.default();
+  const getProps = type === 'info' ? contextValue?.getHelperTextProps : contextValue?.getErrorMessageProps;
+  const {
+    visible,
+    ref,
+    Wrapper,
+    ...ownProps
+  } = getProps?.(rest) ?? {
+    visible: true,
+    ref: functionUtils.noop,
+    Wrapper: React.Fragment,
+    ...rest
+  };
+  const mergedRef = useMergeRefs.default(ref, forwardedRef);
+  const shouldRendered = React.useMemo(() => !typeUtils.isEmpty(children) && visible, [visible, children]);
+  if (!shouldRendered) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormHelperText_styled.HelperText, Object.assign({}, ownProps, {
+    ref: mergedRef,
+    forwardedAs: as,
+    typo: typo
+  }), children));
+});
+const FormHelperText = /*#__PURE__*/React.forwardRef(({
+  testId = FORM_HELPER_TEXT_TEST_ID,
+  color = 'txt-black-dark',
+  children,
+  ...rest
+}, forwardedRef) => /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({}, rest, {
+  type: "info",
+  ref: forwardedRef,
+  testId: testId,
+  color: color
+}), children));
+const FormErrorMessage = /*#__PURE__*/React.forwardRef(({
+  testId = FORM_ERROR_MESSAGE_TEST_ID,
+  color = 'bgtxt-orange-normal',
+  children,
+  ...rest
+}, forwardedRef) => /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({}, rest, {
+  "aria-live": "polite",
+  type: "error",
+  ref: forwardedRef,
+  testId: testId,
+  color: color
+}), children));
+
+exports.FORM_ERROR_MESSAGE_TEST_ID = FORM_ERROR_MESSAGE_TEST_ID;
+exports.FORM_HELPER_TEXT_TEST_ID = FORM_HELPER_TEXT_TEST_ID;
+exports.FormErrorMessage = FormErrorMessage;
+exports.FormHelperText = FormHelperText;
+//# sourceMappingURL=FormHelperText.js.map

package/dist/cjs/components/Forms/FormHelperText/FormHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/Forms/FormHelperText/FormHelperText.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/functionUtils'\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport useFormControlContext from '~/src/components/Forms/useFormControlContext'\n\nimport type {\n  BaseHelperTextProps,\n  FormErrorMessageProps,\n  FormHelperTextProps,\n} from './FormHelperText.types'\n\nimport * as Styled from './FormHelperText.styled'\n\ntype ForwardedRef = React.Ref<HTMLParamElement>\n\nexport const FORM_HELPER_TEXT_TEST_ID = 'bezier-react-form-helper-text'\nexport const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-react-form-error-message'\n\nconst BaseHelperText = forwardRef(({\n  as = 'p',\n  type,\n  typo = Typography.Size13,\n  children,\n  ...rest\n}: BaseHelperTextProps,\nforwardedRef: ForwardedRef,\n) => {\n  const contextValue = useFormControlContext()\n  const getProps = type === 'info'\n    ? contextValue?.getHelperTextProps\n    : contextValue?.getErrorMessageProps\n\n  const {\n    visible,\n    ref,\n    Wrapper,\n    ...ownProps\n  } = getProps?.(rest) ?? {\n    visible: true,\n    ref: noop,\n    Wrapper: React.Fragment,\n    ...rest,\n  }\n\n  const mergedRef = useMergeRefs(ref, forwardedRef)\n\n  const shouldRendered = useMemo(() => (\n    !isEmpty(children) && visible\n  ), [\n    visible,\n    children,\n  ])\n\n  if (!shouldRendered) { return null }\n\n  return (\n    <Wrapper>\n      <Styled.HelperText\n        {...ownProps}\n        ref={mergedRef}\n        forwardedAs={as}\n        typo={typo}\n      >\n        { children }\n      </Styled.HelperText>\n    </Wrapper>\n  )\n})\n\nexport const FormHelperText = forwardRef(({\n  testId = FORM_HELPER_TEXT_TEST_ID,\n  color = 'txt-black-dark',\n  children,\n  ...rest\n}: FormHelperTextProps,\nforwardedRef: ForwardedRef,\n) => (\n  <BaseHelperText\n    {...rest}\n    type=\"info\"\n    ref={forwardedRef}\n    testId={testId}\n    color={color}\n  >\n    { children }\n  </BaseHelperText>\n))\n\nexport const FormErrorMessage = forwardRef(({\n  testId = FORM_ERROR_MESSAGE_TEST_ID,\n  color = 'bgtxt-orange-normal',\n  children,\n  ...rest\n}: FormErrorMessageProps,\nforwardedRef: ForwardedRef,\n) => (\n  <BaseHelperText\n    {...rest}\n    aria-live=\"polite\"\n    type=\"error\"\n    ref={forwardedRef}\n    testId={testId}\n    color={color}\n  >\n    { children }\n  </BaseHelperText>\n))\n"],"names":["FORM_HELPER_TEXT_TEST_ID","FORM_ERROR_MESSAGE_TEST_ID","BaseHelperText","forwardRef","as","type","typo","Typography","Size13","children","rest","forwardedRef","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","Wrapper","ownProps","noop","React","Fragment","mergedRef","useMergeRefs","shouldRendered","useMemo","isEmpty","createElement","Styled","Object","assign","forwardedAs","FormHelperText","testId","color","FormErrorMessage"],"mappings":";;;;;;;;;;AAuBO,MAAMA,wBAAwB,GAAG,gCAA+B;AAChE,MAAMC,0BAA0B,GAAG,kCAAiC;AAE3E,MAAMC,cAAc,gBAAGC,gBAAU,CAAC,CAAC;AACjCC,EAAAA,EAAE,GAAG,GAAG;EACRC,IAAI;EACJC,IAAI,GAAGC,qBAAU,CAACC,MAAM;EACxBC,QAAQ;EACR,GAAGC,IAAAA;AACgB,CAAC,EACtBC,YAA0B,KACrB;AACH,EAAA,MAAMC,YAAY,GAAGC,6BAAqB,EAAE,CAAA;AAC5C,EAAA,MAAMC,QAAQ,GAAGT,IAAI,KAAK,MAAM,GAC5BO,YAAY,EAAEG,kBAAkB,GAChCH,YAAY,EAAEI,oBAAoB,CAAA;EAEtC,MAAM;IACJC,OAAO;IACPC,GAAG;IACHC,OAAO;IACP,GAAGC,QAAAA;AACL,GAAC,GAAGN,QAAQ,GAAGJ,IAAI,CAAC,IAAI;AACtBO,IAAAA,OAAO,EAAE,IAAI;AACbC,IAAAA,GAAG,EAAEG,kBAAI;IACTF,OAAO,EAAEG,KAAK,CAACC,QAAQ;IACvB,GAAGb,IAAAA;GACJ,CAAA;AAED,EAAA,MAAMc,SAAS,GAAGC,oBAAY,CAACP,GAAG,EAAEP,YAAY,CAAC,CAAA;AAEjD,EAAA,MAAMe,cAAc,GAAGC,aAAO,CAAC,MAC7B,CAACC,iBAAO,CAACnB,QAAQ,CAAC,IAAIQ,OACvB,EAAE,CACDA,OAAO,EACPR,QAAQ,CACT,CAAC,CAAA;EAEF,IAAI,CAACiB,cAAc,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAEnC,EAAA,oBACEJ,KAAA,CAAAO,aAAA,CAACV,OAAO,EAAA,IAAA,eACNG,KAAA,CAAAO,aAAA,CAACC,gCAAiB,EAAAC,MAAA,CAAAC,MAAA,KACZZ,QAAQ,EAAA;AACZF,IAAAA,GAAG,EAAEM,SAAU;AACfS,IAAAA,WAAW,EAAE7B,EAAG;AAChBE,IAAAA,IAAI,EAAEA,IAAAA;GAEJG,CAAAA,EAAAA,QACe,CACZ,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEWyB,MAAAA,cAAc,gBAAG/B,gBAAU,CAAC,CAAC;AACxCgC,EAAAA,MAAM,GAAGnC,wBAAwB;AACjCoC,EAAAA,KAAK,GAAG,gBAAgB;EACxB3B,QAAQ;EACR,GAAGC,IAAAA;AACgB,CAAC,EACtBC,YAA0B,kBAExBW,KAAA,CAAAO,aAAA,CAAC3B,cAAc,EAAA6B,MAAA,CAAAC,MAAA,KACTtB,IAAI,EAAA;AACRL,EAAAA,IAAI,EAAC,MAAM;AACXa,EAAAA,GAAG,EAAEP,YAAa;AAClBwB,EAAAA,MAAM,EAAEA,MAAO;AACfC,EAAAA,KAAK,EAAEA,KAAAA;AAAM,CAEX3B,CAAAA,EAAAA,QACY,CACjB,EAAC;AAEW4B,MAAAA,gBAAgB,gBAAGlC,gBAAU,CAAC,CAAC;AAC1CgC,EAAAA,MAAM,GAAGlC,0BAA0B;AACnCmC,EAAAA,KAAK,GAAG,qBAAqB;EAC7B3B,QAAQ;EACR,GAAGC,IAAAA;AACkB,CAAC,EACxBC,YAA0B,kBAExBW,KAAA,CAAAO,aAAA,CAAC3B,cAAc,EAAA6B,MAAA,CAAAC,MAAA,KACTtB,IAAI,EAAA;AACR,EAAA,WAAA,EAAU,QAAQ;AAClBL,EAAAA,IAAI,EAAC,OAAO;AACZa,EAAAA,GAAG,EAAEP,YAAa;AAClBwB,EAAAA,MAAM,EAAEA,MAAO;AACfC,EAAAA,KAAK,EAAEA,KAAAA;AAAM,CAEX3B,CAAAA,EAAAA,QACY,CACjB;;;;;;;"}

package/dist/cjs/components/Forms/FormHelperText/FormHelperText.styled.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var Text = require('../../Text/Text.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+
+const HelperText = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).withConfig({
+  displayName: "FormHelperTextstyled__HelperText",
+  componentId: "sc-d3er7d-0"
+})(["display:block;text-align:left;"]);
+
+exports.HelperText = HelperText;
+//# sourceMappingURL=FormHelperText.styled.js.map

package/dist/cjs/components/Forms/FormHelperText/FormHelperText.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.styled.js","sources":["../../../../../src/components/Forms/FormHelperText/FormHelperText.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\n\nexport const HelperText = styled(Text)`\n  display: block;\n  text-align: left;\n`\n"],"names":["HelperText","styled","Text","withConfig","displayName","componentId"],"mappings":";;;;;AAIO,MAAMA,UAAU,gBAAGC,gCAAM,CAACC,YAAI,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAGrC,CAAA,CAAA,CAAA,gCAAA,CAAA;;;;"}

package/dist/cjs/components/Forms/FormLabel/FormLabel.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var typeUtils = require('../../../utils/typeUtils.js');
+var useFormControlContext = require('../useFormControlContext.js');
+var Help = require('../../Help/Help.js');
+var FormLabel_styled = require('./FormLabel.styled.js');
+var Typography = require('../../../foundation/Typography.js');
+var HStack = require('../../Stack/HStack/HStack.js');
+var StackItem = require('../../Stack/StackItem/StackItem.js');
+
+const FORM_LABEL_TEST_ID = 'bezier-react-form-label';
+function FormLabel({
+  testId = FORM_LABEL_TEST_ID,
+  help,
+  as = 'label',
+  bold = true,
+  color = 'txt-black-darkest',
+  children,
+  ...rest
+}, forwardedRef) {
+  const contextValue = useFormControlContext.default();
+  const {
+    Wrapper,
+    typo,
+    ...ownProps
+  } = contextValue?.getLabelProps(rest) ?? {
+    Wrapper: React.Fragment,
+    typo: Typography.Typography.Size13,
+    ...rest
+  };
+  const LabelComponent = React.useMemo(() => /*#__PURE__*/React.createElement(FormLabel_styled.Label, Object.assign({}, ownProps, {
+    ref: forwardedRef,
+    testId: testId,
+    forwardedAs: as,
+    bold: bold,
+    typo: typo,
+    color: color
+  }), children), [as, typo, bold, color, testId, children, forwardedRef, ownProps]);
+  const HelpComponent = React.useMemo(() => {
+    if (typeUtils.isEmpty(help)) {
+      return null;
+    }
+    if ( /*#__PURE__*/React.isValidElement(help)) {
+      // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정
+      const {
+        displayName
+      } = help?.type;
+      if (displayName === Help.HELP_DISPLAY_NAME) {
+        return help;
+      }
+    }
+    return /*#__PURE__*/React.createElement(Help.default, null, help);
+  }, [help]);
+  if (typeUtils.isEmpty(children)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Wrapper, null, !HelpComponent ? LabelComponent : /*#__PURE__*/React.createElement(HStack.HStack, {
+    align: "center",
+    spacing: 6
+  }, /*#__PURE__*/React.createElement(StackItem.StackItem, {
+    shrink: true,
+    weight: 1
+  }, LabelComponent), /*#__PURE__*/React.createElement(StackItem.StackItem, null, HelpComponent)));
+}
+var FormLabel$1 = /*#__PURE__*/React.forwardRef(FormLabel);
+
+exports.FORM_LABEL_TEST_ID = FORM_LABEL_TEST_ID;
+exports.default = FormLabel$1;
+//# sourceMappingURL=FormLabel.js.map

package/dist/cjs/components/Forms/FormLabel/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Forms/FormLabel/FormLabel.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport useFormControlContext from '~/src/components/Forms/useFormControlContext'\nimport { Help } from '~/src/components/Help'\nimport { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'\nimport {\n  HStack,\n  StackItem,\n} from '~/src/components/Stack'\n\nimport type FormLabelProps from './FormLabel.types'\n\nimport * as Styled from './FormLabel.styled'\n\nexport const FORM_LABEL_TEST_ID = 'bezier-react-form-label'\n\nfunction FormLabel({\n  testId = FORM_LABEL_TEST_ID,\n  help,\n  as = 'label',\n  bold = true,\n  color = 'txt-black-darkest',\n  children,\n  ...rest\n}: FormLabelProps,\nforwardedRef: React.Ref<HTMLLabelElement>,\n) {\n  const contextValue = useFormControlContext()\n\n  const { Wrapper, typo, ...ownProps } = contextValue?.getLabelProps(rest) ?? {\n    Wrapper: React.Fragment,\n    typo: Typography.Size13,\n    ...rest,\n  }\n\n  const LabelComponent = useMemo(() => (\n    <Styled.Label\n      {...ownProps}\n      ref={forwardedRef}\n      testId={testId}\n      forwardedAs={as}\n      bold={bold}\n      typo={typo}\n      color={color}\n    >\n      { children }\n    </Styled.Label>\n  ), [\n    as,\n    typo,\n    bold,\n    color,\n    testId,\n    children,\n    forwardedRef,\n    ownProps,\n  ])\n\n  const HelpComponent = useMemo(() => {\n    if (isEmpty(help)) { return null }\n\n    if (React.isValidElement(help)) {\n      // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정\n      const { displayName } = help?.type as any\n      if (displayName === HELP_DISPLAY_NAME) {\n        return help\n      }\n    }\n\n    return (\n      <Help>\n        { help }\n      </Help>\n    )\n  }, [help])\n\n  if (isEmpty(children)) { return null }\n\n  return (\n    <Wrapper>\n      { !HelpComponent\n        ? LabelComponent\n        : (\n          <HStack align=\"center\" spacing={6}>\n            <StackItem shrink weight={1}>\n              { LabelComponent }\n            </StackItem>\n            <StackItem>\n              { HelpComponent }\n            </StackItem>\n          </HStack>\n        ) }\n    </Wrapper>\n  )\n}\n\nexport default forwardRef(FormLabel)\n"],"names":["FORM_LABEL_TEST_ID","FormLabel","testId","help","as","bold","color","children","rest","forwardedRef","contextValue","useFormControlContext","Wrapper","typo","ownProps","getLabelProps","React","Fragment","Typography","Size13","LabelComponent","useMemo","createElement","Styled","Object","assign","ref","forwardedAs","HelpComponent","isEmpty","isValidElement","displayName","type","HELP_DISPLAY_NAME","Help","HStack","align","spacing","StackItem","shrink","weight","forwardRef"],"mappings":";;;;;;;;;;;;;AAqBO,MAAMA,kBAAkB,GAAG,0BAAyB;AAE3D,SAASC,SAASA,CAAC;AACjBC,EAAAA,MAAM,GAAGF,kBAAkB;EAC3BG,IAAI;AACJC,EAAAA,EAAE,GAAG,OAAO;AACZC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAK,GAAG,mBAAmB;EAC3BC,QAAQ;EACR,GAAGC,IAAAA;AACW,CAAC,EACjBC,YAAyC,EACvC;AACA,EAAA,MAAMC,YAAY,GAAGC,6BAAqB,EAAE,CAAA;EAE5C,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAS,GAAC,GAAGJ,YAAY,EAAEK,aAAa,CAACP,IAAI,CAAC,IAAI;IAC1EI,OAAO,EAAEI,KAAK,CAACC,QAAQ;IACvBJ,IAAI,EAAEK,qBAAU,CAACC,MAAM;IACvB,GAAGX,IAAAA;GACJ,CAAA;AAED,EAAA,MAAMY,cAAc,GAAGC,aAAO,CAAC,mBAC7BL,KAAA,CAAAM,aAAA,CAACC,sBAAY,EAAAC,MAAA,CAAAC,MAAA,KACPX,QAAQ,EAAA;AACZY,IAAAA,GAAG,EAAEjB,YAAa;AAClBP,IAAAA,MAAM,EAAEA,MAAO;AACfyB,IAAAA,WAAW,EAAEvB,EAAG;AAChBC,IAAAA,IAAI,EAAEA,IAAK;AACXQ,IAAAA,IAAI,EAAEA,IAAK;AACXP,IAAAA,KAAK,EAAEA,KAAAA;GAELC,CAAAA,EAAAA,QACU,CACf,EAAE,CACDH,EAAE,EACFS,IAAI,EACJR,IAAI,EACJC,KAAK,EACLJ,MAAM,EACNK,QAAQ,EACRE,YAAY,EACZK,QAAQ,CACT,CAAC,CAAA;AAEF,EAAA,MAAMc,aAAa,GAAGP,aAAO,CAAC,MAAM;AAClC,IAAA,IAAIQ,iBAAO,CAAC1B,IAAI,CAAC,EAAE;AAAE,MAAA,OAAO,IAAI,CAAA;AAAC,KAAA;AAEjC,IAAA,kBAAIa,KAAK,CAACc,cAAc,CAAC3B,IAAI,CAAC,EAAE;AAC9B;MACA,MAAM;AAAE4B,QAAAA,WAAAA;OAAa,GAAG5B,IAAI,EAAE6B,IAAW,CAAA;MACzC,IAAID,WAAW,KAAKE,sBAAiB,EAAE;AACrC,QAAA,OAAO9B,IAAI,CAAA;AACb,OAAA;AACF,KAAA;AAEA,IAAA,oBACEa,KAAA,CAAAM,aAAA,CAACY,YAAI,EAAA,IAAA,EACD/B,IACE,CAAC,CAAA;AAEX,GAAC,EAAE,CAACA,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,IAAI0B,iBAAO,CAACtB,QAAQ,CAAC,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAErC,EAAA,oBACES,KAAA,CAAAM,aAAA,CAACV,OAAO,EACJ,IAAA,EAAA,CAACgB,aAAa,GACZR,cAAc,gBAEdJ,KAAA,CAAAM,aAAA,CAACa,aAAM,EAAA;AAACC,IAAAA,KAAK,EAAC,QAAQ;AAACC,IAAAA,OAAO,EAAE,CAAA;AAAE,GAAA,eAChCrB,KAAA,CAAAM,aAAA,CAACgB,mBAAS,EAAA;IAACC,MAAM,EAAA,IAAA;AAACC,IAAAA,MAAM,EAAE,CAAA;AAAE,GAAA,EACxBpB,cACO,CAAC,eACZJ,KAAA,CAAAM,aAAA,CAACgB,mBAAS,EACNV,IAAAA,EAAAA,aACO,CACL,CAEL,CAAC,CAAA;AAEd,CAAA;AAEA,kBAAea,aAAAA,gBAAU,CAACxC,SAAS,CAAC;;;;;"}

package/dist/cjs/components/Forms/FormLabel/FormLabel.styled.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var Text = require('../../Text/Text.js');
+var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
+
+const Label = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).withConfig({
+  displayName: "FormLabelstyled__Label",
+  componentId: "sc-qcog42-0"
+})(["display:block;text-align:left;word-break:break-word;"]);
+
+exports.Label = Label;
+//# sourceMappingURL=FormLabel.styled.js.map

package/dist/cjs/components/Forms/FormLabel/FormLabel.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.styled.js","sources":["../../../../../src/components/Forms/FormLabel/FormLabel.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\n\nexport const Label = styled(Text)`\n  display: block;\n  text-align: left;\n  word-break: break-word;\n`\n"],"names":["Label","styled","Text","withConfig","displayName","componentId"],"mappings":";;;;;AAIO,MAAMA,KAAK,gBAAGC,gCAAM,CAACC,YAAI,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAIhC,CAAA,CAAA,CAAA,sDAAA,CAAA;;;;"}