@os-design/core 1.0.206 → 1.0.208

package/dist/cjs/ListItemActions/index.js

@@ -32,7 +32,7 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n"])));
+var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n"])));
 var swipeableStyles = function swipeableStyles(p) {
   return p.swipeable && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: translateX(100%);\n    ", ";\n  "])), (0, _styles.transitionStyles)('transform')(p));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_Button","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","Array","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_toConsumableArray","_arrayWithoutHoles","_iterableToArray","_nonIterableSpread","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","from","test","iter","len","arr2","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","paddingRight","clr","concat","colorBg","sizeStyles","actionIndex","ListItemActions","forwardRef","_ref","ref","_ref$actions","actions","_ref$onTouchStart","onTouchStart","_ref$onTouchMove","onTouchMove","_ref$onTouchEnd","onTouchEnd","children","size","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","containerRef","mergedContainerRef","_useSwipe","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","e","touchMoveHandler","touchEndHandler","_useState","useState","_useState2","setPaddingRight","useLayoutEffect","current","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","items","map","_ref2","icon","_ref2$onClick","onClick","actionRest","createElement","type","wide","preventDefault","displayName","_default","exports"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_Button","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","Array","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_toConsumableArray","_arrayWithoutHoles","_iterableToArray","_nonIterableSpread","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","from","test","iter","len","arr2","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","paddingRight","clr","concat","colorBg","sizeStyles","actionIndex","ListItemActions","forwardRef","_ref","ref","_ref$actions","actions","_ref$onTouchStart","onTouchStart","_ref$onTouchMove","onTouchMove","_ref$onTouchEnd","onTouchEnd","children","size","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","containerRef","mergedContainerRef","_useSwipe","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","e","touchMoveHandler","touchEndHandler","_useState","useState","_useState2","setPaddingRight","useLayoutEffect","current","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","items","map","_ref2","icon","_ref2$onClick","onClick","actionRest","createElement","type","wide","preventDefault","displayName","_default","exports"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

package/dist/cjs/Modal/index.js

@@ -147,11 +147,15 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var bodyId = (0, _react2.useMemo)(function () {
     return id || "modal-body-".concat(Math.random().toString(36).slice(2, 11));
   }, [id]);
-  var clickHandler = (0, _react2.useCallback)(function (e) {
+  var containerClickHandler = (0, _react2.useCallback)(function (e) {
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  var contentClickHandler = (0, _react2.useCallback)(function (e) {
     e.stopPropagation();
     onClick(e);
   }, [onClick]);
-  var keyDownHandler = (0, _react2.useCallback)(function (e) {
+  var contentKeyDownHandler = (0, _react2.useCallback)(function (e) {
     if (e.key === 'Escape') {
       e.stopPropagation();
       onClose();
@@ -164,10 +168,7 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/_react2["default"].createElement(Container, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      onClose();
-    }
+    onClick: containerClickHandler
   }, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
     autoFocus: true
   }, /*#__PURE__*/_react2["default"].createElement(CloseModalContext.Provider, {
@@ -176,8 +177,8 @@ var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     visible: visible,
     size: size,
     tabIndex: -1,
-    onKeyDown: keyDownHandler,
-    onClick: clickHandler,
+    onKeyDown: contentKeyDownHandler,
+    onClick: contentClickHandler,
     role: "dialog",
     "aria-modal": true,
     "aria-labelledby": ariaLabelledBy,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_media","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Button","_defaultLocale","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","exports","Container","div","m","min","xs","enableScrollingStyles","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","CloseModalContext","React","createContext","useCloseModal","useContext","Modal","forwardRef","_ref","ref","title","_ref$okText","okText","_ref$okDanger","okDanger","_ref$okLoading","okLoading","_ref$okDisabled","okDisabled","header","footer","_ref$visible","_ref$locale","locale","defaultLocale","_ref$onClose","onClose","onOk","size","id","_ref$onClick","onClick","children","rest","contentRef","useRef","_useTheme","useTheme","mounted","useClosable","useBodyScroll","titleId","useMemo","concat","random","toString","bodyId","clickHandler","useCallback","e","stopPropagation","keyDownHandler","ariaLabelledBy","undefined","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","ThemeOverrider","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","Close","danger","loading","disabled","displayName","_default"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\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\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\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\n    useBodyScroll(!visible);\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    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container\n          onClick={(e) => {\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\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            </CloseModalContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_media","_portal","_styles","_theming","_utils","_react2","_interopRequireWildcard","_reactFocusLock","_Button","_defaultLocale","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","exports","Container","div","m","min","xs","enableScrollingStyles","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","CloseModalContext","React","createContext","useCloseModal","useContext","Modal","forwardRef","_ref","ref","title","_ref$okText","okText","_ref$okDanger","okDanger","_ref$okLoading","okLoading","_ref$okDisabled","okDisabled","header","footer","_ref$visible","_ref$locale","locale","defaultLocale","_ref$onClose","onClose","onOk","size","id","_ref$onClick","onClick","children","rest","contentRef","useRef","_useTheme","useTheme","mounted","useClosable","useBodyScroll","titleId","useMemo","concat","random","toString","bodyId","containerClickHandler","useCallback","e","stopPropagation","contentClickHandler","contentKeyDownHandler","ariaLabelledBy","undefined","createElement","autoFocus","Provider","tabIndex","onKeyDown","role","ThemeOverrider","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","Close","danger","loading","disabled","displayName","_default"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  KeyboardEvent,\n  MouseEvent,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\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\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\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\n    useBodyScroll(!visible);\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    const containerClickHandler = useCallback(\n      (e: MouseEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n        onClose();\n      },\n      [onClose]\n    );\n\n    const contentClickHandler = useCallback(\n      (e: MouseEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const contentKeyDownHandler = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={containerClickHandler}>\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={contentKeyDownHandler}\n                onClick={contentClickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\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            </CloseModalContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAMA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAC,uBAAA,CAAAV,OAAA;AASA,IAAAW,eAAA,GAAAT,sBAAA,CAAAF,OAAA;AACA,IAAAY,OAAA,GAAAV,sBAAA,CAAAF,OAAA;AACA,IAAAa,cAAA,GAAAX,sBAAA,CAAAF,OAAA;AAAmE,IAAAc,SAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA,EAAAC,iBAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAvB,wBAAA2B,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,cAAAN,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAzC,uBAAAmC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAiB,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,yBAAAF,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,GAAAQ,6BAAA,CAAAJ,MAAA,EAAAG,QAAA,OAAAhB,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAAqB,qBAAA,QAAAC,gBAAA,GAAAtB,MAAA,CAAAqB,qBAAA,CAAAL,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAS,gBAAA,CAAAP,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAmB,gBAAA,CAAAT,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAoB,oBAAA,CAAAlB,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAAQ,8BAAAJ,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,WAAAa,UAAA,GAAAzB,MAAA,CAAA0B,IAAA,CAAAV,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAY,UAAA,CAAAV,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAsB,UAAA,CAAAZ,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAAA,SAAAe,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAA9B,MAAA,CAAA+B,MAAA,CAAA/B,MAAA,CAAAgC,gBAAA,CAAAJ,OAAA,IAAAC,GAAA,IAAAI,KAAA,EAAAjC,MAAA,CAAA+B,MAAA,CAAAF,GAAA;AAgEnE,IAAMK,uBAAuB,GAAG,IAAI;AACpC,IAAMC,wBAAwB,GAAG,CAAC;AAElC,IAAMC,UAAU,OAAGC,gBAAS,EAAAnE,eAAA,KAAAA,eAAA,GAAAyD,sBAAA,wDAG3B;AAED,IAAMW,WAAW,OAAGD,gBAAS,EAAAlE,gBAAA,KAAAA,gBAAA,GAAAwD,sBAAA,wDAG5B;AAED,IAAMY,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,CAAC;EAAA,OAC1BA,CAAC,CAACC,OAAO,QACTC,UAAG,EAAAtE,gBAAA,KAAAA,gBAAA,GAAAuD,sBAAA,mDACYS,UAAU,EAAII,CAAC,CAACG,KAAK,CAACC,eAAe,CACnD;AAAA;AAEH,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIL,CAAC;EAAA,OAC5B,CAACA,CAAC,CAACC,OAAO,QACVC,UAAG,EAAArE,gBAAA,KAAAA,gBAAA,GAAAsD,sBAAA,mDACYW,WAAW,EAAIE,CAAC,CAACG,KAAK,CAACC,eAAe,CACpD;AAAA;AAGI,IAAME,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,SAAS,CAAC,CAAC,CAAA1E,gBAAA,KAAAA,gBAAA,GAAAqD,sBAAA,mJAM7C,UAACa,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC;AAAA,GAC7ChB,uBAAuB,EAChCK,iBAAiB,EACjBM,mBAAmB,CACtB;AAACM,OAAA,CAAAL,SAAA,GAAAA,SAAA;AAEF,IAAMM,SAAS,GAAGL,kBAAM,CAACM,GAAG,CAAA9E,gBAAA,KAAAA,gBAAA,GAAAoD,sBAAA,kIAMfO,uBAAuB,EAEhCoB,QAAC,CAACC,GAAG,CAACC,EAAE,EACN,IAAAC,6BAAqB,EAAC,GAAG,CAAC,CAE/B;AAED,IAAMC,aAAa,OAAGrB,gBAAS,EAAA7D,gBAAA,KAAAA,gBAAA,GAAAmD,sBAAA,uJAC8BQ,wBAAwB,CAEpF;AAED,IAAMwB,cAAc,OAAGtB,gBAAS,EAAA5D,gBAAA,KAAAA,gBAAA,GAAAkD,sBAAA,uJAE2BQ,wBAAwB,CAClF;AAED,IAAMyB,eAAe,OAAGvB,gBAAS,EAAA3D,gBAAA,KAAAA,gBAAA,GAAAiD,sBAAA,0GACaQ,wBAAwB,CAErE;AAED,IAAM0B,gBAAgB,OAAGxB,gBAAS,EAAA1D,iBAAA,KAAAA,iBAAA,GAAAgD,sBAAA,0GAEUQ,wBAAwB,CACnE;AAED,IAAM2B,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAItB,CAAC;EAAA,OAC7BA,CAAC,CAACC,OAAO,QACTC,UAAG,EAAA9D,iBAAA,KAAAA,iBAAA,GAAA+C,sBAAA,8GACY+B,aAAa,EAAIlB,CAAC,CAACG,KAAK,CAACC,eAAe,EACnDU,QAAC,CAACC,GAAG,CAACC,EAAE,EACKI,eAAe,EAAIpB,CAAC,CAACG,KAAK,CAACC,eAAe,CAE1D;AAAA;AAEH,IAAMmB,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIvB,CAAC;EAAA,OAC/B,CAACA,CAAC,CAACC,OAAO,QACVC,UAAG,EAAA7D,iBAAA,KAAAA,iBAAA,GAAA8C,sBAAA,8GACYgC,cAAc,EAAInB,CAAC,CAACG,KAAK,CAACC,eAAe,EACpDU,QAAC,CAACC,GAAG,CAACC,EAAE,EACKK,gBAAgB,EAAIrB,CAAC,CAACG,KAAK,CAACC,eAAe,CAE3D;AAAA;AAGH,IAAMoB,OAAO,GAAG,IAAAjB,kBAAM,EACpB,KAAK,EACL,IAAAC,uBAAgB,EAAC,SAAS,EAAE,MAAM,CACpC,CAAC,CAAAlE,iBAAA,KAAAA,iBAAA,GAAA6C,sBAAA,mcAMqB,UAACa,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACG,KAAK,CAACsB,OAAO,CAAC;AAAA,GACtC,UAACzB,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACG,KAAK,CAACuB,SAAS,CAAC;AAAA,GACpB/B,wBAAwB,EACtC,UAACK,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACG,KAAK,CAACwB,mBAAmB,CAAC;AAAA,GAI1B,UAAC3B,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACyB,YAAY;AAAA,GACxC,UAAC5B,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACyB,YAAY;AAAA,GAE7Bd,QAAC,CAACC,GAAG,CAACC,EAAE,EACC,UAAChB,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC0B,UAAU;AAAA,GAEjB,UAAC7B,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACyB,YAAY;AAAA,GAG7B,UAAC5B,CAAC;EAAA,OAAK,CAACA,CAAC,CAACG,KAAK,CAAC0B,UAAU,GAAG,CAAC;AAAA,GAG7CP,oBAAoB,EACpBC,sBAAsB,EACtBO,kBAAU,CACb;AAED,IAAMC,MAAM,GAAGxB,kBAAM,CAACM,GAAG,CAAAtE,iBAAA,KAAAA,iBAAA,GAAA4C,sBAAA,uRAEb,UAACa,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC6B,iBAAiB;AAAA,GACf,UAAChC,CAAC;EAAA,OAAK,IAAAS,YAAG,EAACT,CAAC,CAACG,KAAK,CAAC8B,4BAA4B,CAAC;AAAA,GAM3D,UAACjC,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC;AAAA,GAC3C,UAAClC,CAAC;EAAA,OACjBmC,IAAI,CAACC,GAAG,CACNpC,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC,GAAGlC,CAAC,CAACG,KAAK,CAACkC,uBAAuB,EACvE,CACF,CAAC;AAAA,GAEDvB,QAAC,CAACC,GAAG,CAACC,EAAE,EACQ,UAAChB,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC;AAAA,GAC3C,UAAClC,CAAC;EAAA,OACjBmC,IAAI,CAACC,GAAG,CACNpC,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC,GAAGlC,CAAC,CAACG,KAAK,CAACkC,uBAAuB,EACvE,CACF,CAAC;AAAA,EAEN;AAED,IAAMC,KAAK,GAAG/B,kBAAM,CAACM,GAAG,CAAArE,iBAAA,KAAAA,iBAAA,GAAA2C,sBAAA,2EAET,UAACa,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACoC,KAAK,CAACC,KAAK;AAAA,GAErCC,sBAAc,CACjB;AAED,IAAMC,IAAI,GAAGnC,kBAAM,CAACM,GAAG,CAAApE,iBAAA,KAAAA,iBAAA,GAAA0C,sBAAA,8HAGV,UAACa,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACwC,wBAAwB,CAAC,CAAC,CAAC;AAAA,GACjD,UAAC3C,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC;AAAA,GAE9CpB,QAAC,CAACC,GAAG,CAACC,EAAE,EACG,UAAChB,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACwC,wBAAwB,CAAC,CAAC,CAAC;AAAA,GACjD,UAAC3C,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC;AAAA,GAGhD,IAAAjB,6BAAqB,EAAC,GAAG,CAAC,CAC7B;AAED,IAAM2B,MAAM,GAAGrC,kBAAM,CAACM,GAAG,CAAAnE,iBAAA,KAAAA,iBAAA,GAAAyC,sBAAA,oLACV,UAACa,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC;AAAA,GACrD,UAAClC,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACwC,wBAAwB,CAAC,CAAC,CAAC;AAAA,GAE5C7B,QAAC,CAACC,GAAG,CAACC,EAAE,EAKK,UAAChB,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAAC+B,0BAA0B,CAAC,CAAC,CAAC;AAAA,GACrD,UAAClC,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACwC,wBAAwB,CAAC,CAAC,CAAC;AAAA,EAEjD;AAED,IAAME,iBAAiB,gBAAGC,kBAAK,CAACC,aAAa,CAAa,YAAM,CAAC,CAAC,CAAC;AAE5D,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAA;EAAA,OAAS,IAAAC,kBAAU,EAACJ,iBAAiB,CAAC;AAAA;;AAEhE;AACA;AACA;AAFAlC,OAAA,CAAAqC,aAAA,GAAAA,aAAA;AAGA,IAAME,KAAK,gBAAG,IAAAC,kBAAU,EACtB,UAAAC,IAAA,EAmBEC,GAAG,EACA;EAAA,IAlBDC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,WAAA,GAAAH,IAAA,CACLI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IAAAE,aAAA,GAAAL,IAAA,CACbM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAP,IAAA,CAChBQ,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,eAAA,GAAAT,IAAA,CACjBU,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAClBE,MAAM,GAAAX,IAAA,CAANW,MAAM;IACNC,MAAM,GAAAZ,IAAA,CAANY,MAAM;IAAAC,YAAA,GAAAb,IAAA,CACNnD,OAAO;IAAPA,OAAO,GAAAgE,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAC,WAAA,GAAAd,IAAA,CACfe,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAGE,yBAAa,GAAAF,WAAA;IAAAG,YAAA,GAAAjB,IAAA,CACtBkB,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,YAAM,CAAC,CAAC,GAAAA,YAAA;IAClBE,IAAI,GAAAnB,IAAA,CAAJmB,IAAI;IACJC,IAAI,GAAApB,IAAA,CAAJoB,IAAI;IACJC,EAAE,GAAArB,IAAA,CAAFqB,EAAE;IAAAC,YAAA,GAAAtB,IAAA,CACFuB,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,YAAM,CAAC,CAAC,GAAAA,YAAA;IAClBE,QAAQ,GAAAxB,IAAA,CAARwB,QAAQ;IACLC,IAAI,GAAAnG,wBAAA,CAAA0E,IAAA,EAAA3H,SAAA;EAIT,IAAMqJ,UAAU,GAAG,IAAAC,cAAM,EAAiB,IAAI,CAAC;EAC/C,IAAAC,SAAA,GAAkB,IAAAC,iBAAQ,EAAC,CAAC;IAApB9E,KAAK,GAAA6E,SAAA,CAAL7E,KAAK;EACb,IAAM+E,OAAO,GAAG,IAAAC,kBAAW,EAAClF,OAAO,EAAEE,KAAK,CAACC,eAAe,CAAC;EAE3D,IAAAgF,oBAAa,EAAC,CAACnF,OAAO,CAAC;EAEvB,IAAMoF,OAAO,GAAG,IAAAC,eAAO,EACrB;IAAA,sBAAAC,MAAA,CAAqBpD,IAAI,CAACqD,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACnG,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAAA,CAAE,EAC9D,EACF,CAAC;EACD,IAAMoG,MAAM,GAAG,IAAAJ,eAAO,EACpB;IAAA,OAAMb,EAAE,kBAAAc,MAAA,CAAkBpD,IAAI,CAACqD,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACnG,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAE;EAAA,GACnE,CAACmF,EAAE,CACL,CAAC;EAED,IAAMkB,qBAAqB,GAAG,IAAAC,mBAAW,EACvC,UAACC,CAA6B,EAAK;IACjCA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnBxB,OAAO,CAAC,CAAC;EACX,CAAC,EACD,CAACA,OAAO,CACV,CAAC;EAED,IAAMyB,mBAAmB,GAAG,IAAAH,mBAAW,EACrC,UAACC,CAA6B,EAAK;IACjCA,CAAC,CAACC,eAAe,CAAC,CAAC;IACnBnB,OAAO,CAACkB,CAAC,CAAC;EACZ,CAAC,EACD,CAAClB,OAAO,CACV,CAAC;EAED,IAAMqB,qBAAqB,GAAG,IAAAJ,mBAAW,EACvC,UAACC,CAAgC,EAAK;IACpC,IAAIA,CAAC,CAAClI,GAAG,KAAK,QAAQ,EAAE;MACtBkI,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBxB,OAAO,CAAC,CAAC;IACX;EACF,CAAC,EACD,CAACA,OAAO,CACV,CAAC;EAED,IAAM2B,cAAc,GAAG,IAAAX,eAAO,EAC5B;IAAA,OAAOvB,MAAM,KAAKmC,SAAS,GAAGb,OAAO,GAAGa,SAAS;EAAA,CAAC,EAClD,CAACnC,MAAM,EAAEsB,OAAO,CAClB,CAAC;EAED,IAAI,CAACH,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACE9J,OAAA,YAAA+K,aAAA,CAACnL,OAAA,WAAM,qBACLI,OAAA,YAAA+K,aAAA,CAAC7F,SAAS;IAACL,OAAO,EAAEA;EAAQ,CAAE,CAAC,eAC/B7E,OAAA,YAAA+K,aAAA,CAACvF,SAAS;IAAC+D,OAAO,EAAEgB;EAAsB,gBACxCvK,OAAA,YAAA+K,aAAA,CAAC7K,eAAA,WAAS;IAAC8K,SAAS;EAAA,gBAClBhL,OAAA,YAAA+K,aAAA,CAACtD,iBAAiB,CAACwD,QAAQ;IAAC5G,KAAK,EAAE6E;EAAQ,gBACzClJ,OAAA,YAAA+K,aAAA,CAAC3E,OAAO;IACNvB,OAAO,EAAEA,OAAQ;IACjBuE,IAAI,EAAEA,IAAK;IACX8B,QAAQ,EAAE,CAAC,CAAE;IACbC,SAAS,EAAEP,qBAAsB;IACjCrB,OAAO,EAAEoB,mBAAoB;IAC7BS,IAAI,EAAC,QAAQ;IACb,kBAAU;IACV,mBAAiBP,cAAe;IAChC,oBAAkBP,MAAO;IACzBrC,GAAG,EAAEyB;EAAW,GAEff,MAAM,KAAKmC,SAAS,gBACnB9K,OAAA,YAAA+K,aAAA,CAACjL,QAAA,CAAAuL,cAAc;IACbC,SAAS,EAAE,SAAAA,UAACC,CAAC;MAAA,OAAM;QACjBtE,uBAAuB,EACrBsE,CAAC,CAACC;MACN,CAAC;IAAA;EAAE,gBAEHxL,OAAA,YAAA+K,aAAA,CAACpE,MAAM,qBACL3G,OAAA,YAAA+K,aAAA,CAAC7D,KAAK;IAACmC,EAAE,EAAEY;EAAQ,GAAE/B,KAAa,CAAC,eACnClI,OAAA,YAAA+K,aAAA,CAAC5K,OAAA,WAAM;IACLsL,IAAI,EAAC,OAAO;IACZC,IAAI,EAAC,OAAO;IACZnC,OAAO,EAAEL,OAAQ;IACjB,cAAYH,MAAM,CAAC4C;EAAW,gBAE9B3L,OAAA,YAAA+K,aAAA,CAACrL,MAAA,CAAAkM,KAAK,MAAE,CACF,CACF,CACM,CAAC,GAEjBjD,MACD,eAED3I,OAAA,YAAA+K,aAAA,CAACzD,IAAI,EAAAzE,QAAA;IAACwG,EAAE,EAAEiB;EAAO,GAAKb,IAAI;IAAExB,GAAG,EAAEA;EAAI,IAClCuB,QACG,CAAC,EAENZ,MAAM,KAAKkC,SAAS,gBACnB9K,OAAA,YAAA+K,aAAA,CAACvD,MAAM,qBACLxH,OAAA,YAAA+K,aAAA,CAAC5K,OAAA,WAAM;IACL0L,MAAM,EAAEvD,QAAS;IACjBwD,OAAO,EAAEtD,SAAU;IACnBuD,QAAQ,EAAErD,UAAW;IACrBa,OAAO,EAAEJ;EAAK,GAEbf,MACK,CACF,CAAC,GAETQ,MAEK,CACiB,CACnB,CACF,CACL,CAAC;AAEb,CACF,CAAC;AAEDd,KAAK,CAACkE,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAEbnE,KAAK;AAAAvC,OAAA,cAAA0G,QAAA"}

package/dist/esm/ListItemActions/index.js

@@ -8,6 +8,7 @@ import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useState } fr
 import Button from '../Button';
 const Container = styled.div`
   position: relative;
+  overflow: hidden;
 
   @media (hover: hover) {
     // Hide actions by default

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","createElement","_extends","key","type","wide","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","createElement","_extends","key","type","wide","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

package/dist/esm/Modal/index.js

@@ -188,11 +188,15 @@ const Modal = /*#__PURE__*/forwardRef(({
   useBodyScroll(!visible);
   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]);
-  const clickHandler = useCallback(e => {
+  const containerClickHandler = useCallback(e => {
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  const contentClickHandler = useCallback(e => {
     e.stopPropagation();
     onClick(e);
   }, [onClick]);
-  const keyDownHandler = useCallback(e => {
+  const contentKeyDownHandler = useCallback(e => {
     if (e.key === 'Escape') {
       e.stopPropagation();
       onClose();
@@ -203,10 +207,7 @@ const Modal = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {
     visible: visible
   }), /*#__PURE__*/React.createElement(Container, {
-    onClick: e => {
-      e.stopPropagation();
-      onClose();
-    }
+    onClick: containerClickHandler
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: true
   }, /*#__PURE__*/React.createElement(CloseModalContext.Provider, {
@@ -215,8 +216,8 @@ const Modal = /*#__PURE__*/forwardRef(({
     visible: visible,
     size: size,
     tabIndex: -1,
-    onKeyDown: keyDownHandler,
-    onClick: clickHandler,
+    onKeyDown: contentKeyDownHandler,
+    onClick: contentClickHandler,
     role: "dialog",
     "aria-modal": true,
     "aria-labelledby": ariaLabelledBy,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","ThemeOverrider","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","useMemo","useRef","FocusLock","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","CloseModalContext","createContext","useCloseModal","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","titleId","random","toString","slice","bodyId","clickHandler","e","stopPropagation","keyDownHandler","key","ariaLabelledBy","undefined","createElement","autoFocus","Provider","value","tabIndex","onKeyDown","role","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","_extends","danger","loading","disabled","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\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\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\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\n    useBodyScroll(!visible);\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    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container\n          onClick={(e) => {\n            e.stopPropagation();\n            onClose();\n          }}\n        >\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\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            </CloseModalContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","m","Portal","ellipsisStyles","enableScrollingStyles","sizeStyles","ThemeOverrider","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","useMemo","useRef","FocusLock","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","CloseModalContext","createContext","useCloseModal","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","titleId","random","toString","slice","bodyId","containerClickHandler","e","stopPropagation","contentClickHandler","contentKeyDownHandler","key","ariaLabelledBy","undefined","createElement","autoFocus","Provider","value","tabIndex","onKeyDown","role","overrides","t","modalCloseButtonPaddingHorizontal","type","wide","closeLabel","_extends","danger","loading","disabled","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close } from '@os-design/icons';\nimport { m } from '@os-design/media';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { ThemeOverrider, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, {\n  KeyboardEvent,\n  MouseEvent,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport FocusLock from 'react-focus-lock';\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\nconst CloseModalContext = React.createContext<() => void>(() => {});\n\nexport const useCloseModal = () => useContext(CloseModalContext);\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\n    useBodyScroll(!visible);\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    const containerClickHandler = useCallback(\n      (e: MouseEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n        onClose();\n      },\n      [onClose]\n    );\n\n    const contentClickHandler = useCallback(\n      (e: MouseEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const contentKeyDownHandler = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    const ariaLabelledBy = useMemo(\n      () => (header === undefined ? titleId : undefined),\n      [header, titleId]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={containerClickHandler}>\n          <FocusLock autoFocus>\n            <CloseModalContext.Provider value={onClose}>\n              <Content\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={contentKeyDownHandler}\n                onClick={contentClickHandler}\n                role='dialog'\n                aria-modal\n                aria-labelledby={ariaLabelledBy}\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            </CloseModalContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACxE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,QAAQ;IAMjE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAuED,QAAA,MAAM,eAAe,6FAoGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACxE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,QAAQ;IAMjE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAwED,QAAA,MAAM,eAAe,6FAoGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,QAAQ,EAIT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,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;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;;iGAUrB,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAKjE,QAAA,MAAM,KAAK,mFAqIV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,QAAQ,EAIT,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,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;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;;iGAUrB,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAKjE,QAAA,MAAM,KAAK,mFAwIV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.206",
+  "version": "1.0.208",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -59,5 +59,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "a77891eed727fd74ad92fea16b7337eb6a797fcc"
+  "gitHead": "87c0b1436901568510d2a9bb0aa1267dd9cd4905"
 }

package/src/ListItemActions/index.tsx

@@ -33,6 +33,7 @@ export interface ListItemActionsProps extends JsxDivProps, WithSize {
 
 const Container = styled.div`
   position: relative;
+  overflow: hidden;
 
   @media (hover: hover) {
     // Hide actions by default

package/src/Modal/index.tsx

@@ -12,6 +12,8 @@ import {
 import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
 import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
 import React, {
+  KeyboardEvent,
+  MouseEvent,
   forwardRef,
   useCallback,
   useContext,
@@ -312,16 +314,24 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
       [id]
     );
 
-    const clickHandler = useCallback(
-      (e) => {
+    const containerClickHandler = useCallback(
+      (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        onClose();
+      },
+      [onClose]
+    );
+
+    const contentClickHandler = useCallback(
+      (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         onClick(e);
       },
       [onClick]
     );
 
-    const keyDownHandler = useCallback(
-      (e) => {
+    const contentKeyDownHandler = useCallback(
+      (e: KeyboardEvent<HTMLDivElement>) => {
         if (e.key === 'Escape') {
           e.stopPropagation();
           onClose();
@@ -340,20 +350,15 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
     return (
       <Portal>
         <ModalMask visible={visible} />
-        <Container
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose();
-          }}
-        >
+        <Container onClick={containerClickHandler}>
           <FocusLock autoFocus>
             <CloseModalContext.Provider value={onClose}>
               <Content
                 visible={visible}
                 size={size}
                 tabIndex={-1}
-                onKeyDown={keyDownHandler}
-                onClick={clickHandler}
+                onKeyDown={contentKeyDownHandler}
+                onClick={contentClickHandler}
                 role='dialog'
                 aria-modal
                 aria-labelledby={ariaLabelledBy}