@os-design/core 1.0.196 → 1.0.198

package/dist/esm/Button/index.js

@@ -1,13 +1,16 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { m } from '@os-design/media';
 import { resetButtonStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
 import { clr } from '@os-design/theming';
-import { css } from '@emotion/react';
-import { m } from '@os-design/media';
-import useButtonColors from './utils/useButtonColors';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
 import ButtonContent from './ButtonContent';
+import useButtonColors from './utils/useButtonColors';
+
+// Used by Button, LinkButton
+
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SACEC,iBAAiB,EACjBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,eAAe,MAAwB,yBAAyB;;AAOvE;;AAmDA,MAAMC,WAAW,GAAIC,CAAC,IACpB,CAACA,CAAC,CAACC,QAAQ,IACXd,GAAI;AACN;AACA;AACA;AACA,4BAA4BM,GAAG,CAACO,CAAC,CAACE,MAAM,CAACC,OAAO,CAAE;AAClD;AACA;AACA,GAAG;AAEH,MAAMC,aAAa,GAAIJ,CAAC,IACtBA,CAAC,CAACK,OAAO,KAAK,SAAS,IACvBlB,GAAI;AACN,aAAaM,GAAG,CAACO,CAAC,CAACE,MAAM,CAACI,IAAI,CAAE;AAChC,wBAAwBb,GAAG,CAACO,CAAC,CAACE,MAAM,CAACK,EAAE,CAAE;AACzC,MAAMR,WAAW,CAACC,CAAC,CAAE;AACrB,GAAG;AAEH,MAAMQ,WAAW,GAAIR,CAAC,IACpBA,CAAC,CAACK,OAAO,KAAK,OAAO,IACrBlB,GAAI;AACN,aAAaM,GAAG,CAACO,CAAC,CAACE,MAAM,CAACI,IAAI,CAAE;AAChC;AACA,MAAMP,WAAW,CAACC,CAAC,CAAE;AACrB,GAAG;AAEH,MAAMS,aAAa,GAAIT,CAAC,IACtBA,CAAC,CAACK,OAAO,KAAK,SAAS,IACvBlB,GAAI;AACN,aAAaM,GAAG,CAACO,CAAC,CAACE,MAAM,CAACI,IAAI,CAAE;AAChC;AACA;AACA,MAAMP,WAAW,CAACC,CAAC,CAAE;AACrB,GAAG;AAEH,MAAMU,iBAAiB,GAAIV,CAAC,IAC1BA,CAAC,CAACW,IAAI,KAAK,SAAS,IACpBxB,GAAI;AACN,MAAME,CAAC,CAACuB,GAAG,CAACC,GAAI;AAChB;AACA;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAId,CAAC,IACzBA,CAAC,CAACW,IAAI,KAAK,QAAQ,IACnBxB,GAAI;AACN;AACA,GAAG;AAEH,MAAM4B,cAAc,GAAIf,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVd,GAAI;AACN;AACA,GAAG;AAEH,OAAO,MAAM6B,YAAY,GAAG5B,MAAM,CAChC,QAAQ,EACRM,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CACjE,CAAqB;AACrB,IAAIJ,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAoBU,CAAC,IAAKA,CAAC,CAACiB,KAAK,CAACC,YAAa;AAC/C,YAAalB,CAAC,IAAKA,CAAC,CAACiB,KAAK,CAACE,YAAa;AACxC,eAAgBnB,CAAC,IAAKA,CAAC,CAACiB,KAAK,CAACG,uBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIhB,aAAc;AAClB,IAAIK,aAAc;AAClB,IAAID,WAAY;AAChB;AACA,IAAIE,iBAAkB;AACtB,IAAII,gBAAiB;AACrB;AACA,IAAIC,cAAe;AACnB;AACA,IAAIxB,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAE;AAClD,CAAC;;AAED;AACA;AACA;AACA,MAAM6B,MAAM,gBAAGzB,UAAU,CACvB,CACE;EACE0B,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLd,IAAI,GAAG,SAAS;EAChBe,OAAO,GAAG,KAAK;EACfzB,QAAQ,GAAG,KAAK;EAChB0B,IAAI;EACJC,QAAQ;EACRC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGnC,eAAe,CAAC;IACtDwB,IAAI;IACJC,MAAM;IACNtB;EACF,CAAC,CAAC;EAEF,oBACEN,KAAA,CAAAuC,aAAA,CAAClB,YAAY,EAAAmB,QAAA;IACX9B,OAAO,EAAEiB,IAAK;IACdpB,MAAM,EAAE8B,YAAa;IACrBrB,IAAI,EAAEA,IAAK;IACXe,OAAO,EAAEA,OAAQ;IACjBzB,QAAQ,EAAEA,QAAQ,IAAIyB,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXE,WAAW,EAAGO,CAAC,IAAK;MAClBP,WAAW,CAACO,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACF,aAAWX;EAAQ,GACfI,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETpC,KAAA,CAAAuC,aAAA,CAACrC,aAAa;IACZ2B,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBO,aAAa,EAAEA;EAAc,GAE5BL,QACY,CACH,CAAC;AAEnB,CACF,CAAC;AAEDP,MAAM,CAACiB,WAAW,GAAG,QAAQ;AAE7B,eAAejB,MAAM"}

package/dist/esm/Button/utils/useButtonColors.js

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import { useTheme } from '@os-design/theming';
+import { useMemo } from 'react';
 // Used by Button, LinkButton
 const useButtonColors = ({
   type,

package/dist/esm/Button/utils/useButtonColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonColors.js","names":["useMemo","useTheme","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\n\ninterface Props {\n  type: 'primary' | 'outline' | 'ghost';\n  danger: boolean;\n  disabled: boolean;\n}\n\nexport interface ButtonColors {\n  text: Color;\n  bg?: Color;\n  bgHover?: Color;\n}\n\nexport interface LoadingColors {\n  text: Color;\n  bg: Color;\n}\n\ninterface UseButtonColorsRes {\n  buttonColors: ButtonColors;\n  loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n  type,\n  danger,\n  disabled,\n}: Props): UseButtonColorsRes => {\n  const { theme } = useTheme();\n\n  const prefix = useMemo<string>(() => {\n    if (danger) return 'Danger';\n    return '';\n  }, [danger]);\n\n  const buttonColors = useMemo<ButtonColors>(() => {\n    if (type === 'primary') {\n      return !disabled\n        ? {\n            text: theme[`button${prefix}PrimaryColorText`],\n            bg: theme[`button${prefix}PrimaryColorBg`],\n            bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n          }\n        : {\n            text: theme.buttonDisabledPrimaryColorText,\n            bg: theme.buttonDisabledPrimaryColorBg,\n          };\n    }\n    return !disabled\n      ? {\n          text: theme[`button${prefix}GhostColorText`],\n          bgHover: theme[`button${prefix}GhostColorBgHover`],\n        }\n      : {\n          text: theme.buttonDisabledGhostColorText,\n        };\n  }, [type, disabled, theme, prefix]);\n\n  const loadingColors = useMemo<LoadingColors>(() => {\n    if (disabled) {\n      return {\n        text: theme.buttonDisabledPrimaryColorText,\n        bg: theme.buttonDisabledPrimaryColorBg,\n      };\n    }\n    if (type === 'primary') {\n      return {\n        text: theme[`button${prefix}PrimaryColorLoadingText`],\n        bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n      };\n    }\n    return {\n      text: theme[`button${prefix}GhostColorLoadingText`],\n      bg: theme[`button${prefix}GhostColorLoadingBg`],\n    };\n  }, [disabled, type, theme, prefix]);\n\n  return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAAgBC,QAAQ,QAAQ,oBAAoB;AAwBpD;AACA,MAAMC,eAAe,GAAG,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGL,QAAQ,EAAE;EAE5B,MAAMM,MAAM,GAAGP,OAAO,CAAS,MAAM;IACnC,IAAII,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGR,OAAO,CAAe,MAAM;IAC/C,IAAIG,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGf,OAAO,CAAgB,MAAM;IACjD,IAAIK,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe"}
+{"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n  type: 'primary' | 'outline' | 'ghost';\n  danger: boolean;\n  disabled: boolean;\n}\n\nexport interface ButtonColors {\n  text: Color;\n  bg?: Color;\n  bgHover?: Color;\n}\n\nexport interface LoadingColors {\n  text: Color;\n  bg: Color;\n}\n\ninterface UseButtonColorsRes {\n  buttonColors: ButtonColors;\n  loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n  type,\n  danger,\n  disabled,\n}: Props): UseButtonColorsRes => {\n  const { theme } = useTheme();\n\n  const prefix = useMemo<string>(() => {\n    if (danger) return 'Danger';\n    return '';\n  }, [danger]);\n\n  const buttonColors = useMemo<ButtonColors>(() => {\n    if (type === 'primary') {\n      return !disabled\n        ? {\n            text: theme[`button${prefix}PrimaryColorText`],\n            bg: theme[`button${prefix}PrimaryColorBg`],\n            bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n          }\n        : {\n            text: theme.buttonDisabledPrimaryColorText,\n            bg: theme.buttonDisabledPrimaryColorBg,\n          };\n    }\n    return !disabled\n      ? {\n          text: theme[`button${prefix}GhostColorText`],\n          bgHover: theme[`button${prefix}GhostColorBgHover`],\n        }\n      : {\n          text: theme.buttonDisabledGhostColorText,\n        };\n  }, [type, disabled, theme, prefix]);\n\n  const loadingColors = useMemo<LoadingColors>(() => {\n    if (disabled) {\n      return {\n        text: theme.buttonDisabledPrimaryColorText,\n        bg: theme.buttonDisabledPrimaryColorBg,\n      };\n    }\n    if (type === 'primary') {\n      return {\n        text: theme[`button${prefix}PrimaryColorLoadingText`],\n        bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n      };\n    }\n    return {\n      text: theme[`button${prefix}GhostColorLoadingText`],\n      bg: theme[`button${prefix}GhostColorLoadingBg`],\n    };\n  }, [disabled, type, theme, prefix]);\n\n  return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGd,OAAO,CAAgB,MAAM;IACjD,IAAII,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe"}

package/dist/esm/Checkbox/index.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Check } from '@os-design/icons';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps, useForwardedState } from '@os-design/utils';
 import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import React, { forwardRef } from 'react';
 const uncheckedIconStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.checkboxUncheckedColorBg)};
     border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n  JSX.IntrinsicElements['label'],\n  'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n  /**\n   * Whether the checkbox is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the checkbox is checked.\n   * @default false\n   */\n  value?: boolean;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: boolean;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n  `;\n\nconst checkedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n  `;\n\nconst disabledIconStyles = (p) =>\n  p.disabled &&\n  css`\n    background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n    color: ${clr(p.theme.checkboxDisabledColorIcon)};\n    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n  `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n  'span',\n  omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n  ${uncheckedIconStyles};\n  ${checkedIconStyles};\n  ${disabledIconStyles};\n  ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ${hoverUncheckedIconStyles(p)};\n          ${hoverCheckedIconStyles(p)};\n        }\n      }\n    }\n  `;\n\nconst disabledContainerStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\ninterface ContainerProps\n  extends Required<Pick<CheckboxProps, 'disabled'>>,\n    Pick<CheckboxProps, 'size'> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n  'label',\n  omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n  ${hoverStyles};\n  ${disabledContainerStyles};\n  ${sizeStyles};\n  ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.checkboxDisabledColorText)};\n  `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n  ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onKeyDown = () => {},\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Container\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(e.key)) {\n            setForwardedValue(!forwardedValue);\n            e.preventDefault();\n          }\n          onKeyDown(e);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='checkbox'\n        aria-checked={forwardedValue}\n        aria-disabled={disabled}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer disabled={disabled} checked={forwardedValue}>\n          {forwardedValue && <Check />}\n        </IconContainer>\n\n        {children && <Text disabled={disabled}>{children}</Text>}\n      </Container>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","Check","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","createElement","_extends","tabIndex","onClick","e","includes","key","preventDefault","role","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Check } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxLabelProps = Omit<\n  JSX.IntrinsicElements['label'],\n  'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n  /**\n   * Whether the checkbox is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the checkbox is checked.\n   * @default false\n   */\n  value?: boolean;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: boolean;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n  `;\n\nconst checkedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n  `;\n\nconst disabledIconStyles = (p) =>\n  p.disabled &&\n  css`\n    background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n    color: ${clr(p.theme.checkboxDisabledColorIcon)};\n    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n  `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n  'span',\n  omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n  ${uncheckedIconStyles};\n  ${checkedIconStyles};\n  ${disabledIconStyles};\n  ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ${hoverUncheckedIconStyles(p)};\n          ${hoverCheckedIconStyles(p)};\n        }\n      }\n    }\n  `;\n\nconst disabledContainerStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\ninterface ContainerProps\n  extends Required<Pick<CheckboxProps, 'disabled'>>,\n    Pick<CheckboxProps, 'size'> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n  'label',\n  omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n  ${hoverStyles};\n  ${disabledContainerStyles};\n  ${sizeStyles};\n  ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.checkboxDisabledColorText)};\n  `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n  ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onKeyDown = () => {},\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Container\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(e.key)) {\n            setForwardedValue(!forwardedValue);\n            e.preventDefault();\n          }\n          onKeyDown(e);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='checkbox'\n        aria-checked={forwardedValue}\n        aria-disabled={disabled}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer disabled={disabled} checked={forwardedValue}>\n          {forwardedValue && <Check />}\n        </IconContainer>\n\n        {children && <Text disabled={disabled}>{children}</Text>}\n      </Container>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/esm/CheckboxSkeleton/index.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import styled from '@emotion/styled';
