@os-design/core 1.0.255 → 1.0.257

package/dist/esm/Skeleton/index.js

@@ -1,41 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-const SkeletonAnimation = keyframes`
-  from { background-position: 100% 50%; }
-  to { background-position: 0 50%; }
-`;
-const StyledSkeleton = styled('div', omitEmotionProps('width', 'size'))`
-  width: ${p => p.width};
-  height: 1em;
-
-  background: linear-gradient(
-    90deg,
-    ${p => clr(p.theme.skeletonColorBgFrom)} 25%,
-    ${p => clr(p.theme.skeletonColorBgTo)} 37%,
-    ${p => clr(p.theme.skeletonColorBgFrom)} 63%
-  );
-  background-size: 400% 100%;
-
-  border-radius: ${p => p.theme.borderRadius}em;
-  animation: ${SkeletonAnimation} 1.4s ease infinite;
-`;
-
-/**
- * Provides a basic placeholder while a user waits for the content to load.
- */
-const Skeleton = /*#__PURE__*/forwardRef(({
-  width = '100%',
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(StyledSkeleton, _extends({
-  width: width,
-  "aria-busy": true
-}, rest, {
-  ref: ref
-})));
-Skeleton.displayName = 'Skeleton';
-export default Skeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["keyframes","styled","clr","omitEmotionProps","React","forwardRef","SkeletonAnimation","StyledSkeleton","p","width","theme","skeletonColorBgFrom","skeletonColorBgTo","borderRadius","Skeleton","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface SkeletonProps extends JsxDivProps {\n  /**\n   * The width of the skeleton.\n   * @default 100%\n   */\n  width?: string;\n}\n\nconst SkeletonAnimation = keyframes`\n  from { background-position: 100% 50%; }\n  to { background-position: 0 50%; }\n`;\n\ntype StyledSkeletonProps = Required<Pick<SkeletonProps, 'width'>>;\nconst StyledSkeleton = styled(\n  'div',\n  omitEmotionProps('width', 'size')\n)<StyledSkeletonProps>`\n  width: ${(p) => p.width};\n  height: 1em;\n\n  background: linear-gradient(\n    90deg,\n    ${(p) => clr(p.theme.skeletonColorBgFrom)} 25%,\n    ${(p) => clr(p.theme.skeletonColorBgTo)} 37%,\n    ${(p) => clr(p.theme.skeletonColorBgFrom)} 63%\n  );\n  background-size: 400% 100%;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  animation: ${SkeletonAnimation} 1.4s ease infinite;\n`;\n\n/**\n * Provides a basic placeholder while a user waits for the content to load.\n */\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ width = '100%', ...rest }, ref) => (\n    <StyledSkeleton width={width} aria-busy {...rest} ref={ref} />\n  )\n);\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAWzC,MAAMC,iBAAiB,GAAGN,SAAS;AACnC;AACA;AACA,CAAC;AAGD,MAAMO,cAAc,GAAGN,MAAM,CAC3B,KAAK,EACLE,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAClC,CAAsB;AACtB,WAAYK,CAAC,IAAKA,CAAC,CAACC,KAAK;AACzB;AACA;AACA;AACA;AACA,MAAOD,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAC7C,MAAOH,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACE,iBAAiB,CAAC;AAC3C,MAAOJ,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAC7C;AACA;AACA;AACA,mBAAoBH,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,YAAY;AAC9C,eAAeP,iBAAiB;AAChC,CAAC;;AAED;AACA;AACA;AACA,MAAMQ,QAAQ,gBAAGT,UAAU,CACzB,CAAC;EAAEI,KAAK,GAAG,MAAM;EAAE,GAAGM;AAAK,CAAC,EAAEC,GAAG,kBAC/BZ,KAAA,CAAAa,aAAA,CAACV,cAAc,EAAAW,QAAA;EAACT,KAAK,EAAEA,KAAM;EAAC;AAAS,GAAKM,IAAI;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAEjE,CAAC;AAEDF,QAAQ,CAACK,WAAW,GAAG,UAAU;AAEjC,eAAeL,QAAQ","ignoreList":[]}

package/dist/esm/Switch/index.js

@@ -1,127 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { resetButtonStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps, useForwardedState } from '@os-design/utils';
-import React, { forwardRef, useCallback } from 'react';
-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,
-      &:focus {
-        ${hoverUncheckedStyles(p)};
-        ${hoverCheckedStyles(p)};
-      }
-    }
-  `;
-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;
-  cursor: pointer;
-  user-select: none;
-  display: block;
-
-  width: ${p => p.theme.switchWidth}em;
-  height: ${p => p.theme.switchHeight}em;
-  border-radius: ${p => p.theme.switchHeight / 2}em;
-
-  &::after {
-    position: absolute;
-    top: ${p => +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS)}em;
-
-    width: ${p => p.theme.switchCircleSize}em;
-    height: ${p => p.theme.switchCircleSize}em;
-    border-radius: 50%;
-
-    background-color: ${p => clr(p.theme.switchColorCircleBg)};
-    content: ' ';
-
-    ${transitionStyles('left')};
-  }
-
-  ${uncheckedStyles};
-  ${checkedStyles};
-  ${hoverStyles};
-  ${disabledStyles};
-
-  ${sizeStyles};
-  ${transitionStyles('background-color')};
-`;
-
-/**
- * The switch that can be enabled or disabled.
- */
-const Switch = /*#__PURE__*/forwardRef(({
-  disabled = false,
-  value,
-  defaultValue,
-  onChange = () => {},
-  size,
-  onMouseDown = () => {},
-  onKeyDown = () => {},
-  ...rest
-}, ref) => {
-  const [forwardedValue, setForwardedValue] = useForwardedState({
-    value,
-    defaultValue,
-    onChange
-  });
-  const clickHandler = useCallback(() => {
-    if (disabled) return;
-    setForwardedValue(!forwardedValue);
-  }, [disabled, forwardedValue, setForwardedValue]);
-  const mouseDownHandler = useCallback(e => {
-    onMouseDown(e);
-    e.preventDefault();
-  }, [onMouseDown]);
-  const keyDownHandler = useCallback(e => {
-    if (e.key === ' ') setForwardedValue(!forwardedValue);
-    onKeyDown(e);
-    e.preventDefault();
-  }, [forwardedValue, onKeyDown, setForwardedValue]);
-  return /*#__PURE__*/React.createElement(StyledSwitch, _extends({
-    disabled: disabled,
-    checked: forwardedValue,
-    size: size,
-    onClick: clickHandler,
-    onMouseDown: mouseDownHandler,
-    onKeyDown: keyDownHandler,
-    role: "switch",
-    "aria-checked": forwardedValue
-  }, rest, {
-    ref: ref
-  }));
-});
-Switch.displayName = 'Switch';
-export default Switch;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","useForwardedState","React","forwardRef","useCallback","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","onKeyDown","rest","ref","forwardedValue","setForwardedValue","clickHandler","mouseDownHandler","e","preventDefault","keyDownHandler","key","createElement","_extends","onClick","role","displayName"],"sources":["../../../src/Switch/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\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, useCallback } from 'react';\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      onKeyDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const clickHandler = useCallback(() => {\n      if (disabled) return;\n      setForwardedValue(!forwardedValue);\n    }, [disabled, forwardedValue, setForwardedValue]);\n\n    const mouseDownHandler = useCallback(\n      (e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      },\n      [onMouseDown]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === ' ') setForwardedValue(!forwardedValue);\n        onKeyDown(e);\n        e.preventDefault();\n      },\n      [forwardedValue, onKeyDown, setForwardedValue]\n    );\n\n    return (\n      <StyledSwitch\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        onClick={clickHandler}\n        onMouseDown={mouseDownHandler}\n        onKeyDown={keyDownHandler}\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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","ignoreList":[]}

package/dist/esm/SwitchSkeleton/index.js

@@ -1,24 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { sizeStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-import Skeleton from '../Skeleton';
-const StyledSwitchSkeleton = styled(Skeleton, omitEmotionProps('size'))`
-  width: ${p => p.theme.switchWidth}em;
-  height: ${p => p.theme.switchHeight}em;
-  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, {
-  ref: ref
-})));
-SwitchSkeleton.displayName = 'SwitchSkeleton';
-export default SwitchSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","StyledSwitchSkeleton","p","theme","switchWidth","switchHeight","SwitchSkeleton","props","ref","createElement","_extends","width","displayName"],"sources":["../../../src/SwitchSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,oBAAoB,GAAGN,MAAM,CACjCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,CACzB,CAAW;AACX,WAAYK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,WAAW;AACrC,YAAaF,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACE,YAAY;AACvC,mBAAoBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACE,YAAY,GAAG,CAAC;AAClD,IAAIT,UAAU;AACd,CAAC;;AAED;AACA;AACA;AACA,MAAMU,cAAc,gBAAGP,UAAU,CAC/B,CAACQ,KAAK,EAAEC,GAAG,kBAAKV,KAAA,CAAAW,aAAA,CAACR,oBAAoB,EAAAS,QAAA;EAACC,KAAK,EAAC;AAAM,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAC3E,CAAC;AAEDF,cAAc,CAACM,WAAW,GAAG,gBAAgB;AAE7C,eAAeN,cAAc","ignoreList":[]}

package/dist/esm/Tag/index.js

@@ -1,47 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { ellipsisStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-export const TagContainer = styled('div', omitEmotionProps('size'))`
-  display: inline-flex;
-  align-items: center;
-  overflow: hidden;
-
-  background-color: ${p => clr(p.theme.tagColorBg)};
-  color: ${p => clr(p.theme.tagColorText)};
-
-  border-radius: ${p => p.theme.borderRadius}em;
-  padding: ${p => p.theme.tagPaddingVertical}em
-    ${p => p.theme.tagPaddingHorizontal}em;
-
-  ${sizeStyles};
-  ${transitionStyles('background-color')};
-`;
-const Content = styled.div`
-  ${ellipsisStyles};
-`;
-export const LeftAddon = styled.div`
-  display: inherit;
-  padding-right: ${p => p.theme.tagAddonPaddingHorizontal}em;
-`;
-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,
-  children,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(TagContainer, _extends({}, rest, {
-  ref: ref
-}), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), /*#__PURE__*/React.createElement(Content, null, children), right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
-Tag.displayName = 'Tag';
-export default Tag;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","ellipsisStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","TagContainer","p","theme","tagColorBg","tagColorText","borderRadius","tagPaddingVertical","tagPaddingHorizontal","Content","div","LeftAddon","tagAddonPaddingHorizontal","RightAddon","Tag","left","right","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/Tag/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\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';\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,MAAM,MAAM,iBAAiB;AACpC,SACEC,cAAc,EACdC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAmBzC,OAAO,MAAMC,YAAY,GAAGR,MAAM,CAAC,KAAK,EAAEK,gBAAgB,CAAC,MAAM,CAAC,CAAW;AAC7E;AACA;AACA;AACA;AACA,sBAAuBI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,UAAU,CAAC;AACpD,WAAYF,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACE,YAAY,CAAC;AAC3C;AACA,mBAAoBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAY;AAC9C,aAAcJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,kBAAkB;AAC9C,MAAOL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,oBAAoB;AACzC;AACA,IAAIb,UAAU;AACd,IAAIC,gBAAgB,CAAC,kBAAkB,CAAC;AACxC,CAAC;AAED,MAAMa,OAAO,GAAGhB,MAAM,CAACiB,GAAG;AAC1B,IAAIhB,cAAc;AAClB,CAAC;AAED,OAAO,MAAMiB,SAAS,GAAGlB,MAAM,CAACiB,GAAG;AACnC;AACA,mBAAoBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACS,yBAAyB;AAC3D,CAAC;AAED,OAAO,MAAMC,UAAU,GAAGpB,MAAM,CAACiB,GAAG;AACpC;AACA,kBAAmBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACS,yBAAyB;AAC1D,CAAC;;AAED;AACA;AACA;AACA,MAAME,GAAG,gBAAGd,UAAU,CACpB,CAAC;EAAEe,IAAI;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACtCpB,KAAA,CAAAqB,aAAA,CAACnB,YAAY,EAAAoB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC9BJ,IAAI,iBAAIhB,KAAA,CAAAqB,aAAA,CAACT,SAAS,QAAEI,IAAgB,CAAC,eACtChB,KAAA,CAAAqB,aAAA,CAACX,OAAO,QAAEQ,QAAkB,CAAC,EAC5BD,KAAK,iBAAIjB,KAAA,CAAAqB,aAAA,CAACP,UAAU,QAAEG,KAAkB,CAC7B,CAElB,CAAC;AAEDF,GAAG,CAACQ,WAAW,GAAG,KAAK;AAEvB,eAAeR,GAAG","ignoreList":[]}

package/dist/esm/TagLink/index.js

@@ -1,40 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-import { LeftAddon, RightAddon, TagContainer } from '../Tag';
-const StyledTagLink = styled(TagContainer.withComponent('a'), omitEmotionProps('as'))`
-  cursor: pointer;
-  text-decoration: none;
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      background-color: ${p => clr(p.theme.tagColorBgHover)};
-    }
-  }
-`;
-
-/**
- * The tag component with a link.
- */
-const TagLink = /*#__PURE__*/forwardRef(({
-  left,
-  right,
-  as,
-  onMouseDown = () => {},
-  children,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(StyledTagLink, _extends({
-  as: as,
-  onMouseDown: e => {
-    onMouseDown(e);
-    e.preventDefault();
-  }
-}, rest, {
-  ref: ref
-}), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), children, right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
-TagLink.displayName = 'TagLink';
-export default TagLink;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","clr","omitEmotionProps","React","forwardRef","LeftAddon","RightAddon","TagContainer","StyledTagLink","withComponent","p","theme","tagColorBgHover","TagLink","left","right","as","onMouseDown","children","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/TagLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport { BaseTagProps, LeftAddon, RightAddon, TagContainer } from '../Tag';\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,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,SAAuBC,SAAS,EAAEC,UAAU,EAAEC,YAAY,QAAQ,QAAQ;AAQ1E,MAAMC,aAAa,GAAGR,MAAM,CAC1BO,YAAY,CAACE,aAAa,CAAC,GAAG,CAAC,EAC/BP,gBAAgB,CAAC,IAAI,CACvB,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,0BAA2BQ,CAAC,IAAKT,GAAG,CAACS,CAAC,CAACC,KAAK,CAACC,eAAe,CAAC;AAC7D;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,OAAO,gBAAGT,UAAU,CACxB,CAAC;EAAEU,IAAI;EAAEC,KAAK;EAAEC,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAClEjB,KAAA,CAAAkB,aAAA,CAACb,aAAa,EAAAc,QAAA;EACZN,EAAE,EAAEA,EAAG;EACPC,WAAW,EAAGM,CAAC,IAAK;IAClBN,WAAW,CAACM,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,CAAC,CAAC;EACpB;AAAE,GACEL,IAAI;EACRC,GAAG,EAAEA;AAAI,IAERN,IAAI,iBAAIX,KAAA,CAAAkB,aAAA,CAAChB,SAAS,QAAES,IAAgB,CAAC,EACrCI,QAAQ,EACRH,KAAK,iBAAIZ,KAAA,CAAAkB,aAAA,CAACf,UAAU,QAAES,KAAkB,CAC5B,CAEnB,CAAC;AAEDF,OAAO,CAACY,WAAW,GAAG,SAAS;AAE/B,eAAeZ,OAAO","ignoreList":[]}

package/dist/esm/TagList/index.js

@@ -1,62 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { Down, Up } from '@os-design/icons';
-import { sizeStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useState } from 'react';
-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;
-  ${collapsibleStyles};
-  ${sizeStyles};
-`;
-const Content = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-grow: 1;
-
-  margin: ${p => -p.theme.tagListGap}em 0 0 ${p => -p.theme.tagListGap}em;
-  & > * {
-    margin: ${p => p.theme.tagListGap}em 0 0 ${p => p.theme.tagListGap}em;
-  }
-`;
-const Control = styled.div`
-  margin-left: 0.2em;
-`;
-const OpenButton = styled(Button)`
-  // The height of the tag
-  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,
-  children,
-  ...rest
-}, ref) => {
-  const [opened, setOpened] = useState(false);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    opened: opened,
-    collapsible: collapsible,
-    size: size
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Content, null, children), collapsible && /*#__PURE__*/React.createElement(Control, null, /*#__PURE__*/React.createElement(OpenButton, {
-    type: "ghost",
-    wide: "never",
-    onClick: () => setOpened(!opened)
-  }, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null))));
-});
-TagList.displayName = 'TagList';
-export default TagList;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","Down","Up","sizeStyles","omitEmotionProps","React","forwardRef","useState","Button","collapsibleStyles","p","collapsible","opened","theme","lineHeight","tagPaddingVertical","Container","Content","div","tagListGap","Control","OpenButton","TagList","size","children","rest","ref","setOpened","createElement","_extends","type","wide","onClick","displayName"],"sources":["../../../src/TagList/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Down, Up } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useState } from 'react';\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,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAEC,EAAE,QAAQ,kBAAkB;AAC3C,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AACnD,OAAOC,MAAM,MAAM,WAAW;AAW9B,MAAMC,iBAAiB,GAAIC,CAAC,IAC1BA,CAAC,CAACC,WAAW,IACb,CAACD,CAAC,CAACE,MAAM,IACTb,GAAG;AACL;AACA,cAAcW,CAAC,CAACG,KAAK,CAACC,UAAU,GAAGJ,CAAC,CAACG,KAAK,CAACE,kBAAkB,GAAG,CAAC;AACjE,GAAG;AAKH,MAAMC,SAAS,GAAGhB,MAAM,CACtB,KAAK,EACLI,gBAAgB,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAClD,CAAiB;AACjB;AACA;AACA,IAAIK,iBAAiB;AACrB,IAAIN,UAAU;AACd,CAAC;AAED,MAAMc,OAAO,GAAGjB,MAAM,CAACkB,GAAG;AAC1B;AACA;AACA;AACA;AACA,YAAaR,CAAC,IAAK,CAACA,CAAC,CAACG,KAAK,CAACM,UAAU,UAAWT,CAAC,IAAK,CAACA,CAAC,CAACG,KAAK,CAACM,UAAU;AAC1E;AACA,cAAeT,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACM,UAAU,UAAWT,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACM,UAAU;AAC1E;AACA,CAAC;AAED,MAAMC,OAAO,GAAGpB,MAAM,CAACkB,GAAG;AAC1B;AACA,CAAC;AAED,MAAMG,UAAU,GAAGrB,MAAM,CAACQ,MAAM,CAAC;AACjC;AACA,YAAaE,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACC,UAAU,GAAGJ,CAAC,CAACG,KAAK,CAACE,kBAAkB,GAAG,CAAC;AACtE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMO,OAAO,gBAAGhB,UAAU,CACxB,CAAC;EAAEK,WAAW,GAAG,KAAK;EAAEY,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAM,CAACd,MAAM,EAAEe,SAAS,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EAE3C,oBACEF,KAAA,CAAAuB,aAAA,CAACZ,SAAS,EAAAa,QAAA;IACRjB,MAAM,EAAEA,MAAO;IACfD,WAAW,EAAEA,WAAY;IACzBY,IAAI,EAAEA;EAAK,GACPE,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETrB,KAAA,CAAAuB,aAAA,CAACX,OAAO,QAAEO,QAAkB,CAAC,EAE5Bb,WAAW,iBACVN,KAAA,CAAAuB,aAAA,CAACR,OAAO,qBACNf,KAAA,CAAAuB,aAAA,CAACP,UAAU;IACTS,IAAI,EAAC,OAAO;IACZC,IAAI,EAAC,OAAO;IACZC,OAAO,EAAEA,CAAA,KAAML,SAAS,CAAC,CAACf,MAAM;EAAE,GAEjCA,MAAM,gBAAGP,KAAA,CAAAuB,aAAA,CAAC1B,EAAE,MAAE,CAAC,gBAAGG,KAAA,CAAAuB,aAAA,CAAC3B,IAAI,MAAE,CAChB,CACL,CAEF,CAAC;AAEhB,CACF,CAAC;AAEDqB,OAAO,CAACW,WAAW,GAAG,SAAS;AAE/B,eAAeX,OAAO","ignoreList":[]}

