@os-design/core 1.0.156 → 1.0.157

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FRACTION_DIGITS","uncheckedStyles","p","checked","css","clr","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","styled","omitEmotionProps","resetButtonStyles","switchColorCircleBg","transitionStyles","sizeStyles","Switch","forwardRef","ref","value","defaultValue","onChange","size","onMouseDown","rest","useForwardedState","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":["FRACTION_DIGITS","uncheckedStyles","p","checked","css","clr","theme","switchUncheckedColorBg","switchHeight","switchCircleSize","toFixed","checkedStyles","switchCheckedColorBg","switchWidth","hoverUncheckedStyles","switchUncheckedColorBgHover","hoverCheckedStyles","switchCheckedColorBgHover","hoverStyles","disabled","disabledUncheckedStyles","switchDisabledUncheckedColorBg","disabledCheckedStyles","switchDisabledCheckedColorBg","disabledStyles","StyledSwitch","styled","omitEmotionProps","resetButtonStyles","switchColorCircleBg","transitionStyles","sizeStyles","Switch","forwardRef","ref","value","defaultValue","onChange","size","onMouseDown","rest","useForwardedState","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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"}

package/dist/cjs/SwitchSkeleton/index.js

@@ -1,34 +1,21 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? 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); }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var StyledSwitchSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "em;\n  height: ", "em;\n  border-radius: ", "em;\n  ", ";\n"])), function (p) {
   return p.theme.switchWidth;
 }, function (p) {
@@ -36,10 +23,10 @@ var StyledSwitchSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _ut
 }, function (p) {
   return p.theme.switchHeight / 2;
 }, _styles.sizeStyles);
+
 /**
  * Provides a switch placeholder while a user waits for the content to load.
  */
-
 var SwitchSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react["default"].createElement(StyledSwitchSkeleton, _extends({
     width: "100%"

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledSwitchSkeleton","styled","Skeleton","omitEmotionProps","p","theme","switchWidth","switchHeight","sizeStyles","SwitchSkeleton","forwardRef","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;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,oBAAoB,GAAG,IAAAC,kBAAA,EAC3BC,oBAD2B,EAE3B,IAAAC,uBAAA,EAAiB,MAAjB,CAF2B,CAAH,gJAIf,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,WAAf;AAAA,CAJe,EAKd,UAACF,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQE,YAAf;AAAA,CALc,EAMP,UAACH,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQE,YAAR,GAAuB,CAA9B;AAAA,CANO,EAOtBC,kBAPsB,CAA1B;AAUA;AACA;AACA;;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAA,EACrB,UAACC,KAAD,EAAQC,GAAR;EAAA,oBAAgB,gCAAC,oBAAD;IAAsB,KAAK,EAAC;EAA5B,GAAuCD,KAAvC;IAA8C,GAAG,EAAEC;EAAnD,GAAhB;AAAA,CADqB,CAAvB;AAIAH,cAAc,CAACI,WAAf,GAA6B,gBAA7B;eAEeJ,c"}
+{"version":3,"file":"index.js","names":["StyledSwitchSkeleton","styled","Skeleton","omitEmotionProps","p","theme","switchWidth","switchHeight","sizeStyles","SwitchSkeleton","forwardRef","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;AACA;AACA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAItD,IAAMA,oBAAoB,GAAG,IAAAC,kBAAM,EACjCC,oBAAQ,EACR,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CACzB,gJACU,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,WAAW;AAAA,GACzB,UAACF,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACE,YAAY;AAAA,GACpB,UAACH,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACE,YAAY,GAAG,CAAC;AAAA,GAC9CC,kBAAU,CACb;;AAED;AACA;AACA;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,UAACC,KAAK,EAAEC,GAAG;EAAA,oBAAK,gCAAC,oBAAoB;IAAC,KAAK,EAAC;EAAM,GAAKD,KAAK;IAAE,GAAG,EAAEC;EAAI,GAAG;AAAA,EAC3E;AAEDH,cAAc,CAACI,WAAW,GAAG,gBAAgB;AAAC,eAE/BJ,cAAc;AAAA"}

package/dist/cjs/Tag/index.js

@@ -1,40 +1,24 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TagContainer = exports.RightAddon = exports.LeftAddon = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _excluded = ["left", "right", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var TagContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n\n  background-color: ", ";\n  color: ", ";\n\n  border-radius: ", "em;\n  padding: ", "em\n    ", "em;\n\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.tagColorBg);
 }, function (p) {
@@ -47,30 +31,24 @@ var TagContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('
   return p.theme.tagPaddingHorizontal;
 }, _styles.sizeStyles, (0, _styles.transitionStyles)('background-color'));
 exports.TagContainer = TagContainer;
-
 var Content = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), _styles.ellipsisStyles);
-
 var LeftAddon = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inherit;\n  padding-right: ", "em;\n"])), function (p) {
   return p.theme.tagAddonPaddingHorizontal;
 });
