@os-design/core 1.0.114 → 1.0.117

package/dist/cjs/Checkbox/index.js

@@ -23,7 +23,7 @@ var _theming = require("@os-design/theming");
 
 var _excluded = ["disabled", "value", "defaultValue", "onChange", "size", "onKeyDown", "onMouseDown", "children"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -63,9 +63,7 @@ var disabledIconStyles = function disabledIconStyles(p) {
   return p.disabled && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxDisabledColorBg), (0, _theming.clr)(p.theme.checkboxDisabledColorIcon), (0, _theming.clr)(p.theme.checkboxDisabledColorBorder));
 };
 
-var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'checked'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: ", "em;\n\n  width: ", "em;\n  height: ", "em;\n  min-width: ", "em;\n  min-height: ", "em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ", "em;\n  color: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
-  return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
-}, function (p) {
+var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'checked'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: ", "em;\n  height: ", "em;\n  min-width: ", "em;\n  min-height: ", "em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ", "em;\n  color: ", ";\n  margin-top: ", "em;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.checkboxSize;
 }, function (p) {
   return p.theme.checkboxSize;
@@ -77,6 +75,8 @@ var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)
   return p.theme.borderRadius;
 }, function (p) {
   return (0, _theming.clr)(p.theme.checkboxCheckedColorIcon);
+}, function (p) {
+  return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
 }, uncheckedIconStyles, checkedIconStyles, disabledIconStyles, (0, _styles.transitionStyles)('background-color', 'color', 'border-color'));
 
 var hoverUncheckedIconStyles = function hoverUncheckedIconStyles(p) {
@@ -92,19 +92,24 @@ var hoverStyles = function hoverStyles(p) {
 };
 
 var disabledContainerStyles = function disabledContainerStyles(p) {
-  return p.disabled && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxDisabledColorText));
+  return p.disabled && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n  "])));
 };
 
-var Container = (0, _styled["default"])('label', (0, _utils.omitEmotionProps)('disabled', 'size', 'checked'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  color: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
-  return (0, _theming.clr)(p.theme.colorText);
+var Container = (0, _styled["default"])('label', (0, _utils.omitEmotionProps)('disabled', 'size', 'checked'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ", "em 0;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
+  return p.theme.checkboxVerticalIndent;
 }, hoverStyles, disabledContainerStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('color'));
 
-var Text = _styled["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: 0.4em;\n"])));
+var disabledTextStyles = function disabledTextStyles(p) {
+  return p.disabled && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.checkboxDisabledColorText));
+};
+
+var Text = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-left: 0.4em;\n  color: ", ";\n  ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, disabledTextStyles);
 /**
  * The checkbox that can be enabled or disabled.
  */
 
-
 var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -133,8 +138,7 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: disabled,
     checked: forwardedValue,
     size: size,
-    tabIndex: !disabled ? 0 : -1 // role={!disabled ? 'checkbox' : undefined}
-    ,
+    tabIndex: !disabled ? 0 : -1,
     onClick: function onClick() {
       if (disabled) return;
       setForwardedValue(!forwardedValue);
@@ -162,7 +166,9 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }), /*#__PURE__*/_react["default"].createElement(IconContainer, {
     disabled: disabled,
     checked: forwardedValue
-  }, forwardedValue && /*#__PURE__*/_react["default"].createElement(_icons.Check, null)), /*#__PURE__*/_react["default"].createElement(Text, null, children));
+  }, forwardedValue && /*#__PURE__*/_react["default"].createElement(_icons.Check, null)), children && /*#__PURE__*/_react["default"].createElement(Text, {
+    disabled: disabled
+  }, children));
 });
 Checkbox.displayName = 'Checkbox';
 var _default = Checkbox;

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

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

package/dist/cjs/CheckboxSkeleton/index.js