-import React, { forwardRef } from 'react';
 import { sizeStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
 import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
 import Skeleton from '../Skeleton';
 const Container = styled('div', omitEmotionProps('size'))`
   user-select: none;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","clr","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaI,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIP,UAAW;AACf,CAAC;AAED,MAAMQ,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGhB,UAAU,CACjC,CAAC;EAAEiB,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzB,oBAAC,SAAS;EAAC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACtD,oBAAC,aAAa,OAAG,EAChBF,QAAQ,iBAAI,oBAAC,IAAI,QAAEA,QAAQ,CAAQ,CAEvC,CACF;AAEDD,gBAAgB,CAACI,WAAW,GAAG,kBAAkB;AAEjD,eAAeJ,gBAAgB"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AAExC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIT,UAAW;AACf,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGb,UAAU,CACjC,CAAC;EAAEc,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzBjB,KAAA,CAAAkB,aAAA,CAACf,SAAS,EAAAgB,QAAA;EAACC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACtDjB,KAAA,CAAAkB,aAAA,CAACX,aAAa,MAAE,CAAC,EAChBQ,QAAQ,iBAAIf,KAAA,CAAAkB,aAAA,CAACP,IAAI,QAAEI,QAAe,CAC1B,CAEf,CAAC;AAEDD,gBAAgB,CAACO,WAAW,GAAG,kBAAkB;AAEjD,eAAeP,gBAAgB"}

package/dist/esm/DatePicker/DatePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.js","names":["styled","getAccessibilityDateLabel","useDatePickerCalendar","Left","Right","ellipsisStyles","resetFocusStyles","transitionStyles","clr","React","useCallback","useEffect","useRef","Button","MonthContainer","div","Month","Calendar","p","theme","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DayInRange","colorText","slice","DatePickerCalendar","firstDayOfWeek","locale","value","onSelect","valueRef","current","onSelectRef","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: Date | [Date, Date] | null;\n  onSelect?: (value: Date) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DayInRange = styled(Day)`\n  background-color: ${(p) =>\n    clr([\n      ...p.theme.colorText.slice(0, 3),\n      (p.theme.colorText[3] || 1) * 0.05,\n    ] as Color)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onSelect = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const onSelectRef = useRef(onSelect);\n  useEffect(() => {\n    onSelectRef.current = onSelect;\n  }, [onSelect]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        onSelectRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          onSelectRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'dayInRange') {\n            return (\n              <DayInRange key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayInRange>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerCalendar.js","names":["styled","getAccessibilityDateLabel","useDatePickerCalendar","Left","Right","ellipsisStyles","resetFocusStyles","transitionStyles","clr","React","useCallback","useEffect","useRef","Button","MonthContainer","div","Month","Calendar","p","theme","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DayInRange","colorText","slice","DatePickerCalendar","firstDayOfWeek","locale","value","onSelect","valueRef","current","onSelectRef","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","createElement","Fragment","type","wide","size","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","map","item","_extends","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Color, clr } from '@os-design/theming';\n\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: Date | [Date, Date] | null;\n  onSelect?: (value: Date) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DayInRange = styled(Day)`\n  background-color: ${(p) =>\n    clr([\n      ...p.theme.colorText.slice(0, 3),\n      (p.theme.colorText[3] || 1) * 0.05,\n    ] as Color)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onSelect = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const onSelectRef = useRef(onSelect);\n  useEffect(() => {\n    onSelectRef.current = onSelect;\n  }, [onSelect]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        onSelectRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          onSelectRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'dayInRange') {\n            return (\n              <DayInRange key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayInRange>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}

package/dist/esm/DatePicker/index.js

@@ -9,7 +9,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import Button from '../Button';
 import Modal from '../Modal';
 import Popover from '../Popover';
-import { ClearIcon, ToggleLeftAddon, Placeholder, ToggleRightAddon, SelectContainer, Title, ToggleContent, ToggleIconContainer } from '../Select';
+import { ClearIcon, Placeholder, SelectContainer, Title, ToggleContent, ToggleIconContainer, ToggleLeftAddon, ToggleRightAddon } from '../Select';
 import TimePicker from '../TimePicker';
 import DatePickerCalendar from './DatePickerCalendar';
 const StyledPopover = styled(Popover)`

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","ClearIcon","ToggleLeftAddon","Placeholder","ToggleRightAddon","SelectContainer","Title","ToggleContent","ToggleIconContainer","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","onBlur","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","blurHandler","e","valueIsSpecified","rightHasPaddingValue","rightValue","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport {\n  ClearIcon,\n  ToggleLeftAddon,\n  Placeholder,\n  ToggleRightAddon,\n  SelectContainer,\n  Title,\n  ToggleContent,\n  ToggleIconContainer,\n} from '../Select';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup calendar.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\nexport interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\nexport interface DateRangePickerProps\n  extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || (\n          <ToggleIconContainer>\n            {opened ? <Up /> : <Down />}\n          </ToggleIconContainer>\n        )\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleLeftAddon hasPadding={leftHasPadding}>\n                {left}\n              </ToggleLeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <ToggleContent hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </ToggleContent>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleRightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </ToggleRightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAEEC,aAAa,EACbC,yBAAyB,EACzBC,iBAAiB,QACZ,8BAA8B;AACrC,SAASC,IAAI,EAAEC,EAAE,QAAQ,kBAAkB;AAC3C,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SACEC,eAAe,EACfC,iBAAiB,EACjBC,WAAW,QACN,kBAAkB;AACzB,OAAOC,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,OAAO,MAAM,YAAY;AAChC,SACEC,SAAS,EACTC,eAAe,EACfC,WAAW,EACXC,gBAAgB,EAChBC,eAAe,EACfC,KAAK,EACLC,aAAa,EACbC,mBAAmB,QACd,WAAW;AAClB,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,kBAAkB,MAAM,sBAAsB;AAgHrD,MAAMC,aAAa,GAAG/B,MAAM,CAACoB,OAAO,CAAE;AACtC,aAAcY,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,iBAAkB;AAC9C,CAAC;AAED,MAAMC,aAAa,GAAGnC,MAAM,CAACoC,GAAI;AACjC;AACA;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrC,MAAM,CAACoC,GAAI;AACxB;AACA,iBAAkBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,UAAW;AAC3C,CAAC;AAED,MAAMC,gBAAgB,GAAGvC,MAAM,CAAC6B,UAAU,CAAE;AAC5C;AACA;AACA,CAAC;AAED,MAAMW,eAAe,GAAG;EAAEC,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAO;AAAE,CAAC;AAEpD,MAAMC,UAAU,GAAG,CAACC,IAAU,EAAEC,IAAkB,KAAK;EACrD,MAAMC,CAAC,GAAG,IAAIC,IAAI,CAAC,CAAC,CAAC;EACrBD,CAAC,CAACE,WAAW,CAACJ,IAAI,CAACK,WAAW,EAAE,CAAC;EACjCH,CAAC,CAACI,QAAQ,CAACN,IAAI,CAACO,QAAQ,EAAE,CAAC;EAC3BL,CAAC,CAACM,OAAO,CAACR,IAAI,CAACS,OAAO,EAAE,CAAC;EACzBP,CAAC,CAACQ,QAAQ,CAAC,CAAC,CAAC;EACbR,CAAC,CAACS,UAAU,CAAC,CAAC,CAAC;EACf,IAAIV,IAAI,EAAE;IACRC,CAAC,CAACQ,QAAQ,CAACT,IAAI,CAACW,QAAQ,EAAE,CAAC;IAC3BV,CAAC,CAACS,UAAU,CAACV,IAAI,CAACY,UAAU,EAAE,CAAC;EACjC;EACA,OAAOX,CAAC;AACV,CAAC;;AAED;AACA;AACA;AACA,MAAMY,UAAU,gBAAG9C,UAAU,CAC3B,CACE;EACE+C,IAAI;EACJC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,eAAe,GAAG,KAAK;EACvBC,WAAW;EACXC,QAAQ,GAAG,KAAK;EAChBC,SAAS,GAAG,KAAK;EACjBC,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,cAAc,GAAG,QAAQ;EACzBC,MAAM,GAAGpE,aAAa;EACtBqE,QAAQ,GAAG,KAAK;EAChBC,YAAY,GAAG,SAAS;EACxBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,OAAO,GAAG,MAAM,CAAC,CAAC;EAClBC,MAAM,GAAG,MAAM,CAAC,CAAC;EACjBC,IAAI;EACJ,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,YAAY,EAAEC,kBAAkB,CAAC,GAAG1E,eAAe,CAACwE,GAAG,CAAC;EAC/D,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGnE,QAAQ,CAACiD,QAAQ,CAAC;EAC9C;EACA,MAAM,CAACmB,cAAc,EAAEC,iBAAiB,CAAC,GAAG7E,iBAAiB,CAAM;IACjEgE,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF7D,SAAS,CAAC,MAAM;IACd,IAAImD,SAAS,EAAEgB,YAAY,CAACM,OAAO,EAAEC,KAAK,EAAE;EAC9C,CAAC,EAAE,CAACvB,SAAS,EAAEgB,YAAY,CAAC,CAAC;EAE7B,MAAMQ,UAAU,GAAGzE,MAAM,CAAC4D,OAAO,CAAC;EAClC9D,SAAS,CAAC,MAAM;IACd2E,UAAU,CAACF,OAAO,GAAGX,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb9D,SAAS,CAAC,MAAM;IACd,IAAI,CAACqE,MAAM,EAAE;MACXM,UAAU,CAACF,OAAO,EAAE;MACpBN,YAAY,CAACM,OAAO,EAAEC,KAAK,EAAE;IAC/B;EACF,CAAC,EAAE,CAACP,YAAY,EAAEE,MAAM,CAAC,CAAC;EAE1B,MAAMO,cAAc,GAAGvF,iBAAiB,CAAC;IACvCkF,cAAc;IACdlB,MAAM;IACNG,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,MAAMoB,YAAY,GAAG9E,WAAW,CAAC,MAAM;IACrCuE,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN1E,WAAW,CACR,OAAOkF,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRF,YAAY,CACb;EACD,MAAMG,OAAO,GAAGxF,aAAa,CAAC,IAAI,CAAC;EAEnC,MAAMyF,WAAW,GAAGlF,WAAW,CAC5BmF,CAAC,IAAK;IACL,IAAI,CAACb,MAAM,EAAEN,MAAM,CAACmB,CAAC,CAAC;EACxB,CAAC,EACD,CAACnB,MAAM,EAAEM,MAAM,CAAC,CACjB;EAED,MAAMc,gBAAgB,GAAGlF,OAAO,CAC9B,MAAM2E,cAAc,KAAKG,SAAS,IAAIH,cAAc,KAAK,IAAI,EAC7D,CAACA,cAAc,CAAC,CACjB;EAED,MAAMQ,oBAAoB,GAAGnF,OAAO,CAAC,MAAM;IACzC,IAAIkF,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAOpC,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEmC,gBAAgB,CAAC,CAAC;EAE9C,MAAME,UAAU,GAAGpF,OAAO,CAAC,MAAM;IAC/B,IAAIkF,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,oBAAC,MAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAEjC,QAAS;QACnB,OAAO,EAAGgC,CAAC,IAAK;UACdV,iBAAiB,CAAC,IAAI,CAAC;UACvBU,CAAC,CAACI,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAGJ,CAAC,IAAK;UAChB,IAAIhC,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACqC,QAAQ,CAACL,CAAC,CAACM,GAAG,CAAC,EAAE;YAClChB,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACL,YAAY,CAACM,OAAO,EAAE;YAC3BN,YAAY,CAACM,OAAO,CAACC,KAAK,EAAE;YAC5BQ,CAAC,CAACO,cAAc,EAAE;YAClBP,CAAC,CAACI,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAY/B,MAAM,CAACmC;MAAW,gBAE9B,oBAAC,SAAS,OAAG,CACN,CACL;IAEV;IACA,OACE3C,KAAK,iBACH,oBAAC,mBAAmB,QACjBsB,MAAM,gBAAG,oBAAC,EAAE,OAAG,gBAAG,oBAAC,IAAI,OAAG,CAE9B;EAEL,CAAC,EAAE,CACDF,YAAY,EACZjB,QAAQ,EACRK,MAAM,CAACmC,UAAU,EACjBrB,MAAM,EACNtB,KAAK,EACLyB,iBAAiB,EACjBW,gBAAgB,CACjB,CAAC;EAEF,MAAMQ,kBAAkB,GAAGzF,MAAM,CAAmB,IAAI,CAAC;EACzD,MAAM0F,mBAAmB,GAAG1F,MAAM,CAAmB,IAAI,CAAC;EAC1D,MAAM2F,eAAe,GAAG3F,MAAM,CAAC,KAAK,CAAC;EAErCF,SAAS,CAAC,MAAM;IACd6F,eAAe,CAACpB,OAAO,GAAG,KAAK;EACjC,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,MAAMyB,aAAa,GAAG/F,WAAW,CAC9B+B,IAAU,IAAK;IACd0C,iBAAiB,CAAEuB,IAAI,IAAK;MAC1B,IAAI,CAACrC,KAAK,EAAE,OAAO7B,UAAU,CAACC,IAAI,EAAEiE,IAAI,CAAC;MAEzC,MAAM/D,CAAC,GAAGH,UAAU,CAACC,IAAI,CAAC;MAC1B,MAAMkE,SAAS,GACbD,IAAI,IAAIE,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAIF,eAAe,CAACpB,OAAO,GAClD,CAAC,IAAIxC,IAAI,CAAC8D,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,EAAE,CAAC,EAAEtE,UAAU,CAACC,IAAI,EAAEiE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,CAAC/D,CAAC,EAAEA,CAAC,CAAC;MAEZ6D,eAAe,CAACpB,OAAO,GAAG,CAACoB,eAAe,CAACpB,OAAO;MAClD,OAAOuB,SAAS,CAACI,IAAI,CACnB,CAACC,CAAO,EAAEC,CAAO,KAAKD,CAAC,CAACF,OAAO,EAAE,GAAGG,CAAC,CAACH,OAAO,EAAE,CAChD;IACH,CAAC,CAAC;EACJ,CAAC,EACD,CAACzC,KAAK,EAAEc,iBAAiB,CAAC,CAC3B;EAED,MAAM+B,iBAAiB,GAAGtG,OAAO,CAC/B,mBACE,oBAAC,kBAAkB;IACjB,cAAc,EAAEqD,cAAe;IAC/B,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEgB,cAAe;IACtB,QAAQ,EAAGiC,CAAC,IAAK;MACfV,aAAa,CAACU,CAAC,CAAC;MAChBb,kBAAkB,CAAClB,OAAO,EAAEC,KAAK,EAAE;MACnC,IAAI,CAAClB,QAAQ,KAAK,CAACE,KAAK,IAAI,CAACmC,eAAe,CAACpB,OAAO,CAAC,EAAE;QACrDI,YAAY,EAAE;MAChB;IACF;EAAE,EAEL,EACD,CACEiB,aAAa,EACbjB,YAAY,EACZvB,cAAc,EACdiB,cAAc,EACdhB,MAAM,EACNG,KAAK,EACLF,QAAQ,CACT,CACF;EAED,MAAMiD,kBAAkB,GAAG1G,WAAW,CACnCmF,CAAC,IAAK;IACL,IAAIA,CAAC,CAACwB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjCf,mBAAmB,CAACnB,OAAO,EAAEC,KAAK,EAAE;IACpCF,iBAAiB,CAAC,CAAC,CAACoC,IAAI,CAAC,KAAK;MAC5B,MAAMC,MAAM,GAAG,IAAI5E,IAAI,CAAC2E,IAAI,CAACT,OAAO,EAAE,CAAC;MACvCU,MAAM,CAACrE,QAAQ,CAACqE,MAAM,CAACnE,QAAQ,EAAE,GAAG,CAAC,CAAC;MACtC,OAAO,CAACkE,IAAI,EAAEC,MAAM,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,EACD,CAACrC,iBAAiB,CAAC,CACpB;EAED,MAAMsC,oBAAoB,GAAG/G,WAAW,CACrCmF,CAAC,IAAK;IACL,IAAIA,CAAC,CAACwB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC9B,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,MAAMkC,aAAa,GAAG9G,OAAO,CAC3B,MACEuD,QAAQ,IAAIe,cAAc,gBACxB,oBAAC,aAAa,QACX0B,KAAK,CAACC,OAAO,CAAC3B,cAAc,CAAC,gBAC5B,uDACE,oBAAC,gBAAgB;IACf,GAAG,EAAEoB,kBAAmB;IACxB,SAAS;IACT,QAAQ,EAAEzC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE6C,cAAc,CAAC,CAAC,CAAE;IACzB,QAAQ,EAAGiC,CAAC,IAAKhC,iBAAiB,CAAC,CAACgC,CAAC,EAAEjC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAE;IAC3D,SAAS,EAAGW,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAIgC,CAAC,CAACM,GAAG,KAAK,OAAO,EAAE;QACrBlB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEoC;EAAmB,EAC5B,eACF,oBAAC,IAAI,QAAC,QAAC,CAAO,eACd,oBAAC,gBAAgB;IACf,GAAG,EAAEb,mBAAoB;IACzB,QAAQ,EAAE1C,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE6C,cAAc,CAAC,CAAC,CAAE;IACzB,QAAQ,EAAGiC,CAAC,IAAKhC,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEiC,CAAC,CAAC,CAAE;IAC3D,SAAS,EAAGtB,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAIgC,CAAC,CAACM,GAAG,KAAK,OAAO,EAAE;QACrBlB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEyC;EAAqB,EAC9B,CACD,gBAEH,oBAAC,gBAAgB;IACf,GAAG,EAAEnB,kBAAmB;IACxB,SAAS;IACT,QAAQ,EAAEzC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE6C,cAAe;IACtB,QAAQ,EAAEC,iBAAkB;IAC5B,SAAS,EAAGU,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAIgC,CAAC,CAACM,GAAG,KAAK,OAAO,EAAE;QACrBlB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEyC;EAAqB,EAEjC,CACa,GACd,IAAI,EACV,CACEA,oBAAoB,EACpB5D,QAAQ,EACRqB,cAAc,EACdF,MAAM,EACNG,iBAAiB,EACjBhB,QAAQ,EACRiD,kBAAkB,EAClBhD,YAAY,CACb,CACF;EAED,oBACE,uDACE,oBAAC,eAAe;IACd,MAAM,EAAEY,MAAO;IACf,QAAQ,EAAEnB,QAAS;IACnB,IAAI,EAAEc,IAAK;IACX,QAAQ,EAAE,CAACd,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,MAAM;MACb,IAAIA,QAAQ,EAAE;MACdoB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAGa,CAAC,IAAK;MAChB,IAAIhC,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACqC,QAAQ,CAACL,CAAC,CAACM,GAAG,CAAC,EAAE;QAClClB,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBa,CAAC,CAACO,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAGP,CAAC,IAAKA,CAAC,CAACO,cAAc,EAAG;IACvC,MAAM,EAAER,WAAY;IACpB,IAAI,EAAC,UAAU;IACf,cACEV,cAAc,GACVnF,yBAAyB,CAACmF,cAAc,EAAEhB,MAAM,CAAC,GACjDwB,SACL;IACD,iBAAe7B;EAAS,GACpBe,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBvB,IAAI,iBACH,oBAAC,cAAc;IACb,SAAS,EAAGmE,CAAC,KAAM;MACjBC,uBAAuB,EAAE,GAAG;MAC5BzF,UAAU,EAAEwF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;IACrD,CAAC;EAAE,gBAEH,oBAAC,eAAe;IAAC,UAAU,EAAEtE;EAAe,GACzCD,IAAI,CACW,CAErB,eAED,oBAAC,aAAa;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GAC/CoC,gBAAgB,gBACf,oBAAC,KAAK;IAAC,QAAQ,EAAEjC,QAAS;IAAC;EAAW,GACnC0B,cAAc,CACT,gBAER,oBAAC,WAAW,QAAE3B,WAAW,CAC1B,CACa,EAEfoC,UAAU,iBACT,oBAAC,cAAc;IACb,SAAS,EAAG2B,CAAC,KAAM;MACjBC,uBAAuB,EAAE,GAAG;MAC5BzF,UAAU,EAAEwF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;IACrD,CAAC;EAAE,gBAEH,oBAAC,gBAAgB;IAAC,UAAU,EAAEhC;EAAqB,GAChDC,UAAU,CACM,CAEtB,CACe,EAEjBL,OAAO,gBACN,oBAAC,aAAa;IACZ,OAAO,EAAEb,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEE,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEb;EAAK,GAEVuC,iBAAiB,EACjBQ,aAAa,CACA,gBAEhB,oBAAC,KAAK;IACJ,KAAK,EAAE9D,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEoB,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEb;EAAK,GAEVuC,iBAAiB,EACjBQ,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAEDnE,UAAU,CAACyE,WAAW,GAAG,YAAY;AAErC,eAAezE,UAAU"}
+{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","ClearIcon","Placeholder","SelectContainer","Title","ToggleContent","ToggleIconContainer","ToggleLeftAddon","ToggleRightAddon","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","onBlur","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","blurHandler","e","valueIsSpecified","rightHasPaddingValue","rightValue","createElement","type","wide","onClick","stopPropagation","onKeyDown","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","onSelect","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","Fragment","notation","containerProps","onKeyUp","_extends","tabIndex","onMouseDown","role","overrides","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","hasPadding","hasLeft","hasRight","trigger","placement","visible","title","header","footer","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport {\n  ClearIcon,\n  Placeholder,\n  SelectContainer,\n  Title,\n  ToggleContent,\n  ToggleIconContainer,\n  ToggleLeftAddon,\n  ToggleRightAddon,\n} from '../Select';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup calendar.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\nexport interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\nexport interface DateRangePickerProps\n  extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || (\n          <ToggleIconContainer>\n            {opened ? <Up /> : <Down />}\n          </ToggleIconContainer>\n        )\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleLeftAddon hasPadding={leftHasPadding}>\n                {left}\n              </ToggleLeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <ToggleContent hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </ToggleContent>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleRightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </ToggleRightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n  enableScrollingStyles,\n  resetFocusStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  ${resetFocusStyles};\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\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 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\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    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseDrawerContext.Provider value={onClose}>\n              <Content\n                placement={placement}\n                width={width}\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                {...rest}\n                ref={ref}\n              >\n                {children}\n              </Content>\n            </CloseDrawerContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","createElement","autoFocus","Provider","value","_extends","tabIndex","onKeyDown","role","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  enableScrollingStyles,\n  resetFocusStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  ${resetFocusStyles};\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\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 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\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    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseDrawerContext.Provider value={onClose}>\n              <Content\n                placement={placement}\n                width={width}\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                {...rest}\n                ref={ref}\n              >\n                {children}\n              </Content>\n            </CloseDrawerContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/esm/Form/index.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { sizeStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
 import FormConfigContext from './FormConfigContext';
 const StyledForm = styled('div', omitEmotionProps('size'))`
   max-width: 50em;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","sizeStyles","omitEmotionProps","FormConfigContext","StyledForm","Form","optionalText","rest","ref","memoizedOptionalText","displayName"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport FormConfigContext from './FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormProps extends JsxDivProps, WithSize {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   * @default optional\n   */\n  optionalText?: string;\n}\n\nconst StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ${sizeStyles};\n`;\n\n/**\n * The wrapper of the form.\n */\nconst Form = forwardRef<HTMLDivElement, FormProps>(\n  ({ optionalText = 'optional', ...rest }, ref) => {\n    const memoizedOptionalText = useMemo(\n      () => ({ optionalText }),\n      [optionalText]\n    );\n\n    return (\n      <FormConfigContext.Provider value={memoizedOptionalText}>\n        <StyledForm {...rest} ref={ref} />\n      </FormConfigContext.Provider>\n    );\n  }\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,iBAAiB,MAAM,qBAAqB;AAWnD,MAAMC,UAAU,GAAGJ,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMI,IAAI,gBAAGP,UAAU,CACrB,CAAC;EAAEQ,YAAY,GAAG,UAAU;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC/C,MAAMC,oBAAoB,GAAGV,OAAO,CAClC,OAAO;IAAEO;EAAa,CAAC,CAAC,EACxB,CAACA,YAAY,CAAC,CACf;EAED,oBACE,oBAAC,iBAAiB,CAAC,QAAQ;IAAC,KAAK,EAAEG;EAAqB,gBACtD,oBAAC,UAAU,eAAKF,IAAI;IAAE,GAAG,EAAEC;EAAI,GAAG,CACP;AAEjC,CAAC,CACF;AAEDH,IAAI,CAACK,WAAW,GAAG,MAAM;AAEzB,eAAeL,IAAI"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","useMemo","FormConfigContext","StyledForm","Form","optionalText","rest","ref","memoizedOptionalText","createElement","Provider","value","_extends","displayName"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\nimport FormConfigContext from './FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormProps extends JsxDivProps, WithSize {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   * @default optional\n   */\n  optionalText?: string;\n}\n\nconst StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ${sizeStyles};\n`;\n\n/**\n * The wrapper of the form.\n */\nconst Form = forwardRef<HTMLDivElement, FormProps>(\n  ({ optionalText = 'optional', ...rest }, ref) => {\n    const memoizedOptionalText = useMemo(\n      () => ({ optionalText }),\n      [optionalText]\n    );\n\n    return (\n      <FormConfigContext.Provider value={memoizedOptionalText}>\n        <StyledForm {...rest} ref={ref} />\n      </FormConfigContext.Provider>\n    );\n  }\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,iBAAiB,MAAM,qBAAqB;AAWnD,MAAMC,UAAU,GAAGP,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMO,IAAI,gBAAGJ,UAAU,CACrB,CAAC;EAAEK,YAAY,GAAG,UAAU;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC/C,MAAMC,oBAAoB,GAAGP,OAAO,CAClC,OAAO;IAAEI;EAAa,CAAC,CAAC,EACxB,CAACA,YAAY,CACf,CAAC;EAED,oBACEN,KAAA,CAAAU,aAAA,CAACP,iBAAiB,CAACQ,QAAQ;IAACC,KAAK,EAAEH;EAAqB,gBACtDT,KAAA,CAAAU,aAAA,CAACN,UAAU,EAAAS,QAAA,KAAKN,IAAI;IAAEC,GAAG,EAAEA;EAAI,EAAE,CACP,CAAC;AAEjC,CACF,CAAC;AAEDH,IAAI,CAACS,WAAW,GAAG,MAAM;AAEzB,eAAeT,IAAI"}

package/dist/esm/FormDivider/index.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { ellipsisStyles, sizeStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
 import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
 const Container = styled('div', omitEmotionProps('size'))`
   display: flex;
   align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","sizeStyles","omitEmotionProps","clr","Container","p","theme","formDividerColor","Content","div","Title","colorText","sizes","large","Description","inputColorPlaceholder","small","FormDivider","title","description","rest","ref","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,UAAU,QAAkB,mBAAmB;AACxE,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AAexC,MAAMC,SAAS,GAAGL,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BG,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AACjE;AACA;AACA,IAAIN,UAAW;AACf,CAAC;AAED,MAAMO,OAAO,GAAGT,MAAM,CAACU,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGX,MAAM,CAACU,GAAI;AACzB,WAAYJ,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACC,KAAM;AAC1C;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACU,GAAI;AAC/B,WAAYJ,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACS,qBAAqB,CAAE;AACrD,eAAgBV,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACI,KAAM;AAC1C;AACA,IAAIhB,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMiB,WAAW,gBAAGnB,UAAU,CAC5B,CAAC;EAAEoB,KAAK;EAAEC,WAAW;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnC,oBAAC,SAAS;EAAC,IAAI,EAAC;AAAW,GAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBAC7C,oBAAC,OAAO,qBACN,oBAAC,KAAK,QAAEH,KAAK,CAAS,eACtB,oBAAC,WAAW,QAAEC,WAAW,CAAe,CAChC,CAEb,CACF;AAEDF,WAAW,CAACK,WAAW,GAAG,aAAa;AAEvC,eAAeL,WAAW"}
+{"version":3,"file":"index.js","names":["styled","ellipsisStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","Container","p","theme","formDividerColor","Content","div","Title","colorText","sizes","large","Description","inputColorPlaceholder","small","FormDivider","title","description","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,UAAU,QAAkB,mBAAmB;AACxE,SAASC,GAAG,QAAQ,oBAAoB;AAExC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AACjE;AACA;AACA,IAAIR,UAAW;AACf,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACC,KAAM;AAC1C;AACA,IAAIf,cAAe;AACnB,CAAC;AAED,MAAMgB,WAAW,GAAGjB,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACS,qBAAqB,CAAE;AACrD,eAAgBV,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACI,KAAM;AAC1C;AACA,IAAIlB,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMmB,WAAW,gBAAGd,UAAU,CAC5B,CAAC;EAAEe,KAAK;EAAEC,WAAW;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnCnB,KAAA,CAAAoB,aAAA,CAAClB,SAAS,EAAAmB,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBAC7CnB,KAAA,CAAAoB,aAAA,CAACd,OAAO,qBACNN,KAAA,CAAAoB,aAAA,CAACZ,KAAK,QAAEQ,KAAa,CAAC,eACtBhB,KAAA,CAAAoB,aAAA,CAACR,WAAW,QAAEK,WAAyB,CAChC,CACA,CAEf,CAAC;AAEDF,WAAW,CAACQ,WAAW,GAAG,aAAa;AAEvC,eAAeR,WAAW"}