-
 exports.LeftAddon = LeftAddon;
-
 var RightAddon = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inherit;\n  padding-left: ", "em;\n"])), function (p) {
   return p.theme.tagAddonPaddingHorizontal;
 });
+
 /**
  * The component to display a label, tag, or category.
  */
-
-
 exports.RightAddon = RightAddon;
 var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var left = _ref.left,
-      right = _ref.right,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    right = _ref.right,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(TagContainer, _extends({}, rest, {
     ref: ref
   }), left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, children), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TagContainer","styled","omitEmotionProps","p","clr","theme","tagColorBg","tagColorText","borderRadius","tagPaddingVertical","tagPaddingHorizontal","sizeStyles","transitionStyles","Content","div","ellipsisStyles","LeftAddon","tagAddonPaddingHorizontal","RightAddon","Tag","forwardRef","ref","left","right","children","rest","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;;AACA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;AAmBO,IAAMA,YAAY,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,2QAKH,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,UAAZ,CAAP;AAAA,CALG,EAMd,UAACH,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQE,YAAZ,CAAP;AAAA,CANc,EAQN,UAACJ,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQG,YAAf;AAAA,CARM,EASZ,UAACL,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQI,kBAAf;AAAA,CATY,EAUnB,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQK,oBAAf;AAAA,CAVmB,EAYrBC,kBAZqB,EAarB,IAAAC,wBAAA,EAAiB,kBAAjB,CAbqB,CAAlB;;;AAgBP,IAAMC,OAAO,GAAGZ,kBAAA,CAAOa,GAAV,mFACTC,sBADS,CAAb;;AAIO,IAAMC,SAAS,GAAGf,kBAAA,CAAOa,GAAV,yHAEH,UAACX,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQY,yBAAf;AAAA,CAFG,CAAf;;;;AAKA,IAAMC,UAAU,GAAGjB,kBAAA,CAAOa,GAAV,wHAEL,UAACX,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQY,yBAAf;AAAA,CAFK,CAAhB;AAKP;AACA;AACA;;;;AACA,IAAME,GAAG,gBAAG,IAAAC,iBAAA,EACV,gBAAqCC,GAArC;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,IAASC,KAAT,QAASA,KAAT;EAAA,IAAgBC,QAAhB,QAAgBA,QAAhB;EAAA,IAA6BC,IAA7B;;EAAA,oBACE,gCAAC,YAAD,eAAkBA,IAAlB;IAAwB,GAAG,EAAEJ;EAA7B,IACGC,IAAI,iBAAI,gCAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,gCAAC,OAAD,QAAUE,QAAV,CAFF,EAGGD,KAAK,iBAAI,gCAAC,UAAD,QAAaA,KAAb,CAHZ,CADF;AAAA,CADU,CAAZ;AAUAJ,GAAG,CAACO,WAAJ,GAAkB,KAAlB;eAEeP,G"}
