@os-design/core 1.0.128 → 1.0.131

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

@@ -17,9 +17,13 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 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, _templateObject3, _templateObject4;
@@ -50,25 +54,29 @@ 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)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n\n  ", " {\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  }\n\n  ", ";\n"])), _media.m.max.xxs, _styles.sizeStyles);
-var LeftButton = (0, _styled["default"])(_Button["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n"])));
-var RightButton = (0, _styled["default"])(_Button["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n"])));
-var MiddleButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 0;\n"])));
+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 getButtonComponent = function getButtonComponent(index, length) {
-  if (length === 1) return _Button["default"];
-  if (index === 0) return LeftButton;
-  if (index === length - 1) return RightButton;
-  return MiddleButton;
+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);
+}, 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.
  */
 
-
 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,
@@ -87,11 +95,13 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       forwardedValue = _useForwardedState2[0],
       setForwardedValue = _useForwardedState2[1];
 
-  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
+    wide: wide,
+    disabled: disabled,
     size: size
   }, rest, {
     ref: ref
-  }), options === null || options === void 0 ? void 0 : options.map(function (_ref2, index) {
+  }), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
     var title = _ref2.title,
         valueOption = _ref2.value,
         disabledOption = _ref2.disabled,
@@ -99,8 +109,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         _onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
         buttonRest = _objectWithoutProperties(_ref2, _excluded2);
 
-    var ButtonComponent = getButtonComponent(index, options === null || options === void 0 ? void 0 : options.length);
-    return /*#__PURE__*/_react["default"].createElement(ButtonComponent, _extends({
+    return /*#__PURE__*/_react["default"].createElement(StyledButton, _extends({
       key: valueOption,
       type: forwardedValue === valueOption ? 'primary' : 'ghost',
       wide: "never",
@@ -111,7 +120,7 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         _onClick(e);
       }
     }, buttonRest), title);
-  }));
+  })));
 });
 RadioGroup.displayName = 'RadioGroup';
 var _default = RadioGroup;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","m","max","xxs","sizeStyles","LeftButton","Button","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","ref","options","disabled","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,qMAIXC,SAAEC,GAAF,CAAMC,GAJK,EAWXC,kBAXW,CAAf;AAcA,IAAMC,UAAU,GAAG,wBAAOC,kBAAP,CAAH,0IAAhB;AAKA,IAAMC,WAAW,GAAG,wBAAOD,kBAAP,CAAH,wIAAjB;AAKA,IAAME,YAAY,GAAG,wBAAOF,kBAAP,CAAH,8FAAlB;;AAIA,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgBC,MAAhB,EAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOL,kBAAP;AAClB,MAAII,KAAK,KAAK,CAAd,EAAiB,OAAOL,UAAP;AACjB,MAAIK,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,IAAMI,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDC,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,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEH;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEP;AAAtC,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC,iBAQEb,KARF,EASK;AAAA,QAPDc,KAOC,SAPDA,KAOC;AAAA,QANMC,WAMN,SANDT,KAMC;AAAA,QALSU,cAKT,SALDX,QAKC;AAAA,8BAJDY,OAIC;AAAA,QAJDA,QAIC,8BAJS,YAAM,CAAE,CAIjB;AAAA,QAHEC,UAGF;;AACH,QAAMC,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQI,OAAR,aAAQA,OAAR,uBAAQA,OAAO,CAAEH,MAAjB,CAA1C;AAEA,wBACE,gCAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEV,QAAQ,IAAIW,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArDgB,CAAnB;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,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 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\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  flex-wrap: wrap;\n\n  ${m.max.xxs} {\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  }\n\n  ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n  border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n  if (length === 1) return Button;\n  if (index === 0) return LeftButton;\n  if (index === length - 1) return RightButton;\n  return MiddleButton;\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      <Container size={size} {...rest} ref={ref}>\n        {options?.map(\n          (\n            {\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            },\n            index\n          ) => {\n            const ButtonComponent = getButtonComponent(index, options?.length);\n\n            return (\n              <ButtonComponent\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              </ButtonComponent>\n            );\n          }\n        )}\n      </Container>\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":"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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/cjs/RadioGroupSkeleton/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@os-design/styles");
