npm - @channel.io/bezier-react - Versions diffs - 1.7.0 → 1.7.2 - Mend

@channel.io/bezier-react 1.7.0 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (278) hide show

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js ADDED Viewed

@@ -0,0 +1,35 @@
+'use strict';
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+exports.defineProperty = _defineProperty;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;
+//# sourceMappingURL=_rollupPluginBabelHelpers.js.map

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/Banner/Banner.const.js CHANGED Viewed

@@ -41,9 +41,11 @@ const TEXT_COLORS = {
   [Banner_types.BannerVariant.Alt]: 'txt-black-darker'
 };
 const ELEVATIONS = {
-  [Banner_types.BannerVariant.Alt]: FoundationStyledComponent.css(["", ""], ({
+  [Banner_types.BannerVariant.Alt]: FoundationStyledComponent.css`
+    ${({
     foundation
-  }) => foundation?.elevation?.ev2())
+  }) => foundation?.elevation?.ev2()}
+  `
 };
 exports.ACTION_BUTTON_COLOR_VARIANTS = ACTION_BUTTON_COLOR_VARIANTS;

package/dist/cjs/components/Banner/Banner.const.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.const.js","sources":["../../../../src/components/Banner/Banner.const.ts"],"sourcesContent":["import {\n type SemanticNames,\n css,\n} from '~/src/foundation'\n\nimport type { InjectedInterpolation } from '~/src/types/Foundation'\n\nimport { ButtonColorVariant } from '~/src/components/Button'\n\nimport { BannerVariant } from './Banner.types'\n\nexport const BACKGROUND_COLORS: Record<BannerVariant, SemanticNames> = {\n [BannerVariant.Default]: 'bg-black-lighter',\n [BannerVariant.Blue]: 'bgtxt-blue-lightest',\n [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',\n [BannerVariant.Green]: 'bgtxt-green-lightest',\n [BannerVariant.Orange]: 'bgtxt-orange-lightest',\n [BannerVariant.Red]: 'bgtxt-red-lightest',\n [BannerVariant.Alt]: 'bg-grey-lighter',\n}\n\nexport const DEFAULT_ICON_COLORS: Record<BannerVariant, SemanticNames> = {\n [BannerVariant.Default]: 'txt-black-darker',\n [BannerVariant.Blue]: 'bgtxt-blue-normal',\n [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n [BannerVariant.Green]: 'bgtxt-green-normal',\n [BannerVariant.Orange]: 'bgtxt-orange-normal',\n [BannerVariant.Red]: 'bgtxt-red-normal',\n [BannerVariant.Alt]: 'bgtxt-red-normal',\n}\n\nexport const ACTION_BUTTON_COLOR_VARIANTS: Record<BannerVariant, ButtonColorVariant> = {\n [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,\n [BannerVariant.Blue]: ButtonColorVariant.Blue,\n [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,\n [BannerVariant.Green]: ButtonColorVariant.Green,\n [BannerVariant.Orange]: ButtonColorVariant.Orange,\n [BannerVariant.Red]: ButtonColorVariant.Red,\n [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark,\n}\n\nexport const TEXT_COLORS: Record<BannerVariant, SemanticNames> = {\n [BannerVariant.Default]: 'txt-black-darker',\n [BannerVariant.Blue]: 'bgtxt-blue-normal',\n [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n [BannerVariant.Green]: 'bgtxt-green-normal',\n [BannerVariant.Orange]: 'bgtxt-orange-normal',\n [BannerVariant.Red]: 'bgtxt-red-normal',\n [BannerVariant.Alt]: 'txt-black-darker',\n}\n\nexport const ELEVATIONS: { [key in BannerVariant]?: InjectedInterpolation } = {\n [BannerVariant.Alt]: css`\n ${({ foundation }) => foundation?.elevation?.ev2()}\n `,\n}\n"],"names":["BACKGROUND_COLORS","BannerVariant","Default","Blue","Cobalt","Green","Orange","Red","Alt","DEFAULT_ICON_COLORS","ACTION_BUTTON_COLOR_VARIANTS","ButtonColorVariant","MonochromeDark","TEXT_COLORS","ELEVATIONS","css","foundation","elevation","ev2"],"mappings":";;;;;;AAWO,MAAMA,iBAAuD,GAAG;AACrE,EAAA,CAACC,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,qBAAqB;AAC3C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,sBAAsB;AAC7C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,oBAAoB;EACzC,CAACN,0BAAa,CAACO,GAAG,GAAG,iBAAA;AACvB,EAAC;AAEM,MAAMC,mBAAyD,GAAG;AACvE,EAAA,CAACR,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAME,4BAAuE,GAAG;AACrF,EAAA,CAACT,0BAAa,CAACC,OAAO,GAAGS,+BAAkB,CAACC,cAAc;AAC1D,EAAA,CAACX,0BAAa,CAACE,IAAI,GAAGQ,+BAAkB,CAACR,IAAI;AAC7C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAGO,+BAAkB,CAACP,MAAM;AACjD,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAGM,+BAAkB,CAACN,KAAK;AAC/C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAGK,+BAAkB,CAACL,MAAM;AACjD,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAGI,+BAAkB,CAACJ,GAAG;AAC3C,EAAA,CAACN,0BAAa,CAACO,GAAG,GAAGG,+BAAkB,CAACC,cAAAA;AAC1C,EAAC;AAEM,MAAMC,WAAiD,GAAG;AAC/D,EAAA,CAACZ,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAMM,UAA8D,GAAG;AAC5E,EAAA,CAACb,0BAAa,CAACO,GAAG,GAAGO,~~6BAAG~~,~~WACpB~~,CAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,KAAKA,UAAU,EAAEC,SAAS,EAAEC,GAAG,~~EAAE~~,CAAA;~~AAEtD~~;;;;;;;;"}
1	+ {"version":3,"file":"Banner.const.js","sources":["../../../../src/components/Banner/Banner.const.ts"],"sourcesContent":["import {\n type SemanticNames,\n css,\n} from '~/src/foundation'\n\nimport type { InjectedInterpolation } from '~/src/types/Foundation'\n\nimport { ButtonColorVariant } from '~/src/components/Button'\n\nimport { BannerVariant } from './Banner.types'\n\nexport const BACKGROUND_COLORS: Record<BannerVariant, SemanticNames> = {\n [BannerVariant.Default]: 'bg-black-lighter',\n [BannerVariant.Blue]: 'bgtxt-blue-lightest',\n [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',\n [BannerVariant.Green]: 'bgtxt-green-lightest',\n [BannerVariant.Orange]: 'bgtxt-orange-lightest',\n [BannerVariant.Red]: 'bgtxt-red-lightest',\n [BannerVariant.Alt]: 'bg-grey-lighter',\n}\n\nexport const DEFAULT_ICON_COLORS: Record<BannerVariant, SemanticNames> = {\n [BannerVariant.Default]: 'txt-black-darker',\n [BannerVariant.Blue]: 'bgtxt-blue-normal',\n [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n [BannerVariant.Green]: 'bgtxt-green-normal',\n [BannerVariant.Orange]: 'bgtxt-orange-normal',\n [BannerVariant.Red]: 'bgtxt-red-normal',\n [BannerVariant.Alt]: 'bgtxt-red-normal',\n}\n\nexport const ACTION_BUTTON_COLOR_VARIANTS: Record<BannerVariant, ButtonColorVariant> = {\n [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,\n [BannerVariant.Blue]: ButtonColorVariant.Blue,\n [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,\n [BannerVariant.Green]: ButtonColorVariant.Green,\n [BannerVariant.Orange]: ButtonColorVariant.Orange,\n [BannerVariant.Red]: ButtonColorVariant.Red,\n [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark,\n}\n\nexport const TEXT_COLORS: Record<BannerVariant, SemanticNames> = {\n [BannerVariant.Default]: 'txt-black-darker',\n [BannerVariant.Blue]: 'bgtxt-blue-normal',\n [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n [BannerVariant.Green]: 'bgtxt-green-normal',\n [BannerVariant.Orange]: 'bgtxt-orange-normal',\n [BannerVariant.Red]: 'bgtxt-red-normal',\n [BannerVariant.Alt]: 'txt-black-darker',\n}\n\nexport const ELEVATIONS: { [key in BannerVariant]?: InjectedInterpolation } = {\n [BannerVariant.Alt]: css`\n ${({ foundation }) => foundation?.elevation?.ev2()}\n `,\n}\n"],"names":["BACKGROUND_COLORS","BannerVariant","Default","Blue","Cobalt","Green","Orange","Red","Alt","DEFAULT_ICON_COLORS","ACTION_BUTTON_COLOR_VARIANTS","ButtonColorVariant","MonochromeDark","TEXT_COLORS","ELEVATIONS","css","foundation","elevation","ev2"],"mappings":";;;;;;AAWO,MAAMA,iBAAuD,GAAG;AACrE,EAAA,CAACC,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,qBAAqB;AAC3C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,sBAAsB;AAC7C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,oBAAoB;EACzC,CAACN,0BAAa,CAACO,GAAG,GAAG,iBAAA;AACvB,EAAC;AAEM,MAAMC,mBAAyD,GAAG;AACvE,EAAA,CAACR,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAME,4BAAuE,GAAG;AACrF,EAAA,CAACT,0BAAa,CAACC,OAAO,GAAGS,+BAAkB,CAACC,cAAc;AAC1D,EAAA,CAACX,0BAAa,CAACE,IAAI,GAAGQ,+BAAkB,CAACR,IAAI;AAC7C,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAGO,+BAAkB,CAACP,MAAM;AACjD,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAGM,+BAAkB,CAACN,KAAK;AAC/C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAGK,+BAAkB,CAACL,MAAM;AACjD,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAGI,+BAAkB,CAACJ,GAAG;AAC3C,EAAA,CAACN,0BAAa,CAACO,GAAG,GAAGG,+BAAkB,CAACC,cAAAA;AAC1C,EAAC;AAEM,MAAMC,WAAiD,GAAG;AAC/D,EAAA,CAACZ,0BAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,0BAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,0BAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,0BAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,0BAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,0BAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,0BAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAMM,UAA8D,GAAG;AAC5E,EAAA,CAACb,0BAAa,CAACO,GAAG,GAAGO,6BAAI,CAAA;AAC3B,IAAA,EAAM,CAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,KAAKA,UAAU,EAAEC,SAAS,EAAEC,GAAG,EAAG,CAAA;AACvD,EAAA,CAAA;AACA;;;;;;;;"}

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

@@ -114,7 +114,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
   if (!children) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(FormControlContext.FormControlContext.Provider, {
+  return /*#__PURE__*/React.createElement(FormControlContext.FormControlContextProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Container, Object.assign({}, bezierProps, {
     ref: forwardedRef,

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

	@@ -1 +1 @@
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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"}
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 { FormControlContextProvider } 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 <FormControlContextProvider value={contextValue}>\n <Container\n {...bezierProps}\n ref={forwardedRef}\n style={containerStyle}\n testId={testId}\n labelPosition={labelPosition}\n >\n { children }\n </Container>\n </FormControlContextProvider>\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","FormControlContextProvider","value"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
 'use strict';
-var React = require('react');
+var reactUtils = require('../../../utils/reactUtils.js');
-const FormControlContext = /*#__PURE__*/React.createContext(undefined);
+const [FormControlContextProvider, useFormControlContext] = reactUtils.createContext(undefined);
-exports.FormControlContext = FormControlContext;
+exports.FormControlContextProvider = FormControlContextProvider;
+exports.useFormControlContext = useFormControlContext;
 //# sourceMappingURL=FormControlContext.js.map

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

	@@ -1 +1 @@
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~~;;;;~~"}
1	+ {"version":3,"file":"FormControlContext.js","sources":["../../../../../src/components/Forms/FormControl/FormControlContext.ts"],"sourcesContent":["import { createContext } from '~/src/utils/reactUtils'\n\nimport { type FormControlContextValue } from '~/src/components/Forms/FormControl'\n\nexport const [\n FormControlContextProvider,\n useFormControlContext,\n] = createContext<FormControlContextValue \| undefined>(undefined)\n"],"names":["FormControlContextProvider","useFormControlContext","createContext","undefined"],"mappings":";;;;AAIO,MAAM,CACXA,0BAA0B,EAC1BC,qBAAqB,CACtB,GAAGC,wBAAa,CAAsCC,SAAS;;;;;"}

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

@@ -5,8 +5,8 @@ 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');
+var FormControlContext = require('../FormControl/FormControlContext.js');
 const FORM_GROUP_TEST_ID = 'bezier-react-form-group';
 function FormGroup({
@@ -17,7 +17,7 @@ function FormGroup({
   children,
   ...rest
 }, forwardedRef) {
-  const contextValue = useFormControlContext.default();
+  const contextValue = FormControlContext.useFormControlContext();
   const {
     ref,
     ...ownProps

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

	@@ -1 +1 @@
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;;;;"}
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/FormControl'\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,wCAAqB,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/FormHelperText/FormHelperText.js CHANGED Viewed

@@ -4,8 +4,8 @@ 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 FormControlContext = require('../FormControl/FormControlContext.js');
 var Typography = require('../../../foundation/Typography.js');
 const FORM_HELPER_TEXT_TEST_ID = 'bezier-react-form-helper-text';
@@ -17,7 +17,7 @@ const BaseHelperText = /*#__PURE__*/React.forwardRef(({
   children,
   ...rest
 }, forwardedRef) => {
-  const contextValue = useFormControlContext.default();
+  const contextValue = FormControlContext.useFormControlContext();
   const getProps = type === 'info' ? contextValue?.getHelperTextProps : contextValue?.getErrorMessageProps;
   const {
     visible,

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

	@@ -1 +1 @@
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;;;;;;;"}
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/FormControl'\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,wCAAqB,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/FormLabel/FormLabel.js CHANGED Viewed

@@ -4,9 +4,9 @@ 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 FormControlContext = require('../FormControl/FormControlContext.js');
 var Typography = require('../../../foundation/Typography.js');
 var HStack = require('../../Stack/HStack/HStack.js');
 var StackItem = require('../../Stack/StackItem/StackItem.js');
@@ -21,7 +21,7 @@ function FormLabel({
   children,
   ...rest
 }, forwardedRef) {
-  const contextValue = useFormControlContext.default();
+  const contextValue = FormControlContext.useFormControlContext();
   const {
     Wrapper,
     typo,

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

	@@ -1 +1 @@
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;;;;;"}
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/FormControl'\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,wCAAqB,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/Inputs/mixins.js CHANGED Viewed

@@ -2,29 +2,48 @@
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
-const inputTextStyle = /*#__PURE__*/FoundationStyledComponent.css(["color:", ";", ""], ({
+const inputTextStyle = FoundationStyledComponent.css`
+  color: ${({
   foundation
-}) => foundation?.theme?.['txt-black-darkest'], props => props?.readOnly && FoundationStyledComponent.css(["color:", ";"], ({
-  foundation
-}) => foundation?.theme?.['txt-black-darker']));
-const inputPlaceholderStyle = /*#__PURE__*/FoundationStyledComponent.css(["&::placeholder{color:", ";}"], ({
-  foundation
-}) => foundation?.theme?.['txt-black-dark']);
-const inputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 1px 2px ", ",inset 0 0 0 1px ", ";"], ({
-  foundation
-}) => foundation?.theme?.['bg-black-lighter'], ({
-  foundation
-}) => foundation?.theme?.['bg-black-dark']);
-const focusedInputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 0 0 3px ", ",inset 0 0 0 1px ", ";"], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-blue-light'], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-blue-normal']);
-const erroredInputWrapperStyle = /*#__PURE__*/FoundationStyledComponent.css(["box-shadow:0 0 0 3px ", ",inset 0 0 0 1px ", ";"], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-orange-light'], ({
-  foundation
-}) => foundation?.theme?.['bgtxt-orange-normal']);
+}) => foundation?.theme?.['txt-black-darkest']};
+  ${props => props?.readOnly && FoundationStyledComponent.css`
+    color: ${({
+  foundation
+}) => foundation?.theme?.['txt-black-darker']};
+  `}
+`;
+const inputPlaceholderStyle = FoundationStyledComponent.css`
+  &::placeholder {
+    color: ${({
+  foundation
+}) => foundation?.theme?.['txt-black-dark']};
+  }
+`;
+const inputWrapperStyle = FoundationStyledComponent.css`
+  box-shadow: 0 1px 2px ${({
+  foundation
+}) => foundation?.theme?.['bg-black-lighter']},
+    inset 0 0 0 1px ${({
+  foundation
+}) => foundation?.theme?.['bg-black-dark']};
+`;
+const focusedInputWrapperStyle = FoundationStyledComponent.css`
+  box-shadow: 0 0 0 3px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-light']},
+    inset 0 0 0 1px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-blue-normal']};
+`;
+const erroredInputWrapperStyle = FoundationStyledComponent.css`
+  box-shadow: 0 0 0 3px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-orange-light']},
+    inset 0 0 0 1px ${({
+  foundation
+}) => foundation?.theme?.['bgtxt-orange-normal']};
+`;
 exports.erroredInputWrapperStyle = erroredInputWrapperStyle;
 exports.focusedInputWrapperStyle = focusedInputWrapperStyle;

package/dist/cjs/components/Forms/Inputs/mixins.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mixins.js","sources":["../../../../../src/components/Forms/Inputs/mixins.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport const inputTextStyle = css`\n color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n\n ${(props: FormComponentProps) => props?.readOnly && css`\n color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']};\n `}\n`\n\nexport const inputPlaceholderStyle = css`\n &::placeholder {\n color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n }\n`\n\nexport const inputWrapperStyle = css`\n box-shadow: 0 1px 2px ${({ foundation }) => foundation?.theme?.['bg-black-lighter']},\n inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n`\n\nexport const focusedInputWrapperStyle = css`\n box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-light']},\n inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n`\n\nexport const erroredInputWrapperStyle = css`\n box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-light']},\n inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-normal']};\n`\n"],"names":["inputTextStyle","css","foundation","theme","props","readOnly","inputPlaceholderStyle","inputWrapperStyle","focusedInputWrapperStyle","erroredInputWrapperStyle"],"mappings":";;;;~~AAIaA~~,~~MAAAA~~,cAAc,~~gBAAGC~~,~~6BAAG~~,~~sBACtB~~,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,~~CAAC~~,~~EAElEC~~,KAAyB,IAAKA,KAAK,EAAEC,QAAQ,IAAIJ,~~6BAAG~~,~~kBAC5C~~,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,~~CAAC~~,~~CACrE~~,~~EACF~~;~~AAEYG~~,~~MAAAA~~,qBAAqB,~~gBAAGL~~,~~6BAAG~~,~~kCAE3B~~,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,gBAAgB,~~CAAC~~,~~EAErE~~;~~AAEYI~~,~~MAAAA~~,iBAAiB,~~gBAAGN~~,~~6BAAG~~,~~sDACV~~,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,~~CAAC~~,~~EAC/D~~,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,eAAe,~~CAAC~~,~~EAC7E~~;~~AAEYK~~,~~MAAAA~~,wBAAwB,~~gBAAGP~~,~~6BAAG~~,~~sDACjB~~,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,~~CAAC~~,~~EAC/D~~,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,~~CAAC~~,~~EACjF~~;~~AAEYM~~,~~MAAAA~~,wBAAwB,~~gBAAGR~~,~~6BAAG~~,~~sDACjB~~,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,oBAAoB,~~CAAC~~,~~EACjE~~,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,~~CAAC~~;;;;;;;;"}
1	+ {"version":3,"file":"mixins.js","sources":["../../../../../src/components/Forms/Inputs/mixins.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { type FormComponentProps } from '~/src/components/Forms/Form.types'\n\nexport const inputTextStyle = css`\n color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};\n\n ${(props: FormComponentProps) => props?.readOnly && css`\n color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']};\n `}\n`\n\nexport const inputPlaceholderStyle = css`\n &::placeholder {\n color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n }\n`\n\nexport const inputWrapperStyle = css`\n box-shadow: 0 1px 2px ${({ foundation }) => foundation?.theme?.['bg-black-lighter']},\n inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bg-black-dark']};\n`\n\nexport const focusedInputWrapperStyle = css`\n box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-light']},\n inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']};\n`\n\nexport const erroredInputWrapperStyle = css`\n box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-light']},\n inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-normal']};\n`\n"],"names":["inputTextStyle","css","foundation","theme","props","readOnly","inputPlaceholderStyle","inputWrapperStyle","focusedInputWrapperStyle","erroredInputWrapperStyle"],"mappings":";;;;AAIO,MAAMA,cAAc,GAAGC,6BAAI,CAAA;AAClC,SAAA,EAAW,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACxE;AACA,EAAA,EAAKC,KAAyB,IAAKA,KAAK,EAAEC,QAAQ,IAAIJ,6BAAI,CAAA;AAC1D,WAAA,EAAa,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACzE,EAAI,CAAA,CAAA;AACJ,EAAC;AAEM,MAAMG,qBAAqB,GAAGL,6BAAI,CAAA;AACzC;AACA,WAAA,EAAa,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,gBAAgB,CAAE,CAAA;AACvE;AACA,EAAC;AAEM,MAAMI,iBAAiB,GAAGN,6BAAI,CAAA;AACrC,wBAAA,EAA0B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACtF,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,eAAe,CAAE,CAAA;AAC/E,EAAC;AAEM,MAAMK,wBAAwB,GAAGP,6BAAI,CAAA;AAC5C,wBAAA,EAA0B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,kBAAkB,CAAE,CAAA;AACtF,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,mBAAmB,CAAE,CAAA;AACnF,EAAC;AAEM,MAAMM,wBAAwB,GAAGR,6BAAI,CAAA;AAC5C,wBAAA,EAA0B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,oBAAoB,CAAE,CAAA;AACxF,oBAAA,EAAsB,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEC,KAAK,GAAG,qBAAqB,CAAE,CAAA;AACrF;;;;;;;;"}

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlContext.js CHANGED Viewed

@@ -1,21 +1,9 @@
 'use strict';
-var React = require('react');
+var reactUtils = require('../../../utils/reactUtils.js');
-// TODO: (@ed) Evolve it into a commonly reusable function
-function createContext(providerName, defaultValue) {
-  const Context = /*#__PURE__*/React.createContext(defaultValue);
-  function useContext(consumerName) {
-    const contextValue = React.useContext(Context);
-    if (!contextValue) {
-      throw new Error(`'${consumerName}' must be used within '${providerName}'`);
-    }
-    return contextValue;
-  }
-  return [Context.Provider, useContext];
-}
-const [SegmentedControlContextProvider, useSegmentedControlContext] = createContext('SegmentedControl', null);
-const [SegmentedControlItemListContextProvider, useSegmentedControlItemListContext] = createContext('SegmentedControlItemList', null);
+const [SegmentedControlContextProvider, useSegmentedControlContext] = reactUtils.createContext(null, 'SegmentedControl');
+const [SegmentedControlItemListContextProvider, useSegmentedControlItemListContext] = reactUtils.createContext(null, 'SegmentedControlItemList');
 exports.SegmentedControlContextProvider = SegmentedControlContextProvider;
 exports.SegmentedControlItemListContextProvider = SegmentedControlItemListContextProvider;

package/dist/cjs/components/Forms/SegmentedControl/SegmentedControlContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControlContext.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlContext.ts"],"sourcesContent":["import ~~React~~ from '~~react~~'\n\nimport {\n type SegmentedControlProps,\n type SegmentedControlType,\n} from './SegmentedControl.types'\n\n// TODO: (@ed) Evolve it into a commonly reusable function\nfunction createContext<ContextValue>(\n providerName: string,\n defaultValue: ContextValue,\n) {\n const Context = React.createContext<ContextValue>(defaultValue)\n\n function useContext(consumerName: string) {\n const contextValue = React.useContext(Context)\n\n if (!contextValue) {\n throw new Error(`'${consumerName}' must be used within '${providerName}'`)\n }\n\n return contextValue\n }\n\n return [\n Context.Provider,\n useContext,\n ] as const\n}\n\ntype SegmentedControlContextValue = Required<Pick<SegmentedControlProps<SegmentedControlType, string>, 'type' \| 'size' \| 'width'>>\n\nexport const [\n SegmentedControlContextProvider,\n useSegmentedControlContext,\n] = createContext<SegmentedControlContextValue \| null>('SegmentedControl'~~, null~~)\n\ninterface SegmentedControlItemListContextValue {\n setSelectedElement: (node: HTMLButtonElement \| null) => void\n}\n\nexport const [\n SegmentedControlItemListContextProvider,\n useSegmentedControlItemListContext,\n] = createContext<SegmentedControlItemListContextValue \| null>('SegmentedControlItemList'~~, null~~)\n"],"names":["~~createContext~~","~~providerName~~","~~defaultValue~~","~~Context","React","useContext","consumerName","contextValue","Error","Provider","SegmentedControlContextProvider","useSegmentedControlContext","~~SegmentedControlItemListContextProvider","useSegmentedControlItemListContext"],"mappings":";;;;~~AAOA;AACA~~,SAASA,aAAaA,CACpBC,YAAoB,EACpBC,YAA0B,EAC1B;AACA,EAAA,MAAMC,OAAO,gBAAGC,KAAK,CAACJ,aAAa,CAAeE,YAAY,CAAC,CAAA;EAE/D,SAASG,UAAUA,CAACC,YAAoB,EAAE;AACxC,IAAA,MAAMC,YAAY,GAAGH,KAAK,CAACC,UAAU,CAACF,OAAO,CAAC,CAAA;IAE9C,IAAI,CAACI,YAAY,EAAE;MACjB,MAAM,IAAIC,KAAK,CAAE,CAAA,CAAA,EAAGF,YAAa,CAAyBL,uBAAAA,EAAAA,YAAa,GAAE,CAAC,CAAA;AAC5E,KAAA;AAEA,IAAA,OAAOM,YAAY,CAAA;AACrB,GAAA;AAEA,EAAA,OAAO,CACLJ,OAAO,CAACM,QAAQ,EAChBJ,UAAU,CACX,CAAA;AACH,CAAA;AAIa,MAAA,~~CACXK~~,+BAA+B,EAC/BC,0BAA0B,CAC3B,~~GAAGX~~,~~aAAa~~,CAAsC,~~kBAAkB~~,EAAE,~~IAAI~~,EAAC;AAMnE,MAAA,~~CACXY~~,uCAAuC,EACvCC,kCAAkC,CACnC,~~GAAGb~~,~~aAAa~~,CAA8C,~~0BAA0B~~,EAAE,~~IAAI~~;;;;;;;"}
1	+ {"version":3,"file":"SegmentedControlContext.js","sources":["../../../../../src/components/Forms/SegmentedControl/SegmentedControlContext.ts"],"sourcesContent":["import { createContext } from '~/src/utils/reactUtils'\n\nimport {\n type SegmentedControlProps,\n type SegmentedControlType,\n} from './SegmentedControl.types'\n\ntype SegmentedControlContextValue = Required<Pick<SegmentedControlProps<SegmentedControlType, string>, 'type' \| 'size' \| 'width'>>\n\nexport const [\n SegmentedControlContextProvider,\n useSegmentedControlContext,\n] = createContext<SegmentedControlContextValue \| null>(null, 'SegmentedControl')\n\ninterface SegmentedControlItemListContextValue {\n setSelectedElement: (node: HTMLButtonElement \| null) => void\n}\n\nexport const [\n SegmentedControlItemListContextProvider,\n useSegmentedControlItemListContext,\n] = createContext<SegmentedControlItemListContextValue \| null>(null, 'SegmentedControlItemList')\n"],"names":["SegmentedControlContextProvider","useSegmentedControlContext","createContext","SegmentedControlItemListContextProvider","useSegmentedControlItemListContext"],"mappings":";;;;AASa,MAAA,CACXA,+BAA+B,EAC/BC,0BAA0B,CAC3B,GAAGC,wBAAa,CAAsC,IAAI,EAAE,kBAAkB,EAAC;AAMnE,MAAA,CACXC,uCAAuC,EACvCC,kCAAkC,CACnC,GAAGF,wBAAa,CAA8C,IAAI,EAAE,0BAA0B;;;;;;;"}

package/dist/cjs/components/Forms/useFormFieldProps.js CHANGED Viewed

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var domUtils = require('../../utils/domUtils.js');
-var useFormControlContext = require('./useFormControlContext.js');
+var FormControlContext = require('./FormControl/FormControlContext.js');
 // TODO: 테스트 추가
 function useFormFieldProps(props) {
-  const contextValue = useFormControlContext.default();
+  const contextValue = FormControlContext.useFormControlContext();
   const formFieldProps = React.useMemo(() => {
     const mergedProps = contextValue?.getFieldProps(props) ?? {
       ...props

package/dist/cjs/components/Forms/useFormFieldProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFormFieldProps.js","sources":["../../../../src/components/Forms/useFormFieldProps.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ariaAttr } from '~/src/utils/domUtils'\n\nimport type { FormComponentProps } from '~/src/components/Forms/Form.types'\n\nimport useFormControlContext from '~~./useFormControlContext~~'\n\n// TODO: 테스트 추가\nfunction useFormFieldProps<Props extends FormComponentProps>(props?: Props) {\n const contextValue = useFormControlContext()\n\n const formFieldProps = useMemo(() => {\n const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n const {\n disabled = false,\n readOnly = false,\n required = false,\n hasError = false,\n ...rest\n } = mergedProps\n\n return {\n ...rest,\n 'aria-disabled': ariaAttr(disabled),\n 'aria-invalid': ariaAttr(hasError),\n 'aria-required': ariaAttr(required),\n 'aria-readonly': ariaAttr(readOnly),\n disabled,\n hasError,\n required,\n readOnly,\n }\n }, [\n props,\n contextValue,\n ])\n\n return formFieldProps as typeof formFieldProps & Props\n}\n\nexport default useFormFieldProps\n"],"names":["useFormFieldProps","props","contextValue","useFormControlContext","formFieldProps","useMemo","mergedProps","getFieldProps","disabled","readOnly","required","hasError","rest","ariaAttr"],"mappings":";;;;;;;;~~AAQA~~;AACA,SAASA,iBAAiBA,CAAmCC,KAAa,EAAE;AAC1E,EAAA,MAAMC,YAAY,GAAGC,~~6BAAqB~~,EAAE,CAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,aAAO,CAAC,MAAM;IACnC,MAAMC,WAAW,GAAGJ,YAAY,EAAEK,aAAa,CAACN,KAAK,CAAC,IAAI;MAAE,GAAGA,KAAAA;KAAO,CAAA;IAEtE,MAAM;AACJO,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;MAChB,GAAGC,IAAAA;AACL,KAAC,GAAGN,WAAW,CAAA;IAEf,OAAO;AACL,MAAA,GAAGM,IAAI;AACP,MAAA,eAAe,EAAEC,iBAAQ,CAACL,QAAQ,CAAC;AACnC,MAAA,cAAc,EAAEK,iBAAQ,CAACF,QAAQ,CAAC;AAClC,MAAA,eAAe,EAAEE,iBAAQ,CAACH,QAAQ,CAAC;AACnC,MAAA,eAAe,EAAEG,iBAAQ,CAACJ,QAAQ,CAAC;MACnCD,QAAQ;MACRG,QAAQ;MACRD,QAAQ;AACRD,MAAAA,QAAAA;KACD,CAAA;AACH,GAAC,EAAE,CACDR,KAAK,EACLC,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,OAAOE,cAAc,CAAA;AACvB;;;;"}
1	+ {"version":3,"file":"useFormFieldProps.js","sources":["../../../../src/components/Forms/useFormFieldProps.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ariaAttr } from '~/src/utils/domUtils'\n\nimport type { FormComponentProps } from '~/src/components/Forms/Form.types'\nimport { useFormControlContext } from '~/src/components/Forms/FormControl'\n\n// TODO: 테스트 추가\nfunction useFormFieldProps<Props extends FormComponentProps>(props?: Props) {\n const contextValue = useFormControlContext()\n\n const formFieldProps = useMemo(() => {\n const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n const {\n disabled = false,\n readOnly = false,\n required = false,\n hasError = false,\n ...rest\n } = mergedProps\n\n return {\n ...rest,\n 'aria-disabled': ariaAttr(disabled),\n 'aria-invalid': ariaAttr(hasError),\n 'aria-required': ariaAttr(required),\n 'aria-readonly': ariaAttr(readOnly),\n disabled,\n hasError,\n required,\n readOnly,\n }\n }, [\n props,\n contextValue,\n ])\n\n return formFieldProps as typeof formFieldProps & Props\n}\n\nexport default useFormFieldProps\n"],"names":["useFormFieldProps","props","contextValue","useFormControlContext","formFieldProps","useMemo","mergedProps","getFieldProps","disabled","readOnly","required","hasError","rest","ariaAttr"],"mappings":";;;;;;;;AAOA;AACA,SAASA,iBAAiBA,CAAmCC,KAAa,EAAE;AAC1E,EAAA,MAAMC,YAAY,GAAGC,wCAAqB,EAAE,CAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,aAAO,CAAC,MAAM;IACnC,MAAMC,WAAW,GAAGJ,YAAY,EAAEK,aAAa,CAACN,KAAK,CAAC,IAAI;MAAE,GAAGA,KAAAA;KAAO,CAAA;IAEtE,MAAM;AACJO,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;AAChBC,MAAAA,QAAQ,GAAG,KAAK;MAChB,GAAGC,IAAAA;AACL,KAAC,GAAGN,WAAW,CAAA;IAEf,OAAO;AACL,MAAA,GAAGM,IAAI;AACP,MAAA,eAAe,EAAEC,iBAAQ,CAACL,QAAQ,CAAC;AACnC,MAAA,cAAc,EAAEK,iBAAQ,CAACF,QAAQ,CAAC;AAClC,MAAA,eAAe,EAAEE,iBAAQ,CAACH,QAAQ,CAAC;AACnC,MAAA,eAAe,EAAEG,iBAAQ,CAACJ,QAAQ,CAAC;MACnCD,QAAQ;MACRG,QAAQ;MACRD,QAAQ;AACRD,MAAAA,QAAAA;KACD,CAAA;AACH,GAAC,EAAE,CACDR,KAAK,EACLC,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,OAAOE,cAAc,CAAA;AACvB;;;;"}

package/dist/cjs/components/ListItem/ListItem.styled.js CHANGED Viewed

@@ -4,10 +4,10 @@ var DisabledOpacity = require('../../constants/DisabledOpacity.js');
 var ListItem_types = require('./ListItem.types.js');
 var utils = require('./utils.js');
 var Icon = require('../Icon/Icon.js');
+var index = require('../../foundation/Transition/index.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 var Mixins = require('../../foundation/Mixins.js');
 var Typography = require('../../foundation/Typography.js');
-var index = require('../../foundation/Transition/index.js');
 const getColorFromColorVariantWithDefaultValue = (variant, defaultValue) => {
   switch (variant) {

package/dist/cjs/components/ListItem/utils.js CHANGED Viewed

@@ -6,22 +6,34 @@ var FoundationStyledComponent = require('../../foundation/FoundationStyledCompon
 function getStyleOfSize(size) {
   switch (size) {
     case ListItem_types.ListItemSize.S:
-      return FoundationStyledComponent.css(["padding:4px 6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 4px 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round6);
+      }) => foundation?.rounding.round6};
+      `;
     case ListItem_types.ListItemSize.L:
-      return FoundationStyledComponent.css(["padding:8px 6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 8px 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round8);
+      }) => foundation?.rounding.round8};
+      `;
     case ListItem_types.ListItemSize.XL:
-      return FoundationStyledComponent.css(["padding:10px 6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 10px 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round12);
+      }) => foundation?.rounding.round12};
+      `;
     case ListItem_types.ListItemSize.M:
     default:
-      return FoundationStyledComponent.css(["padding:6px;", ";"], ({
+      return FoundationStyledComponent.css`
+        padding: 6px;
+        ${({
         foundation
-      }) => foundation?.rounding.round6);
+      }) => foundation?.rounding.round6};
+      `;
   }
 }

package/dist/cjs/components/ListItem/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../src/components/ListItem/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { ListItemSize } from './ListItem.types'\n\nexport function getStyleOfSize(size?: ListItemSize) {\n switch (size) {\n case ListItemSize.S:\n return css`\n padding: 4px 6px;\n ${({ foundation }) => foundation?.rounding.round6};\n `\n case ListItemSize.L:\n return css`\n padding: 8px 6px;\n ${({ foundation }) => foundation?.rounding.round8};\n `\n case ListItemSize.XL:\n return css`\n padding: 10px 6px;\n ${({ foundation }) => foundation?.rounding.round12};\n `\n case ListItemSize.M:\n default:\n return css`\n padding: 6px;\n ${({ foundation }) => foundation?.rounding.round6};\n `\n }\n}\n"],"names":["getStyleOfSize","size","ListItemSize","S","css","foundation","rounding","round6","L","round8","XL","round12","M"],"mappings":";;;;;AAIO,SAASA,cAAcA,CAACC,IAAmB,EAAE;AAClD,EAAA,QAAQA,IAAI;IACV,KAAKC,2BAAY,CAACC,CAAC;~~MACjB~~,OAAOC,~~6BAAG~~,~~4BAEN~~,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,~~MAAM~~,CAAA,CAAA;~~IAErD~~,KAAKL,2BAAY,CAACM,CAAC;~~MACjB~~,OAAOJ,~~6BAAG~~,~~4BAEN~~,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACG,~~MAAM~~,CAAA,CAAA;~~IAErD~~,KAAKP,2BAAY,CAACQ,EAAE;~~MAClB~~,OAAON,~~6BAAG~~,~~6BAEN~~,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACK,~~OAAO~~,CAAA,CAAA;~~IAEtD~~,KAAKT,2BAAY,CAACU,CAAC,CAAA;AACnB,IAAA;~~MACE~~,OAAOR,~~6BAAG~~,~~wBAEN~~,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,~~MAAM~~,CAAA,CAAA;~~AAEvD~~,GAAA;AACF;;;;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../src/components/ListItem/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport { ListItemSize } from './ListItem.types'\n\nexport function getStyleOfSize(size?: ListItemSize) {\n switch (size) {\n case ListItemSize.S:\n return css`\n padding: 4px 6px;\n ${({ foundation }) => foundation?.rounding.round6};\n `\n case ListItemSize.L:\n return css`\n padding: 8px 6px;\n ${({ foundation }) => foundation?.rounding.round8};\n `\n case ListItemSize.XL:\n return css`\n padding: 10px 6px;\n ${({ foundation }) => foundation?.rounding.round12};\n `\n case ListItemSize.M:\n default:\n return css`\n padding: 6px;\n ${({ foundation }) => foundation?.rounding.round6};\n `\n }\n}\n"],"names":["getStyleOfSize","size","ListItemSize","S","css","foundation","rounding","round6","L","round8","XL","round12","M"],"mappings":";;;;;AAIO,SAASA,cAAcA,CAACC,IAAmB,EAAE;AAClD,EAAA,QAAQA,IAAI;IACV,KAAKC,2BAAY,CAACC,CAAC;AACjB,MAAA,OAAOC,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAO,CAAA;AAC1D,MAAO,CAAA,CAAA;IACH,KAAKL,2BAAY,CAACM,CAAC;AACjB,MAAA,OAAOJ,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACG,MAAO,CAAA;AAC1D,MAAO,CAAA,CAAA;IACH,KAAKP,2BAAY,CAACQ,EAAE;AAClB,MAAA,OAAON,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACK,OAAQ,CAAA;AAC3D,MAAO,CAAA,CAAA;IACH,KAAKT,2BAAY,CAACU,CAAC,CAAA;AACnB,IAAA;AACE,MAAA,OAAOR,6BAAI,CAAA;AACjB;AACA,QAAA,EAAU,CAAC;AAAEC,QAAAA,UAAAA;AAAW,OAAC,KAAKA,UAAU,EAAEC,QAAQ,CAACC,MAAO,CAAA;AAC1D,MAAO,CAAA,CAAA;AACL,GAAA;AACF;;;;"}

package/dist/cjs/components/Modals/Modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modals/Modal/Modal.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { type ModalProps } from './Modal.types'\n\n/*\n `Modal` is a dialog that appears on top of the page.\n \n `Modal` is a context of the Modal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to Modal-related components.\n \n @example\n \n ```tsx\n * // Anatomy of the Modal\n * <Modal>\n * <ModalTrigger />\n * <ModalContent>\n * <ModalHeader />\n * <ModalBody />\n * <ModalFooter />\n * </ModalContent>\n * </Modal>\n * ```\n */\nexport function Modal({\n children,\n show,\n defaultShow,\n onShow = noop,\n onHide = noop,\n}: ModalProps) {\n const onOpenChange = useCallback<NonNullable<DialogPrimitive.DialogProps['onOpenChange']>>((open) => {\n const callback = open ? onShow : onHide\n callback()\n }, [\n onShow,\n onHide,\n ])\n\n return (\n <DialogPrimitive.Root\n open={show}\n defaultOpen={defaultShow}\n onOpenChange={onOpenChange}\n >\n { children }\n </DialogPrimitive.Root>\n )\n}\n\n"],"names":["Modal","children","show","defaultShow","onShow","noop","onHide","onOpenChange","useCallback","open","callback","React","createElement","DialogPrimitive","defaultOpen"],"mappings":";;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,KAAKA,CAAC;EACpBC,QAAQ;EACRC,IAAI;EACJC,WAAW;AACXC,EAAAA,MAAM,GAAGC,kBAAI;AACbC,EAAAA,MAAM,GAAGD,kBAAAA;AACC,CAAC,EAAE;AACb,EAAA,MAAME,YAAY,GAAGC,iBAAW,CAA4DC,IAAI,IAAK;AACnG,IAAA,MAAMC,QAAQ,GAAGD,IAAI,GAAGL,MAAM,GAAGE,MAAM,CAAA;AACvCI,IAAAA,QAAQ,EAAE,CAAA;AACZ,GAAC,EAAE,CACDN,MAAM,EACNE,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,UAAoB,EAAA;AACnBJ,IAAAA,IAAI,EAAEP,IAAK;AACXY,IAAAA,WAAW,EAAEX,WAAY;AACzBI,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAAA,EAEzBN,QACkB,CAAC,CAAA;AAE3B;;;;"}
1	+ {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modals/Modal/Modal.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { type ModalProps } from './Modal.types'\n\n/*\n `Modal` is a dialog that appears on top of the page.\n \n `Modal` is a context of the Modal-related components. It doesn't render any DOM node.\n * It controls the visibility of the entire component and provides\n * handlers and accessibility properties to Modal-related components.\n \n @example\n \n ```tsx\n * // Anatomy of the Modal\n * <Modal>\n * <ModalTrigger />\n * <ModalContent>\n * <ModalHeader />\n * <ModalBody />\n * <ModalFooter />\n * </ModalContent>\n * </Modal>\n * ```\n */\nexport function Modal({\n children,\n show,\n defaultShow,\n onShow = noop,\n onHide = noop,\n}: ModalProps) {\n const onOpenChange = useCallback<NonNullable<DialogPrimitive.DialogProps['onOpenChange']>>((open) => {\n const callback = open ? onShow : onHide\n callback()\n }, [\n onShow,\n onHide,\n ])\n\n return (\n <DialogPrimitive.Root\n open={show}\n defaultOpen={defaultShow}\n onOpenChange={onOpenChange}\n >\n { children }\n </DialogPrimitive.Root>\n )\n}\n"],"names":["Modal","children","show","defaultShow","onShow","noop","onHide","onOpenChange","useCallback","open","callback","React","createElement","DialogPrimitive","defaultOpen"],"mappings":";;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,KAAKA,CAAC;EACpBC,QAAQ;EACRC,IAAI;EACJC,WAAW;AACXC,EAAAA,MAAM,GAAGC,kBAAI;AACbC,EAAAA,MAAM,GAAGD,kBAAAA;AACC,CAAC,EAAE;AACb,EAAA,MAAME,YAAY,GAAGC,iBAAW,CAA4DC,IAAI,IAAK;AACnG,IAAA,MAAMC,QAAQ,GAAGD,IAAI,GAAGL,MAAM,GAAGE,MAAM,CAAA;AACvCI,IAAAA,QAAQ,EAAE,CAAA;AACZ,GAAC,EAAE,CACDN,MAAM,EACNE,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,UAAoB,EAAA;AACnBJ,IAAAA,IAAI,EAAEP,IAAK;AACXY,IAAAA,WAAW,EAAEX,WAAY;AACzBI,IAAAA,YAAY,EAAEA,YAAAA;AAAa,GAAA,EAEzBN,QACkB,CAAC,CAAA;AAE3B;;;;"}

package/dist/cjs/components/Modals/Modal/Modal.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n type BezierComponentProps,\n type ChildrenProps,\n type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n L = 'L',\n M = 'M',\n}\n\ninterface ModalOptions {\n /*\n The controlled open state of the modal.\n * Must be used in conjunction with `onShow` and `onHide`.\n /\n show?: boolean\n\n /\n The open state of the modal when it is initially rendered.\n * Use when you do not need to control its open state.\n /\n defaultShow?: boolean\n\n /\n Callback function to be called when the modal is opened.\n * @default noop\n /\n onShow?: () => void\n\n /\n Callback function to be called when the modal is closed.\n * @default noop\n /\n onHide?: () => void\n}\n\ninterface ModalContentOptions {\n /\n Specify a container element to portal the content into.\n * @default document.body\n /\n container?: HTMLElement \| null\n\n /\n Show close icon button that closes the modal when clicked.\n * @default false\n /\n showCloseIcon?: boolean\n\n /\n Width of the modal.\n * @default 'max-content'\n /\n width?: React.CSSProperties['width']\n\n /\n Height of the modal.\n * @default 'fit-content'\n /\n height?: React.CSSProperties['height']\n\n /\n z-index of the modal content.\n * Rather than using this option, Please check modal is positioned in the proper stacking context.\n * @default ZIndex.Modal\n /\n zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n /\n An accessible title to be announced when the modal is opened.\n /\n title: React.ReactNode\n\n /\n An accessible subtitle to be announced when the modal is opened.\n /\n subtitle?: React.ReactNode\n\n /\n An accessible description to be announced when the modal is opened.\n /\n description?: React.ReactNode\n\n /\n Size of the title\n * @default ModalTitleSize.L\n /\n titleSize?: ModalTitleSize\n\n /\n Hides content from the screen in an accessible way.\n * @default false\n */\n hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n ChildrenProps,\n ModalOptions {}\n\nexport interface ModalContentProps extends\n BezierComponentProps,\n ChildrenProps,\n React.HTMLAttributes<HTMLDivElement>,\n ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n BezierComponentProps,\n Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n BezierComponentProps,\n ChildrenProps,\n React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n BezierComponentProps,\n React.HTMLAttributes<HTMLElement>,\n ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n ChildrenProps<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentContextValue extends\n ~~NonNullable~~<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
1	+ {"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n type BezierComponentProps,\n type ChildrenProps,\n type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n L = 'L',\n M = 'M',\n}\n\ninterface ModalOptions {\n /*\n The controlled open state of the modal.\n * Must be used in conjunction with `onShow` and `onHide`.\n /\n show?: boolean\n\n /\n The open state of the modal when it is initially rendered.\n * Use when you do not need to control its open state.\n /\n defaultShow?: boolean\n\n /\n Callback function to be called when the modal is opened.\n * @default noop\n /\n onShow?: () => void\n\n /\n Callback function to be called when the modal is closed.\n * @default noop\n /\n onHide?: () => void\n}\n\ninterface ModalContentOptions {\n /\n Specify a container element to portal the content into.\n * @default document.body\n /\n container?: HTMLElement \| null\n\n /\n Show close icon button that closes the modal when clicked.\n * @default false\n /\n showCloseIcon?: boolean\n\n /\n Width of the modal.\n * @default 'max-content'\n /\n width?: React.CSSProperties['width']\n\n /\n Height of the modal.\n * @default 'fit-content'\n /\n height?: React.CSSProperties['height']\n\n /\n z-index of the modal content.\n * Rather than using this option, Please check modal is positioned in the proper stacking context.\n * @default ZIndex.Modal\n /\n zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n /\n An accessible title to be announced when the modal is opened.\n /\n title: React.ReactNode\n\n /\n An accessible subtitle to be announced when the modal is opened.\n /\n subtitle?: React.ReactNode\n\n /\n An accessible description to be announced when the modal is opened.\n /\n description?: React.ReactNode\n\n /\n Size of the title\n * @default ModalTitleSize.L\n /\n titleSize?: ModalTitleSize\n\n /\n Hides content from the screen in an accessible way.\n * @default false\n */\n hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n ChildrenProps,\n ModalOptions {}\n\nexport interface ModalContentProps extends\n BezierComponentProps,\n ChildrenProps,\n React.HTMLAttributes<HTMLDivElement>,\n ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n BezierComponentProps,\n Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n BezierComponentProps,\n ChildrenProps,\n React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n BezierComponentProps,\n React.HTMLAttributes<HTMLElement>,\n ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n ChildrenProps<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentContextValue extends\n Required<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}