+{"version":3,"file":"index.js","names":["TagContainer","styled","omitEmotionProps","p","clr","theme","tagColorBg","tagColorText","borderRadius","tagPaddingVertical","tagPaddingHorizontal","sizeStyles","transitionStyles","Content","div","ellipsisStyles","LeftAddon","tagAddonPaddingHorizontal","RightAddon","Tag","forwardRef","ref","left","right","children","rest","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;AACA;AACA;AAMA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBlC,IAAMA,YAAY,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,2QAK7C,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,UAAU,CAAC;AAAA,GACzC,UAACH,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACE,YAAY,CAAC;AAAA,GAExB,UAACJ,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACG,YAAY;AAAA,GACjC,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACI,kBAAkB;AAAA,GACxC,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACK,oBAAoB;AAAA,GAErCC,kBAAU,EACV,IAAAC,wBAAgB,EAAC,kBAAkB,CAAC,CACvC;AAAC;AAEF,IAAMC,OAAO,GAAGZ,kBAAM,CAACa,GAAG,mFACtBC,sBAAc,CACjB;AAEM,IAAMC,SAAS,GAAGf,kBAAM,CAACa,GAAG,yHAEhB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACY,yBAAyB;AAAA,EAC1D;AAAC;AAEK,IAAMC,UAAU,GAAGjB,kBAAM,CAACa,GAAG,wHAElB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACY,yBAAyB;AAAA,EACzD;;AAED;AACA;AACA;AAFA;AAGA,IAAME,GAAG,gBAAG,IAAAC,iBAAU,EACpB,gBAAqCC,GAAG;EAAA,IAArCC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAAA,oBAC/B,gCAAC,YAAY,eAAKA,IAAI;IAAE,GAAG,EAAEJ;EAAI,IAC9BC,IAAI,iBAAI,gCAAC,SAAS,QAAEA,IAAI,CAAa,eACtC,gCAAC,OAAO,QAAEE,QAAQ,CAAW,EAC5BD,KAAK,iBAAI,gCAAC,UAAU,QAAEA,KAAK,CAAc,CAC7B;AAAA,CAChB,CACF;AAEDJ,GAAG,CAACO,WAAW,GAAG,KAAK;AAAC,eAETP,GAAG;AAAA"}

package/dist/cjs/TagLink/index.js

@@ -1,61 +1,43 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _utils = require("@os-design/utils");
-
 var _Tag = require("../Tag");
-
 var _excluded = ["left", "right", "as", "onMouseDown", "children"];
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var StyledTagLink = (0, _styled["default"])(_Tag.TagContainer.withComponent('a'), (0, _utils.omitEmotionProps)('as'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ", ";\n    }\n  }\n"])), function (p) {
   return (0, _theming.clr)(p.theme.tagColorBgHover);
 });
+
 /**
  * The tag component with a link.
  */
-
 var TagLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var left = _ref.left,
