@os-design/core 1.0.156 → 1.0.158

package/dist/esm/Switch/index.js

@@ -1,5 +1,4 @@
 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';
@@ -7,29 +6,24 @@ import { resetButtonStyles, sizeStyles, transitionStyles } from '@os-design/styl
 import { omitEmotionProps, useForwardedState } from '@os-design/utils';
 import { clr } from '@os-design/theming';
 const FRACTION_DIGITS = 4;
-
 const uncheckedStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.switchUncheckedColorBg)};
     &::after {
       left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS)}em;
     }
   `;
-
 const checkedStyles = p => p.checked && css`
     background-color: ${clr(p.theme.switchCheckedColorBg)};
     &::after {
       left: ${+(p.theme.switchWidth - p.theme.switchCircleSize - (p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS)}em;
     }
   `;
-
 const hoverUncheckedStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.switchUncheckedColorBgHover)};
   `;
-
 const hoverCheckedStyles = p => p.checked && css`
     background-color: ${clr(p.theme.switchCheckedColorBgHover)};
   `;
-
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover,
@@ -39,21 +33,17 @@ const hoverStyles = p => !p.disabled && css`
       }
     }
   `;
-
 const disabledUncheckedStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};
   `;
-
 const disabledCheckedStyles = p => p.checked && css`
     background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};
   `;
-
 const disabledStyles = p => p.disabled && css`
     cursor: not-allowed;
     ${disabledUncheckedStyles(p)};
     ${disabledCheckedStyles(p)};
   `;
-
 const StyledSwitch = styled('button', omitEmotionProps('size', 'checked'))`
   ${resetButtonStyles};
   position: relative;
@@ -87,10 +77,10 @@ const StyledSwitch = styled('button', omitEmotionProps('size', 'checked'))`
   ${sizeStyles};
   ${transitionStyles('background-color')};
 `;
+
 /**
  * The switch that can be enabled or disabled.
  */
