@os-design/core 1.0.114 → 1.0.117

package/dist/esm/Checkbox/index.js

@@ -25,8 +25,6 @@ const disabledIconStyles = p => p.disabled && css`
   `;
 
 const IconContainer = styled('span', omitEmotionProps('disabled', 'checked'))`
-  margin-top: ${p => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;
-
   width: ${p => p.theme.checkboxSize}em;
   height: ${p => p.theme.checkboxSize}em;
   min-width: ${p => p.theme.checkboxSize}em;
@@ -42,6 +40,7 @@ const IconContainer = styled('span', omitEmotionProps('disabled', 'checked'))`
   border: 1px solid transparent;
   border-radius: ${p => p.theme.borderRadius}em;
   color: ${p => clr(p.theme.checkboxCheckedColorIcon)};
+  margin-top: ${p => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;
 
   ${uncheckedIconStyles};
   ${checkedIconStyles};
@@ -72,7 +71,6 @@ const hoverStyles = p => !p.disabled && css`
 
 const disabledContainerStyles = p => p.disabled && css`
     cursor: not-allowed;
-    color: ${clr(p.theme.checkboxDisabledColorText)};
   `;
 
 const Container = styled('label', omitEmotionProps('disabled', 'size', 'checked'))`
@@ -81,15 +79,22 @@ const Container = styled('label', omitEmotionProps('disabled', 'size', 'checked'
   user-select: none;
 
   display: flex;
-  color: ${p => clr(p.theme.colorText)};
+  margin: ${p => p.theme.checkboxVerticalIndent}em 0;
 
   ${hoverStyles};
   ${disabledContainerStyles};
   ${sizeStyles};
   ${transitionStyles('color')};
 `;
-const Text = styled.div`
+
+const disabledTextStyles = p => p.disabled && css`
+    color: ${clr(p.theme.checkboxDisabledColorText)};
+  `;
+
+const Text = styled('div', omitEmotionProps('disabled'))`
   margin-left: 0.4em;
+  color: ${p => clr(p.theme.colorText)};
+  ${disabledTextStyles};
 `;
 /**
  * The checkbox that can be enabled or disabled.
@@ -115,8 +120,7 @@ const Checkbox = /*#__PURE__*/forwardRef(({
     disabled: disabled,
     checked: forwardedValue,
     size: size,
-    tabIndex: !disabled ? 0 : -1 // role={!disabled ? 'checkbox' : undefined}
-    ,
+    tabIndex: !disabled ? 0 : -1,
     onClick: () => {
       if (disabled) return;
       setForwardedValue(!forwardedValue);
@@ -143,7 +147,9 @@ const Checkbox = /*#__PURE__*/forwardRef(({
   }), /*#__PURE__*/React.createElement(IconContainer, {
     disabled: disabled,
     checked: forwardedValue
-  }, forwardedValue && /*#__PURE__*/React.createElement(Check, null)), /*#__PURE__*/React.createElement(Text, null, children));
+  }, forwardedValue && /*#__PURE__*/React.createElement(Check, null)), children && /*#__PURE__*/React.createElement(Text, {
+    disabled: disabled
+  }, children));
 });
 Checkbox.displayName = 'Checkbox';
 export default Checkbox;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Checkbox/index.tsx"],"names":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","lineHeight","checkboxSize","borderRadius","checkboxCheckedColorIcon","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","checkboxDisabledColorText","Container","colorText","Text","div","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","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":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"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/esm/CheckboxSkeleton/index.js

@@ -0,0 +1,43 @@
+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); }
+
+import styled from '@emotion/styled';
+import React, { forwardRef } from 'react';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { clr } from '@os-design/theming';
+import Skeleton from '../Skeleton';
+const Container = styled('div', omitEmotionProps('size'))`
+  user-select: none;
+  display: flex;
+  margin: ${p => p.theme.checkboxVerticalIndent}em 0;
+  ${sizeStyles};
+`;
+const ImageSkeleton = styled(Skeleton)`
+  width: ${p => p.theme.checkboxSize}em;
+  height: ${p => p.theme.checkboxSize}em;
+  min-width: ${p => p.theme.checkboxSize}em;
+  min-height: ${p => p.theme.checkboxSize}em;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  margin-top: ${p => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;
+`;
+const Text = styled.div`
+  margin-left: 0.4em;
+  color: ${p => clr(p.theme.colorText)};
+`;
+/**
+ * Provides a checkbox placeholder while a user waits for the content to load.
+ */
+
+const CheckboxSkeleton = /*#__PURE__*/forwardRef(({
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement(Container, _extends({
+  role: "checkbox",
+  "aria-busy": true
+}, rest, {
+  ref: ref
+}), /*#__PURE__*/React.createElement(ImageSkeleton, null), children && /*#__PURE__*/React.createElement(Text, null, children)));
+CheckboxSkeleton.displayName = 'CheckboxSkeleton';
+export default CheckboxSkeleton;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","clr","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA,YAAaI,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAuB;AAClD,IAAIP,UAAW;AACf,CALA;AAOA,MAAMQ,aAAa,GAAGX,MAAM,CAACM,QAAD,CAAW;AACvC,WAAYE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACvC,YAAaJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACxC,eAAgBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC3C,gBAAiBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC5C;AACA,mBAAoBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,YAAa;AAC/C,gBAAiBL,CAAD,IAAO,CAACA,CAAC,CAACC,KAAF,CAAQK,UAAR,GAAqBN,CAAC,CAACC,KAAF,CAAQG,YAA9B,IAA8C,CAAE;AACvE,CARA;AAUA,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQQ,SAAT,CAAoB;AACzC,CAHA;AAKA;AACA;AACA;;AACA,MAAMC,gBAAgB,gBAAGhB,UAAU,CACjC,CAAC;AAAEiB,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,EAAwBC,GAAxB,kBACE,oBAAC,SAAD;AAAW,EAAA,IAAI,EAAC,UAAhB;AAA2B;AAA3B,GAAyCD,IAAzC;AAA+C,EAAA,GAAG,EAAEC;AAApD,iBACE,oBAAC,aAAD,OADF,EAEGF,QAAQ,iBAAI,oBAAC,IAAD,QAAOA,QAAP,CAFf,CAF+B,CAAnC;AASAD,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;AAEA,eAAeJ,gBAAf","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/esm/ListItem/index.js

@@ -46,6 +46,9 @@ const ListItem = /*#__PURE__*/forwardRef(({
   left,
   right,
   actions = [],
+  onTouchStart = () => {},
+  onTouchMove = () => {},
+  onTouchEnd = () => {},
   ...rest
 }, ref) => {
   const touchDevice = useMemo(() => isTouchDevice(), []);
@@ -53,7 +56,19 @@ const ListItem = /*#__PURE__*/forwardRef(({
     opened,
     handlers
   } = useSwipe();
-  return /*#__PURE__*/React.createElement(ListItemContainer, _extends({}, handlers, rest, {
+  return /*#__PURE__*/React.createElement(ListItemContainer, _extends({}, rest, {
+    onTouchStart: e => {
+      handlers.onTouchStart(e);
+      onTouchStart(e);
+    },
+    onTouchMove: e => {
+      handlers.onTouchMove(e);
+      onTouchMove(e);
+    },
+    onTouchEnd: e => {
+      handlers.onTouchEnd(e);
+      onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/React.createElement(ListItemContent, {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","rest","ref","touchDevice","opened","handlers","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,aAAT,EAAwBC,QAAxB,QAAwC,kBAAxC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,eAAP,MAAsD,mBAAtD;AAUA,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAD,IAAOJ,GAAG,CAACI,CAAC,CAACC,KAAF,CAAQC,mBAAT,CAA8B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CA7BO;AA+BP;AACA;AACA;;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CAAC;AAAEc,EAAAA,KAAF;AAASC,EAAAA,WAAT;AAAsBC,EAAAA,IAAtB;AAA4BC,EAAAA,KAA5B;AAAmCC,EAAAA,OAAO,GAAG,EAA7C;AAAiD,KAAGC;AAApD,CAAD,EAA6DC,GAA7D,KAAqE;AACnE,QAAMC,WAAW,GAAGpB,OAAO,CAAC,MAAMG,aAAa,EAApB,EAAwB,EAAxB,CAA3B;AACA,QAAM;AAAEkB,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAuBlB,QAAQ,EAArC;AAEA,sBACE,oBAAC,iBAAD,eAAuBkB,QAAvB,EAAqCJ,IAArC;AAA2C,IAAA,GAAG,EAAEC;AAAhD,mBACE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAEN,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEG,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IADF,CADF;AAaD,CAlBwB,CAA3B;AAqBAT,QAAQ,CAACW,WAAT,GAAuB,UAAvB;AAEA,eAAeX,QAAf","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":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","ref","touchDevice","opened","handlers","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,aAAT,EAAwBC,QAAxB,QAAwC,kBAAxC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,eAAP,MAAsD,mBAAtD;AAOA,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAD,IAAOJ,GAAG,CAACI,CAAC,CAACC,KAAF,CAAQC,mBAAT,CAA8B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CA7BO;AA+BP;AACA;AACA;;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CACE;AACEc,EAAAA,KADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,IAHF;AAIEC,EAAAA,KAJF;AAKEC,EAAAA,OAAO,GAAG,EALZ;AAMEC,EAAAA,YAAY,GAAG,MAAM,CAAE,CANzB;AAOEC,EAAAA,WAAW,GAAG,MAAM,CAAE,CAPxB;AAQEC,EAAAA,UAAU,GAAG,MAAM,CAAE,CARvB;AASE,KAAGC;AATL,CADF,EAYEC,GAZF,KAaK;AACH,QAAMC,WAAW,GAAGvB,OAAO,CAAC,MAAMG,aAAa,EAApB,EAAwB,EAAxB,CAA3B;AACA,QAAM;AAAEqB,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAuBrB,QAAQ,EAArC;AAEA,sBACE,oBAAC,iBAAD,eACMiB,IADN;AAEE,IAAA,YAAY,EAAGK,CAAD,IAAO;AACnBD,MAAAA,QAAQ,CAACP,YAAT,CAAsBQ,CAAtB;AACAR,MAAAA,YAAY,CAACQ,CAAD,CAAZ;AACD,KALH;AAME,IAAA,WAAW,EAAGA,CAAD,IAAO;AAClBD,MAAAA,QAAQ,CAACN,WAAT,CAAqBO,CAArB;AACAP,MAAAA,WAAW,CAACO,CAAD,CAAX;AACD,KATH;AAUE,IAAA,UAAU,EAAGA,CAAD,IAAO;AACjBD,MAAAA,QAAQ,CAACL,UAAT,CAAoBM,CAApB;AACAN,MAAAA,UAAU,CAACM,CAAD,CAAV;AACD,KAbH;AAcE,IAAA,GAAG,EAAEJ;AAdP,mBAgBE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAET,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEM,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IAhBF,CADF;AA4BD,CA9CwB,CAA3B;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;AAEA,eAAef,QAAf","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/esm/ListItemLink/index.js

@@ -46,6 +46,9 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
   actions = [],
   as,
   onMouseDown = () => {},
+  onTouchStart = () => {},
+  onTouchMove = () => {},
+  onTouchEnd = () => {},
   ...rest
 }, ref) => {
   const touchDevice = useMemo(() => isTouchDevice(), []);
@@ -55,12 +58,24 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
   } = useSwipe();
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     touchDevice: touchDevice,
-    as: as,
+    as: as
+  }, rest, {
     onMouseDown: e => {
       onMouseDown(e);
       e.preventDefault();
-    }
-  }, handlers, rest, {
+    },
+    onTouchStart: e => {
+      handlers.onTouchStart(e);
+      onTouchStart(e);
+    },
+    onTouchMove: e => {
+      handlers.onTouchMove(e);
+      onTouchMove(e);
+    },
+    onTouchEnd: e => {
+      handlers.onTouchEnd(e);
+      onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/React.createElement(ListItemContent, {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","rest","ref","opened","handlers","e","preventDefault","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,EAA0CC,QAA1C,QAA0D,kBAA1D;AACA,SAASC,GAAT,QAA2B,oBAA3B;AACA,SAASC,gBAAT,QAAiC,mBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,iBAAT,QAAkC,aAAlC;AACA,OAAOC,eAAP,MAEO,6BAFP;;AAWA,MAAMC,eAAe,GAAIC,CAAD,IACtB,CAACA,CAAC,CAACC,WAAH,IACAL,GAAI;AACN;AACA;AACA;AACA,UAAUF,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACE,KAAF,CAAQC,oBAAR,CAA6BC,KAA7B,CAAmC,CAAnC,EAAsC,CAAtC,CAAJ,EAA8C,CAA9C,CAAD,CAA4D;AACzE,UAAUV,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,oBAAT,CAA+B;AAC5C,YAAYH,CAAC,CAACE,KAAF,CAAQG,0BAA2B;AAC/C;AACA;AACA,GAXA;;AAgBA,MAAMC,UAAU,GAAGhB,MAAM,CACvBO,iBAAiB,CAACU,aAAlB,CAAgC,GAAhC,CADuB,EAEvBf,gBAAgB,CAAC,aAAD,EAAgB,IAAhB,CAFO,CAGN;AACnB,IAAIG,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,0BAA2BK,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,oBAAT,CAA+B;AACnE;AACA;AACA;AACA,IAAIJ,eAAgB;AACpB,CAhBA;AAkBA;AACA;AACA;;AACA,MAAMS,YAAY,gBAAGpB,UAAU,CAC7B,CACE;AACEqB,EAAAA,KADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,IAHF;AAIEC,EAAAA,KAJF;AAKEC,EAAAA,OAAO,GAAG,EALZ;AAMEC,EAAAA,EANF;AAOEC,EAAAA,WAAW,GAAG,MAAM,CAAE,CAPxB;AAQE,KAAGC;AARL,CADF,EAWEC,GAXF,KAYK;AACH,QAAMhB,WAAW,GAAGZ,OAAO,CAAC,MAAME,aAAa,EAApB,EAAwB,EAAxB,CAA3B;AACA,QAAM;AAAE2B,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAuB1B,QAAQ,EAArC;AAEA,sBACE,oBAAC,UAAD;AACE,IAAA,WAAW,EAAEQ,WADf;AAEE,IAAA,EAAE,EAAEa,EAFN;AAGE,IAAA,WAAW,EAAGM,CAAD,IAAO;AAClBL,MAAAA,WAAW,CAACK,CAAD,CAAX;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD;AANH,KAOMF,QAPN,EAQMH,IARN;AASE,IAAA,GAAG,EAAEC;AATP,mBAWE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAER,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEZ,WANZ;AAOE,IAAA,MAAM,EAAEiB;AAPV,IAXF,CADF;AAuBD,CAxC4B,CAA/B;AA2CAV,YAAY,CAACc,WAAb,GAA2B,cAA3B;AAEA,eAAed,YAAf","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":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","ref","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/esm/PageContent/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageContent/index.tsx"],"names":["styled","React","forwardRef","useContext","horizontalPaddingStyles","omitEmotionProps","css","m","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,QAA8C,OAA9C;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,OAAOC,aAAP,MAA0B,yBAA1B;;AAWA,MAAMC,mBAAmB,GAAIC,CAAD,IAC1BA,CAAC,CAACC,aAAF,IACAL,GAAI;AACN,MAAM,CAACI,CAAC,CAACE,OAAH,IACFN,GAAI;AACR;AACA,UAAUI,CAAC,CAACG,KAAF,CAAQC,mBAAoB;AACtC;AACA,KAAM;AACN,MAAMP,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf;AACA,qBAAqBN,CAAC,CAACG,KAAF,CAAQI,mBAAoB;AACjD;AACA,GAbA;;AAeA,MAAMC,mBAAmB,GAAIR,CAAD,IAC1BA,CAAC,CAACS,aAAF,IACA,CAACT,CAAC,CAACE,OADH,IAEAN,GAAI;AACN,kBAAkBI,CAAC,CAACG,KAAF,CAAQO,gBAAR,CAAyB,CAAzB,CAA4B;AAC9C,MAAMb,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAF,CAAQO,gBAAR,CAAyB,CAAzB,CAA4B;AAChD;AACA,GARA;;AAUA,MAAMC,gBAAgB,GAAIX,CAAD,IACvB,CAACA,CAAC,CAACE,OAAH,IACAN,GAAI;AACN,mBAAmBI,CAAC,CAACG,KAAF,CAAQS,0BAA2B;AACtD,sBAAsBZ,CAAC,CAACG,KAAF,CAAQS,0BAA2B;AACzD,MAAMlB,uBAAuB,GAAGM,CAAH,CAAM;AACnC,GANA;;AAQA,MAAMa,sBAAsB,GAAIb,CAAD,IAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACE,OADH,IAEAN,GAAI;AACN;AACA,GALA;;AAYA,MAAMkB,SAAS,GAAGxB,MAAM,CACtB,MADsB,EAEtBK,gBAAgB,CAAC,eAAD,EAAkB,eAAlB,EAAmC,SAAnC,CAFM,CAGN;AAClB,IAAII,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAIG,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CARA;AAUA;AACA;AACA;;AACA,MAAME,WAAW,gBAAGvB,UAAU,CAC5B,CAAC;AAAEU,EAAAA,OAAO,GAAG,KAAZ;AAAmBc,EAAAA,QAAnB;AAA6B,KAAGC;AAAhC,CAAD,EAAyCC,GAAzC,KAAiD;AAC/C,QAAM;AAAEjB,IAAAA,aAAF;AAAiBQ,IAAAA;AAAjB,MAAmChB,UAAU,CAACK,aAAD,CAAnD;AAEA,sBACE,oBAAC,SAAD;AACE,IAAA,aAAa,EAAEG,aADjB;AAEE,IAAA,aAAa,EAAEQ,aAFjB;AAGE,IAAA,OAAO,EAAEP;AAHX,KAIMe,IAJN;AAKE,IAAA,GAAG,EAAEC;AALP,MAOGF,QAPH,CADF;AAWD,CAf2B,CAA9B;AAkBAD,WAAW,CAACI,WAAZ,GAA0B,aAA1B;AAEA,eAAeJ,WAAf","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":["styled","React","forwardRef","useContext","horizontalPaddingStyles","omitEmotionProps","css","m","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,QAA8C,OAA9C;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,OAAOC,aAAP,MAA0B,yBAA1B;;AAWA,MAAMC,mBAAmB,GAAIC,CAAD,IAC1BA,CAAC,CAACC,aAAF,IACAL,GAAI;AACN,MAAM,CAACI,CAAC,CAACE,OAAH,IACFN,GAAI;AACR;AACA,UAAUI,CAAC,CAACG,KAAF,CAAQC,mBAAoB;AACtC;AACA,KAAM;AACN,MAAMP,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf;AACA,qBAAqBN,CAAC,CAACG,KAAF,CAAQI,mBAAoB;AACjD;AACA,GAbA;;AAeA,MAAMC,mBAAmB,GAAIR,CAAD,IAC1BA,CAAC,CAACS,aAAF,IACA,CAACT,CAAC,CAACE,OADH,IAEAN,GAAI;AACN,kBAAkBI,CAAC,CAACG,KAAF,CAAQO,gBAAR,CAAyB,CAAzB,CAA4B;AAC9C,MAAMb,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAF,CAAQO,gBAAR,CAAyB,CAAzB,CAA4B;AAChD;AACA,GARA;;AAUA,MAAMC,gBAAgB,GAAIX,CAAD,IACvB,CAACA,CAAC,CAACE,OAAH,IACAN,GAAI;AACN,mBAAmBI,CAAC,CAACG,KAAF,CAAQS,0BAA2B;AACtD,sBAAsBZ,CAAC,CAACG,KAAF,CAAQS,0BAA2B;AACzD,MAAMlB,uBAAuB,GAAGM,CAAH,CAAM;AACnC,GANA;;AAQA,MAAMa,sBAAsB,GAAIb,CAAD,IAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACE,OADH,IAEAN,GAAI;AACN;AACA,GALA;;AAYA,MAAMkB,SAAS,GAAGxB,MAAM,CACtB,MADsB,EAEtBK,gBAAgB,CAAC,eAAD,EAAkB,eAAlB,EAAmC,SAAnC,CAFM,CAGN;AAClB,IAAII,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAIG,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CARA;AAUA;AACA;AACA;;AACA,MAAME,WAAW,gBAAGvB,UAAU,CAC5B,CAAC;AAAEU,EAAAA,OAAO,GAAG,KAAZ;AAAmBc,EAAAA,QAAnB;AAA6B,KAAGC;AAAhC,CAAD,EAAyCC,GAAzC,KAAiD;AAC/C,QAAM;AAAEjB,IAAAA,aAAF;AAAiBQ,IAAAA;AAAjB,MAAmChB,UAAU,CAACK,aAAD,CAAnD;AAEA,sBACE,oBAAC,SAAD;AACE,IAAA,aAAa,EAAEG,aADjB;AAEE,IAAA,aAAa,EAAEQ,aAFjB;AAGE,IAAA,OAAO,EAAEP;AAHX,KAIMe,IAJN;AAKE,IAAA,GAAG,EAAEC;AALP,MAOGF,QAPH,CADF;AAWD,CAf2B,CAA9B;AAkBAD,WAAW,CAACI,WAAZ,GAA0B,aAA1B;AAEA,eAAeJ,WAAf","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/esm/PageHeader/index.js

@@ -78,7 +78,7 @@ const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
   margin: 0;
   font-size: 1em;
   font-weight: 500;
-  line-height: 1.5;
+  line-height: 1.2;
   ${notHasSubtitleStyles};
   ${ellipsisStyles};
 `;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["React","forwardRef","useContext","ellipsisStyles","omitEmotionProps","styled","clr","ThemeOverrider","m","Left","css","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","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":["React","forwardRef","useContext","ellipsisStyles","omitEmotionProps","styled","clr","ThemeOverrider","m","Left","css","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","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/esm/index.js

@@ -5,6 +5,7 @@ export { default as Breadcrumb } from './Breadcrumb';
 export { default as BreadcrumbItem } from './BreadcrumbItem';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
+export { default as CheckboxSkeleton } from './CheckboxSkeleton';
 export { default as DatePicker } from './DatePicker';
 export { default as Drawer } from './Drawer';
 export { default as Form } from './Form';
@@ -64,6 +65,7 @@ export * from './Breadcrumb';
 export * from './BreadcrumbItem';
 export * from './Button';
 export * from './Checkbox';
+export * from './CheckboxSkeleton';
 export * from './DatePicker';
 export * from './Drawer';
 export * from './Form';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":["default","Alert","Avatar","AvatarSkeleton","Breadcrumb","BreadcrumbItem","Button","Checkbox","DatePicker","Drawer","Form","FormDivider","FormItem","GlobalStyles","HeaderSkeleton","Image","ImageSkeleton","Input","InputNumber","InputPassword","InputSearch","InputSkeleton","Layout","Link","LinkButton","List","ListItem","ListItemLink","ListSkeleton","LogoLink","message","Menu","MenuDivider","MenuGroup","MenuItem","Modal","Navigation","NavigationItem","PageContent","PageHeader","PageHeaderInputSearch","PageHeaderSkeleton","ParagraphSkeleton","Popover","Progress","Result","ScrollButton","Select","Skeleton","Switch","SwitchSkeleton","Tag","TagLink","TagList","TagListSkeleton","TagSkeleton","TextArea","TextAreaSkeleton","ThemeSwitcher","YouTubeVideo"],"mappings":"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","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":["default","Alert","Avatar","AvatarSkeleton","Breadcrumb","BreadcrumbItem","Button","Checkbox","CheckboxSkeleton","DatePicker","Drawer","Form","FormDivider","FormItem","GlobalStyles","HeaderSkeleton","Image","ImageSkeleton","Input","InputNumber","InputPassword","InputSearch","InputSkeleton","Layout","Link","LinkButton","List","ListItem","ListItemLink","ListSkeleton","LogoLink","message","Menu","MenuDivider","MenuGroup","MenuItem","Modal","Navigation","NavigationItem","PageContent","PageHeader","PageHeaderInputSearch","PageHeaderSkeleton","ParagraphSkeleton","Popover","Progress","Result","ScrollButton","Select","Skeleton","Switch","SwitchSkeleton","Tag","TagLink","TagList","TagListSkeleton","TagSkeleton","TextArea","TextAreaSkeleton","ThemeSwitcher","YouTubeVideo"],"mappings":"AAAA,SAASA,OAAO,IAAIC,KAApB,QAAiC,SAAjC;AACA,SAASD,OAAO,IAAIE,MAApB,QAAkC,UAAlC;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,SAASH,OAAO,IAAII,UAApB,QAAsC,cAAtC;AACA,SAASJ,OAAO,IAAIK,cAApB,QAA0C,kBAA1C;AACA,SAASL,OAAO,IAAIM,MAApB,QAAkC,UAAlC;AACA,SAASN,OAAO,IAAIO,QAApB,QAAoC,YAApC;AACA,SAASP,OAAO,IAAIQ,gBAApB,QAA4C,oBAA5C;AACA,SAASR,OAAO,IAAIS,UAApB,QAAsC,cAAtC;AACA,SAAST,OAAO,IAAIU,MAApB,QAAkC,UAAlC;AACA,SAASV,OAAO,IAAIW,IAApB,QAAgC,QAAhC;AACA,SAASX,OAAO,IAAIY,WAApB,QAAuC,eAAvC;AACA,SAASZ,OAAO,IAAIa,QAApB,QAAoC,YAApC;AACA,SAASb,OAAO,IAAIc,YAApB,QAAwC,gBAAxC;AACA,SAASd,OAAO,IAAIe,cAApB,QAA0C,kBAA1C;AACA,SAASf,OAAO,IAAIgB,KAApB,QAAiC,SAAjC;AACA,SAAShB,OAAO,IAAIiB,aAApB,QAAyC,iBAAzC;AACA,SAASjB,OAAO,IAAIkB,KAApB,QAAiC,SAAjC;AACA,SAASlB,OAAO,IAAImB,WAApB,QAAuC,eAAvC;AACA,SAASnB,OAAO,IAAIoB,aAApB,QAAyC,iBAAzC;AACA,SAASpB,OAAO,IAAIqB,WAApB,QAAuC,eAAvC;AACA,SAASrB,OAAO,IAAIsB,aAApB,QAAyC,iBAAzC;AACA,SAAStB,OAAO,IAAIuB,MAApB,QAAkC,UAAlC;AACA,SAASvB,OAAO,IAAIwB,IAApB,QAAgC,QAAhC;AACA,SAASxB,OAAO,IAAIyB,UAApB,QAAsC,cAAtC;AACA,SAASzB,OAAO,IAAI0B,IAApB,QAAgC,QAAhC;AACA,SAAS1B,OAAO,IAAI2B,QAApB,QAAoC,YAApC;AACA,SAAS3B,OAAO,IAAI4B,YAApB,QAAwC,gBAAxC;AACA,SAAS5B,OAAO,IAAI6B,YAApB,QAAwC,gBAAxC;AACA,SAAS7B,OAAO,IAAI8B,QAApB,QAAoC,YAApC;AACA,SAAS9B,OAAO,IAAI+B,OAApB,QAAmC,WAAnC;AACA,SAAS/B,OAAO,IAAIgC,IAApB,QAAgC,QAAhC;AACA,SAAShC,OAAO,IAAIiC,WAApB,QAAuC,eAAvC;AACA,SAASjC,OAAO,IAAIkC,SAApB,QAAqC,aAArC;AACA,SAASlC,OAAO,IAAImC,QAApB,QAAoC,YAApC;AACA,SAASnC,OAAO,IAAIoC,KAApB,QAAiC,SAAjC;AACA,SAASpC,OAAO,IAAIqC,UAApB,QAAsC,cAAtC;AACA,SAASrC,OAAO,IAAIsC,cAApB,QAA0C,kBAA1C;AACA,SAAStC,OAAO,IAAIuC,WAApB,QAAuC,eAAvC;AACA,SAASvC,OAAO,IAAIwC,UAApB,QAAsC,cAAtC;AACA,SAASxC,OAAO,IAAIyC,qBAApB,QAAiD,yBAAjD;AACA,SAASzC,OAAO,IAAI0C,kBAApB,QAA8C,sBAA9C;AACA,SAAS1C,OAAO,IAAI2C,iBAApB,QAA6C,qBAA7C;AACA,SAAS3C,OAAO,IAAI4C,OAApB,QAAmC,WAAnC;AACA,SAAS5C,OAAO,IAAI6C,QAApB,QAAoC,YAApC;AACA,SAAS7C,OAAO,IAAI8C,MAApB,QAAkC,UAAlC;AACA,SAAS9C,OAAO,IAAI+C,YAApB,QAAwC,gBAAxC;AACA,SAAS/C,OAAO,IAAIgD,MAApB,QAAkC,UAAlC;AACA,SAAShD,OAAO,IAAIiD,QAApB,QAAoC,YAApC;AACA,SAASjD,OAAO,IAAIkD,MAApB,QAAkC,UAAlC;AACA,SAASlD,OAAO,IAAImD,cAApB,QAA0C,kBAA1C;AACA,SAASnD,OAAO,IAAIoD,GAApB,QAA+B,OAA/B;AACA,SAASpD,OAAO,IAAIqD,OAApB,QAAmC,WAAnC;AACA,SAASrD,OAAO,IAAIsD,OAApB,QAAmC,WAAnC;AACA,SAAStD,OAAO,IAAIuD,eAApB,QAA2C,mBAA3C;AACA,SAASvD,OAAO,IAAIwD,WAApB,QAAuC,eAAvC;AACA,SAASxD,OAAO,IAAIyD,QAApB,QAAoC,YAApC;AACA,SAASzD,OAAO,IAAI0D,gBAApB,QAA4C,oBAA5C;AACA,SAAS1D,OAAO,IAAI2D,aAApB,QAAyC,iBAAzC;AACA,SAAS3D,OAAO,IAAI4D,YAApB,QAAwC,gBAAxC;AAEA,cAAc,SAAd;AACA,cAAc,UAAd;AACA,cAAc,kBAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,oBAAd;AACA,cAAc,cAAd;AACA,cAAc,UAAd;AACA,cAAc,QAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,SAAd;AACA,cAAc,eAAd;AACA,cAAc,iBAAd;AACA,cAAc,eAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,QAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,gBAAd;AACA,cAAc,gBAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,eAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,eAAd;AACA,cAAc,cAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,gBAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,kBAAd;AACA,cAAc,OAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,oBAAd;AACA,cAAc,iBAAd;AACA,cAAc,gBAAd","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"}

package/dist/types/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAI3B,aAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAChD,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,QAAQ;IAK5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAKhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAoHD,QAAA,MAAM,QAAQ,wFA0Db,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAI3B,aAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAChD,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,QAAQ;IAK5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAKhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AA6HD,QAAA,MAAM,QAAQ,wFAyDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/types/CheckboxSkeleton/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WithSize } from '@os-design/styles';
+declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export declare type CheckboxSkeletonProps = JsxDivProps & WithSize;
+declare const CheckboxSkeleton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & WithSize & React.RefAttributes<HTMLDivElement>>;
+export default CheckboxSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/CheckboxSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKzD,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,oBAAY,qBAAqB,GAAG,WAAW,GAAG,QAAQ,CAAC;AA2B3D,QAAA,MAAM,gBAAgB,6pJAOrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/dist/types/ListItem/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ListItemContentProps } from './ListItemContent';
-declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'ref'>;
+declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export declare type ListItemProps = JsxDivProps & Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;
 export declare const ListItemContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: "symbol" | "object" | "div" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const ListItem: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<ListItemContentProps, "title" | "left" | "right" | "description" | "actions"> & React.RefAttributes<HTMLDivElement>>;
+declare const ListItem: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<ListItemContentProps, "title" | "left" | "right" | "description" | "actions"> & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ListItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,KAAK,CACtD,CAAC;AAEF,oBAAY,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;;qFA6B7B,CAAC;AAKF,QAAA,MAAM,QAAQ,urJAmBb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAE7D,oBAAY,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;;qFA6B7B,CAAC;AAKF,QAAA,MAAM,QAAQ,uuJA+Cb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/types/ListItemLink/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAwB,EACtB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE1D,aAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,oBAAY,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAuCpD,QAAA,MAAM,YAAY,04JAyCjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAwB,EACtB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE1D,aAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,oBAAY,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAuCpD,QAAA,MAAM,YAAY,04JAuDjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/types/PageContent/index.d.ts

@@ -3,6 +3,6 @@ declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface PageContentProps extends JsxDivProps {
     hasList?: boolean;
 }
-declare const PageContent: React.ForwardRefExoticComponent<PageContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageContent: React.ForwardRefExoticComponent<PageContentProps & React.RefAttributes<HTMLElement>>;
 export default PageContent;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/PageContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IAKnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4DD,QAAA,MAAM,WAAW,yFAgBhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IAKnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4DD,QAAA,MAAM,WAAW,sFAgBhB,CAAC;AAIF,eAAe,WAAW,CAAC"}