@channel.io/bezier-react 1.7.1 → 1.7.2

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

@@ -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

@@ -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":";;;;;;;;;;;;AAkCO,MAAMA,oBAAoB,GAAG,4BAA2B;AAE/D,MAAMC,SAAS,gBAAGC,gBAAU,CAA8B,SAASD,SAASA,CAAC;EAC3EE,aAAa;EACbC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,QAAQJ,aAAa;AACnB,IAAA,KAAK,KAAK;MACR,oBACEK,KAAA,CAAAC,aAAA,CAACC,qBAAU,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACTC,QAAAA,GAAG,EAAEN,YAAa;AAClBO,QAAAA,SAAS,EAAC,UAAU;AACpBT,QAAAA,MAAM,EAAEA,MAAAA;OACJC,EAAAA,IAAI,CAENF,EAAAA,QACQ,CAAC,CAAA;AAGjB,IAAA,KAAK,MAAM,CAAA;AACX,IAAA;MACE,oBACEI,KAAA,CAAAC,aAAA,CAACM,uBAAW,EAAAJ,MAAA,CAAAC,MAAA,CAAA;AACVC,QAAAA,GAAG,EAAEN,YAAa;QAClB,aAAaF,EAAAA,MAAAA;OACTC,EAAAA,IAAI,CAENF,EAAAA,QACS,CAAC,CAAA;AAEpB,GAAA;AACF,CAAC,CAAC,CAAA;MAEWY,WAAW,gBAAGd,gBAAU,CAAgC,SAASc,WAAWA,CAAC;AACxFC,EAAAA,EAAE,EAAEC,MAAM;AACVb,EAAAA,MAAM,GAAGL,oBAAoB;AAC7BG,EAAAA,aAAa,GAAG,KAAK;EACrBgB,sBAAsB,GAAGC,qBAAa,CAACC,CAAC;EACxCC,KAAK;EACLlB,QAAQ;EACR,GAAGE,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM,CAACgB,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;EACpE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGF,cAAQ,CAAqB,IAAI,CAAC,CAAA;EAC9E,MAAM,CAACG,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGJ,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAElF,EAAA,MAAMR,EAAE,GAAGa,aAAK,CAACZ,MAAM,EAAE,OAAO,CAAC,CAAA;AACjC,EAAA,MAAMa,OAAO,GAAI,CAAEd,EAAAA,EAAG,CAAO,MAAA,CAAA,CAAA;AAC7B,EAAA,MAAMe,OAAO,GAAI,CAAEf,EAAAA,EAAG,CAAO,MAAA,CAAA,CAAA;AAC7B,EAAA,MAAMgB,YAAY,GAAI,CAAEhB,EAAAA,EAAG,CAAW,UAAA,CAAA,CAAA;AACtC,EAAA,MAAMiB,cAAc,GAAI,CAAEjB,EAAAA,EAAG,CAAe,cAAA,CAAA,CAAA;AAE5C,EAAA,MAAMkB,OAAO,GAAGZ,SAAS,GAAGa,SAAS,GAAGnB,EAAE,CAAA;AAE1C,EAAA,MAAMoB,WAAW,GAAGC,aAAO,CAAC,MAAM;AAChC,IAAA,IAAIV,gBAAgB,EAAE;AAAE,MAAA,OAAOM,cAAc,CAAA;AAAC,KAAA;AAC9C,IAAA,IAAIR,cAAc,EAAE;AAAE,MAAA,OAAOO,YAAY,CAAA;AAAC,KAAA;AAC1C,IAAA,OAAOG,SAAS,CAAA;GACjB,EAAE,CACDR,gBAAgB,EAChBF,cAAc,EACdQ,cAAc,EACdD,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,MAAMM,WAAW,GAAGD,aAAO,CAAC,MAAME,mCAAwB,CAAClC,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC,CAAA;AACzE,EAAA,MAAMmC,eAAe,GAAGH,aAAO,CAAC,MAAMI,mCAAwB,CAACpC,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC,CAAA;AAE7E,EAAA,MAAMqC,aAAa,GAAGC,iBAAW,CAAmBC,QAAQ,KAAK;AAC/D5B,IAAAA,EAAE,EAAEc,OAAO;AACX,IAAA,iBAAiB,EAAEC,OAAO;AAC1B,IAAA,kBAAkB,EAAEK,WAAW;AAC/BxB,IAAAA,GAAG,EAAEW,YAAY;IACjB,GAAGqB,QAAAA;GACJ,CAAC,EAAE,CACFd,OAAO,EACPC,OAAO,EACPK,WAAW,CACZ,CAAC,CAAA;AAEF,EAAA,MAAMS,aAAa,GAAGF,iBAAW,CAAmBC,QAAQ,KAAK;AAC/D5B,IAAAA,EAAE,EAAEe,OAAO;AACXe,IAAAA,OAAO,EAAEZ,OAAO;IAChBa,IAAI,EAAE7C,aAAa,KAAK,KAAK,GAAG8C,qBAAU,CAACC,MAAM,GAAGD,qBAAU,CAACE,MAAM;IACrEC,OAAO,EAAEjD,aAAa,KAAK,KAAK,GAC5BY,kCAAsB,GACtBA,mCAAuB;IAC3B,GAAG8B,QAAAA;GACJ,CAAC,EAAE,CACFV,OAAO,EACPH,OAAO,EACP7B,aAAa,CACd,CAAC,CAAA;AAEF,EAAA,MAAMkD,aAAa,GAAGT,iBAAW,CAAmBC,QAAQ,KAAK;AAC/D5B,IAAAA,EAAE,EAAEkB,OAAO;AACX,IAAA,kBAAkB,EAAEZ,SAAS,GAAGa,SAAS,GAAGC,WAAW;AACvD,IAAA,GAAGI,eAAe;IAClB,GAAGI,QAAAA;GACJ,CAAC,EAAE,CACFV,OAAO,EACPE,WAAW,EACXI,eAAe,EACflB,SAAS,CACV,CAAC,CAAA;AAEF,EAAA,MAAM+B,kBAAkB,GAAGV,iBAAW,CAAwBC,QAAQ,KAAK;AACzE5B,IAAAA,EAAE,EAAEgB,YAAY;IAChBsB,OAAO,EAAEC,eAAK,CAACf,eAAe,EAAEgB,QAAQ,CAAC,IAAI,CAAChB,eAAe,EAAEgB,QAAQ;AACvE5C,IAAAA,GAAG,EAAEc,iBAAiB;IACtByB,OAAO,EAAEjD,aAAa,KAAK,KAAK,GAC5BY,uCAA2B,GAC3BA,wCAA4B;IAChC,GAAG8B,QAAAA;GACJ,CAAC,EAAE,CACFZ,YAAY,EACZ9B,aAAa,EACbsC,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,MAAMiB,oBAAoB,GAAGd,iBAAW,CAA0BC,QAAQ,KAAK;AAC7E5B,IAAAA,EAAE,EAAEiB,cAAc;IAClBqB,OAAO,EAAEC,eAAK,CAACf,eAAe,EAAEgB,QAAQ,CAAC,IAAIhB,eAAe,EAAEgB,QAAQ;AACtE5C,IAAAA,GAAG,EAAEgB,mBAAmB;IACxBuB,OAAO,EAAEjD,aAAa,KAAK,KAAK,GAC5BY,uCAA2B,GAC3BA,wCAA4B;IAChC,GAAG8B,QAAAA;GACJ,CAAC,EAAE,CACFX,cAAc,EACd/B,aAAa,EACbsC,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,MAAMkB,YAAY,GAAGrB,aAAO,CAAC,OAAO;IAClCrB,EAAE;IACFe,OAAO;IACPC,YAAY;IACZC,cAAc;IACdS,aAAa;IACbG,aAAa;IACbO,aAAa;IACbC,kBAAkB;IAClBI,oBAAoB;IACpB,GAAGjB,eAAAA;GACJ,CAAC,EAAE,CACFxB,EAAE,EACFe,OAAO,EACPC,YAAY,EACZC,cAAc,EACdS,aAAa,EACbG,aAAa,EACbO,aAAa,EACbC,kBAAkB,EAClBI,oBAAoB,EACpBjB,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,MAAMmB,cAAc,GAAGtB,aAAO,CAAC,OAAO;AACpC,IAAA,GAAGhB,KAAK;IACR,iDAAiD,EAAG,GAAEH,sBAAuB,CAAA,EAAA,CAAA;AAC/E,GAAC,CAAwB,EAAE,CACzBG,KAAK,EACLH,sBAAsB,CACvB,CAAC,CAAA;EAEF,IAAI,CAACf,QAAQ,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAE7B,EAAA,oBACEI,KAAA,CAAAC,aAAA,CAACoD,qCAAkB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAAA;GAClCnD,eAAAA,KAAA,CAAAC,aAAA,CAACR,SAAS,EAAAU,MAAA,CAAAC,MAAA,CAAA,EAAA,EACJ2B,WAAW,EAAA;AACf1B,IAAAA,GAAG,EAAEN,YAAa;AAClBe,IAAAA,KAAK,EAAEsC,cAAe;AACtBvD,IAAAA,MAAM,EAAEA,MAAO;AACfF,IAAAA,aAAa,EAAEA,aAAAA;GAEbC,CAAAA,EAAAA,QACO,CACgB,CAAC,CAAA;AAElC,CAAC;;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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;;;;;;;"}
+{"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

@@ -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

@@ -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;;;;;"}
+{"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/SegmentedControl/SegmentedControlContext.js

@@ -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

@@ -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;;;;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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/Modals/Modal/Modal.js.map

@@ -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;;;;"}
+{"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

@@ -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;;;;"}
+{"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;;;;"}

package/dist/cjs/components/Modals/Modal/ModalContent.js

@@ -45,7 +45,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
     "aria-modal": true,
     ref: forwardedRef,
     style: contentStyle
-  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContentContext.default.Provider, {
+  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContentContext.ModalContentContextProvider, {
     value: contextValue
   }, children), showCloseIcon && /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, /*#__PURE__*/React.createElement(Modal_styled.CloseIconButton, null)))))));
 });