-
 const Switch = /*#__PURE__*/forwardRef(({
   disabled = false,
   value,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","FRACTION_DIGITS","uncheckedStyles","p","checked","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","switchColorCircleBg","Switch","value","defaultValue","onChange","size","onMouseDown","rest","ref","forwardedValue","setForwardedValue","e","preventDefault","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport {\n  resetButtonStyles,\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 JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'value' | 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface SwitchProps extends JsxButtonProps, WithSize {\n  /**\n   * Whether the switch is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the switch 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 FRACTION_DIGITS = 4;\n\nconst uncheckedStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchUncheckedColorBg)};\n    &::after {\n      left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n        FRACTION_DIGITS\n      )}em;\n    }\n  `;\n\nconst checkedStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchCheckedColorBg)};\n    &::after {\n      left: ${+(\n        p.theme.switchWidth -\n        p.theme.switchCircleSize -\n        (p.theme.switchHeight - p.theme.switchCircleSize) / 2\n      ).toFixed(FRACTION_DIGITS)}em;\n    }\n  `;\n\nconst hoverUncheckedStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        ${hoverUncheckedStyles(p)};\n        ${hoverCheckedStyles(p)};\n      }\n    }\n  `;\n\nconst disabledUncheckedStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};\n  `;\n\nconst disabledCheckedStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    ${disabledUncheckedStyles(p)};\n    ${disabledCheckedStyles(p)};\n  `;\n\ninterface StyledSwitchProps extends Pick<SwitchProps, 'disabled' | 'size'> {\n  checked: SwitchProps['value'];\n}\nconst StyledSwitch = styled(\n  'button',\n  omitEmotionProps('size', 'checked')\n)<StyledSwitchProps>`\n  ${resetButtonStyles};\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  display: block;\n\n  width: ${(p) => p.theme.switchWidth}em;\n  height: ${(p) => p.theme.switchHeight}em;\n  border-radius: ${(p) => p.theme.switchHeight / 2}em;\n\n  &::after {\n    position: absolute;\n    top: ${(p) =>\n      +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n        FRACTION_DIGITS\n      )}em;\n\n    width: ${(p) => p.theme.switchCircleSize}em;\n    height: ${(p) => p.theme.switchCircleSize}em;\n    border-radius: 50%;\n\n    background-color: ${(p) => clr(p.theme.switchColorCircleBg)};\n    content: ' ';\n\n    ${transitionStyles('left')};\n  }\n\n  ${uncheckedStyles};\n  ${checkedStyles};\n  ${hoverStyles};\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color')};\n`;\n\n/**\n * The switch that can be enabled or disabled.\n */\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <StyledSwitch\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='switch'\n        aria-checked={forwardedValue}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","FRACTION_DIGITS","uncheckedStyles","p","checked","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","switchColorCircleBg","Switch","value","defaultValue","onChange","size","onMouseDown","rest","ref","forwardedValue","setForwardedValue","e","preventDefault","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport {\n  resetButtonStyles,\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 JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'value' | 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface SwitchProps extends JsxButtonProps, WithSize {\n  /**\n   * Whether the switch is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the switch 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 FRACTION_DIGITS = 4;\n\nconst uncheckedStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchUncheckedColorBg)};\n    &::after {\n      left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n        FRACTION_DIGITS\n      )}em;\n    }\n  `;\n\nconst checkedStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchCheckedColorBg)};\n    &::after {\n      left: ${+(\n        p.theme.switchWidth -\n        p.theme.switchCircleSize -\n        (p.theme.switchHeight - p.theme.switchCircleSize) / 2\n      ).toFixed(FRACTION_DIGITS)}em;\n    }\n  `;\n\nconst hoverUncheckedStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        ${hoverUncheckedStyles(p)};\n        ${hoverCheckedStyles(p)};\n      }\n    }\n  `;\n\nconst disabledUncheckedStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};\n  `;\n\nconst disabledCheckedStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    ${disabledUncheckedStyles(p)};\n    ${disabledCheckedStyles(p)};\n  `;\n\ninterface StyledSwitchProps extends Pick<SwitchProps, 'disabled' | 'size'> {\n  checked: SwitchProps['value'];\n}\nconst StyledSwitch = styled(\n  'button',\n  omitEmotionProps('size', 'checked')\n)<StyledSwitchProps>`\n  ${resetButtonStyles};\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  display: block;\n\n  width: ${(p) => p.theme.switchWidth}em;\n  height: ${(p) => p.theme.switchHeight}em;\n  border-radius: ${(p) => p.theme.switchHeight / 2}em;\n\n  &::after {\n    position: absolute;\n    top: ${(p) =>\n      +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(\n        FRACTION_DIGITS\n      )}em;\n\n    width: ${(p) => p.theme.switchCircleSize}em;\n    height: ${(p) => p.theme.switchCircleSize}em;\n    border-radius: 50%;\n\n    background-color: ${(p) => clr(p.theme.switchColorCircleBg)};\n    content: ' ';\n\n    ${transitionStyles('left')};\n  }\n\n  ${uncheckedStyles};\n  ${checkedStyles};\n  ${hoverStyles};\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color')};\n`;\n\n/**\n * The switch that can be enabled or disabled.\n */\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <StyledSwitch\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='switch'\n        aria-checked={forwardedValue}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SACEC,iBAAiB,EACjBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACtE,SAASC,GAAG,QAAQ,oBAAoB;AA6BxC,MAAMC,eAAe,GAAG,CAAC;AAEzB,MAAMC,eAAe,GAAIC,CAAC,IACxB,CAACA,CAAC,CAACC,OAAO,IACVV,GAAI;AACN,wBAAwBM,GAAG,CAACG,CAAC,CAACE,KAAK,CAACC,sBAAsB,CAAE;AAC5D;AACA,cAAc,CAAC,CAAC,CAACH,CAAC,CAACE,KAAK,CAACE,YAAY,GAAGJ,CAAC,CAACE,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CACtER,eAAe,CACf;AACR;AACA,GAAG;AAEH,MAAMS,aAAa,GAAIP,CAAC,IACtBA,CAAC,CAACC,OAAO,IACTV,GAAI;AACN,wBAAwBM,GAAG,CAACG,CAAC,CAACE,KAAK,CAACM,oBAAoB,CAAE;AAC1D;AACA,cAAc,CAAC,CACPR,CAAC,CAACE,KAAK,CAACO,WAAW,GACnBT,CAAC,CAACE,KAAK,CAACG,gBAAgB,GACxB,CAACL,CAAC,CAACE,KAAK,CAACE,YAAY,GAAGJ,CAAC,CAACE,KAAK,CAACG,gBAAgB,IAAI,CAAC,EACrDC,OAAO,CAACR,eAAe,CAAE;AACjC;AACA,GAAG;AAEH,MAAMY,oBAAoB,GAAIV,CAAC,IAC7B,CAACA,CAAC,CAACC,OAAO,IACVV,GAAI;AACN,wBAAwBM,GAAG,CAACG,CAAC,CAACE,KAAK,CAACS,2BAA2B,CAAE;AACjE,GAAG;AAEH,MAAMC,kBAAkB,GAAIZ,CAAC,IAC3BA,CAAC,CAACC,OAAO,IACTV,GAAI;AACN,wBAAwBM,GAAG,CAACG,CAAC,CAACE,KAAK,CAACW,yBAAyB,CAAE;AAC/D,GAAG;AAEH,MAAMC,WAAW,GAAId,CAAC,IACpB,CAACA,CAAC,CAACe,QAAQ,IACXxB,GAAI;AACN;AACA;AACA;AACA,UAAUmB,oBAAoB,CAACV,CAAC,CAAE;AAClC,UAAUY,kBAAkB,CAACZ,CAAC,CAAE;AAChC;AACA;AACA,GAAG;AAEH,MAAMgB,uBAAuB,GAAIhB,CAAC,IAChC,CAACA,CAAC,CAACC,OAAO,IACVV,GAAI;AACN,wBAAwBM,GAAG,CAACG,CAAC,CAACE,KAAK,CAACe,8BAA8B,CAAE;AACpE,GAAG;AAEH,MAAMC,qBAAqB,GAAIlB,CAAC,IAC9BA,CAAC,CAACC,OAAO,IACTV,GAAI;AACN,wBAAwBM,GAAG,CAACG,CAAC,CAACE,KAAK,CAACiB,4BAA4B,CAAE;AAClE,GAAG;AAEH,MAAMC,cAAc,GAAIpB,CAAC,IACvBA,CAAC,CAACe,QAAQ,IACVxB,GAAI;AACN;AACA,MAAMyB,uBAAuB,CAAChB,CAAC,CAAE;AACjC,MAAMkB,qBAAqB,CAAClB,CAAC,CAAE;AAC/B,GAAG;AAKH,MAAMqB,YAAY,GAAG/B,MAAM,CACzB,QAAQ,EACRK,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,CAChB;AACrB,IAAIH,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA,WAAYQ,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACO,WAAY;AACtC,YAAaT,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,YAAa;AACxC,mBAAoBJ,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACE,YAAY,GAAG,CAAE;AACnD;AACA;AACA;AACA,WAAYJ,CAAC,IACP,CAAC,CAAC,CAACA,CAAC,CAACE,KAAK,CAACE,YAAY,GAAGJ,CAAC,CAACE,KAAK,CAACG,gBAAgB,IAAI,CAAC,EAAEC,OAAO,CAC9DR,eAAe,CACf;AACR;AACA,aAAcE,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,gBAAiB;AAC7C,cAAeL,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,gBAAiB;AAC9C;AACA;AACA,wBAAyBL,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACE,KAAK,CAACoB,mBAAmB,CAAE;AAChE;AACA;AACA,MAAM5B,gBAAgB,CAAC,MAAM,CAAE;AAC/B;AACA;AACA,IAAIK,eAAgB;AACpB,IAAIQ,aAAc;AAClB,IAAIO,WAAY;AAChB,IAAIM,cAAe;AACnB;AACA,IAAI3B,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAkB,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,MAAM6B,MAAM,gBAAGlC,UAAU,CACvB,CACE;EACE0B,QAAQ,GAAG,KAAK;EAChBS,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnBC,IAAI;EACJC,WAAW,GAAG,MAAM,CAAC,CAAC;EACtB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGpC,iBAAiB,CAAC;IAC5D4B,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF,oBACE,oBAAC,YAAY;IACX,QAAQ,EAAEX,QAAS;IACnB,OAAO,EAAEgB,cAAe;IACxB,IAAI,EAAEJ,IAAK;IACX,OAAO,EAAE,MAAM;MACb,IAAIZ,QAAQ,EAAE;MACdiB,iBAAiB,CAAC,CAACD,cAAc,CAAC;IACpC,CAAE;IACF,WAAW,EAAGE,CAAC,IAAK;MAClBL,WAAW,CAACK,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,EAAE;IACpB,CAAE;IACF,IAAI,EAAC,QAAQ;IACb,gBAAcH;EAAe,GACzBF,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;AAEDP,MAAM,CAACY,WAAW,GAAG,QAAQ;AAE7B,eAAeZ,MAAM"}

package/dist/esm/SwitchSkeleton/index.js

@@ -1,5 +1,4 @@
 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';
@@ -11,10 +10,10 @@ const StyledSwitchSkeleton = styled(Skeleton, omitEmotionProps('size'))`
   border-radius: ${p => p.theme.switchHeight / 2}em;
   ${sizeStyles};
 `;
+
 /**
  * Provides a switch placeholder while a user waits for the content to load.
  */
-
 const SwitchSkeleton = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(StyledSwitchSkeleton, _extends({
   width: "100%"
 }, props, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledSwitchSkeleton","p","theme","switchWidth","switchHeight","SwitchSkeleton","props","ref","displayName"],"sources":["../../../src/SwitchSkeleton/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 Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type SwitchSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledSwitchSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  width: ${(p) => p.theme.switchWidth}em;\n  height: ${(p) => p.theme.switchHeight}em;\n  border-radius: ${(p) => p.theme.switchHeight / 2}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides a switch placeholder while a user waits for the content to load.\n */\nconst SwitchSkeleton = forwardRef<HTMLDivElement, SwitchSkeletonProps>(\n  (props, ref) => <StyledSwitchSkeleton width='100%' {...props} ref={ref} />\n);\n\nSwitchSkeleton.displayName = 'SwitchSkeleton';\n\nexport default SwitchSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAwC,aAAxC;AAIA,MAAMC,oBAAoB,GAAGN,MAAM,CACjCK,QADiC,EAEjCD,gBAAgB,CAAC,MAAD,CAFiB,CAGvB;AACZ,WAAYG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,WAAY;AACtC,YAAaF,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,YAAa;AACxC,mBAAoBH,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,YAAR,GAAuB,CAAE;AACnD,IAAIP,UAAW;AACf,CARA;AAUA;AACA;AACA;;AACA,MAAMQ,cAAc,gBAAGT,UAAU,CAC/B,CAACU,KAAD,EAAQC,GAAR,kBAAgB,oBAAC,oBAAD;EAAsB,KAAK,EAAC;AAA5B,GAAuCD,KAAvC;EAA8C,GAAG,EAAEC;AAAnD,GADe,CAAjC;AAIAF,cAAc,CAACG,WAAf,GAA6B,gBAA7B;AAEA,eAAeH,cAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledSwitchSkeleton","p","theme","switchWidth","switchHeight","SwitchSkeleton","props","ref","displayName"],"sources":["../../../src/SwitchSkeleton/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 Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type SwitchSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledSwitchSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  width: ${(p) => p.theme.switchWidth}em;\n  height: ${(p) => p.theme.switchHeight}em;\n  border-radius: ${(p) => p.theme.switchHeight / 2}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides a switch placeholder while a user waits for the content to load.\n */\nconst SwitchSkeleton = forwardRef<HTMLDivElement, SwitchSkeletonProps>(\n  (props, ref) => <StyledSwitchSkeleton width='100%' {...props} ref={ref} />\n);\n\nSwitchSkeleton.displayName = 'SwitchSkeleton';\n\nexport default SwitchSkeleton;\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,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,oBAAoB,GAAGN,MAAM,CACjCK,QAAQ,EACRD,gBAAgB,CAAC,MAAM,CAAC,CACd;AACZ,WAAYG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,WAAY;AACtC,YAAaF,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACE,YAAa;AACxC,mBAAoBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACE,YAAY,GAAG,CAAE;AACnD,IAAIP,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMQ,cAAc,gBAAGT,UAAU,CAC/B,CAACU,KAAK,EAAEC,GAAG,kBAAK,oBAAC,oBAAoB;EAAC,KAAK,EAAC;AAAM,GAAKD,KAAK;EAAE,GAAG,EAAEC;AAAI,GAAG,CAC3E;AAEDF,cAAc,CAACG,WAAW,GAAG,gBAAgB;AAE7C,eAAeH,cAAc"}

package/dist/esm/Tag/index.js

@@ -1,5 +1,4 @@
 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, transitionStyles } from '@os-design/styles';
@@ -31,10 +30,10 @@ export const RightAddon = styled.div`
   display: inherit;
   padding-left: ${p => p.theme.tagAddonPaddingHorizontal}em;
 `;
+
 /**
  * The component to display a label, tag, or category.
  */
-
 const Tag = /*#__PURE__*/forwardRef(({
   left,
   right,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","TagContainer","p","theme","tagColorBg","tagColorText","borderRadius","tagPaddingVertical","tagPaddingHorizontal","Content","div","LeftAddon","tagAddonPaddingHorizontal","RightAddon","Tag","left","right","children","rest","ref","displayName"],"sources":["../../../src/Tag/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport interface BaseTagProps extends WithSize {\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\nexport type TagProps = JsxDivProps & BaseTagProps;\n\nexport const TagContainer = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n\n  background-color: ${(p) => clr(p.theme.tagColorBg)};\n  color: ${(p) => clr(p.theme.tagColorText)};\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  padding: ${(p) => p.theme.tagPaddingVertical}em\n    ${(p) => p.theme.tagPaddingHorizontal}em;\n\n  ${sizeStyles};\n  ${transitionStyles('background-color')};\n`;\n\nconst Content = styled.div`\n  ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.tagAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.tagAddonPaddingHorizontal}em;\n`;\n\n/**\n * The component to display a label, tag, or category.\n */\nconst Tag = forwardRef<HTMLDivElement, TagProps>(\n  ({ left, right, children, ...rest }, ref) => (\n    <TagContainer {...rest} ref={ref}>\n      {left && <LeftAddon>{left}</LeftAddon>}\n      <Content>{children}</Content>\n      {right && <RightAddon>{right}</RightAddon>}\n    </TagContainer>\n  )\n);\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,cADF,EAEEC,UAFF,EAGEC,gBAHF,QAKO,mBALP;AAMA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAmBA,OAAO,MAAMC,YAAY,GAAGN,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AAC9E;AACA;AACA;AACA;AACA,sBAAuBG,CAAD,IAAOF,GAAG,CAACE,CAAC,CAACC,KAAF,CAAQC,UAAT,CAAqB;AACrD,WAAYF,CAAD,IAAOF,GAAG,CAACE,CAAC,CAACC,KAAF,CAAQE,YAAT,CAAuB;AAC5C;AACA,mBAAoBH,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC/C,aAAcJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,kBAAmB;AAC/C,MAAOL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,oBAAqB;AAC1C;AACA,IAAIX,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAD,CAAqB;AACzC,CAdO;AAgBP,MAAMW,OAAO,GAAGd,MAAM,CAACe,GAAI;AAC3B,IAAId,cAAe;AACnB,CAFA;AAIA,OAAO,MAAMe,SAAS,GAAGhB,MAAM,CAACe,GAAI;AACpC;AACA,mBAAoBR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQS,yBAA0B;AAC5D,CAHO;AAKP,OAAO,MAAMC,UAAU,GAAGlB,MAAM,CAACe,GAAI;AACrC;AACA,kBAAmBR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQS,yBAA0B;AAC3D,CAHO;AAKP;AACA;AACA;;AACA,MAAME,GAAG,gBAAGpB,UAAU,CACpB,CAAC;EAAEqB,IAAF;EAAQC,KAAR;EAAeC,QAAf;EAAyB,GAAGC;AAA5B,CAAD,EAAqCC,GAArC,kBACE,oBAAC,YAAD,eAAkBD,IAAlB;EAAwB,GAAG,EAAEC;AAA7B,IACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUE,QAAV,CAFF,EAGGD,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,CAFkB,CAAtB;AAUAF,GAAG,CAACM,WAAJ,GAAkB,KAAlB;AAEA,eAAeN,GAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","TagContainer","p","theme","tagColorBg","tagColorText","borderRadius","tagPaddingVertical","tagPaddingHorizontal","Content","div","LeftAddon","tagAddonPaddingHorizontal","RightAddon","Tag","left","right","children","rest","ref","displayName"],"sources":["../../../src/Tag/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport interface BaseTagProps extends WithSize {\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\nexport type TagProps = JsxDivProps & BaseTagProps;\n\nexport const TagContainer = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n\n  background-color: ${(p) => clr(p.theme.tagColorBg)};\n  color: ${(p) => clr(p.theme.tagColorText)};\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  padding: ${(p) => p.theme.tagPaddingVertical}em\n    ${(p) => p.theme.tagPaddingHorizontal}em;\n\n  ${sizeStyles};\n  ${transitionStyles('background-color')};\n`;\n\nconst Content = styled.div`\n  ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.tagAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.tagAddonPaddingHorizontal}em;\n`;\n\n/**\n * The component to display a label, tag, or category.\n */\nconst Tag = forwardRef<HTMLDivElement, TagProps>(\n  ({ left, right, children, ...rest }, ref) => (\n    <TagContainer {...rest} ref={ref}>\n      {left && <LeftAddon>{left}</LeftAddon>}\n      <Content>{children}</Content>\n      {right && <RightAddon>{right}</RightAddon>}\n    </TagContainer>\n  )\n);\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,cAAc,EACdC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AAmBxC,OAAO,MAAMC,YAAY,GAAGN,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AAC9E;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACC,UAAU,CAAE;AACrD,WAAYF,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACE,YAAY,CAAE;AAC5C;AACA,mBAAoBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC/C,aAAcJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,kBAAmB;AAC/C,MAAOL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,oBAAqB;AAC1C;AACA,IAAIX,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAkB,CAAE;AACzC,CAAC;AAED,MAAMW,OAAO,GAAGd,MAAM,CAACe,GAAI;AAC3B,IAAId,cAAe;AACnB,CAAC;AAED,OAAO,MAAMe,SAAS,GAAGhB,MAAM,CAACe,GAAI;AACpC;AACA,mBAAoBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACS,yBAA0B;AAC5D,CAAC;AAED,OAAO,MAAMC,UAAU,GAAGlB,MAAM,CAACe,GAAI;AACrC;AACA,kBAAmBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACS,yBAA0B;AAC3D,CAAC;;AAED;AACA;AACA;AACA,MAAME,GAAG,gBAAGpB,UAAU,CACpB,CAAC;EAAEqB,IAAI;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACtC,oBAAC,YAAY,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,IAC9BJ,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eACtC,oBAAC,OAAO,QAAEE,QAAQ,CAAW,EAC5BD,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,CACF;AAEDF,GAAG,CAACM,WAAW,GAAG,KAAK;AAEvB,eAAeN,GAAG"}

package/dist/esm/TagLink/index.js

@@ -1,5 +1,4 @@
 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 { clr } from '@os-design/theming';
@@ -16,10 +15,10 @@ const StyledTagLink = styled(TagContainer.withComponent('a'), omitEmotionProps('
     }
   }
 `;
+
 /**
  * The tag component with a link.
  */
-
 const TagLink = /*#__PURE__*/forwardRef(({
   left,
   right,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","clr","omitEmotionProps","TagContainer","LeftAddon","RightAddon","StyledTagLink","withComponent","p","theme","tagColorBgHover","TagLink","left","right","as","onMouseDown","children","rest","ref","e","preventDefault","displayName"],"sources":["../../../src/TagLink/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { BaseTagProps, TagContainer, LeftAddon, RightAddon } from '../Tag';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type TagLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  BaseTagProps;\n\nconst StyledTagLink = styled(\n  TagContainer.withComponent('a'),\n  omitEmotionProps('as')\n)`\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.tagColorBgHover)};\n    }\n  }\n`;\n\n/**\n * The tag component with a link.\n */\nconst TagLink = forwardRef<HTMLAnchorElement, TagLinkProps>(\n  ({ left, right, as, onMouseDown = () => {}, children, ...rest }, ref) => (\n    <StyledTagLink\n      as={as}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    >\n      {left && <LeftAddon>{left}</LeftAddon>}\n      {children}\n      {right && <RightAddon>{right}</RightAddon>}\n    </StyledTagLink>\n  )\n);\n\nTagLink.displayName = 'TagLink';\n\nexport default TagLink;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAAuBC,YAAvB,EAAqCC,SAArC,EAAgDC,UAAhD,QAAkE,QAAlE;AASA,MAAMC,aAAa,GAAGN,MAAM,CAC1BG,YAAY,CAACI,aAAb,CAA2B,GAA3B,CAD0B,EAE1BL,gBAAgB,CAAC,IAAD,CAFU,CAG1B;AACF;AACA;AACA;AACA;AACA;AACA;AACA,0BAA2BM,CAAD,IAAOP,GAAG,CAACO,CAAC,CAACC,KAAF,CAAQC,eAAT,CAA0B;AAC9D;AACA;AACA,CAbA;AAeA;AACA;AACA;;AACA,MAAMC,OAAO,gBAAGZ,UAAU,CACxB,CAAC;EAAEa,IAAF;EAAQC,KAAR;EAAeC,EAAf;EAAmBC,WAAW,GAAG,MAAM,CAAE,CAAzC;EAA2CC,QAA3C;EAAqD,GAAGC;AAAxD,CAAD,EAAiEC,GAAjE,kBACE,oBAAC,aAAD;EACE,EAAE,EAAEJ,EADN;EAEE,WAAW,EAAGK,CAAD,IAAO;IAClBJ,WAAW,CAACI,CAAD,CAAX;IACAA,CAAC,CAACC,cAAF;EACD;AALH,GAMMH,IANN;EAOE,GAAG,EAAEC;AAPP,IASGN,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CATX,EAUGI,QAVH,EAWGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAXZ,CAFsB,CAA1B;AAkBAF,OAAO,CAACU,WAAR,GAAsB,SAAtB;AAEA,eAAeV,OAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","clr","omitEmotionProps","TagContainer","LeftAddon","RightAddon","StyledTagLink","withComponent","p","theme","tagColorBgHover","TagLink","left","right","as","onMouseDown","children","rest","ref","e","preventDefault","displayName"],"sources":["../../../src/TagLink/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { BaseTagProps, TagContainer, LeftAddon, RightAddon } from '../Tag';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type TagLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  BaseTagProps;\n\nconst StyledTagLink = styled(\n  TagContainer.withComponent('a'),\n  omitEmotionProps('as')\n)`\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.tagColorBgHover)};\n    }\n  }\n`;\n\n/**\n * The tag component with a link.\n */\nconst TagLink = forwardRef<HTMLAnchorElement, TagLinkProps>(\n  ({ left, right, as, onMouseDown = () => {}, children, ...rest }, ref) => (\n    <StyledTagLink\n      as={as}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    >\n      {left && <LeftAddon>{left}</LeftAddon>}\n      {children}\n      {right && <RightAddon>{right}</RightAddon>}\n    </StyledTagLink>\n  )\n);\n\nTagLink.displayName = 'TagLink';\n\nexport default TagLink;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAAuBC,YAAY,EAAEC,SAAS,EAAEC,UAAU,QAAQ,QAAQ;AAS1E,MAAMC,aAAa,GAAGN,MAAM,CAC1BG,YAAY,CAACI,aAAa,CAAC,GAAG,CAAC,EAC/BL,gBAAgB,CAAC,IAAI,CAAC,CACtB;AACF;AACA;AACA;AACA;AACA;AACA;AACA,0BAA2BM,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,eAAe,CAAE;AAC9D;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,OAAO,gBAAGZ,UAAU,CACxB,CAAC;EAAEa,IAAI;EAAEC,KAAK;EAAEC,EAAE;EAAEC,WAAW,GAAG,MAAM,CAAC,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAClE,oBAAC,aAAa;EACZ,EAAE,EAAEJ,EAAG;EACP,WAAW,EAAGK,CAAC,IAAK;IAClBJ,WAAW,CAACI,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,EAAE;EACpB;AAAE,GACEH,IAAI;EACR,GAAG,EAAEC;AAAI,IAERN,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,EACrCI,QAAQ,EACRH,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,CACF;AAEDF,OAAO,CAACU,WAAW,GAAG,SAAS;AAE/B,eAAeV,OAAO"}

package/dist/esm/TagList/index.js

@@ -1,5 +1,4 @@
 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, useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -7,12 +6,10 @@ import { Down, Up } from '@os-design/icons';
 import { sizeStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
 import Button from '../Button';
-
 const collapsibleStyles = p => p.collapsible && !p.opened && css`
     // The height of the tag
     height: ${p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
   `;
-
 const Container = styled('div', omitEmotionProps('opened', 'collapsible', 'size'))`
   display: flex;
   overflow: hidden;
@@ -37,10 +34,10 @@ const OpenButton = styled(Button)`
   height: ${p => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
   padding: 0 0.5em;
 `;
+
 /**
  * The component to display a list of tags.
  */
-
 const TagList = /*#__PURE__*/forwardRef(({
   collapsible = false,
   size,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useState","styled","css","Down","Up","sizeStyles","omitEmotionProps","Button","collapsibleStyles","p","collapsible","opened","theme","lineHeight","tagPaddingVertical","Container","Content","div","tagListGap","Control","OpenButton","TagList","size","children","rest","ref","setOpened","displayName"],"sources":["../../../src/TagList/index.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Down, Up } from '@os-design/icons';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface TagListProps extends JsxDivProps, WithSize {\n  /**\n   * Whether the tag list is collapsible.\n   * @default false\n   */\n  collapsible?: boolean;\n}\n\nconst collapsibleStyles = (p) =>\n  p.collapsible &&\n  !p.opened &&\n  css`\n    // The height of the tag\n    height: ${p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  `;\n\ninterface ContainerProps extends Pick<TagListProps, 'collapsible' | 'size'> {\n  opened: boolean;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('opened', 'collapsible', 'size')\n)<ContainerProps>`\n  display: flex;\n  overflow: hidden;\n  ${collapsibleStyles};\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  flex-grow: 1;\n\n  margin: ${(p) => -p.theme.tagListGap}em 0 0 ${(p) => -p.theme.tagListGap}em;\n  & > * {\n    margin: ${(p) => p.theme.tagListGap}em 0 0 ${(p) => p.theme.tagListGap}em;\n  }\n`;\n\nconst Control = styled.div`\n  margin-left: 0.2em;\n`;\n\nconst OpenButton = styled(Button)`\n  // The height of the tag\n  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  padding: 0 0.5em;\n`;\n\n/**\n * The component to display a list of tags.\n */\nconst TagList = forwardRef<HTMLDivElement, TagListProps>(\n  ({ collapsible = false, size, children, ...rest }, ref) => {\n    const [opened, setOpened] = useState(false);\n\n    return (\n      <Container\n        opened={opened}\n        collapsible={collapsible}\n        size={size}\n        {...rest}\n        ref={ref}\n      >\n        <Content>{children}</Content>\n\n        {collapsible && (\n          <Control>\n            <OpenButton\n              type='ghost'\n              wide='never'\n              onClick={() => setOpened(!opened)}\n            >\n              {opened ? <Up /> : <Down />}\n            </OpenButton>\n          </Control>\n        )}\n      </Container>\n    );\n  }\n);\n\nTagList.displayName = 'TagList';\n\nexport default TagList;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,QAA5B,QAA4C,OAA5C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,IAAT,EAAeC,EAAf,QAAyB,kBAAzB;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAWA,MAAMC,iBAAiB,GAAIC,CAAD,IACxBA,CAAC,CAACC,WAAF,IACA,CAACD,CAAC,CAACE,MADH,IAEAT,GAAI;AACN;AACA,cAAcO,CAAC,CAACG,KAAF,CAAQC,UAAR,GAAqBJ,CAAC,CAACG,KAAF,CAAQE,kBAAR,GAA6B,CAAE;AAClE,GANA;;AAWA,MAAMC,SAAS,GAAGd,MAAM,CACtB,KADsB,EAEtBK,gBAAgB,CAAC,QAAD,EAAW,aAAX,EAA0B,MAA1B,CAFM,CAGN;AAClB;AACA;AACA,IAAIE,iBAAkB;AACtB,IAAIH,UAAW;AACf,CARA;AAUA,MAAMW,OAAO,GAAGf,MAAM,CAACgB,GAAI;AAC3B;AACA;AACA;AACA;AACA,YAAaR,CAAD,IAAO,CAACA,CAAC,CAACG,KAAF,CAAQM,UAAW,UAAUT,CAAD,IAAO,CAACA,CAAC,CAACG,KAAF,CAAQM,UAAW;AAC3E;AACA,cAAeT,CAAD,IAAOA,CAAC,CAACG,KAAF,CAAQM,UAAW,UAAUT,CAAD,IAAOA,CAAC,CAACG,KAAF,CAAQM,UAAW;AAC3E;AACA,CATA;AAWA,MAAMC,OAAO,GAAGlB,MAAM,CAACgB,GAAI;AAC3B;AACA,CAFA;AAIA,MAAMG,UAAU,GAAGnB,MAAM,CAACM,MAAD,CAAS;AAClC;AACA,YAAaE,CAAD,IAAOA,CAAC,CAACG,KAAF,CAAQC,UAAR,GAAqBJ,CAAC,CAACG,KAAF,CAAQE,kBAAR,GAA6B,CAAE;AACvE;AACA,CAJA;AAMA;AACA;AACA;;AACA,MAAMO,OAAO,gBAAGtB,UAAU,CACxB,CAAC;EAAEW,WAAW,GAAG,KAAhB;EAAuBY,IAAvB;EAA6BC,QAA7B;EAAuC,GAAGC;AAA1C,CAAD,EAAmDC,GAAnD,KAA2D;EACzD,MAAM,CAACd,MAAD,EAASe,SAAT,IAAsB1B,QAAQ,CAAC,KAAD,CAApC;EAEA,oBACE,oBAAC,SAAD;IACE,MAAM,EAAEW,MADV;IAEE,WAAW,EAAED,WAFf;IAGE,IAAI,EAAEY;EAHR,GAIME,IAJN;IAKE,GAAG,EAAEC;EALP,iBAOE,oBAAC,OAAD,QAAUF,QAAV,CAPF,EASGb,WAAW,iBACV,oBAAC,OAAD,qBACE,oBAAC,UAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE,MAAMgB,SAAS,CAAC,CAACf,MAAF;EAH1B,GAKGA,MAAM,gBAAG,oBAAC,EAAD,OAAH,gBAAY,oBAAC,IAAD,OALrB,CADF,CAVJ,CADF;AAuBD,CA3BuB,CAA1B;AA8BAU,OAAO,CAACM,WAAR,GAAsB,SAAtB;AAEA,eAAeN,OAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useState","styled","css","Down","Up","sizeStyles","omitEmotionProps","Button","collapsibleStyles","p","collapsible","opened","theme","lineHeight","tagPaddingVertical","Container","Content","div","tagListGap","Control","OpenButton","TagList","size","children","rest","ref","setOpened","displayName"],"sources":["../../../src/TagList/index.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Down, Up } from '@os-design/icons';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface TagListProps extends JsxDivProps, WithSize {\n  /**\n   * Whether the tag list is collapsible.\n   * @default false\n   */\n  collapsible?: boolean;\n}\n\nconst collapsibleStyles = (p) =>\n  p.collapsible &&\n  !p.opened &&\n  css`\n    // The height of the tag\n    height: ${p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  `;\n\ninterface ContainerProps extends Pick<TagListProps, 'collapsible' | 'size'> {\n  opened: boolean;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('opened', 'collapsible', 'size')\n)<ContainerProps>`\n  display: flex;\n  overflow: hidden;\n  ${collapsibleStyles};\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  flex-grow: 1;\n\n  margin: ${(p) => -p.theme.tagListGap}em 0 0 ${(p) => -p.theme.tagListGap}em;\n  & > * {\n    margin: ${(p) => p.theme.tagListGap}em 0 0 ${(p) => p.theme.tagListGap}em;\n  }\n`;\n\nconst Control = styled.div`\n  margin-left: 0.2em;\n`;\n\nconst OpenButton = styled(Button)`\n  // The height of the tag\n  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  padding: 0 0.5em;\n`;\n\n/**\n * The component to display a list of tags.\n */\nconst TagList = forwardRef<HTMLDivElement, TagListProps>(\n  ({ collapsible = false, size, children, ...rest }, ref) => {\n    const [opened, setOpened] = useState(false);\n\n    return (\n      <Container\n        opened={opened}\n        collapsible={collapsible}\n        size={size}\n        {...rest}\n        ref={ref}\n      >\n        <Content>{children}</Content>\n\n        {collapsible && (\n          <Control>\n            <OpenButton\n              type='ghost'\n              wide='never'\n              onClick={() => setOpened(!opened)}\n            >\n              {opened ? <Up /> : <Down />}\n            </OpenButton>\n          </Control>\n        )}\n      </Container>\n    );\n  }\n);\n\nTagList.displayName = 'TagList';\n\nexport default TagList;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AACnD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,IAAI,EAAEC,EAAE,QAAQ,kBAAkB;AAC3C,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,MAAM,MAAM,WAAW;AAW9B,MAAMC,iBAAiB,GAAIC,CAAC,IAC1BA,CAAC,CAACC,WAAW,IACb,CAACD,CAAC,CAACE,MAAM,IACTT,GAAI;AACN;AACA,cAAcO,CAAC,CAACG,KAAK,CAACC,UAAU,GAAGJ,CAAC,CAACG,KAAK,CAACE,kBAAkB,GAAG,CAAE;AAClE,GAAG;AAKH,MAAMC,SAAS,GAAGd,MAAM,CACtB,KAAK,EACLK,gBAAgB,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,CACjC;AAClB;AACA;AACA,IAAIE,iBAAkB;AACtB,IAAIH,UAAW;AACf,CAAC;AAED,MAAMW,OAAO,GAAGf,MAAM,CAACgB,GAAI;AAC3B;AACA;AACA;AACA;AACA,YAAaR,CAAC,IAAK,CAACA,CAAC,CAACG,KAAK,CAACM,UAAW,UAAUT,CAAC,IAAK,CAACA,CAAC,CAACG,KAAK,CAACM,UAAW;AAC3E;AACA,cAAeT,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACM,UAAW,UAAUT,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACM,UAAW;AAC3E;AACA,CAAC;AAED,MAAMC,OAAO,GAAGlB,MAAM,CAACgB,GAAI;AAC3B;AACA,CAAC;AAED,MAAMG,UAAU,GAAGnB,MAAM,CAACM,MAAM,CAAE;AAClC;AACA,YAAaE,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACC,UAAU,GAAGJ,CAAC,CAACG,KAAK,CAACE,kBAAkB,GAAG,CAAE;AACvE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMO,OAAO,gBAAGtB,UAAU,CACxB,CAAC;EAAEW,WAAW,GAAG,KAAK;EAAEY,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAM,CAACd,MAAM,EAAEe,SAAS,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAE3C,oBACE,oBAAC,SAAS;IACR,MAAM,EAAEW,MAAO;IACf,WAAW,EAAED,WAAY;IACzB,IAAI,EAAEY;EAAK,GACPE,IAAI;IACR,GAAG,EAAEC;EAAI,iBAET,oBAAC,OAAO,QAAEF,QAAQ,CAAW,EAE5Bb,WAAW,iBACV,oBAAC,OAAO,qBACN,oBAAC,UAAU;IACT,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE,MAAMgB,SAAS,CAAC,CAACf,MAAM;EAAE,GAEjCA,MAAM,gBAAG,oBAAC,EAAE,OAAG,gBAAG,oBAAC,IAAI,OAAG,CAChB,CAEhB,CACS;AAEhB,CAAC,CACF;AAEDU,OAAO,CAACM,WAAW,GAAG,SAAS;AAE/B,eAAeN,OAAO"}

package/dist/esm/TagListSkeleton/index.js

@@ -1,13 +1,12 @@
 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 TagList from '../TagList';
 import TagSkeleton from '../TagSkeleton';
 let tagIndex = 0;
+
 /**
  * Provides a tag list placeholder while a user waits for the content to load.
  */
-
 const TagListSkeleton = /*#__PURE__*/forwardRef(({
   width,
   tagsCount = 3,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","TagList","TagSkeleton","tagIndex","TagListSkeleton","width","tagsCount","rest","ref","Array","fill","map","displayName"],"sources":["../../../src/TagListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport TagList, { TagListProps } from '../TagList';\nimport TagSkeleton from '../TagSkeleton';\n\nexport interface TagListSkeletonProps extends TagListProps {\n  /**\n   * The width of the tag skeleton.\n   * @default undefined\n   */\n  width?: string;\n  /**\n   * The number of tag skeletons.\n   * @default 3\n   */\n  tagsCount?: number;\n}\n\nlet tagIndex = 0;\n\n/**\n * Provides a tag list placeholder while a user waits for the content to load.\n */\nconst TagListSkeleton = forwardRef<HTMLDivElement, TagListSkeletonProps>(\n  ({ width, tagsCount = 3, ...rest }, ref) => (\n    <TagList {...rest} ref={ref}>\n      {Array(tagsCount)\n        .fill({})\n        .map(() => {\n          tagIndex += 1;\n          return <TagSkeleton key={tagIndex} width={width} />;\n        })}\n    </TagList>\n  )\n);\n\nTagListSkeleton.displayName = 'TagListSkeleton';\n\nexport default TagListSkeleton;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,OAAP,MAAsC,YAAtC;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AAeA,IAAIC,QAAQ,GAAG,CAAf;AAEA;AACA;AACA;;AACA,MAAMC,eAAe,gBAAGJ,UAAU,CAChC,CAAC;EAAEK,KAAF;EAASC,SAAS,GAAG,CAArB;EAAwB,GAAGC;AAA3B,CAAD,EAAoCC,GAApC,kBACE,oBAAC,OAAD,eAAaD,IAAb;EAAmB,GAAG,EAAEC;AAAxB,IACGC,KAAK,CAACH,SAAD,CAAL,CACEI,IADF,CACO,EADP,EAEEC,GAFF,CAEM,MAAM;EACTR,QAAQ,IAAI,CAAZ;EACA,oBAAO,oBAAC,WAAD;IAAa,GAAG,EAAEA,QAAlB;IAA4B,KAAK,EAAEE;EAAnC,EAAP;AACD,CALF,CADH,CAF8B,CAAlC;AAaAD,eAAe,CAACQ,WAAhB,GAA8B,iBAA9B;AAEA,eAAeR,eAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","TagList","TagSkeleton","tagIndex","TagListSkeleton","width","tagsCount","rest","ref","Array","fill","map","displayName"],"sources":["../../../src/TagListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport TagList, { TagListProps } from '../TagList';\nimport TagSkeleton from '../TagSkeleton';\n\nexport interface TagListSkeletonProps extends TagListProps {\n  /**\n   * The width of the tag skeleton.\n   * @default undefined\n   */\n  width?: string;\n  /**\n   * The number of tag skeletons.\n   * @default 3\n   */\n  tagsCount?: number;\n}\n\nlet tagIndex = 0;\n\n/**\n * Provides a tag list placeholder while a user waits for the content to load.\n */\nconst TagListSkeleton = forwardRef<HTMLDivElement, TagListSkeletonProps>(\n  ({ width, tagsCount = 3, ...rest }, ref) => (\n    <TagList {...rest} ref={ref}>\n      {Array(tagsCount)\n        .fill({})\n        .map(() => {\n          tagIndex += 1;\n          return <TagSkeleton key={tagIndex} width={width} />;\n        })}\n    </TagList>\n  )\n);\n\nTagListSkeleton.displayName = 'TagListSkeleton';\n\nexport default TagListSkeleton;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,OAAO,MAAwB,YAAY;AAClD,OAAOC,WAAW,MAAM,gBAAgB;AAexC,IAAIC,QAAQ,GAAG,CAAC;;AAEhB;AACA;AACA;AACA,MAAMC,eAAe,gBAAGJ,UAAU,CAChC,CAAC;EAAEK,KAAK;EAAEC,SAAS,GAAG,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACrC,oBAAC,OAAO,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,IACzBC,KAAK,CAACH,SAAS,CAAC,CACdI,IAAI,CAAC,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,MAAM;EACTR,QAAQ,IAAI,CAAC;EACb,oBAAO,oBAAC,WAAW;IAAC,GAAG,EAAEA,QAAS;IAAC,KAAK,EAAEE;EAAM,EAAG;AACrD,CAAC,CAAC,CAEP,CACF;AAEDD,eAAe,CAACQ,WAAW,GAAG,iBAAiB;AAE/C,eAAeR,eAAe"}

package/dist/esm/TagSkeleton/index.js

@@ -1,5 +1,4 @@
 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';
@@ -10,10 +9,10 @@ const StyledTagSkeleton = styled(Skeleton, omitEmotionProps('width', 'size'))`
   height: ${p => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
   ${sizeStyles};
 `;
+
 /**
  * Provides a tag placeholder while a user waits for the content to load.
  */
-
 const TagSkeleton = /*#__PURE__*/forwardRef(({
   width = '6em',
   ...rest

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledTagSkeleton","p","width","theme","lineHeight","tagPaddingVertical","TagSkeleton","rest","ref","displayName"],"sources":["../../../src/TagSkeleton/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 Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface TagSkeletonProps\n  extends Omit<SkeletonProps, 'width'>,\n    WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 6em\n   */\n  width?: string;\n}\n\ntype StyledTagSkeletonProps = Pick<TagSkeletonProps, 'width' | 'size'>;\nconst StyledTagSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('width', 'size')\n)<StyledTagSkeletonProps>`\n  width: ${(p) => p.width};\n  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides a tag placeholder while a user waits for the content to load.\n */\nconst TagSkeleton = forwardRef<HTMLDivElement, TagSkeletonProps>(\n  ({ width = '6em', ...rest }, ref) => (\n    <StyledTagSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nTagSkeleton.displayName = 'TagSkeleton';\n\nexport default TagSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAwC,aAAxC;AAaA,MAAMC,iBAAiB,GAAGN,MAAM,CAC9BK,QAD8B,EAE9BD,gBAAgB,CAAC,OAAD,EAAU,MAAV,CAFc,CAGN;AAC1B,WAAYG,CAAD,IAAOA,CAAC,CAACC,KAAM;AAC1B,YAAaD,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQC,UAAR,GAAqBH,CAAC,CAACE,KAAF,CAAQE,kBAAR,GAA6B,CAAE;AACvE,IAAIR,UAAW;AACf,CAPA;AASA;AACA;AACA;;AACA,MAAMS,WAAW,gBAAGV,UAAU,CAC5B,CAAC;EAAEM,KAAK,GAAG,KAAV;EAAiB,GAAGK;AAApB,CAAD,EAA6BC,GAA7B,kBACE,oBAAC,iBAAD;EAAmB,KAAK,EAAEN;AAA1B,GAAqCK,IAArC;EAA2C,GAAG,EAAEC;AAAhD,GAF0B,CAA9B;AAMAF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;AAEA,eAAeH,WAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledTagSkeleton","p","width","theme","lineHeight","tagPaddingVertical","TagSkeleton","rest","ref","displayName"],"sources":["../../../src/TagSkeleton/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 Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface TagSkeletonProps\n  extends Omit<SkeletonProps, 'width'>,\n    WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 6em\n   */\n  width?: string;\n}\n\ntype StyledTagSkeletonProps = Pick<TagSkeletonProps, 'width' | 'size'>;\nconst StyledTagSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('width', 'size')\n)<StyledTagSkeletonProps>`\n  width: ${(p) => p.width};\n  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides a tag placeholder while a user waits for the content to load.\n */\nconst TagSkeleton = forwardRef<HTMLDivElement, TagSkeletonProps>(\n  ({ width = '6em', ...rest }, ref) => (\n    <StyledTagSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nTagSkeleton.displayName = 'TagSkeleton';\n\nexport default TagSkeleton;\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,OAAOC,QAAQ,MAAyB,aAAa;AAarD,MAAMC,iBAAiB,GAAGN,MAAM,CAC9BK,QAAQ,EACRD,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CACT;AAC1B,WAAYG,CAAC,IAAKA,CAAC,CAACC,KAAM;AAC1B,YAAaD,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACC,UAAU,GAAGH,CAAC,CAACE,KAAK,CAACE,kBAAkB,GAAG,CAAE;AACvE,IAAIR,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMS,WAAW,gBAAGV,UAAU,CAC5B,CAAC;EAAEM,KAAK,GAAG,KAAK;EAAE,GAAGK;AAAK,CAAC,EAAEC,GAAG,kBAC9B,oBAAC,iBAAiB;EAAC,KAAK,EAAEN;AAAM,GAAKK,IAAI;EAAE,GAAG,EAAEC;AAAI,GACrD,CACF;AAEDF,WAAW,CAACG,WAAW,GAAG,aAAa;AAEvC,eAAeH,WAAW"}

package/dist/esm/TextArea/index.js

@@ -1,5 +1,4 @@
 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 { InputContainer, StyledInput } from '../Input';
@@ -11,10 +10,10 @@ const TextAreaField = styled(StyledInput.withComponent('textarea'))`
   padding-bottom: ${p => p.theme.textAreaPaddingVertical}em;
   line-height: ${p => p.theme.lineHeight};
 `;
+
 /**
  * The multiline input component.
  */
-
 const TextArea = /*#__PURE__*/forwardRef(({
   disabled = false,
   size,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","InputContainer","StyledInput","TextAreaContainer","p","theme","textAreaHeight","TextAreaField","withComponent","textAreaPaddingVertical","lineHeight","TextArea","disabled","size","onChange","rest","ref","e","target","value","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { WithSize } from '@os-design/styles';\nimport { InputContainer, StyledInput } from '../Input';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ disabled = false, size, onChange = () => {}, ...rest }, ref) => (\n    <TextAreaContainer disabled={disabled} size={size}>\n      <TextAreaField\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.value, e)}\n        {...rest}\n        ref={ref}\n      />\n    </TextAreaContainer>\n  )\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAA6BC,UAA7B,QAA+C,OAA/C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AAEA,SAASC,cAAT,EAAyBC,WAAzB,QAA4C,UAA5C;AAwBA,MAAMC,iBAAiB,GAAGH,MAAM,CAACC,cAAD,CAAiB;AACjD,YAAaG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,cAAe;AAC1C,CAFA;AAIA,MAAMC,aAAa,GAAGP,MAAM,CAACE,WAAW,CAACM,aAAZ,CAA0B,UAA1B,CAAD,CAAwC;AACpE,iBAAkBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,uBAAwB;AACxD,oBAAqBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,uBAAwB;AAC3D,iBAAkBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,UAAW;AAC3C,CAJA;AAMA;AACA;AACA;;AACA,MAAMC,QAAQ,gBAAGZ,UAAU,CACzB,CAAC;EAAEa,QAAQ,GAAG,KAAb;EAAoBC,IAApB;EAA0BC,QAAQ,GAAG,MAAM,CAAE,CAA7C;EAA+C,GAAGC;AAAlD,CAAD,EAA2DC,GAA3D,kBACE,oBAAC,iBAAD;EAAmB,QAAQ,EAAEJ,QAA7B;EAAuC,IAAI,EAAEC;AAA7C,gBACE,oBAAC,aAAD;EACE,QAAQ,EAAED,QADZ;EAEE,QAAQ,EAAGK,CAAD,IAAOH,QAAQ,CAACG,CAAC,CAACC,MAAF,CAASC,KAAV,EAAiBF,CAAjB;AAF3B,GAGMF,IAHN;EAIE,GAAG,EAAEC;AAJP,GADF,CAFuB,CAA3B;AAaAL,QAAQ,CAACS,WAAT,GAAuB,UAAvB;AAEA,eAAeT,QAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","InputContainer","StyledInput","TextAreaContainer","p","theme","textAreaHeight","TextAreaField","withComponent","textAreaPaddingVertical","lineHeight","TextArea","disabled","size","onChange","rest","ref","e","target","value","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { WithSize } from '@os-design/styles';\nimport { InputContainer, StyledInput } from '../Input';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ disabled = false, size, onChange = () => {}, ...rest }, ref) => (\n    <TextAreaContainer disabled={disabled} size={size}>\n      <TextAreaField\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.value, e)}\n        {...rest}\n        ref={ref}\n      />\n    </TextAreaContainer>\n  )\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAiBC,UAAU,QAAQ,OAAO;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,cAAc,EAAEC,WAAW,QAAQ,UAAU;AAwBtD,MAAMC,iBAAiB,GAAGH,MAAM,CAACC,cAAc,CAAE;AACjD,YAAaG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,cAAe;AAC1C,CAAC;AAED,MAAMC,aAAa,GAAGP,MAAM,CAACE,WAAW,CAACM,aAAa,CAAC,UAAU,CAAC,CAAE;AACpE,iBAAkBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,uBAAwB;AACxD,oBAAqBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,uBAAwB;AAC3D,iBAAkBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,UAAW;AAC3C,CAAC;;AAED;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGZ,UAAU,CACzB,CAAC;EAAEa,QAAQ,GAAG,KAAK;EAAEC,IAAI;EAAEC,QAAQ,GAAG,MAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC5D,oBAAC,iBAAiB;EAAC,QAAQ,EAAEJ,QAAS;EAAC,IAAI,EAAEC;AAAK,gBAChD,oBAAC,aAAa;EACZ,QAAQ,EAAED,QAAS;EACnB,QAAQ,EAAGK,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,MAAM,CAACC,KAAK,EAAEF,CAAC;AAAE,GACzCF,IAAI;EACR,GAAG,EAAEC;AAAI,GACT,CAEL,CACF;AAEDL,QAAQ,CAACS,WAAW,GAAG,UAAU;AAEjC,eAAeT,QAAQ"}

package/dist/esm/TextAreaSkeleton/index.js

@@ -1,15 +1,14 @@
 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 InputSkeleton from '../InputSkeleton';
 const StyledTextAreaSkeleton = styled(InputSkeleton)`
   height: ${p => p.theme.textAreaHeight}em;
 `;
+
 /**
  * Provides a textarea placeholder while a user waits for the content to load.
  */
-
 const TextAreaSkeleton = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(StyledTextAreaSkeleton, _extends({}, props, {
   ref: ref
 })));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","InputSkeleton","StyledTextAreaSkeleton","p","theme","textAreaHeight","TextAreaSkeleton","props","ref","displayName"],"sources":["../../../src/TextAreaSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport InputSkeleton, { InputSkeletonProps } from '../InputSkeleton';\n\nexport type TextAreaSkeletonProps = InputSkeletonProps;\n\nconst StyledTextAreaSkeleton = styled(InputSkeleton)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\n/**\n * Provides a textarea placeholder while a user waits for the content to load.\n */\nconst TextAreaSkeleton = forwardRef<HTMLDivElement, TextAreaSkeletonProps>(\n  (props, ref) => <StyledTextAreaSkeleton {...props} ref={ref} />\n);\n\nTextAreaSkeleton.displayName = 'TextAreaSkeleton';\n\nexport default TextAreaSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,aAAP,MAAkD,kBAAlD;AAIA,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,aAAD,CAAgB;AACrD,YAAaE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,cAAe;AAC1C,CAFA;AAIA;AACA;AACA;;AACA,MAAMC,gBAAgB,gBAAGN,UAAU,CACjC,CAACO,KAAD,EAAQC,GAAR,kBAAgB,oBAAC,sBAAD,eAA4BD,KAA5B;EAAmC,GAAG,EAAEC;AAAxC,GADiB,CAAnC;AAIAF,gBAAgB,CAACG,WAAjB,GAA+B,kBAA/B;AAEA,eAAeH,gBAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","InputSkeleton","StyledTextAreaSkeleton","p","theme","textAreaHeight","TextAreaSkeleton","props","ref","displayName"],"sources":["../../../src/TextAreaSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport InputSkeleton, { InputSkeletonProps } from '../InputSkeleton';\n\nexport type TextAreaSkeletonProps = InputSkeletonProps;\n\nconst StyledTextAreaSkeleton = styled(InputSkeleton)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\n/**\n * Provides a textarea placeholder while a user waits for the content to load.\n */\nconst TextAreaSkeleton = forwardRef<HTMLDivElement, TextAreaSkeletonProps>(\n  (props, ref) => <StyledTextAreaSkeleton {...props} ref={ref} />\n);\n\nTextAreaSkeleton.displayName = 'TextAreaSkeleton';\n\nexport default TextAreaSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,aAAa,MAA8B,kBAAkB;AAIpE,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,aAAa,CAAE;AACrD,YAAaE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,cAAe;AAC1C,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGN,UAAU,CACjC,CAACO,KAAK,EAAEC,GAAG,kBAAK,oBAAC,sBAAsB,eAAKD,KAAK;EAAE,GAAG,EAAEC;AAAI,GAAG,CAChE;AAEDF,gBAAgB,CAACG,WAAW,GAAG,kBAAkB;AAEjD,eAAeH,gBAAgB"}

package/dist/esm/ThemeSwitcher/index.js

@@ -1,10 +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 } from 'react';
 import { useTheme } from '@os-design/theming';
 import { Moon, Sun } from '@os-design/icons';
 import Button from '../Button';
-
 /**
  * The button to switch the current theme.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useTheme","Moon","Sun","Button","ThemeSwitcher","onClick","rest","ref","activeTheme","setActiveTheme","e","displayName"],"sources":["../../../src/ThemeSwitcher/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useTheme } from '@os-design/theming';\nimport { Moon, Sun } from '@os-design/icons';\nimport Button, { ButtonProps } from '../Button';\n\nexport type ThemeSwitcherProps = ButtonProps;\n\n/**\n * The button to switch the current theme.\n */\nconst ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n  ({ onClick = () => {}, ...rest }, ref) => {\n    const { activeTheme, setActiveTheme } = useTheme();\n\n    return (\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={(e) => {\n          setActiveTheme(activeTheme === 'light' ? 'dark' : 'light');\n          onClick(e);\n        }}\n        role='switch'\n        aria-checked={activeTheme === 'dark'}\n        aria-label='Dark theme'\n        {...rest}\n        ref={ref}\n      >\n        {activeTheme === 'light' ? <Moon /> : <Sun />}\n      </Button>\n    );\n  }\n);\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n\nexport default ThemeSwitcher;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,IAAT,EAAeC,GAAf,QAA0B,kBAA1B;AACA,OAAOC,MAAP,MAAoC,WAApC;;AAIA;AACA;AACA;AACA,MAAMC,aAAa,gBAAGL,UAAU,CAC9B,CAAC;EAAEM,OAAO,GAAG,MAAM,CAAE,CAApB;EAAsB,GAAGC;AAAzB,CAAD,EAAkCC,GAAlC,KAA0C;EACxC,MAAM;IAAEC,WAAF;IAAeC;EAAf,IAAkCT,QAAQ,EAAhD;EAEA,oBACE,oBAAC,MAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAGU,CAAD,IAAO;MACdD,cAAc,CAACD,WAAW,KAAK,OAAhB,GAA0B,MAA1B,GAAmC,OAApC,CAAd;MACAH,OAAO,CAACK,CAAD,CAAP;IACD,CANH;IAOE,IAAI,EAAC,QAPP;IAQE,gBAAcF,WAAW,KAAK,MARhC;IASE,cAAW;EATb,GAUMF,IAVN;IAWE,GAAG,EAAEC;EAXP,IAaGC,WAAW,KAAK,OAAhB,gBAA0B,oBAAC,IAAD,OAA1B,gBAAqC,oBAAC,GAAD,OAbxC,CADF;AAiBD,CArB6B,CAAhC;AAwBAJ,aAAa,CAACO,WAAd,GAA4B,eAA5B;AAEA,eAAeP,aAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useTheme","Moon","Sun","Button","ThemeSwitcher","onClick","rest","ref","activeTheme","setActiveTheme","e","displayName"],"sources":["../../../src/ThemeSwitcher/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useTheme } from '@os-design/theming';\nimport { Moon, Sun } from '@os-design/icons';\nimport Button, { ButtonProps } from '../Button';\n\nexport type ThemeSwitcherProps = ButtonProps;\n\n/**\n * The button to switch the current theme.\n */\nconst ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n  ({ onClick = () => {}, ...rest }, ref) => {\n    const { activeTheme, setActiveTheme } = useTheme();\n\n    return (\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={(e) => {\n          setActiveTheme(activeTheme === 'light' ? 'dark' : 'light');\n          onClick(e);\n        }}\n        role='switch'\n        aria-checked={activeTheme === 'dark'}\n        aria-label='Dark theme'\n        {...rest}\n        ref={ref}\n      >\n        {activeTheme === 'light' ? <Moon /> : <Sun />}\n      </Button>\n    );\n  }\n);\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n\nexport default ThemeSwitcher;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,IAAI,EAAEC,GAAG,QAAQ,kBAAkB;AAC5C,OAAOC,MAAM,MAAuB,WAAW;AAI/C;AACA;AACA;AACA,MAAMC,aAAa,gBAAGL,UAAU,CAC9B,CAAC;EAAEM,OAAO,GAAG,MAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACxC,MAAM;IAAEC,WAAW;IAAEC;EAAe,CAAC,GAAGT,QAAQ,EAAE;EAElD,oBACE,oBAAC,MAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAGU,CAAC,IAAK;MACdD,cAAc,CAACD,WAAW,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;MAC1DH,OAAO,CAACK,CAAC,CAAC;IACZ,CAAE;IACF,IAAI,EAAC,QAAQ;IACb,gBAAcF,WAAW,KAAK,MAAO;IACrC,cAAW;EAAY,GACnBF,IAAI;IACR,GAAG,EAAEC;EAAI,IAERC,WAAW,KAAK,OAAO,gBAAG,oBAAC,IAAI,OAAG,gBAAG,oBAAC,GAAG,OAAG,CACtC;AAEb,CAAC,CACF;AAEDJ,aAAa,CAACO,WAAW,GAAG,eAAe;AAE3C,eAAeP,aAAa"}

package/dist/esm/TimePicker/index.js

@@ -0,0 +1,105 @@
+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 { isDigitKey, replaceChar, timeToDate } from '@os-design/time-picker-utils';
+import { useForwardedRef, useForwardedState } from '@os-design/utils';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import Button from '../Button';
+import Input from '../Input';
+/**
+ * The component to choose a time.
+ */
+const TimePicker = /*#__PURE__*/forwardRef(({
+  notation = '12-hour',
+  value,
+  defaultValue,
+  onChange = () => {},
+  onSelect = () => {},
+  right,
+  ...rest
+}, ref) => {
+  const [inputRef, mergedInputRef] = useForwardedRef(ref);
+  const [forwardedValue, setForwardedValue] = useForwardedState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [selection, setSelection] = useState({
+    start: 0,
+    end: 0
+  });
+  const [period, setPeriod] = useState(null);
+  useEffect(() => {
+    if (notation === '12-hour') {
+      setPeriod('AM');
+    }
+  }, [notation]);
+
+  // Update the selection
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.setSelectionRange(selection.start, selection.end);
+  }, [inputRef, selection]);
+  const time = useMemo(() => {
+    if (!forwardedValue) return notation === '12-hour' ? '12:00' : '00:00';
+    const hour = forwardedValue.getHours().toString().padStart(2, '0');
+    const minute = forwardedValue.getMinutes().toString().padStart(2, '0');
+    return `${hour}:${minute}`;
+  }, [forwardedValue, notation]);
+  const onKeyDown = useCallback(e => {
+    let nextCaret = selection.start;
+    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
+      nextCaret = 0;
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight' && e.metaKey) {
+      nextCaret = 5;
+    } else if (e.key === 'ArrowLeft') {
+      nextCaret = selection.start > 0 ? selection.start - 1 : 0;
+    } else if (e.key === 'ArrowRight') {
+      nextCaret = selection.start < 5 ? selection.start + 1 : 5;
+    } else if (e.key === 'Backspace') {
+      setForwardedValue(timeToDate('00:00', period));
+      nextCaret = 0;
+    } else if (isDigitKey(e.key)) {
+      let pos = selection.start === 2 ? 3 : selection.start;
+      if (pos === 5) pos = 0;
+      const nextTime = replaceChar(time, pos, e.key);
+      setForwardedValue(timeToDate(nextTime, period));
+      nextCaret = pos < 5 ? pos + 1 : 5;
+    }
+    setSelection({
+      start: nextCaret,
+      end: nextCaret
+    });
+    e.preventDefault();
+  }, [period, selection.start, setForwardedValue, time]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    type: "text",
+    inputMode: "decimal",
+    role: "spinbutton",
+    minLength: 5,
+    maxLength: 5,
+    value: time,
+    right: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      type: "ghost",
+      wide: "never",
+      size: "small",
+      onClick: () => setPeriod(period === 'AM' ? 'PM' : 'AM')
+    }, period), right),
+    onSelect: e => {
+      // Update the selection state.
+      const {
+        selectionStart,
+        selectionEnd
+      } = e.currentTarget;
+      setSelection({
+        start: selectionStart || 0,
+        end: selectionEnd || 0
+      });
+      onSelect(e);
+    },
+    onKeyDown: onKeyDown
+  }, rest, {
+    ref: mergedInputRef
+  }));
+});
+TimePicker.displayName = 'TimePicker';
+export default TimePicker;
+//# sourceMappingURL=index.js.map