@@ -0,0 +1,79 @@
+"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 _theming = require("@os-design/theming");
+
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
+
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 || 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 Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  display: flex;\n  margin: ", "em 0;\n  ", ";\n"])), function (p) {
+  return p.theme.checkboxVerticalIndent;
+}, _styles.sizeStyles);
+var ImageSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "em;\n  height: ", "em;\n  min-width: ", "em;\n  min-height: ", "em;\n\n  border-radius: ", "em;\n  margin-top: ", "em;\n"])), function (p) {
+  return p.theme.checkboxSize;
+}, function (p) {
+  return p.theme.checkboxSize;
+}, function (p) {
+  return p.theme.checkboxSize;
+}, function (p) {
+  return p.theme.checkboxSize;
+}, function (p) {
+  return p.theme.borderRadius;
+}, function (p) {
+  return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
+});
+
+var Text = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 0.4em;\n  color: ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+});
+/**
+ * Provides a checkbox placeholder while a user waits for the content to load.
+ */
+
+
+var CheckboxSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+    role: "checkbox",
+    "aria-busy": true
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/_react["default"].createElement(ImageSkeleton, null), children && /*#__PURE__*/_react["default"].createElement(Text, null, children));
+});
+CheckboxSkeleton.displayName = 'CheckboxSkeleton';
+var _default = CheckboxSkeleton;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":["Container","p","theme","checkboxVerticalIndent","sizeStyles","ImageSkeleton","Skeleton","checkboxSize","borderRadius","lineHeight","Text","styled","div","colorText","CheckboxSkeleton","ref","children","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,8IAGH,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAf;AAAA,CAHG,EAIXC,kBAJW,CAAf;AAOA,IAAMC,aAAa,GAAG,wBAAOC,oBAAP,CAAH,+MACR,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CADQ,EAEP,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAFO,EAGJ,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAHI,EAIH,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAJG,EAMA,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQM,YAAf;AAAA,CANA,EAOH,UAACP,CAAD;AAAA,SAAO,CAACA,CAAC,CAACC,KAAF,CAAQO,UAAR,GAAqBR,CAAC,CAACC,KAAF,CAAQK,YAA9B,IAA8C,CAArD;AAAA,CAPG,CAAnB;;AAUA,IAAMG,IAAI,GAAGC,mBAAOC,GAAV,iHAEC,UAACX,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQW,SAAZ,CAAP;AAAA,CAFD,CAAV;AAKA;AACA;AACA;;;AACA,IAAMC,gBAAgB,gBAAG,uBACvB,gBAAwBC,GAAxB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAgBC,IAAhB;;AAAA,sBACE,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B;AAA3B,KAAyCA,IAAzC;AAA+C,IAAA,GAAG,EAAEF;AAApD,mBACE,gCAAC,aAAD,OADF,EAEGC,QAAQ,iBAAI,gCAAC,IAAD,QAAOA,QAAP,CAFf,CADF;AAAA,CADuB,CAAzB;AASAF,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;eAEeJ,gB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"file":"index.js"}

package/dist/cjs/ListItem/index.js

@@ -19,7 +19,7 @@ var _theming = require("@os-design/theming");
 
 var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
 
-var _excluded = ["title", "description", "left", "right", "actions"];
+var _excluded = ["title", "description", "left", "right", "actions", "onTouchStart", "onTouchMove", "onTouchEnd"];
 
 var _templateObject;
 
@@ -53,6 +53,12 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       right = _ref.right,
       _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$onTouchStart = _ref.onTouchStart,