package/dist/cjs/components/Modals/Modal/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { document } from '~/src/utils/domUtils'\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  type ModalContentContextValue,\n  type ModalContentProps,\n} from './Modal.types'\nimport ModalContentContext from './ModalContentContext'\nimport { ModalClose } from './ModalHelpers'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef(function ModalContent({\n  children,\n  style,\n  container = document.body,\n  showCloseIcon = false,\n  width = 'max-content',\n  height = 'fit-content',\n  zIndex = ZIndex.Modal,\n  ...rest\n}: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const overlayStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-z-index': ModalContentProps['zIndex']\n  } => ({\n    '--bezier-modal-z-index': zIndex,\n  }), [zIndex])\n\n  const contentStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-width': ModalContentProps['width']\n    '--bezier-modal-height': ModalContentProps['height']\n  } => ({\n    ...style,\n    '--bezier-modal-width': isNumber(width) ? `${width}px` : width,\n    '--bezier-modal-height': isNumber(height) ? `${height}px` : height,\n  }), [\n    style,\n    width,\n    height,\n  ])\n\n  const contextValue = useMemo((): ModalContentContextValue => ({\n    showCloseIcon,\n  }), [showCloseIcon])\n\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <Styled.DialogPrimitiveOverlay style={overlayStyle}>\n        <DialogPrimitive.Content asChild>\n          <Styled.Content\n            aria-modal\n            ref={forwardedRef}\n            style={contentStyle}\n            {...rest}\n          >\n            <Styled.Section>\n              <ModalContentContext.Provider value={contextValue}>\n                { children }\n              </ModalContentContext.Provider>\n\n              { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }\n              { showCloseIcon && (\n                <ModalClose>\n                  <Styled.CloseIconButton />\n                </ModalClose>\n              ) }\n            </Styled.Section>\n          </Styled.Content>\n        </DialogPrimitive.Content>\n      </Styled.DialogPrimitiveOverlay>\n    </DialogPrimitive.Portal>\n  )\n})\n"],"names":["ModalContent","forwardRef","children","style","container","document","body","showCloseIcon","width","height","zIndex","ZIndex","Modal","rest","forwardedRef","overlayStyle","useMemo","contentStyle","isNumber","contextValue","React","createElement","DialogPrimitive","Styled","asChild","Object","assign","ref","ModalContentContext","Provider","value","ModalClose"],"mappings":";;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACA;MACaA,YAAY,gBAAGC,gBAAU,CAAC,SAASD,YAAYA,CAAC;EAC3DE,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAGC,iBAAQ,CAACC,IAAI;AACzBC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,KAAK,GAAG,aAAa;AACrBC,EAAAA,MAAM,GAAG,aAAa;EACtBC,MAAM,GAAGC,aAAM,CAACC,KAAK;EACrB,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAAuC,EAAE;AAC7D,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAEvB;AACJ,IAAA,wBAAwB,EAAEN,MAAAA;AAC5B,GAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEb,EAAA,MAAMO,YAAY,GAAGD,aAAO,CAAC,OAGvB;AACJ,IAAA,GAAGb,KAAK;IACR,sBAAsB,EAAEe,kBAAQ,CAACV,KAAK,CAAC,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA,GAAGA,KAAK;IAC9D,uBAAuB,EAAEU,kBAAQ,CAACT,MAAM,CAAC,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAAA;GAC7D,CAAC,EAAE,CACFN,KAAK,EACLK,KAAK,EACLC,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMU,YAAY,GAAGH,aAAO,CAAC,OAAiC;AAC5DT,IAAAA,aAAAA;AACF,GAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEpB,EAAA,oBACEa,KAAA,CAAAC,aAAA,CAACC,YAAsB,EAAA;AAAClB,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,eAC3CgB,KAAA,CAAAC,aAAA,CAACE,mCAA6B,EAAA;AAACpB,IAAAA,KAAK,EAAEY,YAAAA;AAAa,GAAA,eACjDK,KAAA,CAAAC,aAAA,CAACC,aAAuB,EAAA;IAACE,OAAO,EAAA,IAAA;GAC9BJ,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAAE,MAAA,CAAAC,MAAA,CAAA;IACb,YAAU,EAAA,IAAA;AACVC,IAAAA,GAAG,EAAEb,YAAa;AAClBX,IAAAA,KAAK,EAAEc,YAAAA;AAAa,GAAA,EAChBJ,IAAI,CAERO,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAA,IAAA,eACbH,KAAA,CAAAC,aAAA,CAACO,2BAAmB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEX,YAAAA;GACjCjB,EAAAA,QAC0B,CAAC,EAG7BK,aAAa,iBACba,KAAA,CAAAC,aAAA,CAACU,uBAAU,EACTX,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACE,4BAAsB,EAAA,IAAE,CACf,CAEA,CACF,CACO,CACI,CACT,CAAC,CAAA;AAE7B,CAAC;;;;"}
+{"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { document } from '~/src/utils/domUtils'\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  type ModalContentContextValue,\n  type ModalContentProps,\n} from './Modal.types'\nimport { ModalContentContextProvider } from './ModalContentContext'\nimport { ModalClose } from './ModalHelpers'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef(function ModalContent({\n  children,\n  style,\n  container = document.body,\n  showCloseIcon = false,\n  width = 'max-content',\n  height = 'fit-content',\n  zIndex = ZIndex.Modal,\n  ...rest\n}: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const overlayStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-z-index': ModalContentProps['zIndex']\n  } => ({\n    '--bezier-modal-z-index': zIndex,\n  }), [zIndex])\n\n  const contentStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-width': ModalContentProps['width']\n    '--bezier-modal-height': ModalContentProps['height']\n  } => ({\n    ...style,\n    '--bezier-modal-width': isNumber(width) ? `${width}px` : width,\n    '--bezier-modal-height': isNumber(height) ? `${height}px` : height,\n  }), [\n    style,\n    width,\n    height,\n  ])\n\n  const contextValue = useMemo((): ModalContentContextValue => ({\n    showCloseIcon,\n  }), [showCloseIcon])\n\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <Styled.DialogPrimitiveOverlay style={overlayStyle}>\n        <DialogPrimitive.Content asChild>\n          <Styled.Content\n            aria-modal\n            ref={forwardedRef}\n            style={contentStyle}\n            {...rest}\n          >\n            <Styled.Section>\n              <ModalContentContextProvider value={contextValue}>\n                { children }\n              </ModalContentContextProvider>\n\n              { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }\n              { showCloseIcon && (\n                <ModalClose>\n                  <Styled.CloseIconButton />\n                </ModalClose>\n              ) }\n            </Styled.Section>\n          </Styled.Content>\n        </DialogPrimitive.Content>\n      </Styled.DialogPrimitiveOverlay>\n    </DialogPrimitive.Portal>\n  )\n})\n"],"names":["ModalContent","forwardRef","children","style","container","document","body","showCloseIcon","width","height","zIndex","ZIndex","Modal","rest","forwardedRef","overlayStyle","useMemo","contentStyle","isNumber","contextValue","React","createElement","DialogPrimitive","Styled","asChild","Object","assign","ref","ModalContentContextProvider","value","ModalClose"],"mappings":";;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACA;MACaA,YAAY,gBAAGC,gBAAU,CAAC,SAASD,YAAYA,CAAC;EAC3DE,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAGC,iBAAQ,CAACC,IAAI;AACzBC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,KAAK,GAAG,aAAa;AACrBC,EAAAA,MAAM,GAAG,aAAa;EACtBC,MAAM,GAAGC,aAAM,CAACC,KAAK;EACrB,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAAuC,EAAE;AAC7D,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAEvB;AACJ,IAAA,wBAAwB,EAAEN,MAAAA;AAC5B,GAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEb,EAAA,MAAMO,YAAY,GAAGD,aAAO,CAAC,OAGvB;AACJ,IAAA,GAAGb,KAAK;IACR,sBAAsB,EAAEe,kBAAQ,CAACV,KAAK,CAAC,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA,GAAGA,KAAK;IAC9D,uBAAuB,EAAEU,kBAAQ,CAACT,MAAM,CAAC,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAAA;GAC7D,CAAC,EAAE,CACFN,KAAK,EACLK,KAAK,EACLC,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMU,YAAY,GAAGH,aAAO,CAAC,OAAiC;AAC5DT,IAAAA,aAAAA;AACF,GAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEpB,EAAA,oBACEa,KAAA,CAAAC,aAAA,CAACC,YAAsB,EAAA;AAAClB,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,eAC3CgB,KAAA,CAAAC,aAAA,CAACE,mCAA6B,EAAA;AAACpB,IAAAA,KAAK,EAAEY,YAAAA;AAAa,GAAA,eACjDK,KAAA,CAAAC,aAAA,CAACC,aAAuB,EAAA;IAACE,OAAO,EAAA,IAAA;GAC9BJ,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAAE,MAAA,CAAAC,MAAA,CAAA;IACb,YAAU,EAAA,IAAA;AACVC,IAAAA,GAAG,EAAEb,YAAa;AAClBX,IAAAA,KAAK,EAAEc,YAAAA;AAAa,GAAA,EAChBJ,IAAI,CAAA,eAERO,KAAA,CAAAC,aAAA,CAACE,oBAAc,EACbH,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACO,+CAA2B,EAAA;AAACC,IAAAA,KAAK,EAAEV,YAAAA;GAChCjB,EAAAA,QACyB,CAAC,EAG5BK,aAAa,iBACba,KAAA,CAAAC,aAAA,CAACS,uBAAU,EACTV,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACE,4BAAsB,EAAA,IAAE,CACf,CAEA,CACF,CACO,CACI,CACT,CAAC,CAAA;AAE7B,CAAC;;;;"}