package/dist/esm/TagListSkeleton/index.js

@@ -1,25 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, 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,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(TagList, _extends({}, rest, {
-  ref: ref
-}), Array(tagsCount).fill(0).map(() => {
-  tagIndex += 1;
-  return /*#__PURE__*/React.createElement(TagSkeleton, {
-    key: tagIndex,
-    width: width
-  });
-})));
-TagListSkeleton.displayName = 'TagListSkeleton';
-export default TagListSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","TagList","TagSkeleton","tagIndex","TagListSkeleton","width","tagsCount","rest","ref","createElement","_extends","Array","fill","map","key","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(0)\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,kBACrCT,KAAA,CAAAU,aAAA,CAACR,OAAO,EAAAS,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IACzBG,KAAK,CAACL,SAAS,CAAC,CACdM,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,MAAM;EACTV,QAAQ,IAAI,CAAC;EACb,oBAAOJ,KAAA,CAAAU,aAAA,CAACP,WAAW;IAACY,GAAG,EAAEX,QAAS;IAACE,KAAK,EAAEA;EAAM,CAAE,CAAC;AACrD,CAAC,CACI,CAEb,CAAC;AAEDD,eAAe,CAACW,WAAW,GAAG,iBAAiB;AAE/C,eAAeX,eAAe","ignoreList":[]}