+      _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
+      _ref$onTouchMove = _ref.onTouchMove,
+      _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
+      _ref$onTouchEnd = _ref.onTouchEnd,
+      _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var touchDevice = (0, _react.useMemo)(function () {
@@ -63,7 +69,22 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       opened = _useSwipe.opened,
       handlers = _useSwipe.handlers;
 
-  return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, handlers, rest, {
+  return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, rest, {
+    onTouchStart: function onTouchStart(e) {
+      handlers.onTouchStart(e);
+
+      _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      handlers.onTouchMove(e);
+
+      _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      handlers.onTouchEnd(e);
+
+      _onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","rest","touchDevice","opened","handlers","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUO,IAAMA,iBAAiB,GAAGC,mBAAOC,GAAV,2hBAUC,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,sCA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAA6DC,GAA7D,EAAqE;AAAA,MAAlEC,KAAkE,QAAlEA,KAAkE;AAAA,MAA3DC,WAA2D,QAA3DA,WAA2D;AAAA,MAA9CC,IAA8C,QAA9CA,IAA8C;AAAA,MAAxCC,KAAwC,QAAxCA,KAAwC;AAAA,0BAAjCC,OAAiC;AAAA,MAAjCA,OAAiC,6BAAvB,EAAuB;AAAA,MAAhBC,IAAgB;;AACnE,MAAMC,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQC,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,iBAAD,eAAuBA,QAAvB,EAAqCH,IAArC;AAA2C,IAAA,GAAG,EAAEN;AAAhD,mBACE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEE,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IADF,CADF;AAaD,CAlBc,CAAjB;AAqBAT,QAAQ,CAACW,WAAT,GAAuB,UAAvB;eAEeX,Q","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'ref'\n>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, actions = [], ...rest }, ref) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer {...handlers} {...rest} ref={ref}>\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","opened","handlers","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,iBAAiB,GAAGC,mBAAOC,GAAV,2hBAUC,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,sCA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAYEC,GAZF,EAaK;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,MAVDC,WAUC,QAVDA,WAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,KAQC,QARDA,KAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,EAOT;AAAA,+BANDC,YAMC;AAAA,MANDA,aAMC,kCANc,YAAM,CAAE,CAMtB;AAAA,8BALDC,WAKC;AAAA,MALDA,YAKC,iCALa,YAAM,CAAE,CAKrB;AAAA,6BAJDC,UAIC;AAAA,MAJDA,WAIC,gCAJY,YAAM,CAAE,CAIpB;AAAA,MAHEC,IAGF;;AACH,MAAMC,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQC,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,iBAAD,eACMH,IADN;AAEE,IAAA,YAAY,EAAE,sBAACI,CAAD,EAAO;AACnBD,MAAAA,QAAQ,CAACN,YAAT,CAAsBO,CAAtB;;AACAP,MAAAA,aAAY,CAACO,CAAD,CAAZ;AACD,KALH;AAME,IAAA,WAAW,EAAE,qBAACA,CAAD,EAAO;AAClBD,MAAAA,QAAQ,CAACL,WAAT,CAAqBM,CAArB;;AACAN,MAAAA,YAAW,CAACM,CAAD,CAAX;AACD,KATH;AAUE,IAAA,UAAU,EAAE,oBAACA,CAAD,EAAO;AACjBD,MAAAA,QAAQ,CAACJ,UAAT,CAAoBK,CAApB;;AACAL,MAAAA,WAAU,CAACK,CAAD,CAAV;AACD,KAbH;AAcE,IAAA,GAAG,EAAEb;AAdP,mBAgBE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEK,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IAhBF,CADF;AA4BD,CA9Cc,CAAjB;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;eAEef,Q","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}

package/dist/cjs/ListItemLink/index.js

@@ -23,7 +23,7 @@ var _ListItem = require("../ListItem");
 
 var _ListItemContent = _interopRequireDefault(require("../ListItem/ListItemContent"));
 
-var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown"];
+var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown", "onTouchStart", "onTouchMove", "onTouchEnd"];
 
 var _templateObject, _templateObject2;
 
@@ -74,6 +74,12 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       as = _ref.as,
       _ref$onMouseDown = _ref.onMouseDown,
       _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _ref$onTouchStart = _ref.onTouchStart,
+      _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
+      _ref$onTouchMove = _ref.onTouchMove,
+      _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
+      _ref$onTouchEnd = _ref.onTouchEnd,
+      _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var touchDevice = (0, _react.useMemo)(function () {
@@ -86,13 +92,28 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   return /*#__PURE__*/_react["default"].createElement(StyledLink, _extends({
     touchDevice: touchDevice,
-    as: as,
+    as: as
+  }, rest, {
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
 
       e.preventDefault();
-    }
-  }, handlers, rest, {
+    },
+    onTouchStart: function onTouchStart(e) {
+      handlers.onTouchStart(e);
+
+      _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      handlers.onTouchMove(e);
+
+      _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      handlers.onTouchEnd(e);
+
+      _onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","rest","opened","handlers","e","preventDefault","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;AAAA,SACtB,CAACA,CAAC,CAACC,WAAH,QACAC,WADA,iNAKQ,+CAAQF,CAAC,CAACG,KAAF,CAAQC,oBAAR,CAA6BC,KAA7B,CAAmC,CAAnC,EAAsC,CAAtC,CAAR,IAAkD,CAAlD,GALR,EAMQ,kBAAIL,CAAC,CAACG,KAAF,CAAQC,oBAAZ,CANR,EAOUJ,CAAC,CAACG,KAAF,CAAQG,0BAPlB,CADsB;AAAA,CAAxB;;AAgBA,IAAMC,UAAU,GAAG,wBACjBC,4BAAkBC,aAAlB,CAAgC,GAAhC,CADiB,EAEjB,6BAAiB,aAAjB,EAAgC,IAAhC,CAFiB,CAAH,wPAIZC,wBAJY,EAWU,UAACV,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQC,oBAAZ,CAAP;AAAA,CAXV,EAeZL,eAfY,CAAhB;AAkBA;AACA;AACA;;AACA,IAAMY,YAAY,gBAAG,uBACnB,gBAWEC,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,WASC,QATDA,WASC;AAAA,MARDC,IAQC,QARDA,IAQC;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,0BANDC,OAMC;AAAA,MANDA,OAMC,6BANS,EAMT;AAAA,MALDC,EAKC,QALDA,EAKC;AAAA,8BAJDC,WAIC;AAAA,MAJDA,YAIC,iCAJa,YAAM,CAAE,CAIrB;AAAA,MAHEC,IAGF;;AACH,MAAMnB,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQoB,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,UAAD;AACE,IAAA,WAAW,EAAErB,WADf;AAEE,IAAA,EAAE,EAAEiB,EAFN;AAGE,IAAA,WAAW,EAAE,qBAACK,CAAD,EAAO;AAClBJ,MAAAA,YAAW,CAACI,CAAD,CAAX;;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD;AANH,KAOMF,QAPN,EAQMF,IARN;AASE,IAAA,GAAG,EAAER;AATP,mBAWE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEhB,WANZ;AAOE,IAAA,MAAM,EAAEoB;AAPV,IAXF,CADF;AAuBD,CAxCkB,CAArB;AA2CAV,YAAY,CAACc,WAAb,GAA2B,cAA3B;eAEed,Y","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...handlers}\n        {...rest}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","opened","handlers","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageContent/index.tsx"],"names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","ref","children","rest","LayoutContext","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;AAAA,SAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,SAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;AAAA,SAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,SAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;AAAA,SACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,uCAA0Bd,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACf,CAAD;AAAA,SAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMc,SAAS,GAAG,wBAChB,MADgB,EAEhB,6BAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXjB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXE,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAME,WAAW,gBAAG,uBAClB,gBAAyCC,GAAzC,EAAiD;AAAA,0BAA9Cf,OAA8C;AAAA,MAA9CA,OAA8C,6BAApC,KAAoC;AAAA,MAA7BgB,QAA6B,QAA7BA,QAA6B;AAAA,MAAhBC,IAAgB;;AAC/C,oBAAyC,uBAAWC,yBAAX,CAAzC;AAAA,MAAQpB,aAAR,eAAQA,aAAR;AAAA,MAAuBU,aAAvB,eAAuBA,aAAvB;;AAEA,sBACE,gCAAC,SAAD;AACE,IAAA,aAAa,EAAEV,aADjB;AAEE,IAAA,aAAa,EAAEU,aAFjB;AAGE,IAAA,OAAO,EAAER;AAHX,KAIMiB,IAJN;AAKE,IAAA,GAAG,EAAEF;AALP,MAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAF,WAAW,CAACK,WAAZ,GAA0B,aAA1B;eAEeL,W","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLDivElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/PageContent/index.tsx"],"names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","ref","children","rest","LayoutContext","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;AAAA,SAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,SAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;AAAA,SAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,SAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;AAAA,SACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,uCAA0Bd,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACf,CAAD;AAAA,SAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMc,SAAS,GAAG,wBAChB,MADgB,EAEhB,6BAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXjB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXE,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAME,WAAW,gBAAG,uBAClB,gBAAyCC,GAAzC,EAAiD;AAAA,0BAA9Cf,OAA8C;AAAA,MAA9CA,OAA8C,6BAApC,KAAoC;AAAA,MAA7BgB,QAA6B,QAA7BA,QAA6B;AAAA,MAAhBC,IAAgB;;AAC/C,oBAAyC,uBAAWC,yBAAX,CAAzC;AAAA,MAAQpB,aAAR,eAAQA,aAAR;AAAA,MAAuBU,aAAvB,eAAuBA,aAAvB;;AAEA,sBACE,gCAAC,SAAD;AACE,IAAA,aAAa,EAAEV,aADjB;AAEE,IAAA,aAAa,EAAEU,aAFjB;AAGE,IAAA,OAAO,EAAER;AAHX,KAIMiB,IAJN;AAKE,IAAA,GAAG,EAAEF;AALP,MAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAF,WAAW,CAACK,WAAZ,GAA0B,aAA1B;eAEeL,W","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n  /**\n   * Whether there is the list in the page content.\n   * @default false\n   */\n  hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n  p.hasNavigation &&\n  css`\n    ${!p.hasList &&\n    css`\n      margin-bottom: calc(\n        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n      );\n    `}\n    ${m.min.md} {\n      margin-bottom: 0;\n      margin-left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\nconst hasPageHeaderStyles = (p) =>\n  p.hasPageHeader &&\n  !p.hasList &&\n  css`\n    margin-top: ${p.theme.pageHeaderHeight[0]}em;\n    ${m.min.md} {\n      margin-top: ${p.theme.pageHeaderHeight[1]}em;\n    }\n  `;\n\nconst notHasListStyles = (p) =>\n  !p.hasList &&\n  css`\n    padding-top: ${p.theme.pageContentPaddingVertical}em;\n    padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n    ${horizontalPaddingStyles()(p)};\n  `;\n\nconst notHasNavigationStyles = (p) =>\n  !p.hasNavigation &&\n  !p.hasList &&\n  css`\n    margin-bottom: env(safe-area-inset-bottom);\n  `;\n\ninterface ContainerProps {\n  hasNavigation?: boolean;\n  hasPageHeader?: boolean;\n  hasList?: boolean;\n}\nconst Container = styled(\n  'main',\n  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\n  ${hasNavigationStyles};\n  ${hasPageHeaderStyles};\n  ${notHasListStyles};\n  ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n  ({ hasList = false, children, ...rest }, ref) => {\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n    return (\n      <Container\n        hasNavigation={hasNavigation}\n        hasPageHeader={hasPageHeader}\n        hasList={hasList}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"file":"index.js"}

package/dist/cjs/PageHeader/index.js

@@ -84,7 +84,7 @@ var notHasSubtitleStyles = function notHasSubtitleStyles(p) {
   return !p.hasSubtitle && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: ", "em;\n  "])), p.theme.sizes.large);
 };
 
-var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5;\n  ", ";\n  ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
+var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ", ";\n  ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
 
 var Subtitle = _styled["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: ", "em;\n  color: ", ";\n  line-height: 1;\n  margin-top: 0.2em;\n  ", ";\n"])), function (p) {
   return p.theme.sizes.small;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","styled","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","styled","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"file":"index.js"}

package/dist/cjs/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   BreadcrumbItem: true,
   Button: true,
   Checkbox: true,
+  CheckboxSkeleton: true,
   DatePicker: true,
   Drawer: true,
   Form: true,
@@ -108,6 +109,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox["default"];
   }
 });
+Object.defineProperty(exports, "CheckboxSkeleton", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxSkeleton["default"];
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function get() {
@@ -519,6 +526,20 @@ Object.keys(_Checkbox).forEach(function (key) {
   });
 });
 
+var _CheckboxSkeleton = _interopRequireWildcard(require("./CheckboxSkeleton"));
+
+Object.keys(_CheckboxSkeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CheckboxSkeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CheckboxSkeleton[key];
+    }
+  });
+});
+
 var _DatePicker = _interopRequireWildcard(require("./DatePicker"));
 
 Object.keys(_DatePicker).forEach(function (key) {

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AACA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AACA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAzDA;;AA0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as Alert } from './Alert';\nexport { default as Avatar } from './Avatar';\nexport { default as AvatarSkeleton } from './AvatarSkeleton';\nexport { default as Breadcrumb } from './Breadcrumb';\nexport { default as BreadcrumbItem } from './BreadcrumbItem';\nexport { default as Button } from './Button';\nexport { default as Checkbox } from './Checkbox';\nexport { default as DatePicker } from './DatePicker';\nexport { default as Drawer } from './Drawer';\nexport { default as Form } from './Form';\nexport { default as FormDivider } from './FormDivider';\nexport { default as FormItem } from './FormItem';\nexport { default as GlobalStyles } from './GlobalStyles';\nexport { default as HeaderSkeleton } from './HeaderSkeleton';\nexport { default as Image } from './Image';\nexport { default as ImageSkeleton } from './ImageSkeleton';\nexport { default as Input } from './Input';\nexport { default as InputNumber } from './InputNumber';\nexport { default as InputPassword } from './InputPassword';\nexport { default as InputSearch } from './InputSearch';\nexport { default as InputSkeleton } from './InputSkeleton';\nexport { default as Layout } from './Layout';\nexport { default as Link } from './Link';\nexport { default as LinkButton } from './LinkButton';\nexport { default as List } from './List';\nexport { default as ListItem } from './ListItem';\nexport { default as ListItemLink } from './ListItemLink';\nexport { default as ListSkeleton } from './ListSkeleton';\nexport { default as LogoLink } from './LogoLink';\nexport { default as message } from './message';\nexport { default as Menu } from './Menu';\nexport { default as MenuDivider } from './MenuDivider';\nexport { default as MenuGroup } from './MenuGroup';\nexport { default as MenuItem } from './MenuItem';\nexport { default as Modal } from './Modal';\nexport { default as Navigation } from './Navigation';\nexport { default as NavigationItem } from './NavigationItem';\nexport { default as PageContent } from './PageContent';\nexport { default as PageHeader } from './PageHeader';\nexport { default as PageHeaderInputSearch } from './PageHeaderInputSearch';\nexport { default as PageHeaderSkeleton } from './PageHeaderSkeleton';\nexport { default as ParagraphSkeleton } from './ParagraphSkeleton';\nexport { default as Popover } from './Popover';\nexport { default as Progress } from './Progress';\nexport { default as Result } from './Result';\nexport { default as ScrollButton } from './ScrollButton';\nexport { default as Select } from './Select';\nexport { default as Skeleton } from './Skeleton';\nexport { default as Switch } from './Switch';\nexport { default as SwitchSkeleton } from './SwitchSkeleton';\nexport { default as Tag } from './Tag';\nexport { default as TagLink } from './TagLink';\nexport { default as TagList } from './TagList';\nexport { default as TagListSkeleton } from './TagListSkeleton';\nexport { default as TagSkeleton } from './TagSkeleton';\nexport { default as TextArea } from './TextArea';\nexport { default as TextAreaSkeleton } from './TextAreaSkeleton';\nexport { default as ThemeSwitcher } from './ThemeSwitcher';\nexport { default as YouTubeVideo } from './YouTubeVideo';\n\nexport * from './Alert';\nexport * from './Avatar';\nexport * from './AvatarSkeleton';\nexport * from './Breadcrumb';\nexport * from './BreadcrumbItem';\nexport * from './Button';\nexport * from './Checkbox';\nexport * from './DatePicker';\nexport * from './Drawer';\nexport * from './Form';\nexport * from './FormDivider';\nexport * from './FormItem';\nexport * from './HeaderSkeleton';\nexport * from './Image';\nexport * from './ImageSkeleton';\nexport * from './Input';\nexport * from './InputNumber';\nexport * from './InputPassword';\nexport * from './InputSearch';\nexport * from './InputSkeleton';\nexport * from './Layout';\nexport * from './Link';\nexport * from './LinkButton';\nexport * from './List';\nexport * from './ListItem';\nexport * from './ListItemLink';\nexport * from './ListSkeleton';\nexport * from './LogoLink';\nexport * from './Menu';\nexport * from './MenuDivider';\nexport * from './MenuGroup';\nexport * from './MenuItem';\nexport * from './Modal';\nexport * from './Navigation';\nexport * from './NavigationItem';\nexport * from './PageContent';\nexport * from './PageHeader';\nexport * from './PageHeaderInputSearch';\nexport * from './PageHeaderSkeleton';\nexport * from './ParagraphSkeleton';\nexport * from './Popover';\nexport * from './Progress';\nexport * from './Result';\nexport * from './ScrollButton';\nexport * from './Select';\nexport * from './Skeleton';\nexport * from './Switch';\nexport * from './SwitchSkeleton';\nexport * from './Tag';\nexport * from './TagLink';\nexport * from './TagList';\nexport * from './TagListSkeleton';\nexport * from './TagSkeleton';\nexport * from './TextArea';\nexport * from './TextAreaSkeleton';\nexport * from './ThemeSwitcher';\nexport * from './YouTubeVideo';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AACA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AACA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as Alert } from './Alert';\nexport { default as Avatar } from './Avatar';\nexport { default as AvatarSkeleton } from './AvatarSkeleton';\nexport { default as Breadcrumb } from './Breadcrumb';\nexport { default as BreadcrumbItem } from './BreadcrumbItem';\nexport { default as Button } from './Button';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxSkeleton } from './CheckboxSkeleton';\nexport { default as DatePicker } from './DatePicker';\nexport { default as Drawer } from './Drawer';\nexport { default as Form } from './Form';\nexport { default as FormDivider } from './FormDivider';\nexport { default as FormItem } from './FormItem';\nexport { default as GlobalStyles } from './GlobalStyles';\nexport { default as HeaderSkeleton } from './HeaderSkeleton';\nexport { default as Image } from './Image';\nexport { default as ImageSkeleton } from './ImageSkeleton';\nexport { default as Input } from './Input';\nexport { default as InputNumber } from './InputNumber';\nexport { default as InputPassword } from './InputPassword';\nexport { default as InputSearch } from './InputSearch';\nexport { default as InputSkeleton } from './InputSkeleton';\nexport { default as Layout } from './Layout';\nexport { default as Link } from './Link';\nexport { default as LinkButton } from './LinkButton';\nexport { default as List } from './List';\nexport { default as ListItem } from './ListItem';\nexport { default as ListItemLink } from './ListItemLink';\nexport { default as ListSkeleton } from './ListSkeleton';\nexport { default as LogoLink } from './LogoLink';\nexport { default as message } from './message';\nexport { default as Menu } from './Menu';\nexport { default as MenuDivider } from './MenuDivider';\nexport { default as MenuGroup } from './MenuGroup';\nexport { default as MenuItem } from './MenuItem';\nexport { default as Modal } from './Modal';\nexport { default as Navigation } from './Navigation';\nexport { default as NavigationItem } from './NavigationItem';\nexport { default as PageContent } from './PageContent';\nexport { default as PageHeader } from './PageHeader';\nexport { default as PageHeaderInputSearch } from './PageHeaderInputSearch';\nexport { default as PageHeaderSkeleton } from './PageHeaderSkeleton';\nexport { default as ParagraphSkeleton } from './ParagraphSkeleton';\nexport { default as Popover } from './Popover';\nexport { default as Progress } from './Progress';\nexport { default as Result } from './Result';\nexport { default as ScrollButton } from './ScrollButton';\nexport { default as Select } from './Select';\nexport { default as Skeleton } from './Skeleton';\nexport { default as Switch } from './Switch';\nexport { default as SwitchSkeleton } from './SwitchSkeleton';\nexport { default as Tag } from './Tag';\nexport { default as TagLink } from './TagLink';\nexport { default as TagList } from './TagList';\nexport { default as TagListSkeleton } from './TagListSkeleton';\nexport { default as TagSkeleton } from './TagSkeleton';\nexport { default as TextArea } from './TextArea';\nexport { default as TextAreaSkeleton } from './TextAreaSkeleton';\nexport { default as ThemeSwitcher } from './ThemeSwitcher';\nexport { default as YouTubeVideo } from './YouTubeVideo';\n\nexport * from './Alert';\nexport * from './Avatar';\nexport * from './AvatarSkeleton';\nexport * from './Breadcrumb';\nexport * from './BreadcrumbItem';\nexport * from './Button';\nexport * from './Checkbox';\nexport * from './CheckboxSkeleton';\nexport * from './DatePicker';\nexport * from './Drawer';\nexport * from './Form';\nexport * from './FormDivider';\nexport * from './FormItem';\nexport * from './HeaderSkeleton';\nexport * from './Image';\nexport * from './ImageSkeleton';\nexport * from './Input';\nexport * from './InputNumber';\nexport * from './InputPassword';\nexport * from './InputSearch';\nexport * from './InputSkeleton';\nexport * from './Layout';\nexport * from './Link';\nexport * from './LinkButton';\nexport * from './List';\nexport * from './ListItem';\nexport * from './ListItemLink';\nexport * from './ListSkeleton';\nexport * from './LogoLink';\nexport * from './Menu';\nexport * from './MenuDivider';\nexport * from './MenuGroup';\nexport * from './MenuItem';\nexport * from './Modal';\nexport * from './Navigation';\nexport * from './NavigationItem';\nexport * from './PageContent';\nexport * from './PageHeader';\nexport * from './PageHeaderInputSearch';\nexport * from './PageHeaderSkeleton';\nexport * from './ParagraphSkeleton';\nexport * from './Popover';\nexport * from './Progress';\nexport * from './Result';\nexport * from './ScrollButton';\nexport * from './Select';\nexport * from './Skeleton';\nexport * from './Switch';\nexport * from './SwitchSkeleton';\nexport * from './Tag';\nexport * from './TagLink';\nexport * from './TagList';\nexport * from './TagListSkeleton';\nexport * from './TagSkeleton';\nexport * from './TextArea';\nexport * from './TextAreaSkeleton';\nexport * from './ThemeSwitcher';\nexport * from './YouTubeVideo';\n"],"file":"index.js"}