package/dist/cjs/components/Modals/Modal/ModalContentContext.js

@@ -1,13 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var reactUtils = require('../../../utils/reactUtils.js');
 
-var React = require('react');
-
-const ModalContentContext = /*#__PURE__*/React.createContext({
+const [ModalContentContextProvider, useModalContentContext] = reactUtils.createContext({
   showCloseIcon: false
 });
-var ModalContentContext$1 = ModalContentContext;
 
-exports.default = ModalContentContext$1;
+exports.ModalContentContextProvider = ModalContentContextProvider;
+exports.useModalContentContext = useModalContentContext;
 //# sourceMappingURL=ModalContentContext.js.map

package/dist/cjs/components/Modals/Modal/ModalContentContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContentContext.js","sources":["../../../../../src/components/Modals/Modal/ModalContentContext.ts"],"sourcesContent":["import React from 'react'\n\nimport { type ModalContentContextValue } from './Modal.types'\n\nconst ModalContentContext = React.createContext<ModalContentContextValue>({\n  showCloseIcon: false,\n})\n\nexport default ModalContentContext\n"],"names":["ModalContentContext","React","createContext","showCloseIcon"],"mappings":";;;;;;AAIA,MAAMA,mBAAmB,gBAAGC,KAAK,CAACC,aAAa,CAA2B;AACxEC,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC,CAAC,CAAA;AAEF,4BAAeH,mBAAmB;;;;"}
+{"version":3,"file":"ModalContentContext.js","sources":["../../../../../src/components/Modals/Modal/ModalContentContext.ts"],"sourcesContent":["import { createContext } from '~/src/utils/reactUtils'\n\nimport { type ModalContentContextValue } from './Modal.types'\n\nexport const [\n  ModalContentContextProvider,\n  useModalContentContext,\n] = createContext<ModalContentContextValue>({\n  showCloseIcon: false,\n})\n"],"names":["ModalContentContextProvider","useModalContentContext","createContext","showCloseIcon"],"mappings":";;;;AAIO,MAAM,CACXA,2BAA2B,EAC3BC,sBAAsB,CACvB,GAAGC,wBAAa,CAA2B;AAC1CC,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC;;;;;"}

package/dist/cjs/components/Modals/Modal/ModalHeader.js

@@ -59,7 +59,7 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader({
 }, forwardedRef) {
   const {
     showCloseIcon
-  } = React.useContext(ModalContentContext.default);
+  } = ModalContentContext.useModalContentContext();
   const hasTitleArea = title || showCloseIcon;
   const Hidden = hidden ? VisuallyHidden.VisuallyHidden : React.Fragment;
   return /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Modal_styled.Header, Object.assign({

package/dist/cjs/components/Modals/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useContext,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { Typography } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport {\n  type ModalHeaderProps,\n  ModalTitleSize,\n} from './Modal.types'\nimport ModalContentContext from './ModalContentContext'\n\nimport * as Styled from './Modal.styled'\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  switch (size) {\n    case ModalTitleSize.L:\n      return Typography.Size24\n    case ModalTitleSize.M:\n      return Typography.Size16\n    default:\n      return Typography.Size16\n  }\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<Pick<ModalHeaderProps, 'subtitle'> & { size: NonNullable<ModalHeaderProps['titleSize']> }>) {\n  const hasSubtitle = !!subtitle\n  const titleTypo = getTitleTypo(size)\n\n  return (\n    <DialogPrimitive.Title asChild>\n      { hasSubtitle\n        ? (\n          <Styled.HeadingGroup\n            role=\"group\"\n            aria-roledescription=\"Heading group\"\n          >\n            <Styled.Title typo={titleTypo}>\n              { children }\n            </Styled.Title>\n\n            <Text\n              aria-roledescription=\"subtitle\"\n              as=\"p\"\n              bold\n              color=\"txt-black-dark\"\n              typo={Typography.Size13}\n            >\n              { subtitle }\n            </Text>\n          </Styled.HeadingGroup>\n        )\n        : (\n          <Styled.Title typo={titleTypo}>\n            { children }\n          </Styled.Title>\n        ) }\n    </DialogPrimitive.Title>\n  )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef(function ModalHeader({\n  title,\n  subtitle,\n  description,\n  titleSize = ModalTitleSize.L,\n  hidden = false,\n  ...rest\n}: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {\n  const { showCloseIcon } = useContext(ModalContentContext)\n  const hasTitleArea = title || showCloseIcon\n  const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n  return (\n    <Hidden>\n      <Styled.Header\n        ref={forwardedRef}\n        hidden={hidden}\n        {...rest}\n      >\n        { hasTitleArea && (\n          <Styled.TitleContainer>\n            { title && (\n              <ModalHeaderTitle\n                size={titleSize}\n                subtitle={subtitle}\n              >\n                { title }\n              </ModalHeaderTitle>\n            ) }\n\n            { showCloseIcon && (\n              <Styled.CloseIconButtonSpacer />\n            ) }\n          </Styled.TitleContainer>\n        ) }\n\n        { description && (\n          <DialogPrimitive.Description asChild>\n            <Text\n              as=\"p\"\n              color=\"txt-black-darkest\"\n              typo={Typography.Size15}\n            >\n              { description }\n            </Text>\n          </DialogPrimitive.Description>\n        ) }\n      </Styled.Header>\n    </Hidden>\n  )\n})\n"],"names":["getTitleTypo","size","ModalTitleSize","L","Typography","Size24","M","Size16","ModalHeaderTitle","children","subtitle","hasSubtitle","titleTypo","React","createElement","DialogPrimitive","asChild","Styled","role","typo","Text","as","bold","color","Size13","ModalHeader","forwardRef","title","description","titleSize","hidden","rest","forwardedRef","showCloseIcon","useContext","ModalContentContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { Typography } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport {\n  type ModalHeaderProps,\n  ModalTitleSize,\n} from './Modal.types'\nimport { useModalContentContext } from './ModalContentContext'\n\nimport * as Styled from './Modal.styled'\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  switch (size) {\n    case ModalTitleSize.L:\n      return Typography.Size24\n    case ModalTitleSize.M:\n      return Typography.Size16\n    default:\n      return Typography.Size16\n  }\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<Pick<ModalHeaderProps, 'subtitle'> & { size: NonNullable<ModalHeaderProps['titleSize']> }>) {\n  const hasSubtitle = !!subtitle\n  const titleTypo = getTitleTypo(size)\n\n  return (\n    <DialogPrimitive.Title asChild>\n      { hasSubtitle\n        ? (\n          <Styled.HeadingGroup\n            role=\"group\"\n            aria-roledescription=\"Heading group\"\n          >\n            <Styled.Title typo={titleTypo}>\n              { children }\n            </Styled.Title>\n\n            <Text\n              aria-roledescription=\"subtitle\"\n              as=\"p\"\n              bold\n              color=\"txt-black-dark\"\n              typo={Typography.Size13}\n            >\n              { subtitle }\n            </Text>\n          </Styled.HeadingGroup>\n        )\n        : (\n          <Styled.Title typo={titleTypo}>\n            { children }\n          </Styled.Title>\n        ) }\n    </DialogPrimitive.Title>\n  )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef(function ModalHeader({\n  title,\n  subtitle,\n  description,\n  titleSize = ModalTitleSize.L,\n  hidden = false,\n  ...rest\n}: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {\n  const { showCloseIcon } = useModalContentContext()\n  const hasTitleArea = title || showCloseIcon\n  const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n  return (\n    <Hidden>\n      <Styled.Header\n        ref={forwardedRef}\n        hidden={hidden}\n        {...rest}\n      >\n        { hasTitleArea && (\n          <Styled.TitleContainer>\n            { title && (\n              <ModalHeaderTitle\n                size={titleSize}\n                subtitle={subtitle}\n              >\n                { title }\n              </ModalHeaderTitle>\n            ) }\n\n            { showCloseIcon && (\n              <Styled.CloseIconButtonSpacer />\n            ) }\n          </Styled.TitleContainer>\n        ) }\n\n        { description && (\n          <DialogPrimitive.Description asChild>\n            <Text\n              as=\"p\"\n              color=\"txt-black-darkest\"\n              typo={Typography.Size15}\n            >\n              { description }\n            </Text>\n          </DialogPrimitive.Description>\n        ) }\n      </Styled.Header>\n    </Hidden>\n  )\n})\n"],"names":["getTitleTypo","size","ModalTitleSize","L","Typography","Size24","M","Size16","ModalHeaderTitle","children","subtitle","hasSubtitle","titleTypo","React","createElement","DialogPrimitive","asChild","Styled","role","typo","Text","as","bold","color","Size13","ModalHeader","forwardRef","title","description","titleSize","hidden","rest","forwardedRef","showCloseIcon","useModalContentContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}

package/dist/cjs/components/OutlineItem/OutlineItem.js

@@ -8,7 +8,6 @@ var index = require('../../node_modules/classnames/index.js');
 var functionUtils = require('../../utils/functionUtils.js');
 var typeUtils = require('../../utils/typeUtils.js');
 var OutlineItemContext = require('./OutlineItemContext.js');
-var useOutlineItemContext = require('./useOutlineItemContext.js');
 var OutlineItem_styled = require('./OutlineItem.styled.js');
 var Icon_types = require('../Icon/Icon.types.js');
 
@@ -80,7 +79,7 @@ function OutlineItem({
       onClickArrow(name);
     }
   }, [name, onClickArrow]);
-  const context = useOutlineItemContext.default({
+  const context = OutlineItemContext.useOutlineItemContext({
     paddingLeft: givenPaddingLeft,
     active: givenActive,
     onClick: givenOnClick
@@ -146,7 +145,7 @@ function OutlineItem({
       active: currentOutlineItemIndex === index,
       onClick: () => handleClickItem(index, element.props.optionKey)
     };
-    return /*#__PURE__*/React.createElement(OutlineItemContext.OutlineItemContext.Provider, {
+    return /*#__PURE__*/React.createElement(OutlineItemContext.OutlineItemContextProvider, {
       value: passedContext
     }, element);
   }), [children, context, currentOutlineItemIndex, handleClickItem]);

package/dist/cjs/components/OutlineItem/OutlineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\n\nimport type OutlineItemProps from './OutlineItem.types'\nimport { OutlineItemContext } from './OutlineItemContext'\nimport useOutlineItemContext from './useOutlineItemContext'\n\nimport {\n  ChevronWrapper,\n  ContentWrapper,\n  GroupItemWrapper,\n  LeftContentWrapper,\n  StyledIcon,\n} from './OutlineItem.styled'\n\nconst LIST_GROUP_PADDING_LEFT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-react-outline-item'\nexport const OUTLINE_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-outline-item-left-icon'\n\nfunction OutlineItem(\n  {\n    as,\n    testId = OUTLINE_ITEM_TEST_ID,\n    leftIconTestId = OUTLINE_ITEM_LEFT_ICON_TEST_ID,\n    style,\n    className,\n    interpolation,\n    contentClassName,\n    contentInterpolation,\n    iconClassName,\n    iconInterpolation,\n    paddingLeft: givenPaddingLeft,\n    open = false,\n    active: givenActive,\n    focused = false,\n    leftContent,\n    leftIcon,\n    leftIconColor = 'txt-black-dark',\n    disableChevron = false,\n    disableIconActive = false,\n    name,\n    href,\n    content = null,\n    rightContent = null,\n    hide = false,\n    onOpen = noop,\n    onClickArrow = noop,\n    /* OptionMenuHost Props */\n    selectedOutlineItemIndex = null,\n    onChangeOption = noop,\n    /* HTMLAttribute props */\n    onClick: givenOnClick = noop,\n    children,\n  }: OutlineItemProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const [currentOutlineItemIndex, setCurrentOutlineItemIndex] = useState<number | null>(selectedOutlineItemIndex)\n\n  useEffect(() => {\n    const childs = React.Children.toArray(children)\n    if (isNil(selectedOutlineItemIndex)\n      || (selectedOutlineItemIndex < childs.length && selectedOutlineItemIndex < 0)) {\n      setCurrentOutlineItemIndex(null)\n      return\n    }\n\n    const element = childs[selectedOutlineItemIndex]\n\n    if (React.isValidElement(element) && isNil(element.props.children)) {\n      if (element.props.href) { return }\n\n      setCurrentOutlineItemIndex(selectedOutlineItemIndex)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedOutlineItemIndex])\n\n  useEffect(() => {\n    if (open) {\n      onOpen(name)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open])\n\n  const handleClickItem = useCallback((\n    itemIndex: number,\n    optionKey: string,\n  ) => {\n    onChangeOption(name, optionKey, itemIndex)\n  }, [\n    name,\n    onChangeOption,\n  ])\n\n  const handleClickIcon = useCallback((event?: React.MouseEvent<SVGSVGElement>) => {\n    if (onClickArrow) {\n      event?.stopPropagation()\n      onClickArrow(name)\n    }\n  }, [\n    name,\n    onClickArrow,\n  ])\n\n  const context = useOutlineItemContext({\n    paddingLeft: givenPaddingLeft,\n    active: givenActive,\n    onClick: givenOnClick,\n  }, LIST_GROUP_PADDING_LEFT)\n  const { paddingLeft, active, onClick } = context\n\n  const handleClickGroup = useCallback((event?: React.MouseEvent) => {\n    onClick(event, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const chevronComponent = useMemo(() => {\n    if (disableChevron) {\n      return null\n    }\n\n    const chevronSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon\n    const showChevron = !isNil(children)\n\n    return (\n      <ChevronWrapper>\n        { showChevron && (\n          <StyledIcon\n            source={chevronSource}\n            size={IconSize.XS}\n            onClick={handleClickIcon}\n            color=\"txt-black-darker\"\n          />\n        ) }\n      </ChevronWrapper>\n    )\n  }, [\n    children,\n    disableChevron,\n    handleClickIcon,\n    open,\n  ])\n\n  const leftComponent = useMemo(() => {\n    if (!isNil(leftContent)) {\n      return (\n        <LeftContentWrapper>\n          { leftContent }\n        </LeftContentWrapper>\n      )\n    }\n\n    const isIcon = isBezierIcon(leftIcon)\n\n    if (isIcon) {\n      const iconProps = {\n        testId: leftIconTestId,\n        className: classNames(\n          iconClassName,\n          (!disableIconActive && active) && 'active',\n        ),\n        interpolation: iconInterpolation,\n        size: IconSize.S,\n        color: leftIconColor,\n      }\n\n      const Icon = (() => {\n        if (isIcon) {\n          return (\n            <StyledIcon\n              {...iconProps}\n              source={leftIcon}\n            />\n          )\n        }\n        return <></>\n      })()\n\n      return (\n        <LeftContentWrapper>\n          { Icon }\n        </LeftContentWrapper>\n      )\n    }\n\n    return null\n  }, [\n    active,\n    disableIconActive,\n    iconClassName,\n    iconInterpolation,\n    leftContent,\n    leftIcon,\n    leftIconColor,\n    leftIconTestId,\n  ])\n\n  const ContentComponent = useMemo(() => (\n    <>\n      { chevronComponent }\n      { leftComponent }\n      <ContentWrapper\n        className={contentClassName}\n        interpolation={contentInterpolation}\n      >\n        { content }\n      </ContentWrapper>\n      { rightContent }\n    </>\n  ),\n  [\n    chevronComponent,\n    leftComponent,\n    contentClassName,\n    contentInterpolation,\n    content,\n    rightContent,\n  ])\n\n  const Items = useMemo(() => (\n    React.Children.map(children, (element, index) => {\n      if (!React.isValidElement(element)) {\n        return element\n      }\n\n      // eslint-disable-next-line react/jsx-no-constructed-context-values\n      const passedContext = {\n        ...context,\n        active: currentOutlineItemIndex === index,\n        onClick: () => handleClickItem(index, element.props.optionKey),\n      }\n\n      return (\n        <OutlineItemContext.Provider value={passedContext}>\n          { element }\n        </OutlineItemContext.Provider>\n      )\n    })\n  ), [\n    children,\n    context,\n    currentOutlineItemIndex,\n    handleClickItem,\n  ])\n\n  if (hide) { return null }\n\n  if (!isNil(href)) {\n    return (\n      <>\n        <GroupItemWrapper\n          ref={forwardedRef as React.Ref<HTMLAnchorElement>}\n          as=\"a\"\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          style={style}\n          className={className}\n          interpolation={interpolation}\n          active={false}\n          focused={focused}\n          currentOutlineItemIndex={currentOutlineItemIndex}\n          paddingLeft={paddingLeft}\n          onClick={handleClickGroup}\n          data-testid={testId}\n          data-active-index={currentOutlineItemIndex}\n        >\n          { ContentComponent }\n        </GroupItemWrapper>\n        { open && (\n          Items\n        ) }\n      </>\n    )\n  }\n\n  return (\n    <>\n      <GroupItemWrapper\n        as={as}\n        ref={forwardedRef}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        active={active}\n        focused={focused}\n        currentOutlineItemIndex={currentOutlineItemIndex}\n        paddingLeft={paddingLeft}\n        onClick={handleClickGroup}\n        data-testid={testId}\n        data-active-index={currentOutlineItemIndex}\n      >\n        { ContentComponent }\n      </GroupItemWrapper>\n      { open && (\n        Items\n      ) }\n    </>\n  )\n}\n\nexport default forwardRef(OutlineItem)\n"],"names":["LIST_GROUP_PADDING_LEFT","OUTLINE_ITEM_TEST_ID","OUTLINE_ITEM_LEFT_ICON_TEST_ID","OutlineItem","as","testId","leftIconTestId","style","className","interpolation","contentClassName","contentInterpolation","iconClassName","iconInterpolation","paddingLeft","givenPaddingLeft","open","active","givenActive","focused","leftContent","leftIcon","leftIconColor","disableChevron","disableIconActive","name","href","content","rightContent","hide","onOpen","noop","onClickArrow","selectedOutlineItemIndex","onChangeOption","onClick","givenOnClick","children","forwardedRef","currentOutlineItemIndex","setCurrentOutlineItemIndex","useState","useEffect","childs","React","Children","toArray","isNil","length","element","isValidElement","props","handleClickItem","useCallback","itemIndex","optionKey","handleClickIcon","event","stopPropagation","context","useOutlineItemContext","handleClickGroup","chevronComponent","useMemo","chevronSource","ChevronSmallDownIcon","ChevronSmallRightIcon","showChevron","createElement","ChevronWrapper","StyledIcon","source","size","IconSize","XS","color","leftComponent","LeftContentWrapper","isIcon","isBezierIcon","iconProps","classNames","S","Icon","Object","assign","Fragment","ContentComponent","ContentWrapper","Items","map","index","passedContext","OutlineItemContext","Provider","value","GroupItemWrapper","ref","target","rel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"OutlineItem.js","sources":["../../../../src/components/OutlineItem/OutlineItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\n\nimport {\n  ChevronSmallDownIcon,\n  ChevronSmallRightIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { noop } from '~/src/utils/functionUtils'\nimport { isNil } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\n\nimport type OutlineItemProps from './OutlineItem.types'\nimport {\n  OutlineItemContextProvider,\n  useOutlineItemContext,\n} from './OutlineItemContext'\n\nimport {\n  ChevronWrapper,\n  ContentWrapper,\n  GroupItemWrapper,\n  LeftContentWrapper,\n  StyledIcon,\n} from './OutlineItem.styled'\n\nconst LIST_GROUP_PADDING_LEFT = 16\n\nexport const OUTLINE_ITEM_TEST_ID = 'bezier-react-outline-item'\nexport const OUTLINE_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-outline-item-left-icon'\n\nfunction OutlineItem(\n  {\n    as,\n    testId = OUTLINE_ITEM_TEST_ID,\n    leftIconTestId = OUTLINE_ITEM_LEFT_ICON_TEST_ID,\n    style,\n    className,\n    interpolation,\n    contentClassName,\n    contentInterpolation,\n    iconClassName,\n    iconInterpolation,\n    paddingLeft: givenPaddingLeft,\n    open = false,\n    active: givenActive,\n    focused = false,\n    leftContent,\n    leftIcon,\n    leftIconColor = 'txt-black-dark',\n    disableChevron = false,\n    disableIconActive = false,\n    name,\n    href,\n    content = null,\n    rightContent = null,\n    hide = false,\n    onOpen = noop,\n    onClickArrow = noop,\n    /* OptionMenuHost Props */\n    selectedOutlineItemIndex = null,\n    onChangeOption = noop,\n    /* HTMLAttribute props */\n    onClick: givenOnClick = noop,\n    children,\n  }: OutlineItemProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const [currentOutlineItemIndex, setCurrentOutlineItemIndex] = useState<number | null>(selectedOutlineItemIndex)\n\n  useEffect(() => {\n    const childs = React.Children.toArray(children)\n    if (isNil(selectedOutlineItemIndex)\n      || (selectedOutlineItemIndex < childs.length && selectedOutlineItemIndex < 0)) {\n      setCurrentOutlineItemIndex(null)\n      return\n    }\n\n    const element = childs[selectedOutlineItemIndex]\n\n    if (React.isValidElement(element) && isNil(element.props.children)) {\n      if (element.props.href) { return }\n\n      setCurrentOutlineItemIndex(selectedOutlineItemIndex)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedOutlineItemIndex])\n\n  useEffect(() => {\n    if (open) {\n      onOpen(name)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open])\n\n  const handleClickItem = useCallback((\n    itemIndex: number,\n    optionKey: string,\n  ) => {\n    onChangeOption(name, optionKey, itemIndex)\n  }, [\n    name,\n    onChangeOption,\n  ])\n\n  const handleClickIcon = useCallback((event?: React.MouseEvent<SVGSVGElement>) => {\n    if (onClickArrow) {\n      event?.stopPropagation()\n      onClickArrow(name)\n    }\n  }, [\n    name,\n    onClickArrow,\n  ])\n\n  const context = useOutlineItemContext({\n    paddingLeft: givenPaddingLeft,\n    active: givenActive,\n    onClick: givenOnClick,\n  }, LIST_GROUP_PADDING_LEFT)\n  const { paddingLeft, active, onClick } = context\n\n  const handleClickGroup = useCallback((event?: React.MouseEvent) => {\n    onClick(event, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const chevronComponent = useMemo(() => {\n    if (disableChevron) {\n      return null\n    }\n\n    const chevronSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon\n    const showChevron = !isNil(children)\n\n    return (\n      <ChevronWrapper>\n        { showChevron && (\n          <StyledIcon\n            source={chevronSource}\n            size={IconSize.XS}\n            onClick={handleClickIcon}\n            color=\"txt-black-darker\"\n          />\n        ) }\n      </ChevronWrapper>\n    )\n  }, [\n    children,\n    disableChevron,\n    handleClickIcon,\n    open,\n  ])\n\n  const leftComponent = useMemo(() => {\n    if (!isNil(leftContent)) {\n      return (\n        <LeftContentWrapper>\n          { leftContent }\n        </LeftContentWrapper>\n      )\n    }\n\n    const isIcon = isBezierIcon(leftIcon)\n\n    if (isIcon) {\n      const iconProps = {\n        testId: leftIconTestId,\n        className: classNames(\n          iconClassName,\n          (!disableIconActive && active) && 'active',\n        ),\n        interpolation: iconInterpolation,\n        size: IconSize.S,\n        color: leftIconColor,\n      }\n\n      const Icon = (() => {\n        if (isIcon) {\n          return (\n            <StyledIcon\n              {...iconProps}\n              source={leftIcon}\n            />\n          )\n        }\n        return <></>\n      })()\n\n      return (\n        <LeftContentWrapper>\n          { Icon }\n        </LeftContentWrapper>\n      )\n    }\n\n    return null\n  }, [\n    active,\n    disableIconActive,\n    iconClassName,\n    iconInterpolation,\n    leftContent,\n    leftIcon,\n    leftIconColor,\n    leftIconTestId,\n  ])\n\n  const ContentComponent = useMemo(() => (\n    <>\n      { chevronComponent }\n      { leftComponent }\n      <ContentWrapper\n        className={contentClassName}\n        interpolation={contentInterpolation}\n      >\n        { content }\n      </ContentWrapper>\n      { rightContent }\n    </>\n  ),\n  [\n    chevronComponent,\n    leftComponent,\n    contentClassName,\n    contentInterpolation,\n    content,\n    rightContent,\n  ])\n\n  const Items = useMemo(() => (\n    React.Children.map(children, (element, index) => {\n      if (!React.isValidElement(element)) {\n        return element\n      }\n\n      // eslint-disable-next-line react/jsx-no-constructed-context-values\n      const passedContext = {\n        ...context,\n        active: currentOutlineItemIndex === index,\n        onClick: () => handleClickItem(index, element.props.optionKey),\n      }\n\n      return (\n        <OutlineItemContextProvider value={passedContext}>\n          { element }\n        </OutlineItemContextProvider>\n      )\n    })\n  ), [\n    children,\n    context,\n    currentOutlineItemIndex,\n    handleClickItem,\n  ])\n\n  if (hide) { return null }\n\n  if (!isNil(href)) {\n    return (\n      <>\n        <GroupItemWrapper\n          ref={forwardedRef as React.Ref<HTMLAnchorElement>}\n          as=\"a\"\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          style={style}\n          className={className}\n          interpolation={interpolation}\n          active={false}\n          focused={focused}\n          currentOutlineItemIndex={currentOutlineItemIndex}\n          paddingLeft={paddingLeft}\n          onClick={handleClickGroup}\n          data-testid={testId}\n          data-active-index={currentOutlineItemIndex}\n        >\n          { ContentComponent }\n        </GroupItemWrapper>\n        { open && (\n          Items\n        ) }\n      </>\n    )\n  }\n\n  return (\n    <>\n      <GroupItemWrapper\n        as={as}\n        ref={forwardedRef}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        active={active}\n        focused={focused}\n        currentOutlineItemIndex={currentOutlineItemIndex}\n        paddingLeft={paddingLeft}\n        onClick={handleClickGroup}\n        data-testid={testId}\n        data-active-index={currentOutlineItemIndex}\n      >\n        { ContentComponent }\n      </GroupItemWrapper>\n      { open && (\n        Items\n      ) }\n    </>\n  )\n}\n\nexport default forwardRef(OutlineItem)\n"],"names":["LIST_GROUP_PADDING_LEFT","OUTLINE_ITEM_TEST_ID","OUTLINE_ITEM_LEFT_ICON_TEST_ID","OutlineItem","as","testId","leftIconTestId","style","className","interpolation","contentClassName","contentInterpolation","iconClassName","iconInterpolation","paddingLeft","givenPaddingLeft","open","active","givenActive","focused","leftContent","leftIcon","leftIconColor","disableChevron","disableIconActive","name","href","content","rightContent","hide","onOpen","noop","onClickArrow","selectedOutlineItemIndex","onChangeOption","onClick","givenOnClick","children","forwardedRef","currentOutlineItemIndex","setCurrentOutlineItemIndex","useState","useEffect","childs","React","Children","toArray","isNil","length","element","isValidElement","props","handleClickItem","useCallback","itemIndex","optionKey","handleClickIcon","event","stopPropagation","context","useOutlineItemContext","handleClickGroup","chevronComponent","useMemo","chevronSource","ChevronSmallDownIcon","ChevronSmallRightIcon","showChevron","createElement","ChevronWrapper","StyledIcon","source","size","IconSize","XS","color","leftComponent","LeftContentWrapper","isIcon","isBezierIcon","iconProps","classNames","S","Icon","Object","assign","Fragment","ContentComponent","ContentWrapper","Items","map","index","passedContext","OutlineItemContextProvider","value","GroupItemWrapper","ref","target","rel","forwardRef"],"mappings":";;;;;;;;;;;;;AAkCA,MAAMA,uBAAuB,GAAG,EAAE,CAAA;AAE3B,MAAMC,oBAAoB,GAAG,4BAA2B;AACxD,MAAMC,8BAA8B,GAAG,sCAAqC;AAEnF,SAASC,WAAWA,CAClB;EACEC,EAAE;AACFC,EAAAA,MAAM,GAAGJ,oBAAoB;AAC7BK,EAAAA,cAAc,GAAGJ,8BAA8B;EAC/CK,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,gBAAgB;EAChBC,oBAAoB;EACpBC,aAAa;EACbC,iBAAiB;AACjBC,EAAAA,WAAW,EAAEC,gBAAgB;AAC7BC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,EAAEC,WAAW;AACnBC,EAAAA,OAAO,GAAG,KAAK;EACfC,WAAW;EACXC,QAAQ;AACRC,EAAAA,aAAa,GAAG,gBAAgB;AAChCC,EAAAA,cAAc,GAAG,KAAK;AACtBC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,IAAI;EACJC,IAAI;AACJC,EAAAA,OAAO,GAAG,IAAI;AACdC,EAAAA,YAAY,GAAG,IAAI;AACnBC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAGC,kBAAI;AACbC,EAAAA,YAAY,GAAGD,kBAAI;AACnB;AACAE,EAAAA,wBAAwB,GAAG,IAAI;AAC/BC,EAAAA,cAAc,GAAGH,kBAAI;AACrB;EACAI,OAAO,EAAEC,YAAY,GAAGL,kBAAI;AAC5BM,EAAAA,QAAAA;AACgB,CAAC,EACnBC,YAAoC,EACpC;EACA,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGC,cAAQ,CAAgBR,wBAAwB,CAAC,CAAA;AAE/GS,EAAAA,eAAS,CAAC,MAAM;IACd,MAAMC,MAAM,GAAGC,KAAK,CAACC,QAAQ,CAACC,OAAO,CAACT,QAAQ,CAAC,CAAA;AAC/C,IAAA,IAAIU,eAAK,CAACd,wBAAwB,CAAC,IAC7BA,wBAAwB,GAAGU,MAAM,CAACK,MAAM,IAAIf,wBAAwB,GAAG,CAAE,EAAE;MAC/EO,0BAA0B,CAAC,IAAI,CAAC,CAAA;AAChC,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAMS,OAAO,GAAGN,MAAM,CAACV,wBAAwB,CAAC,CAAA;AAEhD,IAAA,kBAAIW,KAAK,CAACM,cAAc,CAACD,OAAO,CAAC,IAAIF,eAAK,CAACE,OAAO,CAACE,KAAK,CAACd,QAAQ,CAAC,EAAE;AAClE,MAAA,IAAIY,OAAO,CAACE,KAAK,CAACzB,IAAI,EAAE;AAAE,QAAA,OAAA;AAAO,OAAA;MAEjCc,0BAA0B,CAACP,wBAAwB,CAAC,CAAA;AACtD,KAAA;AACA;AACF,GAAC,EAAE,CAACA,wBAAwB,CAAC,CAAC,CAAA;AAE9BS,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAI1B,IAAI,EAAE;MACRc,MAAM,CAACL,IAAI,CAAC,CAAA;AACd,KAAA;AACA;AACF,GAAC,EAAE,CAACT,IAAI,CAAC,CAAC,CAAA;EAEV,MAAMoC,eAAe,GAAGC,iBAAW,CAAC,CAClCC,SAAiB,EACjBC,SAAiB,KACd;AACHrB,IAAAA,cAAc,CAACT,IAAI,EAAE8B,SAAS,EAAED,SAAS,CAAC,CAAA;AAC5C,GAAC,EAAE,CACD7B,IAAI,EACJS,cAAc,CACf,CAAC,CAAA;AAEF,EAAA,MAAMsB,eAAe,GAAGH,iBAAW,CAAEI,KAAuC,IAAK;AAC/E,IAAA,IAAIzB,YAAY,EAAE;MAChByB,KAAK,EAAEC,eAAe,EAAE,CAAA;MACxB1B,YAAY,CAACP,IAAI,CAAC,CAAA;AACpB,KAAA;AACF,GAAC,EAAE,CACDA,IAAI,EACJO,YAAY,CACb,CAAC,CAAA;EAEF,MAAM2B,OAAO,GAAGC,wCAAqB,CAAC;AACpC9C,IAAAA,WAAW,EAAEC,gBAAgB;AAC7BE,IAAAA,MAAM,EAAEC,WAAW;AACnBiB,IAAAA,OAAO,EAAEC,YAAAA;GACV,EAAEpC,uBAAuB,CAAC,CAAA;EAC3B,MAAM;IAAEc,WAAW;IAAEG,MAAM;AAAEkB,IAAAA,OAAAA;AAAQ,GAAC,GAAGwB,OAAO,CAAA;AAEhD,EAAA,MAAME,gBAAgB,GAAGR,iBAAW,CAAEI,KAAwB,IAAK;AACjEtB,IAAAA,OAAO,CAACsB,KAAK,EAAEhC,IAAI,CAAC,CAAA;AACtB,GAAC,EAAE,CACDA,IAAI,EACJU,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAM2B,gBAAgB,GAAGC,aAAO,CAAC,MAAM;AACrC,IAAA,IAAIxC,cAAc,EAAE;AAClB,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AAEA,IAAA,MAAMyC,aAAa,GAAGhD,IAAI,GAAGiD,gCAAoB,GAAGC,iCAAqB,CAAA;AACzE,IAAA,MAAMC,WAAW,GAAG,CAACpB,eAAK,CAACV,QAAQ,CAAC,CAAA;AAEpC,IAAA,oBACEO,KAAA,CAAAwB,aAAA,CAACC,iCAAc,EAAA,IAAA,EACXF,WAAW,iBACXvB,KAAA,CAAAwB,aAAA,CAACE,6BAAU,EAAA;AACTC,MAAAA,MAAM,EAAEP,aAAc;MACtBQ,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBvC,MAAAA,OAAO,EAAEqB,eAAgB;AACzBmB,MAAAA,KAAK,EAAC,kBAAA;AAAkB,KACzB,CAEW,CAAC,CAAA;GAEpB,EAAE,CACDtC,QAAQ,EACRd,cAAc,EACdiC,eAAe,EACfxC,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAM4D,aAAa,GAAGb,aAAO,CAAC,MAAM;AAClC,IAAA,IAAI,CAAChB,eAAK,CAAC3B,WAAW,CAAC,EAAE;AACvB,MAAA,oBACEwB,KAAA,CAAAwB,aAAA,CAACS,qCAAkB,EAAA,IAAA,EACfzD,WACgB,CAAC,CAAA;AAEzB,KAAA;AAEA,IAAA,MAAM0D,MAAM,GAAGC,wBAAY,CAAC1D,QAAQ,CAAC,CAAA;AAErC,IAAA,IAAIyD,MAAM,EAAE;AACV,MAAA,MAAME,SAAS,GAAG;AAChB3E,QAAAA,MAAM,EAAEC,cAAc;QACtBE,SAAS,EAAEyE,aAAU,CACnBrE,aAAa,EACZ,CAACY,iBAAiB,IAAIP,MAAM,IAAK,QACpC,CAAC;AACDR,QAAAA,aAAa,EAAEI,iBAAiB;QAChC2D,IAAI,EAAEC,mBAAQ,CAACS,CAAC;AAChBP,QAAAA,KAAK,EAAErD,aAAAA;OACR,CAAA;MAED,MAAM6D,IAAI,GAAG,CAAC,MAAM;AAClB,QAAA,IAAIL,MAAM,EAAE;UACV,oBACElC,KAAA,CAAAwB,aAAA,CAACE,6BAAU,EAAAc,MAAA,CAAAC,MAAA,CAAA,EAAA,EACLL,SAAS,EAAA;AACbT,YAAAA,MAAM,EAAElD,QAAAA;AAAS,WAAA,CAClB,CAAC,CAAA;AAEN,SAAA;QACA,oBAAOuB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAA0C,QAAA,MAAI,CAAC,CAAA;AACd,OAAC,GAAG,CAAA;AAEJ,MAAA,oBACE1C,KAAA,CAAAwB,aAAA,CAACS,qCAAkB,EAAA,IAAA,EACfM,IACgB,CAAC,CAAA;AAEzB,KAAA;AAEA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CACDlE,MAAM,EACNO,iBAAiB,EACjBZ,aAAa,EACbC,iBAAiB,EACjBO,WAAW,EACXC,QAAQ,EACRC,aAAa,EACbhB,cAAc,CACf,CAAC,CAAA;EAEF,MAAMiF,gBAAgB,GAAGxB,aAAO,CAAC,mBAC/BnB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAA0C,QAAA,EAAA,IAAA,EACIxB,gBAAgB,EAChBc,aAAa,eACfhC,KAAA,CAAAwB,aAAA,CAACoB,iCAAc,EAAA;AACbhF,IAAAA,SAAS,EAAEE,gBAAiB;AAC5BD,IAAAA,aAAa,EAAEE,oBAAAA;AAAqB,GAAA,EAElCgB,OACY,CAAC,EACfC,YACF,CACH,EACD,CACEkC,gBAAgB,EAChBc,aAAa,EACblE,gBAAgB,EAChBC,oBAAoB,EACpBgB,OAAO,EACPC,YAAY,CACb,CAAC,CAAA;AAEF,EAAA,MAAM6D,KAAK,GAAG1B,aAAO,CAAC,MACpBnB,KAAK,CAACC,QAAQ,CAAC6C,GAAG,CAACrD,QAAQ,EAAE,CAACY,OAAO,EAAE0C,KAAK,KAAK;AAC/C,IAAA,IAAI,eAAC/C,KAAK,CAACM,cAAc,CAACD,OAAO,CAAC,EAAE;AAClC,MAAA,OAAOA,OAAO,CAAA;AAChB,KAAA;;AAEA;AACA,IAAA,MAAM2C,aAAa,GAAG;AACpB,MAAA,GAAGjC,OAAO;MACV1C,MAAM,EAAEsB,uBAAuB,KAAKoD,KAAK;MACzCxD,OAAO,EAAEA,MAAMiB,eAAe,CAACuC,KAAK,EAAE1C,OAAO,CAACE,KAAK,CAACI,SAAS,CAAA;KAC9D,CAAA;AAED,IAAA,oBACEX,KAAA,CAAAwB,aAAA,CAACyB,6CAA0B,EAAA;AAACC,MAAAA,KAAK,EAAEF,aAAAA;AAAc,KAAA,EAC7C3C,OACwB,CAAC,CAAA;GAEhC,CACF,EAAE,CACDZ,QAAQ,EACRsB,OAAO,EACPpB,uBAAuB,EACvBa,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,IAAIvB,IAAI,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAExB,EAAA,IAAI,CAACkB,eAAK,CAACrB,IAAI,CAAC,EAAE;AAChB,IAAA,oBACEkB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAA0C,QAAA,EAAA,IAAA,eACE1C,KAAA,CAAAwB,aAAA,CAAC2B,mCAAgB,EAAA;AACfC,MAAAA,GAAG,EAAE1D,YAA6C;AAClDlC,MAAAA,EAAE,EAAC,GAAG;AACNsB,MAAAA,IAAI,EAAEA,IAAK;AACXuE,MAAAA,MAAM,EAAC,QAAQ;AACfC,MAAAA,GAAG,EAAC,qBAAqB;AACzB3F,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,aAAa,EAAEA,aAAc;AAC7BQ,MAAAA,MAAM,EAAE,KAAM;AACdE,MAAAA,OAAO,EAAEA,OAAQ;AACjBoB,MAAAA,uBAAuB,EAAEA,uBAAwB;AACjDzB,MAAAA,WAAW,EAAEA,WAAY;AACzBqB,MAAAA,OAAO,EAAE0B,gBAAiB;AAC1B,MAAA,aAAA,EAAaxD,MAAO;MACpB,mBAAmBkC,EAAAA,uBAAAA;AAAwB,KAAA,EAEzCgD,gBACc,CAAC,EACjBvE,IAAI,IACJyE,KAEF,CAAC,CAAA;AAEP,GAAA;AAEA,EAAA,oBACE7C,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAA0C,QAAA,EAAA,IAAA,eACE1C,KAAA,CAAAwB,aAAA,CAAC2B,mCAAgB,EAAA;AACf3F,IAAAA,EAAE,EAAEA,EAAG;AACP4F,IAAAA,GAAG,EAAE1D,YAAa;AAClB/B,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BQ,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,OAAO,EAAEA,OAAQ;AACjBoB,IAAAA,uBAAuB,EAAEA,uBAAwB;AACjDzB,IAAAA,WAAW,EAAEA,WAAY;AACzBqB,IAAAA,OAAO,EAAE0B,gBAAiB;AAC1B,IAAA,aAAA,EAAaxD,MAAO;IACpB,mBAAmBkC,EAAAA,uBAAAA;AAAwB,GAAA,EAEzCgD,gBACc,CAAC,EACjBvE,IAAI,IACJyE,KAEF,CAAC,CAAA;AAEP,CAAA;AAEA,oBAAeU,aAAAA,gBAAU,CAAChG,WAAW,CAAC;;;;;;"}