+
+var _utils = require("@os-design/utils");
+
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
+
+var _excluded = ["width"];
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledRadioGroupSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: calc(", "em + 2px);\n  ", ";\n"])), function (p) {
+  return p.theme.baseHeight;
+}, _styles.sizeStyles);
+/**
+ * Provides a radio group placeholder while a user waits for the content to load.
+ */
+
+var RadioGroupSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '10em' : _ref$width,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(StyledRadioGroupSkeleton, _extends({
+    width: width
+  }, rest, {
+    ref: ref
+  }));
+});
+RadioGroupSkeleton.displayName = 'RadioGroupSkeleton';
+var _default = RadioGroupSkeleton;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":["StyledRadioGroupSkeleton","Skeleton","p","theme","baseHeight","sizeStyles","RadioGroupSkeleton","ref","width","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,wBAAwB,GAAG,wBAC/BC,oBAD+B,EAE/B,6BAAiB,MAAjB,CAF+B,CAAH,gHAIb,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,UAAf;AAAA,CAJa,EAK1BC,kBAL0B,CAA9B;AAQA;AACA;AACA;;AACA,IAAMC,kBAAkB,gBAAG,uBACzB,gBAA8BC,GAA9B;AAAA,wBAAGC,KAAH;AAAA,MAAGA,KAAH,2BAAW,MAAX;AAAA,MAAsBC,IAAtB;;AAAA,sBACE,gCAAC,wBAAD;AAA0B,IAAA,KAAK,EAAED;AAAjC,KAA4CC,IAA5C;AAAkD,IAAA,GAAG,EAAEF;AAAvD,KADF;AAAA,CADyB,CAA3B;AAMAD,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC;eAEeJ,kB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 10em\n   */\n  width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: calc(${(p) => p.theme.baseHeight}em + 2px);\n  ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n  ({ width = '10em', ...rest }, ref) => (\n    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\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":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,iBADF,EAEEC,UAFF,EAGEC,gBAHF,QAKO,mBALP;AAMA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,OAAOC,eAAP,MAA8C,yBAA9C;AACA,OAAOC,aAAP,MAA0B,iBAA1B;;AA0DA,MAAMC,WAAW,GAAIC,CAAD,IAClB,CAACA,CAAC,CAACC,QAAH,IACAN,GAAI;AACN;AACA;AACA;AACA,4BAA4BD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASC,OAAV,CAAmB;AAClD;AACA;AACA,GATA;;AAWA,MAAMC,aAAa,GAAIJ,CAAD,IACpBA,CAAC,CAACK,OAAF,KAAc,SAAd,IACAV,GAAI;AACN,aAAaD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASI,IAAV,CAAgB;AAChC,wBAAwBZ,GAAG,CAACM,CAAC,CAACE,MAAF,CAASK,EAAV,CAAc;AACzC,MAAMR,WAAW,CAACC,CAAD,CAAI;AACrB,GANA;;AAQA,MAAMQ,WAAW,GAAIR,CAAD,IAClBA,CAAC,CAACK,OAAF,KAAc,OAAd,IACAV,GAAI;AACN,aAAaD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASI,IAAV,CAAgB;AAChC;AACA,MAAMP,WAAW,CAACC,CAAD,CAAI;AACrB,GANA;;AAQA,MAAMS,aAAa,GAAIT,CAAD,IACpBA,CAAC,CAACK,OAAF,KAAc,SAAd,IACAV,GAAI;AACN,aAAaD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASI,IAAV,CAAgB;AAChC;AACA;AACA,MAAMP,WAAW,CAACC,CAAD,CAAI;AACrB,GAPA;;AASA,MAAMU,iBAAiB,GAAIV,CAAD,IACxBA,CAAC,CAACW,IAAF,KAAW,SAAX,IACAhB,GAAI;AACN,MAAMC,CAAC,CAACgB,GAAF,CAAMC,GAAI;AAChB;AACA;AACA,GANA;;AAQA,MAAMC,gBAAgB,GAAId,CAAD,IACvBA,CAAC,CAACW,IAAF,KAAW,QAAX,IACAhB,GAAI;AACN;AACA,GAJA;;AAMA,MAAMoB,cAAc,GAAIf,CAAD,IACrBA,CAAC,CAACC,QAAF,IACAN,GAAI;AACN;AACA,GAJA;;AAMA,OAAO,MAAMqB,YAAY,GAAG3B,MAAM,CAChC,QADgC,EAEhCI,gBAAgB,CAAC,SAAD,EAAY,QAAZ,EAAsB,MAAtB,EAA8B,SAA9B,EAAyC,MAAzC,CAFgB,CAGb;AACrB,IAAIH,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAoBU,CAAD,IAAOA,CAAC,CAACiB,KAAF,CAAQC,YAAa;AAC/C,YAAalB,CAAD,IAAOA,CAAC,CAACiB,KAAF,CAAQE,YAAa;AACxC,eAAgBnB,CAAD,IAAOA,CAAC,CAACiB,KAAF,CAAQG,uBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIhB,aAAc;AAClB,IAAIK,aAAc;AAClB,IAAID,WAAY;AAChB;AACA,IAAIE,iBAAkB;AACtB,IAAII,gBAAiB;AACrB;AACA,IAAIC,cAAe;AACnB;AACA,IAAIxB,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAD,EAAqB,OAArB,CAA8B;AAClD,CAtCO;AAwCP;AACA;AACA;;AACA,MAAM6B,MAAM,gBAAGjC,UAAU,CACvB,CACE;AACEkC,EAAAA,IAAI,GAAG,SADT;AAEEC,EAAAA,MAAM,GAAG,KAFX;AAGEC,EAAAA,IAHF;AAIEC,EAAAA,KAJF;AAKEd,EAAAA,IAAI,GAAG,SALT;AAMEe,EAAAA,OAAO,GAAG,KANZ;AAOEzB,EAAAA,QAAQ,GAAG,KAPb;AAQE0B,EAAAA,IARF;AASEC,EAAAA,QATF;AAUEC,EAAAA,WAAW,GAAG,MAAM,CAAE,CAVxB;AAWE,KAAGC;AAXL,CADF,EAcEC,GAdF,KAeK;AACH,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAkCpC,eAAe,CAAC;AACtDyB,IAAAA,IADsD;AAEtDC,IAAAA,MAFsD;AAGtDtB,IAAAA;AAHsD,GAAD,CAAvD;AAMA,sBACE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAEqB,IADX;AAEE,IAAA,MAAM,EAAEU,YAFV;AAGE,IAAA,IAAI,EAAErB,IAHR;AAIE,IAAA,OAAO,EAAEe,OAJX;AAKE,IAAA,QAAQ,EAAEzB,QAAQ,IAAIyB,OALxB;AAME,IAAA,IAAI,EAAEC,IANR;AAOE,IAAA,WAAW,EAAGO,CAAD,IAAO;AAClBL,MAAAA,WAAW,CAACK,CAAD,CAAX;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD,KAVH;AAWE,iBAAWT;AAXb,KAYMI,IAZN;AAaE,IAAA,GAAG,EAAEC;AAbP,mBAeE,oBAAC,aAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,KAAK,EAAEC,KAFT;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,aAAa,EAAEO;AAJjB,KAMGL,QANH,CAfF,CADF;AA0BD,CAjDsB,CAAzB;AAoDAP,MAAM,CAACe,WAAP,GAAqB,QAArB;AAEA,eAAef,MAAf","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/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":"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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/esm/RadioGroup/index.js

@@ -5,45 +5,49 @@ import { sizeStyles } from '@os-design/styles';
 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('size'))`
-  display: flex;
-  flex-wrap: wrap;
 
-  ${m.max.xxs} {
+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;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  overflow: hidden;
+  border: 1px solid
+    ${p => p.disabled ? clr(p.theme.buttonDisabledGhostColorText) : clr(p.theme.colorPrimary)};
 
+  ${wideDefaultStyles};
+  ${wideAlwaysStyles};
   ${sizeStyles};
 `;
