@os-design/core 1.0.129 → 1.0.132

package/dist/cjs/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/index.tsx"],"names":["hoverStyles","p","disabled","css","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","m","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","resetButtonStyles","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","sizeStyles","Button","ref","type","danger","left","right","loading","size","children","onMouseDown","rest","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width (for example, it can be used in the header).\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Button/index.tsx"],"names":["hoverStyles","p","disabled","css","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","m","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","resetButtonStyles","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","sizeStyles","Button","ref","type","danger","left","right","loading","size","children","onMouseDown","rest","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}

package/dist/cjs/Input/index.js

@@ -23,7 +23,7 @@ var _icons = require("@os-design/icons");
 
 var _getFocusableElements = _interopRequireDefault(require("./utils/getFocusableElements"));
 
-var _excluded = ["type", "left", "leftHasPadding", "right", "rightHasPadding", "disabled", "loading", "containerRef", "containerProps", "size", "onChange"];
+var _excluded = ["type", "left", "leftHasPadding", "right", "rightHasPadding", "disabled", "loading", "containerRef", "containerProps", "size", "value", "onChange"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
@@ -126,6 +126,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$containerProps = _ref.containerProps,
       containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
       size = _ref.size,
+      value = _ref.value,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -180,6 +181,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: disabled,
     hasLeft: !!left,
     hasRight: !!right,
+    value: value || '',
     onChange: function onChange(e) {
       return _onChange(e.target.value, e);
     }

package/dist/cjs/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["hoverStyles","p","disabled","css","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","ref","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","onChange","rest","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","value","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD;AAAA,SAClB,CAACA,CAAC,CAACC,QAAH,QACAC,WADA,sKAIsB,kBAAIF,CAAC,CAACG,KAAF,CAAQC,qBAAZ,CAJtB,CADkB;AAAA,CAApB;;AAUA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACL,CAAD;AAAA,SAClB,CAACA,CAAC,CAACC,QAAH,QACAC,WADA,2KAGoB,kBAAIF,CAAC,CAACG,KAAF,CAAQG,qBAAZ,CAHpB,EAI+B,kBAAIN,CAAC,CAACG,KAAF,CAAQI,qBAAZ,CAJ/B,CADkB;AAAA,CAApB;;AASA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACR,CAAD;AAAA,SACrBA,CAAC,CAACC,QAAF,QACAC,WADA,uSAGW,kBAAIF,CAAC,CAACG,KAAF,CAAQM,sBAAZ,CAHX,EAIsB,kBAAIT,CAAC,CAACG,KAAF,CAAQO,oBAAZ,CAJtB,EAKkB,kBAAIV,CAAC,CAACG,KAAF,CAAQQ,wBAAZ,CALlB,EAWe,kBAAIX,CAAC,CAACG,KAAF,CAAQS,6BAAZ,CAXf,CADqB;AAAA,CAAvB;;AAkBO,IAAMC,cAAc,GAAG,wBAC5B,KAD4B,EAE5B,6BAAiB,UAAjB,EAA6B,MAA7B,CAF4B,CAAH,qTAIvBC,wBAJuB,EAQf,UAACd,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQY,UAAf;AAAA,CARe,EAUL,UAACf,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQa,YAAZ,CAAP;AAAA,CAVK,EAYf,UAAChB,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQc,gBAAf;AAAA,CAZe,EAarB,UAACjB,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQe,gBAAZ,CAAP;AAAA,CAbqB,EAcR,UAAClB,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQgB,YAAf;AAAA,CAdQ,EAgBvBpB,WAhBuB,EAiBvBM,WAjBuB,EAkBvBG,cAlBuB,EAmBvBY,kBAnBuB,EAoBvB,8BAAiB,cAAjB,EAAiC,YAAjC,CApBuB,CAApB;;;AAuBP,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACrB,CAAD;AAAA,SACvB,CAACA,CAAC,CAACsB,OAAH,QACApB,WADA,wGAEkBF,CAAC,CAACG,KAAF,CAAQoB,sBAF1B,CADuB;AAAA,CAAzB;;AAMA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACxB,CAAD;AAAA,SACxB,CAACA,CAAC,CAACyB,QAAH,QACAvB,WADA,yGAEmBF,CAAC,CAACG,KAAF,CAAQoB,sBAF3B,CADwB;AAAA,CAA1B;;AAUO,IAAMG,WAAW,GAAG,wBACzB,OADyB,EAEzB,6BAAiB,SAAjB,EAA4B,UAA5B,CAFyB,CAAH,kSAIpBZ,wBAJoB,EAWb,UAACd,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQwB,cAAZ,CAAP;AAAA,CAXa,EAeX,UAAC3B,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQyB,qBAAZ,CAAP;AAAA,CAfW,EAkBpBP,gBAlBoB,EAmBpBG,iBAnBoB,CAAjB;;AAyBP,IAAMK,KAAK,GAAG,wBAAO,MAAP,EAAe,6BAAiB,YAAjB,CAAf,CAAH,sMAIA,UAAC7B,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQyB,qBAAZ,CAAP;AAAA,CAJA,CAAX;AAWA,IAAME,SAAS,GAAG,wBAAOD,KAAP,CAAH,4GACI,UAAC7B,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQ4B,2BAAf;AAAA,CADJ,EAEX,UAAC/B,CAAD;AAAA,SACAA,CAAC,CAACgC,UAAF,QACA9B,WADA,8GAEkBF,CAAC,CAACG,KAAF,CAAQoB,sBAF1B,CADA;AAAA,CAFW,CAAf;AASA,IAAMU,UAAU,GAAG,wBAAOJ,KAAP,CAAH,6GACE,UAAC7B,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQ4B,2BAAf;AAAA,CADF,EAEZ,UAAC/B,CAAD;AAAA,SACAA,CAAC,CAACgC,UAAF,QACA9B,WADA,+GAEmBF,CAAC,CAACG,KAAF,CAAQoB,sBAF3B,CADA;AAAA,CAFY,CAAhB;AASA;AACA;AACA;;AACA,IAAMW,KAAK,gBAAG,uBACZ,gBAeEC,GAfF,EAgBK;AAAA,uBAdDC,IAcC;AAAA,MAdDA,IAcC,0BAdM,MAcN;AAAA,MAbDC,IAaC,QAbDA,IAaC;AAAA,iCAZDC,cAYC;AAAA,MAZDA,cAYC,oCAZgB,KAYhB;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,kCAVDC,eAUC;AAAA,MAVDA,eAUC,qCAViB,KAUjB;AAAA,2BATDvC,QASC;AAAA,MATDA,QASC,8BATU,KASV;AAAA,0BARDwC,OAQC;AAAA,MARDA,OAQC,6BARS,KAQT;AAAA,MAPDC,YAOC,QAPDA,YAOC;AAAA,iCANDC,cAMC;AAAA,MANDA,cAMC,oCANgB,EAMhB;AAAA,MALDC,IAKC,QALDA,IAKC;AAAA,2BAJDC,QAIC;AAAA,MAJDA,SAIC,8BAJU,YAAM,CAAE,CAIlB;AAAA,MAHEC,IAGF;;AACH,yBACE,4BAAgBJ,YAAhB,CADF;AAAA;AAAA,MAAOK,iBAAP;AAAA,MAA0BC,kBAA1B;;AAGA,MAAMC,UAAU,GAAG,oBACjB;AAAA,WAAOR,OAAO,gBAAG,gCAAC,cAAD,OAAH,GAAiBF,KAA/B;AAAA,GADiB,EAEjB,CAACE,OAAD,EAAUF,KAAV,CAFiB,CAAnB;AAKA,MAAMW,oBAAoB,GAAG,oBAC3B;AAAA,WAAOT,OAAO,GAAG,IAAH,GAAUD,eAAxB;AAAA,GAD2B,EAE3B,CAACC,OAAD,EAAUD,eAAV,CAF2B,CAA7B;AAKA,sBACE,gCAAC,cAAD;AACE,IAAA,QAAQ,EAAEvC,QADZ;AAEE,IAAA,IAAI,EAAE2C,IAFR;AAGE,IAAA,QAAQ,EAAE,CAAC3C,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAH7B;AAIE,IAAA,OAAO,EAAE,iBAACkD,CAAD,EAAO;AACd;AACA;AACA,UAAIlD,QAAQ,IAAIkD,CAAC,CAACC,MAAF,KAAaL,iBAAiB,CAACM,OAA/C,EAAwD;AACxD,UAAMC,iBAAiB,GAAG,sCACxBP,iBAAiB,CAACM,OADM,CAA1B;AAGAC,MAAAA,iBAAiB,CAAC,CAAD,CAAjB,CAAqBC,KAArB;AACD,KAZH;AAaE,IAAA,SAAS,EAAE,mBAACJ,CAAD,EAAO;AAChB;AACA;AACA,UAAMG,iBAAiB,GAAG,sCAAqBE,QAArB,CAA1B;AACA,UAAMC,sBAAsB,GAAGV,iBAAiB,CAACM,OAAlB,GAC3B,sCAAqBN,iBAAiB,CAACM,OAAvC,CAD2B,GAE3B,EAFJ;AAGA,UAAMK,0BAA0B,GAC9BD,sBAAsB,CAAC,CAAD,CAAtB,KAA8BD,QAAQ,CAACG,aADzC;;AAEA,UAAID,0BAA0B,IAAIP,CAAC,CAACS,GAAF,KAAU,KAAxC,IAAiDT,CAAC,CAACU,QAAvD,EAAiE;AAC/D,YAAMC,mBAAmB,GAAGR,iBAAiB,CAACS,SAAlB,CAC1B,UAACC,EAAD;AAAA,iBAAQA,EAAE,KAAKjB,iBAAiB,CAACM,OAAjC;AAAA,SAD0B,CAA5B;AAGA,YAAIS,mBAAmB,KAAK,CAA5B,EAA+B;AAC/B,YAAMG,2BAA2B,GAC/BX,iBAAiB,CAACQ,mBAAmB,GAAG,CAAvB,CADnB;AAEAG,QAAAA,2BAA2B,CAACV,KAA5B;AACD;AACF,KA/BH;AAgCE,IAAA,GAAG,EAAEP;AAhCP,KAiCML,cAjCN,GAmCGN,IAAI,iBACH,gCAAC,uBAAD;AAAgB,IAAA,SAAS,EAAE;AAAE6B,MAAAA,uBAAuB,EAAE;AAA3B;AAA3B,kBACE,gCAAC,SAAD;AAAW,IAAA,UAAU,EAAE5B;AAAvB,KAAwCD,IAAxC,CADF,CApCJ,eAyCE,gCAAC,WAAD;AACE,IAAA,IAAI,EAAED,IADR;AAEE,IAAA,QAAQ,EAAEnC,QAFZ;AAGE,IAAA,OAAO,EAAE,CAAC,CAACoC,IAHb;AAIE,IAAA,QAAQ,EAAE,CAAC,CAACE,KAJd;AAKE,IAAA,QAAQ,EAAE,kBAACY,CAAD;AAAA,aAAON,SAAQ,CAACM,CAAC,CAACC,MAAF,CAASe,KAAV,EAAiBhB,CAAjB,CAAf;AAAA;AALZ,KAMML,IANN;AAOE,IAAA,GAAG,EAAEX;AAPP,KAzCF,EAmDGc,UAAU,iBACT,gCAAC,uBAAD;AAAgB,IAAA,SAAS,EAAE;AAAEiB,MAAAA,uBAAuB,EAAE;AAA3B;AAA3B,kBACE,gCAAC,UAAD;AAAY,IAAA,UAAU,EAAEhB;AAAxB,KACGD,UADH,CADF,CApDJ,CADF;AA6DD,CA5FW,CAAd;AA+FAf,KAAK,CAACkC,WAAN,GAAoB,OAApB;eAEelC,K","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["hoverStyles","p","disabled","css","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","ref","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}

package/dist/cjs/Modal/index.js

@@ -31,7 +31,7 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
 
-var _excluded = ["title", "okText", "okDanger", "okLoading", "okDisabled", "header", "footer", "visible", "locale", "onClose", "onOk", "size", "id", "children"];
+var _excluded = ["title", "okText", "okDanger", "okLoading", "okDisabled", "header", "footer", "visible", "locale", "onClose", "onOk", "size", "id", "onClick", "children"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
@@ -163,6 +163,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onOk = _ref.onOk,
       size = _ref.size,
       id = _ref.id,
+      _ref$onClick = _ref.onClick,
+      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -173,7 +175,6 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
   (0, _utils.useBodyScroll)(!visible);
-  (0, _utils.useClickOutside)(contentRef, onClose);
   (0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   var titleId = (0, _react.useMemo)(function () {
     return "modal-title-".concat(Math.random().toString(36).slice(2, 11));
@@ -184,11 +185,18 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   if (!mounted) return null;
   return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(ModalMask, {
     visible: visible
-  }), /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(Container, {
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
     autoFocus: false
   }, /*#__PURE__*/_react["default"].createElement(Content, {
     visible: visible,
     size: size,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      _onClick(e);
+    },
     role: "dialog",
     "aria-modal": true,
     "aria-labelledby": header === undefined ? titleId : undefined,

package/dist/cjs/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","children","rest","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useClickOutside,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useClickOutside(contentRef, onClose);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"file":"index.js"}

package/dist/cjs/RadioGroup/index.js

@@ -19,12 +19,14 @@ var _media = require("@os-design/media");
 
 var _theming = require("@os-design/theming");
 
+var _react2 = require("@emotion/react");
+
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _excluded = ["options", "disabled", "value", "defaultValue", "onChange", "size"],
+var _excluded = ["options", "wide", "disabled", "value", "defaultValue", "onChange", "size"],
     _excluded2 = ["title", "value", "disabled", "onClick"];
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -52,12 +54,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled', 'size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ", "em;\n  overflow: hidden;\n  border: 1px solid\n    ", ";\n\n  ", " {\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  }\n\n  ", ";\n"])), function (p) {
+var wideDefaultStyles = function wideDefaultStyles(p) {
+  return p.wide === 'default' && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", " {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  "])), _media.m.max.xxs);
+};
+
+var wideAlwaysStyles = function wideAlwaysStyles(p) {
+  return p.wide === 'always' && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  "])));
+};
+
+var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('wide', 'disabled', 'size'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ", "em;\n  overflow: hidden;\n  border: 1px solid\n    ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.borderRadius;
 }, function (p) {
   return p.disabled ? (0, _theming.clr)(p.theme.buttonDisabledGhostColorText) : (0, _theming.clr)(p.theme.colorPrimary);
-}, _media.m.max.xxs, _styles.sizeStyles);
-var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0;\n"])));
+}, wideDefaultStyles, wideAlwaysStyles, _styles.sizeStyles);
+var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 0;\n"])));
 /**
  * The radio buttons that allow a user to select only one of a limited number of options.
  */
@@ -65,6 +75,8 @@ var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject2
 var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
+      _ref$wide = _ref.wide,
+      wide = _ref$wide === void 0 ? 'default' : _ref$wide,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       value = _ref.value,
@@ -84,6 +96,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setForwardedValue = _useForwardedState2[1];
 
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
+    wide: wide,
     disabled: disabled,
     size: size
   }, rest, {

package/dist/cjs/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","p","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","m","max","xxs","sizeStyles","StyledButton","Button","RadioGroup","ref","options","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAMA,SAAS,GAAG,wBAChB,KADgB,EAEhB,6BAAiB,UAAjB,EAA6B,MAA7B,CAFgB,CAAH,6RAOI,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,YAAf;AAAA,CAPJ,EAUT,UAACF,CAAD;AAAA,SACAA,CAAC,CAACG,QAAF,GACI,kBAAIH,CAAC,CAACC,KAAF,CAAQG,4BAAZ,CADJ,GAEI,kBAAIJ,CAAC,CAACC,KAAF,CAAQI,YAAZ,CAHJ;AAAA,CAVS,EAeXC,SAAEC,GAAF,CAAMC,GAfK,EAsBXC,kBAtBW,CAAf;AAyBA,IAAMC,YAAY,GAAG,wBAAOC,kBAAP,CAAH,8FAAlB;AAIA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDX,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDY,KAOC,QAPDA,KAOC;AAAA,MANDC,YAMC,QANDA,YAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,2BAA4C,8BAAkB;AAC5DJ,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,0DACE,gCAAC,SAAD;AAAW,IAAA,QAAQ,EAAElB,QAArB;AAA+B,IAAA,IAAI,EAAEe;AAArC,KAA+CC,IAA/C;AAAqD,IAAA,GAAG,EAAEN;AAA1D,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAEQ,GAAT,CACC;AAAA,QACEC,KADF,SACEA,KADF;AAAA,QAESC,WAFT,SAEET,KAFF;AAAA,QAGYU,cAHZ,SAGEtB,QAHF;AAAA,8BAIEuB,OAJF;AAAA,QAIEA,QAJF,8BAIY,YAAM,CAAE,CAJpB;AAAA,QAKKC,UALL;;AAAA,wBAOE,gCAAC,YAAD;AACE,MAAA,GAAG,EAAEH,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAErB,QAAQ,IAAIsB,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACG,CAAD,EAAO;AACdP,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACE,CAAD,CAAP;AACD;AARH,OASMD,UATN,GAWGJ,KAXH,CAPF;AAAA,GADD,CADH,CADF,CADF;AA6BD,CAhDgB,CAAnB;AAmDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;eAEejB,U","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\ninterface ContainerProps extends WithSize {\n  disabled: boolean;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${m.max.xxs} {\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  }\n\n  ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container disabled={disabled} size={size} {...rest} ref={ref}>\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["wideDefaultStyles","p","wide","css","m","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","sizeStyles","StyledButton","Button","RadioGroup","ref","options","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;AAAA,SACxBA,CAAC,CAACC,IAAF,KAAW,SAAX,QACAC,WADA,iKAEIC,SAAEC,GAAF,CAAMC,GAFV,CADwB;AAAA,CAA1B;;AAWA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACN,CAAD;AAAA,SACvBA,CAAC,CAACC,IAAF,KAAW,QAAX,QACAC,WADA,uIADuB;AAAA,CAAzB;;AAWA,IAAMK,SAAS,GAAG,wBAChB,KADgB,EAEhB,6BAAiB,MAAjB,EAAyB,UAAzB,EAAqC,MAArC,CAFgB,CAAH,qOAOI,UAACP,CAAD;AAAA,SAAOA,CAAC,CAACQ,KAAF,CAAQC,YAAf;AAAA,CAPJ,EAUT,UAACT,CAAD;AAAA,SACAA,CAAC,CAACU,QAAF,GACI,kBAAIV,CAAC,CAACQ,KAAF,CAAQG,4BAAZ,CADJ,GAEI,kBAAIX,CAAC,CAACQ,KAAF,CAAQI,YAAZ,CAHJ;AAAA,CAVS,EAeXb,iBAfW,EAgBXO,gBAhBW,EAiBXO,kBAjBW,CAAf;AAoBA,IAAMC,YAAY,GAAG,wBAAOC,kBAAP,CAAH,8FAAlB;AAIA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,uBACjB,gBAWEC,GAXF,EAYK;AAAA,0BAVDC,OAUC;AAAA,MAVDA,OAUC,6BAVS,EAUT;AAAA,uBATDjB,IASC;AAAA,MATDA,IASC,0BATM,SASN;AAAA,2BARDS,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDS,KAOC,QAPDA,KAOC;AAAA,MANDC,YAMC,QANDA,YAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,2BAA4C,8BAAkB;AAC5DJ,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,0DACE,gCAAC,SAAD;AACE,IAAA,IAAI,EAAExB,IADR;AAEE,IAAA,QAAQ,EAAES,QAFZ;AAGE,IAAA,IAAI,EAAEY;AAHR,KAIMC,IAJN;AAKE,IAAA,GAAG,EAAEN;AALP,MAOGC,OAPH,aAOGA,OAPH,uBAOGA,OAAO,CAAEQ,GAAT,CACC;AAAA,QACEC,KADF,SACEA,KADF;AAAA,QAESC,WAFT,SAEET,KAFF;AAAA,QAGYU,cAHZ,SAGEnB,QAHF;AAAA,8BAIEoB,OAJF;AAAA,QAIEA,QAJF,8BAIY,YAAM,CAAE,CAJpB;AAAA,QAKKC,UALL;;AAAA,wBAOE,gCAAC,YAAD;AACE,MAAA,GAAG,EAAEH,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAElB,QAAQ,IAAImB,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACG,CAAD,EAAO;AACdP,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACE,CAAD,CAAP;AACD;AARH,OASMD,UATN,GAWGJ,KAXH,CAPF;AAAA,GADD,CAPH,CADF,CADF;AAmCD,CAvDgB,CAAnB;AA0DAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;eAEejB,U","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group has full width.\n   * Possible values:\n   * `default` – the radio group has full width if the screen width is less than xs;\n   * `always` – the radio group always has full width;\n   * `never` – the radio group never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>> &\n  WithSize;\nconst Container = styled(\n  'div',\n  omitEmotionProps('wide', 'disabled', 'size')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n  ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      wide = 'default',\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container\n          wide={wide}\n          disabled={disabled}\n          size={size}\n          {...rest}\n          ref={ref}\n        >\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}

package/dist/esm/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/index.tsx"],"names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width (for example, it can be used in the header).\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Button/index.tsx"],"names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}

package/dist/esm/Input/index.js

@@ -122,6 +122,7 @@ const Input = /*#__PURE__*/forwardRef(({
   containerRef,
   containerProps = {},
   size,
+  value,
   onChange = () => {},
   ...rest
 }, ref) => {
@@ -165,6 +166,7 @@ const Input = /*#__PURE__*/forwardRef(({
     disabled: disabled,
     hasLeft: !!left,
     hasRight: !!right,
+    value: value || '',
     onChange: e => onChange(e.target.value, e)
   }, rest, {
     ref: ref

package/dist/esm/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["React","forwardRef","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","value","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["React","forwardRef","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}

package/dist/esm/Modal/index.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { forwardRef, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import styled from '@emotion/styled';
-import { useBodyScroll, useClickOutside, useKeyPress, useClosable, omitEmotionProps } from '@os-design/utils';
+import { useBodyScroll, useKeyPress, useClosable, omitEmotionProps } from '@os-design/utils';
 import { ellipsisStyles, enableScrollingStyles, sizeStyles } from '@os-design/styles';
 import { m } from '@os-design/media';
 import { css, keyframes } from '@emotion/react';
@@ -181,6 +181,7 @@ const Modal = /*#__PURE__*/forwardRef(({
   onOk,
   size,
   id,
+  onClick = () => {},
   children,
   ...rest
 }, ref) => {
@@ -190,18 +191,23 @@ const Modal = /*#__PURE__*/forwardRef(({
   } = useTheme();
   const mounted = useClosable(visible, theme.transitionDelay);
   useBodyScroll(!visible);
-  useClickOutside(contentRef, onClose);
   useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
   const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
   if (!mounted) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
-  }), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(FocusLock, {
+  }), /*#__PURE__*/React.createElement(Container, {
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: false
   }, /*#__PURE__*/React.createElement(Content, {
     visible: visible,
     size: size,
+    onClick: e => {
+      e.stopPropagation();
+      onClick(e);
+    },
     role: "dialog",
     "aria-modal": true,
     "aria-labelledby": header === undefined ? titleId : undefined,

package/dist/esm/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useClickOutside","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useClickOutside,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useClickOutside(contentRef, onClose);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,EAAqCC,MAArC,QAAmD,OAAnD;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,aADF,EAEEC,WAFF,EAGEC,WAHF,EAIEC,gBAJF,QAKO,kBALP;AAMA,SACEC,cADF,EAEEC,qBAFF,EAGEC,UAHF,QAKO,mBALP;AAMA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,EAAcC,SAAd,QAA+B,gBAA/B;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,GAAT,EAAcC,cAAd,EAA8BC,QAA9B,QAA8C,oBAA9C;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAA2C,uBAA3C;AAgEA,MAAMC,uBAAuB,GAAG,IAAhC;AACA,MAAMC,wBAAwB,GAAG,CAAjC;AAEA,MAAMC,UAAU,GAAGV,SAAU;AAC7B;AACA;AACA,CAHA;AAKA,MAAMW,WAAW,GAAGX,SAAU;AAC9B;AACA;AACA,CAHA;;AAKA,MAAMY,iBAAiB,GAAIC,CAAD,IACxBA,CAAC,CAACC,OAAF,IACAf,GAAI;AACN,iBAAiBW,UAAW,IAAGG,CAAC,CAACE,KAAF,CAAQC,eAAgB;AACvD,GAJA;;AAMA,MAAMC,mBAAmB,GAAIJ,CAAD,IAC1B,CAACA,CAAC,CAACC,OAAH,IACAf,GAAI;AACN,iBAAiBY,WAAY,IAAGE,CAAC,CAACE,KAAF,CAAQC,eAAgB;AACxD,GAJA;;AAOA,OAAO,MAAME,SAAS,GAAG5B,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,SAAD,CAAxB,CAAgD;AAC/E;AACA;AACA;AACA;AACA;AACA,sBAAuBmB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQI,gBAAT,CAA2B;AAC3D,aAAaX,uBAAwB;AACrC,IAAII,iBAAkB;AACtB,IAAIK,mBAAoB;AACxB,CAVO;AAYP,MAAMG,SAAS,GAAG9B,MAAM,CAAC+B,GAAI;AAC7B;AACA;AACA;AACA;AACA;AACA,aAAab,uBAAwB;AACrC;AACA,IAAIV,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,MAAM3B,qBAAqB,CAAC,GAAD,CAAM;AACjC;AACA,CAXA;AAaA,MAAM4B,aAAa,GAAGxB,SAAU;AAChC,6DAA6DS,wBAAyB;AACtF;AACA,CAHA;AAKA,MAAMgB,cAAc,GAAGzB,SAAU;AACjC;AACA,2DAA2DS,wBAAyB;AACpF,CAHA;AAKA,MAAMiB,eAAe,GAAG1B,SAAU;AAClC,8CAA8CS,wBAAyB;AACvE;AACA,CAHA;AAKA,MAAMkB,gBAAgB,GAAG3B,SAAU;AACnC;AACA,4CAA4CS,wBAAyB;AACrE,CAHA;;AAKA,MAAMmB,oBAAoB,GAAIf,CAAD,IAC3BA,CAAC,CAACC,OAAF,IACAf,GAAI;AACN,iBAAiByB,aAAc,IAAGX,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC1D,MAAMlB,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACf,mBAAmBG,eAAgB,IAAGb,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC9D;AACA,GAPA;;AASA,MAAMa,sBAAsB,GAAIhB,CAAD,IAC7B,CAACA,CAAC,CAACC,OAAH,IACAf,GAAI;AACN,iBAAiB0B,cAAe,IAAGZ,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC3D,MAAMlB,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACf,mBAAmBI,gBAAiB,IAAGd,CAAC,CAACE,KAAF,CAAQC,eAAgB;AAC/D;AACA,GAPA;;AAUA,MAAMc,OAAO,GAAGxC,MAAM,CACpB,KADoB,EAEpBI,gBAAgB,CAAC,SAAD,EAAY,MAAZ,CAFI,CAGN;AAChB;AACA;AACA;AACA;AACA;AACA,sBAAuBmB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQgB,OAAT,CAAkB;AAClD,WAAYlB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQiB,SAAT,CAAoB;AACzC,oBAAoBvB,wBAAyB;AAC7C,MAAOI,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQkB,mBAAT,CAA8B;AAC9C;AACA;AACA;AACA,mBAAoBpB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,YAAa;AAC/C,MAAOrB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,YAAa;AAClC;AACA,IAAIpC,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,aAAcV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQoB,UAAW;AACvC;AACA,qBAAsBtB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,YAAa;AACjD;AACA;AACA,mBAAoBrB,CAAD,IAAO,CAACA,CAAC,CAACE,KAAF,CAAQoB,UAAT,GAAsB,CAAE;AAClD;AACA;AACA,IAAIP,oBAAqB;AACzB,IAAIC,sBAAuB;AAC3B,IAAIhC,UAAW;AACf,CA/BA;AAiCA,MAAMuC,MAAM,GAAG9C,MAAM,CAAC+B,GAAI;AAC1B;AACA,YAAaR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQsB,iBAAkB;AAC7C,6BAA8BxB,CAAD,IAAOX,GAAG,CAACW,CAAC,CAACE,KAAF,CAAQuB,4BAAT,CAAuC;AAC9E;AACA;AACA;AACA;AACA;AACA,kBAAmBzB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AAC/D,mBAAoB1B,CAAD,IACf2B,IAAI,CAACC,GAAL,CACE5B,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,IAAwC1B,CAAC,CAACE,KAAF,CAAQ2B,uBADlD,EAEE,CAFF,CAGE;AACN;AACA,IAAI5C,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,oBAAqBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AACjE,qBAAsB1B,CAAD,IACf2B,IAAI,CAACC,GAAL,CACE5B,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,IAAwC1B,CAAC,CAACE,KAAF,CAAQ2B,uBADlD,EAEE,CAFF,CAGE;AACR;AACA,CAxBA;AA0BA,MAAMC,KAAK,GAAGrD,MAAM,CAAC+B,GAAI;AACzB;AACA,eAAgBR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQ6B,KAAR,CAAcC,KAAM;AAC1C;AACA,IAAIlD,cAAe;AACnB,CALA;AAOA,MAAMmD,IAAI,GAAGxD,MAAM,CAAC+B,GAAI;AACxB;AACA;AACA,aAAcR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AACxD,MAAOlC,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AACnD;AACA,IAAIzC,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb,eAAgBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AAC1D,QAASlC,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AACrD;AACA;AACA,IAAI3C,qBAAqB,CAAC,GAAD,CAAM;AAC/B,CAZA;AAcA,MAAMoD,MAAM,GAAG1D,MAAM,CAAC+B,GAAI;AAC1B,eAAgBR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AAC5D,MAAO1B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AACjD;AACA,IAAIjD,CAAC,CAACwB,GAAF,CAAMC,EAAG;AACb;AACA;AACA;AACA;AACA,iBAAkBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQwB,0BAAR,CAAmC,CAAnC,CAAsC;AAC9D,QAAS1B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQgC,wBAAR,CAAiC,CAAjC,CAAoC;AACnD;AACA,CAZA;AAcA;AACA;AACA;;AACA,MAAME,KAAK,gBAAG/D,UAAU,CACtB,CACE;AACEgE,EAAAA,KADF;AAEEC,EAAAA,MAAM,GAAG,IAFX;AAGEC,EAAAA,QAAQ,GAAG,KAHb;AAIEC,EAAAA,SAAS,GAAG,KAJd;AAKEC,EAAAA,UAAU,GAAG,KALf;AAMEC,EAAAA,MANF;AAOEC,EAAAA,MAPF;AAQE1C,EAAAA,OAAO,GAAG,KARZ;AASE2C,EAAAA,MAAM,GAAGlD,aATX;AAUEmD,EAAAA,OAAO,GAAG,MAAM,CAAE,CAVpB;AAWEC,EAAAA,IAXF;AAYEC,EAAAA,IAZF;AAaEC,EAAAA,EAbF;AAcEC,EAAAA,OAAO,GAAG,MAAM,CAAE,CAdpB;AAeEC,EAAAA,QAfF;AAgBE,KAAGC;AAhBL,CADF,EAmBEC,GAnBF,KAoBK;AACH,QAAMC,UAAU,GAAG9E,MAAM,CAAiB,IAAjB,CAAzB;AACA,QAAM;AAAE2B,IAAAA;AAAF,MAAYX,QAAQ,EAA1B;AACA,QAAM+D,OAAO,GAAG1E,WAAW,CAACqB,OAAD,EAAUC,KAAK,CAACC,eAAhB,CAA3B;AACAzB,EAAAA,aAAa,CAAC,CAACuB,OAAF,CAAb;AACAtB,EAAAA,WAAW,CACR,OAAO4E,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SADjC,EAET,QAFS,EAGTX,OAHS,CAAX;AAMA,QAAMY,OAAO,GAAGnF,OAAO,CACrB,MAAO,eAAcqD,IAAI,CAAC+B,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EADxC,EAErB,EAFqB,CAAvB;AAIA,QAAMC,MAAM,GAAGvF,OAAO,CACpB,MAAM0E,EAAE,IAAK,cAAarB,IAAI,CAAC+B,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EAD9C,EAEpB,CAACZ,EAAD,CAFoB,CAAtB;AAKA,MAAI,CAACM,OAAL,EAAc,OAAO,IAAP;AAEd,sBACE,oBAAC,MAAD,qBACE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAErD;AAApB,IADF,eAEE,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAE4C;AAApB,kBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAE;AAAtB,kBACE,oBAAC,OAAD;AACE,IAAA,OAAO,EAAE5C,OADX;AAEE,IAAA,IAAI,EAAE8C,IAFR;AAGE,IAAA,OAAO,EAAGe,CAAD,IAAO;AACdA,MAAAA,CAAC,CAACC,eAAF;AACAd,MAAAA,OAAO,CAACa,CAAD,CAAP;AACD,KANH;AAOE,IAAA,IAAI,EAAC,QAPP;AAQE,sBARF;AASE,uBAAiBpB,MAAM,KAAKc,SAAX,GAAuBC,OAAvB,GAAiCD,SATpD;AAUE,wBAAkBK,MAVpB;AAWE,IAAA,GAAG,EAAER;AAXP,KAaGX,MAAM,KAAKc,SAAX,gBACC,oBAAC,cAAD;AACE,IAAA,SAAS,EAAGQ,CAAD,KAAQ;AACjBnC,MAAAA,uBAAuB,EACrBmC,CAAC,CAACC;AAFa,KAAR;AADb,kBAME,oBAAC,MAAD,qBACE,oBAAC,KAAD;AAAO,IAAA,EAAE,EAAER;AAAX,KAAqBpB,KAArB,CADF,eAEE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAEQ,OAHX;AAIE,kBAAYD,MAAM,CAACsB;AAJrB,kBAME,oBAAC,KAAD,OANF,CAFF,CANF,CADD,GAoBCxB,MAjCJ,eAoCE,oBAAC,IAAD;AAAM,IAAA,EAAE,EAAEmB;AAAV,KAAsBV,IAAtB;AAA4B,IAAA,GAAG,EAAEC;AAAjC,MACGF,QADH,CApCF,EAwCGP,MAAM,KAAKa,SAAX,gBACC,oBAAC,MAAD,qBACE,oBAAC,MAAD;AACE,IAAA,MAAM,EAAEjB,QADV;AAEE,IAAA,OAAO,EAAEC,SAFX;AAGE,IAAA,QAAQ,EAAEC,UAHZ;AAIE,IAAA,OAAO,EAAEK;AAJX,KAMGR,MANH,CADF,CADD,GAYCK,MApDJ,CADF,CADF,CAFF,CADF;AAgED,CA3GqB,CAAxB;AA8GAP,KAAK,CAAC+B,WAAN,GAAoB,OAApB;AAEA,eAAe/B,KAAf","sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"file":"index.js"}

package/dist/esm/RadioGroup/index.js

@@ -6,8 +6,26 @@ import { omitEmotionProps, useForwardedState } from '@os-design/utils';
 import styled from '@emotion/styled';
 import { m } from '@os-design/media';
 import { clr } from '@os-design/theming';
+import { css } from '@emotion/react';
 import Button from '../Button';
-const Container = styled('div', omitEmotionProps('disabled', 'size'))`
+
+const wideDefaultStyles = p => p.wide === 'default' && css`
+    ${m.max.xxs} {
+      width: 100%;
+      & > button {
+        flex: 1;
+      }
+    }
+  `;
+
+const wideAlwaysStyles = p => p.wide === 'always' && css`
+    width: 100%;
+    & > button {
+      flex: 1;
+    }
+  `;
+
+const Container = styled('div', omitEmotionProps('wide', 'disabled', 'size'))`
   display: inline-flex;
   flex-wrap: wrap;
 
@@ -16,13 +34,8 @@ const Container = styled('div', omitEmotionProps('disabled', 'size'))`
   border: 1px solid
     ${p => p.disabled ? clr(p.theme.buttonDisabledGhostColorText) : clr(p.theme.colorPrimary)};
 
-  ${m.max.xxs} {
-    width: 100%;
-    & > button {
-      flex: 1;
-    }
-  }
-
+  ${wideDefaultStyles};
+  ${wideAlwaysStyles};
   ${sizeStyles};
 `;
 const StyledButton = styled(Button)`
@@ -34,6 +47,7 @@ const StyledButton = styled(Button)`
 
 const RadioGroup = /*#__PURE__*/forwardRef(({
   options = [],
+  wide = 'default',
   disabled = false,
   value,
   defaultValue,
@@ -47,6 +61,7 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
     onChange
   });
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, _extends({
+    wide: wide,
     disabled: disabled,
     size: size
   }, rest, {

package/dist/esm/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","clr","Button","Container","p","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","max","xxs","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,kBAApD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,MAAP,MAAoC,WAApC;AAiDA,MAAMC,SAAS,GAAGJ,MAAM,CACtB,KADsB,EAEtBF,gBAAgB,CAAC,UAAD,EAAa,MAAb,CAFM,CAGN;AAClB;AACA;AACA;AACA,mBAAoBO,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,YAAa;AAC/C;AACA;AACA,MAAOF,CAAD,IACAA,CAAC,CAACG,QAAF,GACIN,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQG,4BAAT,CADP,GAEIP,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQI,YAAT,CAAuB;AACpC;AACA,IAAIT,CAAC,CAACU,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIf,UAAW;AACf,CAvBA;AAyBA,MAAMgB,YAAY,GAAGb,MAAM,CAACG,MAAD,CAAS;AACpC;AACA,CAFA;AAIA;AACA;AACA;;AACA,MAAMW,UAAU,gBAAGlB,UAAU,CAC3B,CACE;AACEmB,EAAAA,OAAO,GAAG,EADZ;AAEEP,EAAAA,QAAQ,GAAG,KAFb;AAGEQ,EAAAA,KAHF;AAIEC,EAAAA,YAJF;AAKEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CALrB;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;AACH,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCxB,iBAAiB,CAAC;AAC5DiB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,8CACE,oBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEV,QAArB;AAA+B,IAAA,IAAI,EAAEW;AAArC,KAA+CC,IAA/C;AAAqD,IAAA,GAAG,EAAEC;AAA1D,MACGN,OAAO,EAAES,GAAT,CACC,CAAC;AACCC,IAAAA,KADD;AAECT,IAAAA,KAAK,EAAEU,WAFR;AAGClB,IAAAA,QAAQ,EAAEmB,cAHX;AAICC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJnB;AAKC,OAAGC;AALJ,GAAD,kBAOE,oBAAC,YAAD;AACE,IAAA,GAAG,EAAEH,WADP;AAEE,IAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,QAAQ,EAAElB,QAAQ,IAAImB,cAJxB;AAKE,IAAA,OAAO,EAAGG,CAAD,IAAO;AACdP,MAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,MAAAA,OAAO,CAACE,CAAD,CAAP;AACD;AARH,KASMD,UATN,GAWGJ,KAXH,CARH,CADH,CADF,CADF;AA6BD,CAhD0B,CAA7B;AAmDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;AAEA,eAAejB,UAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\ninterface ContainerProps extends WithSize {\n  disabled: boolean;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${m.max.xxs} {\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  }\n\n  ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container disabled={disabled} size={size} {...rest} ref={ref}>\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","clr","css","Button","wideDefaultStyles","p","wide","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group has full width.\n   * Possible values:\n   * `default` – the radio group has full width if the screen width is less than xs;\n   * `always` – the radio group always has full width;\n   * `never` – the radio group never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>> &\n  WithSize;\nconst Container = styled(\n  'div',\n  omitEmotionProps('wide', 'disabled', 'size')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n  ${sizeStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      wide = 'default',\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container\n          wide={wide}\n          disabled={disabled}\n          size={size}\n          {...rest}\n          ref={ref}\n        >\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}

package/dist/types/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,aAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IAKzD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAK7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAuCD,eAAO,MAAM,cAAc;;;6HAqB1B,CAAC;AAcF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;;iHAoBvB,CAAC;AAqCF,QAAA,MAAM,KAAK,qFA6FV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,aAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IAKzD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAK7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAuCD,eAAO,MAAM,cAAc;;;6HAqB1B,CAAC;AAcF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;;iHAoBvB,CAAC;AAqCF,QAAA,MAAM,KAAK,qFA+FV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/types/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAMrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,MAAM,CAAC,EAAE,WAAW,CAAC;IAMrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA4BD,eAAO,MAAM,SAAS;;;mHAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,mFAwGV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAMrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,MAAM,CAAC,EAAE,WAAW,CAAC;IAMrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA4BD,eAAO,MAAM,SAAS;;;mHAUrB,CAAC;AAuJF,QAAA,MAAM,KAAK,mFA4GV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/types/RadioGroup/index.d.ts

@@ -8,6 +8,7 @@ export interface RadioGroupOption extends Omit<ButtonProps, 'type' | 'wide' | 's
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
 export interface RadioGroupProps extends JsxDivProps, WithSize {
     options?: RadioGroupOption[];
+    wide?: 'default' | 'always' | 'never';
     disabled?: boolean;
     value?: string;
     defaultValue?: string;

package/dist/types/RadioGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAInD,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAK7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqCD,QAAA,MAAM,UAAU,wFAiDf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAInD,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAS7B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAmDD,QAAA,MAAM,UAAU,wFAwDf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.129",
+  "version": "1.0.132",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "c6ecc705e3342b142801166afb0e74ba96129942"
+  "gitHead": "d81c7eedcdf14120ac9d0fa830a5eeb83abf01ac"
 }