-      right = _ref.right,
-      as = _ref.as,
-      _ref$onMouseDown = _ref.onMouseDown,
-      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    right = _ref.right,
+    as = _ref.as,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(StyledTagLink, _extends({
     as: as,
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
-
       e.preventDefault();
     }
   }, rest, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledTagLink","styled","TagContainer","withComponent","omitEmotionProps","p","clr","theme","tagColorBgHover","TagLink","forwardRef","ref","left","right","as","onMouseDown","children","rest","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;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,aAAa,GAAG,IAAAC,kBAAA,EACpBC,iBAAA,CAAaC,aAAb,CAA2B,GAA3B,CADoB,EAEpB,IAAAC,uBAAA,EAAiB,IAAjB,CAFoB,CAAH,2NAUO,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,eAAZ,CAAP;AAAA,CAVP,CAAnB;AAeA;AACA;AACA;;AACA,IAAMC,OAAO,gBAAG,IAAAC,iBAAA,EACd,gBAAiEC,GAAjE;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,IAASC,KAAT,QAASA,KAAT;EAAA,IAAgBC,EAAhB,QAAgBA,EAAhB;EAAA,4BAAoBC,WAApB;EAAA,IAAoBA,YAApB,iCAAkC,YAAM,CAAE,CAA1C;EAAA,IAA4CC,QAA5C,QAA4CA,QAA5C;EAAA,IAAyDC,IAAzD;;EAAA,oBACE,gCAAC,aAAD;IACE,EAAE,EAAEH,EADN;IAEE,WAAW,EAAE,qBAACI,CAAD,EAAO;MAClBH,YAAW,CAACG,CAAD,CAAX;;MACAA,CAAC,CAACC,cAAF;IACD;EALH,GAMMF,IANN;IAOE,GAAG,EAAEN;EAPP,IASGC,IAAI,iBAAI,gCAAC,cAAD,QAAYA,IAAZ,CATX,EAUGI,QAVH,EAWGH,KAAK,iBAAI,gCAAC,eAAD,QAAaA,KAAb,CAXZ,CADF;AAAA,CADc,CAAhB;AAkBAJ,OAAO,CAACW,WAAR,GAAsB,SAAtB;eAEeX,O"}
+{"version":3,"file":"index.js","names":["StyledTagLink","styled","TagContainer","withComponent","omitEmotionProps","p","clr","theme","tagColorBgHover","TagLink","forwardRef","ref","left","right","as","onMouseDown","children","rest","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;AACA;AACA;AACA;AACA;AAA2E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3E,IAAMA,aAAa,GAAG,IAAAC,kBAAM,EAC1BC,iBAAY,CAACC,aAAa,CAAC,GAAG,CAAC,EAC/B,IAAAC,uBAAgB,EAAC,IAAI,CAAC,CACvB,2NAOyB,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,eAAe,CAAC;AAAA,EAG5D;;AAED;AACA;AACA;AACA,IAAMC,OAAO,gBAAG,IAAAC,iBAAU,EACxB,gBAAiEC,GAAG;EAAA,IAAjEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,EAAE,QAAFA,EAAE;IAAA,wBAAEC,WAAW;IAAXA,YAAW,iCAAG,YAAM,CAAC,CAAC;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAAA,oBAC3D,gCAAC,aAAa;IACZ,EAAE,EAAEH,EAAG;IACP,WAAW,EAAE,qBAACI,CAAC,EAAK;MAClBH,YAAW,CAACG,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,EAAE;IACpB;EAAE,GACEF,IAAI;IACR,GAAG,EAAEN;EAAI,IAERC,IAAI,iBAAI,gCAAC,cAAS,QAAEA,IAAI,CAAa,EACrCI,QAAQ,EACRH,KAAK,iBAAI,gCAAC,eAAU,QAAEA,KAAK,CAAc,CAC5B;AAAA,CACjB,CACF;AAEDJ,OAAO,CAACW,WAAW,GAAG,SAAS;AAAC,eAEjBX,OAAO;AAAA"}

package/dist/cjs/TagList/index.js

@@ -1,62 +1,36 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _icons = require("@os-design/icons");
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _excluded = ["collapsible", "size", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _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); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var collapsibleStyles = function collapsibleStyles(p) {
   return p.collapsible && !p.opened && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // The height of the tag\n    height: ", "em;\n  "])), p.theme.lineHeight + p.theme.tagPaddingVertical * 2);
 };
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('opened', 'collapsible', 'size'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  overflow: hidden;\n  ", ";\n  ", ";\n"])), collapsibleStyles, _styles.sizeStyles);
-
 var Content = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-grow: 1;\n\n  margin: ", "em 0 0 ", "em;\n  & > * {\n    margin: ", "em 0 0 ", "em;\n  }\n"])), function (p) {
   return -p.theme.tagListGap;
 }, function (p) {
@@ -66,28 +40,24 @@ var Content = _styled["default"].div(_templateObject3 || (_templateObject3 = _ta
 }, function (p) {
   return p.theme.tagListGap;
 });
-
 var Control = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 0.2em;\n"])));
-
 var OpenButton = (0, _styled["default"])(_Button["default"])(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  // The height of the tag\n  height: ", "em;\n  padding: 0 0.5em;\n"])), function (p) {
   return p.theme.lineHeight + p.theme.tagPaddingVertical * 2;
 });
+
 /**
  * The component to display a list of tags.
  */
-
 var TagList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$collapsible = _ref.collapsible,
-      collapsible = _ref$collapsible === void 0 ? false : _ref$collapsible,
-      size = _ref.size,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    collapsible = _ref$collapsible === void 0 ? false : _ref$collapsible,
+    size = _ref.size,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      opened = _useState2[0],
-      setOpened = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    opened = _useState2[0],
+    setOpened = _useState2[1];
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     opened: opened,
     collapsible: collapsible,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["collapsibleStyles","p","collapsible","opened","css","theme","lineHeight","tagPaddingVertical","Container","styled","omitEmotionProps","sizeStyles","Content","div","tagListGap","Control","OpenButton","Button","TagList","forwardRef","ref","size","children","rest","useState","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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;EAAA,OACxBA,CAAC,CAACC,WAAF,IACA,CAACD,CAAC,CAACE,MADH,QAEAC,WAFA,8HAIYH,CAAC,CAACI,KAAF,CAAQC,UAAR,GAAqBL,CAAC,CAACI,KAAF,CAAQE,kBAAR,GAA6B,CAJ9D,CADwB;AAAA,CAA1B;;AAWA,IAAMC,SAAS,GAAG,IAAAC,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,QAAjB,EAA2B,aAA3B,EAA0C,MAA1C,CAFgB,CAAH,mIAMXV,iBANW,EAOXW,kBAPW,CAAf;;AAUA,IAAMC,OAAO,GAAGH,kBAAA,CAAOI,GAAV,iNAKD,UAACZ,CAAD;EAAA,OAAO,CAACA,CAAC,CAACI,KAAF,CAAQS,UAAhB;AAAA,CALC,EAKmC,UAACb,CAAD;EAAA,OAAO,CAACA,CAAC,CAACI,KAAF,CAAQS,UAAhB;AAAA,CALnC,EAOC,UAACb,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQS,UAAf;AAAA,CAPD,EAOoC,UAACb,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQS,UAAf;AAAA,CAPpC,CAAb;;AAWA,IAAMC,OAAO,GAAGN,kBAAA,CAAOI,GAAV,gGAAb;;AAIA,IAAMG,UAAU,GAAG,IAAAP,kBAAA,EAAOQ,kBAAP,CAAH,8IAEJ,UAAChB,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQC,UAAR,GAAqBL,CAAC,CAACI,KAAF,CAAQE,kBAAR,GAA6B,CAAzD;AAAA,CAFI,CAAhB;AAMA;AACA;AACA;;AACA,IAAMW,OAAO,gBAAG,IAAAC,iBAAA,EACd,gBAAmDC,GAAnD,EAA2D;EAAA,4BAAxDlB,WAAwD;EAAA,IAAxDA,WAAwD,iCAA1C,KAA0C;EAAA,IAAnCmB,IAAmC,QAAnCA,IAAmC;EAAA,IAA7BC,QAA6B,QAA7BA,QAA6B;EAAA,IAAhBC,IAAgB;;EACzD,gBAA4B,IAAAC,eAAA,EAAS,KAAT,CAA5B;EAAA;EAAA,IAAOrB,MAAP;EAAA,IAAesB,SAAf;;EAEA,oBACE,gCAAC,SAAD;IACE,MAAM,EAAEtB,MADV;IAEE,WAAW,EAAED,WAFf;IAGE,IAAI,EAAEmB;EAHR,GAIME,IAJN;IAKE,GAAG,EAAEH;EALP,iBAOE,gCAAC,OAAD,QAAUE,QAAV,CAPF,EASGpB,WAAW,iBACV,gCAAC,OAAD,qBACE,gCAAC,UAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE;MAAA,OAAMuB,SAAS,CAAC,CAACtB,MAAF,CAAf;IAAA;EAHX,GAKGA,MAAM,gBAAG,gCAAC,SAAD,OAAH,gBAAY,gCAAC,WAAD,OALrB,CADF,CAVJ,CADF;AAuBD,CA3Ba,CAAhB;AA8BAe,OAAO,CAACQ,WAAR,GAAsB,SAAtB;eAEeR,O"}
+{"version":3,"file":"index.js","names":["collapsibleStyles","p","collapsible","opened","css","theme","lineHeight","tagPaddingVertical","Container","styled","omitEmotionProps","sizeStyles","Content","div","tagListGap","Control","OpenButton","Button","TagList","forwardRef","ref","size","children","rest","useState","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;AACA;AACA;AACA;AACA;AACA;AACA;AAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAC;EAAA,OAC1BA,CAAC,CAACC,WAAW,IACb,CAACD,CAAC,CAACE,MAAM,QACTC,WAAG,8HAESH,CAAC,CAACI,KAAK,CAACC,UAAU,GAAGL,CAAC,CAACI,KAAK,CAACE,kBAAkB,GAAG,CAAC,CAC9D;AAAA;AAKH,IAAMC,SAAS,GAAG,IAAAC,kBAAM,EACtB,KAAK,EACL,IAAAC,uBAAgB,EAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,CAClD,mIAGGV,iBAAiB,EACjBW,kBAAU,CACb;AAED,IAAMC,OAAO,GAAGH,kBAAM,CAACI,GAAG,iNAKd,UAACZ,CAAC;EAAA,OAAK,CAACA,CAAC,CAACI,KAAK,CAACS,UAAU;AAAA,GAAU,UAACb,CAAC;EAAA,OAAK,CAACA,CAAC,CAACI,KAAK,CAACS,UAAU;AAAA,GAE5D,UAACb,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACS,UAAU;AAAA,GAAU,UAACb,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACS,UAAU;AAAA,EAEzE;AAED,IAAMC,OAAO,GAAGN,kBAAM,CAACI,GAAG,gGAEzB;AAED,IAAMG,UAAU,GAAG,IAAAP,kBAAM,EAACQ,kBAAM,CAAC,8IAErB,UAAChB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACC,UAAU,GAAGL,CAAC,CAACI,KAAK,CAACE,kBAAkB,GAAG,CAAC;AAAA,EAErE;;AAED;AACA;AACA;AACA,IAAMW,OAAO,gBAAG,IAAAC,iBAAU,EACxB,gBAAmDC,GAAG,EAAK;EAAA,4BAAxDlB,WAAW;IAAXA,WAAW,iCAAG,KAAK;IAAEmB,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAC7C,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCrB,MAAM;IAAEsB,SAAS;EAExB,oBACE,gCAAC,SAAS;IACR,MAAM,EAAEtB,MAAO;IACf,WAAW,EAAED,WAAY;IACzB,IAAI,EAAEmB;EAAK,GACPE,IAAI;IACR,GAAG,EAAEH;EAAI,iBAET,gCAAC,OAAO,QAAEE,QAAQ,CAAW,EAE5BpB,WAAW,iBACV,gCAAC,OAAO,qBACN,gCAAC,UAAU;IACT,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE;MAAA,OAAMuB,SAAS,CAAC,CAACtB,MAAM,CAAC;IAAA;EAAC,GAEjCA,MAAM,gBAAG,gCAAC,SAAE,OAAG,gBAAG,gCAAC,WAAI,OAAG,CAChB,CAEhB,CACS;AAEhB,CAAC,CACF;AAEDe,OAAO,CAACQ,WAAW,GAAG,SAAS;AAAC,eAEjBR,OAAO;AAAA"}

package/dist/cjs/TagListSkeleton/index.js

@@ -1,43 +1,30 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _TagList = _interopRequireDefault(require("../TagList"));
-
 var _TagSkeleton = _interopRequireDefault(require("../TagSkeleton"));
-
 var _excluded = ["width", "tagsCount"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var tagIndex = 0;
+
 /**
  * Provides a tag list placeholder while a user waits for the content to load.
  */
-
 var TagListSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var width = _ref.width,
-      _ref$tagsCount = _ref.tagsCount,
-      tagsCount = _ref$tagsCount === void 0 ? 3 : _ref$tagsCount,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$tagsCount = _ref.tagsCount,
+    tagsCount = _ref$tagsCount === void 0 ? 3 : _ref$tagsCount,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_TagList["default"], _extends({}, rest, {
     ref: ref
   }), Array(tagsCount).fill({}).map(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["tagIndex","TagListSkeleton","forwardRef","ref","width","tagsCount","rest","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;;AACA;;AACA;;;;;;;;;;;;;;;;AAeA,IAAIA,QAAQ,GAAG,CAAf;AAEA;AACA;AACA;;AACA,IAAMC,eAAe,gBAAG,IAAAC,iBAAA,EACtB,gBAAoCC,GAApC;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,0BAAUC,SAAV;EAAA,IAAUA,SAAV,+BAAsB,CAAtB;EAAA,IAA4BC,IAA5B;;EAAA,oBACE,gCAAC,mBAAD,eAAaA,IAAb;IAAmB,GAAG,EAAEH;EAAxB,IACGI,KAAK,CAACF,SAAD,CAAL,CACEG,IADF,CACO,EADP,EAEEC,GAFF,CAEM,YAAM;IACTT,QAAQ,IAAI,CAAZ;IACA,oBAAO,gCAAC,uBAAD;MAAa,GAAG,EAAEA,QAAlB;MAA4B,KAAK,EAAEI;IAAnC,EAAP;EACD,CALF,CADH,CADF;AAAA,CADsB,CAAxB;AAaAH,eAAe,CAACS,WAAhB,GAA8B,iBAA9B;eAEeT,e"}
+{"version":3,"file":"index.js","names":["tagIndex","TagListSkeleton","forwardRef","ref","width","tagsCount","rest","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;AACA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAIA,QAAQ,GAAG,CAAC;;AAEhB;AACA;AACA;AACA,IAAMC,eAAe,gBAAG,IAAAC,iBAAU,EAChC,gBAAoCC,GAAG;EAAA,IAApCC,KAAK,QAALA,KAAK;IAAA,sBAAEC,SAAS;IAATA,SAAS,+BAAG,CAAC;IAAKC,IAAI;EAAA,oBAC9B,gCAAC,mBAAO,eAAKA,IAAI;IAAE,GAAG,EAAEH;EAAI,IACzBI,KAAK,CAACF,SAAS,CAAC,CACdG,IAAI,CAAC,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,YAAM;IACTT,QAAQ,IAAI,CAAC;IACb,oBAAO,gCAAC,uBAAW;MAAC,GAAG,EAAEA,QAAS;MAAC,KAAK,EAAEI;IAAM,EAAG;EACrD,CAAC,CAAC,CACI;AAAA,CACX,CACF;AAEDH,eAAe,CAACS,WAAW,GAAG,iBAAiB;AAAC,eAEjCT,eAAe;AAAA"}

package/dist/cjs/TagSkeleton/index.js

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