-const LeftButton = styled(Button)`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-`;
-const RightButton = styled(Button)`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-`;
-const MiddleButton = styled(Button)`
+const StyledButton = styled(Button)`
   border-radius: 0;
 `;
-
-const getButtonComponent = (index, length) => {
-  if (length === 1) return Button;
-  if (index === 0) return LeftButton;
-  if (index === length - 1) return RightButton;
-  return MiddleButton;
-};
 /**
  * The radio buttons that allow a user to select only one of a limited number of options.
  */
 
-
 const RadioGroup = /*#__PURE__*/forwardRef(({
   options = [],
+  wide = 'default',
   disabled = false,
   value,
   defaultValue,
@@ -56,7 +60,9 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
     defaultValue,
     onChange
   });
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, _extends({
+    wide: wide,
+    disabled: disabled,
     size: size
   }, rest, {
     ref: ref
@@ -66,19 +72,16 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
     disabled: disabledOption,
     onClick = () => {},
     ...buttonRest
-  }, index) => {
-    const ButtonComponent = getButtonComponent(index, options?.length);
-    return /*#__PURE__*/React.createElement(ButtonComponent, _extends({
-      key: valueOption,
-      type: forwardedValue === valueOption ? 'primary' : 'ghost',
-      wide: "never",
-      disabled: disabled || disabledOption,
-      onClick: e => {
-        setForwardedValue(valueOption);
-        onClick(e);
-      }
-    }, buttonRest), title);
-  }));
+  }) => /*#__PURE__*/React.createElement(StyledButton, _extends({
+    key: valueOption,
+    type: forwardedValue === valueOption ? 'primary' : 'ghost',
+    wide: "never",
+    disabled: disabled || disabledOption,
+    onClick: e => {
+      setForwardedValue(valueOption);
+      onClick(e);
+    }
+  }, buttonRest), title))));
 });
 RadioGroup.displayName = 'RadioGroup';
 export default RadioGroup;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","Button","Container","max","xxs","LeftButton","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","options","disabled","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","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,OAAOC,MAAP,MAAoC,WAApC;AA8CA,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAD,EAAQF,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA;AACA,IAAIG,CAAC,CAACG,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIR,UAAW;AACf,CAZA;AAcA,MAAMS,UAAU,GAAGN,MAAM,CAACE,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAMK,WAAW,GAAGP,MAAM,CAACE,MAAD,CAAS;AACnC;AACA;AACA,CAHA;AAKA,MAAMM,YAAY,GAAGR,MAAM,CAACE,MAAD,CAAS;AACpC;AACA,CAFA;;AAIA,MAAMO,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,MAAhB,KAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOT,MAAP;AAClB,MAAIQ,KAAK,KAAK,CAAd,EAAiB,OAAOJ,UAAP;AACjB,MAAII,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,MAAMI,UAAU,gBAAGhB,UAAU,CAC3B,CACE;AACEiB,EAAAA,OAAO,GAAG,EADZ;AAEEC,EAAAA,QAAQ,GAAG,KAFb;AAGEC,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,IAAsCvB,iBAAiB,CAAC;AAC5DgB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEC;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEC;AAAtC,MACGP,OAAO,EAAEU,GAAT,CACC,CACE;AACEC,IAAAA,KADF;AAEET,IAAAA,KAAK,EAAEU,WAFT;AAGEX,IAAAA,QAAQ,EAAEY,cAHZ;AAIEC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJpB;AAKE,OAAGC;AALL,GADF,EAQElB,KARF,KASK;AACH,UAAMmB,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQG,OAAO,EAAEF,MAAjB,CAA1C;AAEA,wBACE,oBAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEX,QAAQ,IAAIY,cAJxB;AAKE,MAAA,OAAO,EAAGI,CAAD,IAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,QAAAA,OAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArD0B,CAA7B;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;AAEA,eAAenB,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 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\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  flex-wrap: wrap;\n\n  ${m.max.xxs} {\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  }\n\n  ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n  border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n  if (length === 1) return Button;\n  if (index === 0) return LeftButton;\n  if (index === length - 1) return RightButton;\n  return MiddleButton;\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      <Container size={size} {...rest} ref={ref}>\n        {options?.map(\n          (\n            {\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            },\n            index\n          ) => {\n            const ButtonComponent = getButtonComponent(index, options?.length);\n\n            return (\n              <ButtonComponent\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              </ButtonComponent>\n            );\n          }\n        )}\n      </Container>\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/esm/RadioGroupSkeleton/index.js

@@ -0,0 +1,26 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import styled from '@emotion/styled';
+import React, { forwardRef } from 'react';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import Skeleton from '../Skeleton';
+const StyledRadioGroupSkeleton = styled(Skeleton, omitEmotionProps('size'))`
+  height: calc(${p => p.theme.baseHeight}em + 2px);
+  ${sizeStyles};
+`;
+/**
+ * Provides a radio group placeholder while a user waits for the content to load.
+ */
+
+const RadioGroupSkeleton = /*#__PURE__*/forwardRef(({
+  width = '10em',
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement(StyledRadioGroupSkeleton, _extends({
+  width: width
+}, rest, {
+  ref: ref
+})));
+RadioGroupSkeleton.displayName = 'RadioGroupSkeleton';
+export default RadioGroupSkeleton;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledRadioGroupSkeleton","p","theme","baseHeight","RadioGroupSkeleton","width","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAwC,aAAxC;AAUA,MAAMC,wBAAwB,GAAGN,MAAM,CACrCK,QADqC,EAErCD,gBAAgB,CAAC,MAAD,CAFqB,CAG3B;AACZ,iBAAkBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,UAAW;AAC3C,IAAIN,UAAW;AACf,CANA;AAQA;AACA;AACA;;AACA,MAAMO,kBAAkB,gBAAGR,UAAU,CACnC,CAAC;AAAES,EAAAA,KAAK,GAAG,MAAV;AAAkB,KAAGC;AAArB,CAAD,EAA8BC,GAA9B,kBACE,oBAAC,wBAAD;AAA0B,EAAA,KAAK,EAAEF;AAAjC,GAA4CC,IAA5C;AAAkD,EAAA,GAAG,EAAEC;AAAvD,GAFiC,CAArC;AAMAH,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC;AAEA,eAAeJ,kBAAf","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 10em\n   */\n  width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: calc(${(p) => p.theme.baseHeight}em + 2px);\n  ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n  ({ width = '10em', ...rest }, ref) => (\n    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"file":"index.js"}

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;AAIzD,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;AAwCD,QAAA,MAAM,UAAU,wFAsDf,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/dist/types/RadioGroupSkeleton/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WithSize } from '@os-design/styles';
+import { SkeletonProps } from '../Skeleton';
+export interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {
+    width?: string;
+}
+declare const RadioGroupSkeleton: React.ForwardRefExoticComponent<RadioGroupSkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export default RadioGroupSkeleton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroupSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,uBAAwB,SAAQ,aAAa,EAAE,QAAQ;IAKtE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,QAAA,MAAM,kBAAkB,gGAIvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.128",
+  "version": "1.0.131",
   "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": "8e09c32a1f37907e86bb2a6467a7e45d4570bfd7"
+  "gitHead": "afbec2e0a1f78f54c4e4adf75a30ed93e758665c"
 }