package/dist/esm/TagSkeleton/index.js

@@ -1,26 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { sizeStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-import Skeleton from '../Skeleton';
-const StyledTagSkeleton = styled(Skeleton, omitEmotionProps('width', 'size'))`
-  width: ${p => p.width};
-  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
-}, ref) => /*#__PURE__*/React.createElement(StyledTagSkeleton, _extends({
-  width: width
-}, rest, {
-  ref: ref
-})));
-TagSkeleton.displayName = 'TagSkeleton';
-export default TagSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","StyledTagSkeleton","p","width","theme","lineHeight","tagPaddingVertical","TagSkeleton","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/TagSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAarD,MAAMC,iBAAiB,GAAGN,MAAM,CAC9BK,QAAQ,EACRH,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAClC,CAAyB;AACzB,WAAYK,CAAC,IAAKA,CAAC,CAACC,KAAK;AACzB,YAAaD,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACC,UAAU,GAAGH,CAAC,CAACE,KAAK,CAACE,kBAAkB,GAAG,CAAC;AACtE,IAAIV,UAAU;AACd,CAAC;;AAED;AACA;AACA;AACA,MAAMW,WAAW,gBAAGR,UAAU,CAC5B,CAAC;EAAEI,KAAK,GAAG,KAAK;EAAE,GAAGK;AAAK,CAAC,EAAEC,GAAG,kBAC9BX,KAAA,CAAAY,aAAA,CAACT,iBAAiB,EAAAU,QAAA;EAACR,KAAK,EAAEA;AAAM,GAAKK,IAAI;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAE1D,CAAC;AAEDF,WAAW,CAACK,WAAW,GAAG,aAAa;AAEvC,eAAeL,WAAW","ignoreList":[]}

package/dist/esm/TextArea/index.js

@@ -1,113 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { Loading } from '@os-design/icons';
-import { clr, ThemeOverrider } from '@os-design/theming';
-import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { InputContainer, StyledInput } from '../Input';
-import getFocusableElements from '../Input/utils/getFocusableElements';
-const TextAreaContainer = styled(InputContainer)`
-  height: ${p => p.theme.textAreaHeight}em;
-`;
-const TextAreaField = styled(StyledInput.withComponent('textarea'))`
-  padding-top: ${p => p.theme.textAreaPaddingVertical}em;
-  padding-bottom: ${p => p.theme.textAreaPaddingVertical}em;
-  line-height: ${p => p.theme.lineHeight};
-  resize: none;
-`;
-const Addon = styled('span', omitEmotionProps('hasPadding'))`
-  display: flex;
-  align-items: center;
-  user-select: none;
-  color: ${p => clr(p.theme.inputColorPlaceholder)};
-
-  svg {
-    transform: scale(1.2);
-  }
-`;
-const LeftAddon = styled(Addon)`
-  padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
-  ${p => p.hasPadding && css`
-      padding-left: ${p.theme.inputPaddingHorizontal}em;
-    `}
-`;
-const RightAddon = styled(Addon)`
-  padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
-  ${p => p.hasPadding && css`
-      padding-right: ${p.theme.inputPaddingHorizontal}em;
-    `}
-`;
-
-/**
- * The multiline input component.
- */
-const TextArea = /*#__PURE__*/forwardRef(({
-  left,
-  leftHasPadding = false,
-  right,
-  rightHasPadding = false,
-  disabled = false,
-  loading = false,
-  containerRef,
-  containerProps = {},
-  size,
-  value,
-  onChange = () => {},
-  ...rest
-}, ref) => {
-  const [innerContainerRef, mergedContainerRef] = useForwardedRef(containerRef);
-  const rightValue = useMemo(() => loading ? /*#__PURE__*/React.createElement(Loading, null) : right, [loading, right]);
-  const rightHasPaddingValue = useMemo(() => loading ? true : rightHasPadding, [loading, rightHasPadding]);
-  const onFocus = useCallback(e => {
-    // Focus the next element if the container element was focused.
-    // The next element will be the input or button in the addon.
-    if (disabled || e.target !== innerContainerRef.current) return;
-    const focusableElements = getFocusableElements(innerContainerRef.current);
-    focusableElements[0].focus();
-  }, [disabled, innerContainerRef]);
-  const onKeyDown = useCallback(e => {
-    // Focus the previous element if the first element in the input
-    // container is focused and the Shift + Tab combination is pressed.
-    const focusableElements = getFocusableElements(document);
-    const inputFocusableElements = innerContainerRef.current ? getFocusableElements(innerContainerRef.current) : [];
-    const firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
-    if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
-      const inputContainerIndex = focusableElements.findIndex(el => el === innerContainerRef.current);
-      if (inputContainerIndex === 0) return;
-      const elementBeforeInputContainer = focusableElements[inputContainerIndex - 1];
-      elementBeforeInputContainer.focus();
-    }
-  }, [innerContainerRef]);
-  return /*#__PURE__*/React.createElement(TextAreaContainer, _extends({
-    disabled: disabled,
-    size: size,
-    tabIndex: !disabled ? 0 : -1,
-    onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    ref: mergedContainerRef
-  }, containerProps), left && /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: {
-      buttonPaddingHorizontal: 0.8
-    }
-  }, /*#__PURE__*/React.createElement(LeftAddon, {
-    hasPadding: leftHasPadding
-  }, left)), /*#__PURE__*/React.createElement(TextAreaField, _extends({
-    disabled: disabled,
-    hasLeft: !!left,
-    hasRight: !!right,
-    value: value || '',
-    onChange: e => onChange(e.target.value, e)
-  }, rest, {
-    ref: ref
-  })), rightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: {
-      buttonPaddingHorizontal: 0.8
-    }
-  }, /*#__PURE__*/React.createElement(RightAddon, {
-    hasPadding: rightHasPaddingValue
-  }, rightValue)));
-});
-TextArea.displayName = 'TextArea';
-export default TextArea;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","Loading","clr","ThemeOverrider","omitEmotionProps","useForwardedRef","React","forwardRef","useCallback","useMemo","InputContainer","StyledInput","getFocusableElements","TextAreaContainer","p","theme","textAreaHeight","TextAreaField","withComponent","textAreaPaddingVertical","lineHeight","Addon","inputColorPlaceholder","LeftAddon","inputAddonPaddingHorizontal","hasPadding","inputPaddingHorizontal","RightAddon","TextArea","left","leftHasPadding","right","rightHasPadding","disabled","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","createElement","rightHasPaddingValue","onFocus","e","target","current","focusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","_extends","tabIndex","overrides","buttonPaddingHorizontal","hasLeft","hasRight","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { InputContainer, StyledInput } from '../Input';\nimport getFocusableElements from '../Input/utils/getFocusableElements';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, 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   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the textarea container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the textarea container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\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  resize: none;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <TextAreaContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <TextAreaField\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </TextAreaContainer>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}