@os-design/core 1.0.156 → 1.0.157

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.js","names":["Content","styled","div","Title","p","clr","theme","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","listItemActionsPaddingLeft","colorBg","slice","horizontalPaddingStyles","actionIndex","ListItemContent","title","description","left","right","actions","length","map","icon","onClick","actionRest","e","preventDefault","displayName"],"sources":["../../../src/ListItem/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  ellipsisStyles,\n  horizontalPaddingStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction\n  extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'wide'> {\n  icon: React.ReactElement;\n}\n\nexport interface ListItemContentProps {\n  /**\n   * The title of the item.\n   */\n  title: string;\n  /**\n   * The description of the item.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The component located on the left side.\n   * For example, avatar, button, checkbox.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * For example, date.\n   */\n  right?: React.ReactNode;\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n\n  hasSwipe: boolean;\n  opened: boolean;\n}\n\nconst Content = styled.div`\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.listItemColorDescription)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst hasSwipeStyles = (p) =>\n  p.hasSwipe &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps {\n  hasSwipe: boolean;\n  opened: boolean;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('hasSwipe', 'opened')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${hasSwipeStyles};\n  ${openedStyles};\n  ${horizontalPaddingStyles('right')};\n`;\n\nlet actionIndex = 0;\n\n// Used by ListItem, ListItemLink\nconst ListItemContent: React.FC<ListItemContentProps> = ({\n  title,\n  description,\n  left,\n  right,\n  actions = [],\n  hasSwipe,\n  opened,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n\n    <Content>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n    </Content>\n\n    {right && <RightAddon>{right}</RightAddon>}\n\n    {actions.length > 0 && (\n      <Actions hasSwipe={hasSwipe} opened={opened}>\n        {actions.map(({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              key={actionIndex}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        })}\n      </Actions>\n    )}\n  </>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"mappings":"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"}
+{"version":3,"file":"ListItemContent.js","names":["Content","styled","div","Title","p","clr","theme","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","listItemActionsPaddingLeft","colorBg","slice","horizontalPaddingStyles","actionIndex","ListItemContent","title","description","left","right","actions","length","map","icon","onClick","actionRest","e","preventDefault","displayName"],"sources":["../../../src/ListItem/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  ellipsisStyles,\n  horizontalPaddingStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction\n  extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'wide'> {\n  icon: React.ReactElement;\n}\n\nexport interface ListItemContentProps {\n  /**\n   * The title of the item.\n   */\n  title: string;\n  /**\n   * The description of the item.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The component located on the left side.\n   * For example, avatar, button, checkbox.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * For example, date.\n   */\n  right?: React.ReactNode;\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n\n  hasSwipe: boolean;\n  opened: boolean;\n}\n\nconst Content = styled.div`\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.listItemColorDescription)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst hasSwipeStyles = (p) =>\n  p.hasSwipe &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps {\n  hasSwipe: boolean;\n  opened: boolean;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('hasSwipe', 'opened')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${hasSwipeStyles};\n  ${openedStyles};\n  ${horizontalPaddingStyles('right')};\n`;\n\nlet actionIndex = 0;\n\n// Used by ListItem, ListItemLink\nconst ListItemContent: React.FC<ListItemContentProps> = ({\n  title,\n  description,\n  left,\n  right,\n  actions = [],\n  hasSwipe,\n  opened,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n\n    <Content>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n    </Content>\n\n    {right && <RightAddon>{right}</RightAddon>}\n\n    {actions.length > 0 && (\n      <Actions hasSwipe={hasSwipe} opened={opened}>\n        {actions.map(({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              key={actionIndex}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        })}\n      </Actions>\n    )}\n  </>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"mappings":"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"}

package/dist/cjs/ListItem/index.js

@@ -1,88 +1,64 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ListItemContainer = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
-
 var _excluded = ["title", "description", "left", "right", "actions", "onTouchStart", "onTouchMove", "onTouchEnd"];
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var ListItemContainer = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 ", ";\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  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.listItemColorBorder);
 }, (0, _styles.horizontalPaddingStyles)());
+
 /**
  * The base list item.
  */
-
-
 exports.ListItemContainer = ListItemContainer;
 var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      description = _ref.description,
-      left = _ref.left,
-      right = _ref.right,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      _ref$onTouchStart = _ref.onTouchStart,
-      _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
-      _ref$onTouchMove = _ref.onTouchMove,
-      _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
-      _ref$onTouchEnd = _ref.onTouchEnd,
-      _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    description = _ref.description,
+    left = _ref.left,
+    right = _ref.right,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$onTouchStart = _ref.onTouchStart,
+    _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
+    _ref$onTouchMove = _ref.onTouchMove,
+    _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
+    _ref$onTouchEnd = _ref.onTouchEnd,
+    _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var touchDevice = (0, _react.useMemo)(function () {
     return (0, _utils.isTouchDevice)();
   }, []);
-
   var _useSwipe = (0, _utils.useSwipe)(),
-      opened = _useSwipe.opened,
-      handlers = _useSwipe.handlers;
-
+    opened = _useSwipe.opened,
+    handlers = _useSwipe.handlers;
   return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, rest, {
     onTouchStart: function onTouchStart(e) {
       handlers.onTouchStart(e);
-
       _onTouchStart(e);
     },
     onTouchMove: function onTouchMove(e) {
       handlers.onTouchMove(e);
-
       _onTouchMove(e);
     },
     onTouchEnd: function onTouchEnd(e) {
       handlers.onTouchEnd(e);
-
       _onTouchEnd(e);
     },
     ref: ref

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItemContainer","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","ListItem","forwardRef","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","useMemo","isTouchDevice","useSwipe","opened","handlers","e","displayName"],"sources":["../../../src/ListItem/index.tsx"],"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"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,iBAAiB,GAAGC,kBAAA,CAAOC,GAAV,2hBAUC,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,IAAAC,+BAAA,GA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAYEC,GAZF,EAaK;EAAA,IAXDC,KAWC,QAXDA,KAWC;EAAA,IAVDC,WAUC,QAVDA,WAUC;EAAA,IATDC,IASC,QATDA,IASC;EAAA,IARDC,KAQC,QARDA,KAQC;EAAA,wBAPDC,OAOC;EAAA,IAPDA,OAOC,6BAPS,EAOT;EAAA,6BANDC,YAMC;EAAA,IANDA,aAMC,kCANc,YAAM,CAAE,CAMtB;EAAA,4BALDC,WAKC;EAAA,IALDA,YAKC,iCALa,YAAM,CAAE,CAKrB;EAAA,2BAJDC,UAIC;EAAA,IAJDA,WAIC,gCAJY,YAAM,CAAE,CAIpB;EAAA,IAHEC,IAGF;;EACH,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAAQ;IAAA,OAAM,IAAAC,oBAAA,GAAN;EAAA,CAAR,EAA+B,EAA/B,CAApB;;EACA,gBAA6B,IAAAC,eAAA,GAA7B;EAAA,IAAQC,MAAR,aAAQA,MAAR;EAAA,IAAgBC,QAAhB,aAAgBA,QAAhB;;EAEA,oBACE,gCAAC,iBAAD,eACMN,IADN;IAEE,YAAY,EAAE,sBAACO,CAAD,EAAO;MACnBD,QAAQ,CAACT,YAAT,CAAsBU,CAAtB;;MACAV,aAAY,CAACU,CAAD,CAAZ;IACD,CALH;IAME,WAAW,EAAE,qBAACA,CAAD,EAAO;MAClBD,QAAQ,CAACR,WAAT,CAAqBS,CAArB;;MACAT,YAAW,CAACS,CAAD,CAAX;IACD,CATH;IAUE,UAAU,EAAE,oBAACA,CAAD,EAAO;MACjBD,QAAQ,CAACP,UAAT,CAAoBQ,CAApB;;MACAR,WAAU,CAACQ,CAAD,CAAV;IACD,CAbH;IAcE,GAAG,EAAEhB;EAdP,iBAgBE,gCAAC,2BAAD;IACE,KAAK,EAAEC,KADT;IAEE,WAAW,EAAEC,WAFf;IAGE,IAAI,EAAEC,IAHR;IAIE,KAAK,EAAEC,KAJT;IAKE,OAAO,EAAEC,OALX;IAME,QAAQ,EAAEK,WANZ;IAOE,MAAM,EAAEI;EAPV,EAhBF,CADF;AA4BD,CA9Cc,CAAjB;AAiDAhB,QAAQ,CAACmB,WAAT,GAAuB,UAAvB;eAEenB,Q"}
+{"version":3,"file":"index.js","names":["ListItemContainer","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","ListItem","forwardRef","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","useMemo","isTouchDevice","useSwipe","opened","handlers","e","displayName"],"sources":["../../../src/ListItem/index.tsx"],"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"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA0E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,IAAMA,iBAAiB,GAAGC,kBAAM,CAACC,GAAG,2hBAUZ,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAkBlE,IAAAC,+BAAuB,GAAE,CAC5B;;AAED;AACA;AACA;AAFA;AAGA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAYEC,GAAG,EACA;EAAA,IAXDC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,yBACZC,YAAY;IAAZA,aAAY,kCAAG,YAAM,CAAC,CAAC;IAAA,wBACvBC,WAAW;IAAXA,YAAW,iCAAG,YAAM,CAAC,CAAC;IAAA,uBACtBC,UAAU;IAAVA,WAAU,gCAAG,YAAM,CAAC,CAAC;IAClBC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAM,IAAAC,oBAAa,GAAE;EAAA,GAAE,EAAE,CAAC;EACtD,gBAA6B,IAAAC,eAAQ,GAAE;IAA/BC,MAAM,aAANA,MAAM;IAAEC,QAAQ,aAARA,QAAQ;EAExB,oBACE,gCAAC,iBAAiB,eACZN,IAAI;IACR,YAAY,EAAE,sBAACO,CAAC,EAAK;MACnBD,QAAQ,CAACT,YAAY,CAACU,CAAC,CAAC;MACxBV,aAAY,CAACU,CAAC,CAAC;IACjB,CAAE;IACF,WAAW,EAAE,qBAACA,CAAC,EAAK;MAClBD,QAAQ,CAACR,WAAW,CAACS,CAAC,CAAC;MACvBT,YAAW,CAACS,CAAC,CAAC;IAChB,CAAE;IACF,UAAU,EAAE,oBAACA,CAAC,EAAK;MACjBD,QAAQ,CAACP,UAAU,CAACQ,CAAC,CAAC;MACtBR,WAAU,CAACQ,CAAC,CAAC;IACf,CAAE;IACF,GAAG,EAAEhB;EAAI,iBAET,gCAAC,2BAAe;IACd,KAAK,EAAEC,KAAM;IACb,WAAW,EAAEC,WAAY;IACzB,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,QAAQ,EAAEK,WAAY;IACtB,MAAM,EAAEI;EAAO,EACf,CACgB;AAExB,CAAC,CACF;AAEDhB,QAAQ,CAACmB,WAAW,GAAG,UAAU;AAAC,eAEnBnB,QAAQ;AAAA"}

package/dist/cjs/ListItemLink/index.js

@@ -1,117 +1,84 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _styles = require("@os-design/styles");
-
 var _react2 = require("@emotion/react");
-
 var _ListItem = require("../ListItem");
-
 var _ListItemContent = _interopRequireDefault(require("../ListItem/ListItemContent"));
-
 var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown", "onTouchStart", "onTouchMove", "onTouchEnd"];
-
 var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var actionsBgStyles = function actionsBgStyles(p) {
   return !p.touchDevice && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ", ",\n        ", "\n          ", "em\n      );\n    }\n  "])), (0, _theming.clr)([].concat(_toConsumableArray(p.theme.listItemColorBgHover.slice(0, 3)), [0])), (0, _theming.clr)(p.theme.listItemColorBgHover), p.theme.listItemActionsPaddingLeft);
 };
-
 var StyledLink = (0, _styled["default"])(_ListItem.ListItemContainer.withComponent('a'), (0, _utils.omitEmotionProps)('touchDevice', 'as'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return (0, _theming.clr)(p.theme.listItemColorBgHover);
 }, actionsBgStyles);
+
 /**
  * The list item with a link.
  */
-
 var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      description = _ref.description,
-      left = _ref.left,
-      right = _ref.right,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      as = _ref.as,
-      _ref$onMouseDown = _ref.onMouseDown,
-      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      _ref$onTouchStart = _ref.onTouchStart,
-      _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
-      _ref$onTouchMove = _ref.onTouchMove,
-      _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
-      _ref$onTouchEnd = _ref.onTouchEnd,
-      _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    description = _ref.description,
+    left = _ref.left,
+    right = _ref.right,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    as = _ref.as,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    _ref$onTouchStart = _ref.onTouchStart,
+    _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
+    _ref$onTouchMove = _ref.onTouchMove,
+    _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
+    _ref$onTouchEnd = _ref.onTouchEnd,
+    _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var touchDevice = (0, _react.useMemo)(function () {
     return (0, _utils.isTouchDevice)();
   }, []);
-
   var _useSwipe = (0, _utils.useSwipe)(),
-      opened = _useSwipe.opened,
-      handlers = _useSwipe.handlers;
-
+    opened = _useSwipe.opened,
+    handlers = _useSwipe.handlers;
   return /*#__PURE__*/_react["default"].createElement(StyledLink, _extends({
     touchDevice: touchDevice,
     as: as
   }, rest, {
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
-
       e.preventDefault();
     },
     onTouchStart: function onTouchStart(e) {
       handlers.onTouchStart(e);
-
       _onTouchStart(e);
     },
     onTouchMove: function onTouchMove(e) {
       handlers.onTouchMove(e);
-
       _onTouchMove(e);
     },
     onTouchEnd: function onTouchEnd(e) {
       handlers.onTouchEnd(e);
-
       _onTouchEnd(e);
     },
     ref: ref

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["actionsBgStyles","p","touchDevice","css","clr","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","styled","ListItemContainer","withComponent","omitEmotionProps","resetFocusStyles","ListItemLink","forwardRef","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","useMemo","isTouchDevice","useSwipe","opened","handlers","e","preventDefault","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["actionsBgStyles","p","touchDevice","css","clr","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","styled","ListItemContainer","withComponent","omitEmotionProps","resetFocusStyles","ListItemLink","forwardRef","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","useMemo","isTouchDevice","useSwipe","opened","handlers","e","preventDefault","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"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"],"mappings":"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"}

package/dist/cjs/ListSkeleton/index.js

@@ -1,70 +1,49 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _theming = require("@os-design/theming");
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _List = _interopRequireDefault(require("../List"));
-
 var _ListItemContent = require("../ListItem/ListItemContent");
-
 var _excluded = ["hasDescription", "titleWidth", "descriptionWidth", "itemCount", "left", "right"];
-
 var _templateObject, _templateObject2, _templateObject3;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var ListItem = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ", ";\n  }\n\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.listItemColorBorder);
 }, (0, _styles.horizontalPaddingStyles)());
-
 var Content = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-
 var DescriptionSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "em;\n  margin-top: 0.3em;\n"])), function (p) {
   return p.theme.sizes.small;
 });
+
 /**
  * Provides a list placeholder while a user waits for the content to load.
  */
-
 var ListSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$hasDescription = _ref.hasDescription,
-      hasDescription = _ref$hasDescription === void 0 ? false : _ref$hasDescription,
-      _ref$titleWidth = _ref.titleWidth,
-      titleWidth = _ref$titleWidth === void 0 ? '30%' : _ref$titleWidth,
-      _ref$descriptionWidth = _ref.descriptionWidth,
-      descriptionWidth = _ref$descriptionWidth === void 0 ? '40%' : _ref$descriptionWidth,
-      _ref$itemCount = _ref.itemCount,
-      itemCount = _ref$itemCount === void 0 ? 10 : _ref$itemCount,
-      left = _ref.left,
-      right = _ref.right,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    hasDescription = _ref$hasDescription === void 0 ? false : _ref$hasDescription,
+    _ref$titleWidth = _ref.titleWidth,
+    titleWidth = _ref$titleWidth === void 0 ? '30%' : _ref$titleWidth,
+    _ref$descriptionWidth = _ref.descriptionWidth,
+    descriptionWidth = _ref$descriptionWidth === void 0 ? '40%' : _ref$descriptionWidth,
+    _ref$itemCount = _ref.itemCount,
+    itemCount = _ref$itemCount === void 0 ? 10 : _ref$itemCount,
+    left = _ref.left,
+    right = _ref.right,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var itemRenderer = (0, _react.useCallback)(function (_ref2) {
     var style = _ref2.style;
     return /*#__PURE__*/_react["default"].createElement(ListItem, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItem","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","DescriptionSkeleton","Skeleton","sizes","small","ListSkeleton","forwardRef","ref","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","itemRenderer","useCallback","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { FixedSizeList } from 'react-window';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport { LeftAddon, RightAddon } from '../ListItem/ListItemContent';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AA2BA,IAAMA,QAAQ,GAAGC,kBAAA,CAAOC,GAAV,gQASiB,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CATjB,EAYV,IAAAC,+BAAA,GAZU,CAAd;;AAeA,IAAMC,OAAO,GAAGP,kBAAA,CAAOC,GAAV,yFAAb;;AAIA,IAAMO,mBAAmB,GAAG,IAAAR,kBAAA,EAAOS,oBAAP,CAAH,mHACb,UAACP,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQM,KAAR,CAAcC,KAArB;AAAA,CADa,CAAzB;AAKA;AACA;AACA;;AACA,IAAMC,YAAY,gBAAG,IAAAC,iBAAA,EACnB,gBAUEC,GAVF,EAWK;EAAA,+BATDC,cASC;EAAA,IATDA,cASC,oCATgB,KAShB;EAAA,2BARDC,UAQC;EAAA,IARDA,UAQC,gCARY,KAQZ;EAAA,iCAPDC,gBAOC;EAAA,IAPDA,gBAOC,sCAPkB,KAOlB;EAAA,0BANDC,SAMC;EAAA,IANDA,SAMC,+BANW,EAMX;EAAA,IALDC,IAKC,QALDA,IAKC;EAAA,IAJDC,KAIC,QAJDA,KAIC;EAAA,IAHEC,IAGF;;EACH,IAAMC,YAAY,GAAG,IAAAC,kBAAA,EACnB;IAAA,IAAGC,KAAH,SAAGA,KAAH;IAAA,oBACE,gCAAC,QAAD;MAAU,KAAK,EAAEA;IAAjB,GACGL,IAAI,iBAAI,gCAAC,0BAAD,QAAYA,IAAZ,CADX,eAGE,gCAAC,OAAD,qBACE,gCAAC,oBAAD;MAAU,KAAK,EAAEH;IAAjB,EADF,EAEGD,cAAc,iBAAI,gCAAC,mBAAD;MAAqB,KAAK,EAAEE;IAA5B,EAFrB,CAHF,EAQGG,KAAK,iBAAI,gCAAC,2BAAD,QAAaA,KAAb,CARZ,CADF;EAAA,CADmB,EAanB,CAACH,gBAAD,EAAmBF,cAAnB,EAAmCI,IAAnC,EAAyCC,KAAzC,EAAgDJ,UAAhD,CAbmB,CAArB;EAgBA,oBACE,gCAAC,gBAAD;IACE,SAAS,EAAEE,SADb;IAEE,YAAY,EAAEI;EAFhB,GAGMD,IAHN;IAIE,GAAG,EAAEP;EAJP,GADF;AAQD,CArCkB,CAArB;AAwCAF,YAAY,CAACa,WAAb,GAA2B,cAA3B;eAEeb,Y"}
+{"version":3,"file":"index.js","names":["ListItem","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","DescriptionSkeleton","Skeleton","sizes","small","ListSkeleton","forwardRef","ref","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","itemRenderer","useCallback","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { FixedSizeList } from 'react-window';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport { LeftAddon, RightAddon } from '../ListItem/ListItemContent';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BpE,IAAMA,QAAQ,GAAGC,kBAAM,CAACC,GAAG,gQASI,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAGlE,IAAAC,+BAAuB,GAAE,CAC5B;AAED,IAAMC,OAAO,GAAGP,kBAAM,CAACC,GAAG,yFAEzB;AAED,IAAMO,mBAAmB,GAAG,IAAAR,kBAAM,EAACS,oBAAQ,CAAC,mHAChC,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACM,KAAK,CAACC,KAAK;AAAA,EAErC;;AAED;AACA;AACA;AACA,IAAMC,YAAY,gBAAG,IAAAC,iBAAU,EAC7B,gBAUEC,GAAG,EACA;EAAA,+BATDC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,6BAClBC,gBAAgB;IAAhBA,gBAAgB,sCAAG,KAAK;IAAA,sBACxBC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC9B;IAAA,IAAGC,KAAK,SAALA,KAAK;IAAA,oBACN,gCAAC,QAAQ;MAAC,KAAK,EAAEA;IAAM,GACpBL,IAAI,iBAAI,gCAAC,0BAAS,QAAEA,IAAI,CAAa,eAEtC,gCAAC,OAAO,qBACN,gCAAC,oBAAQ;MAAC,KAAK,EAAEH;IAAW,EAAG,EAC9BD,cAAc,iBAAI,gCAAC,mBAAmB;MAAC,KAAK,EAAEE;IAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,gCAAC,2BAAU,QAAEA,KAAK,CAAc,CACjC;EAAA,CACZ,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,gCAAC,gBAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEI;EAAa,GACvBD,IAAI;IACR,GAAG,EAAEP;EAAI,GACT;AAEN,CAAC,CACF;AAEDF,YAAY,CAACa,WAAW,GAAG,cAAc;AAAC,eAE3Bb,YAAY;AAAA"}

package/dist/cjs/LogoLink/index.js

@@ -1,61 +1,41 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _excluded = ["src", "as", "onMouseDown"];
-
 var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var darkStyles = function darkStyles(p) {
   return p.dark && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  "])));
 };
-
 var StyledLogoLink = (0, _styled["default"])('a', (0, _utils.omitEmotionProps)('dark', 'size', 'as'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, darkStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('opacity'));
+
 /**
  * Logo with a link.
  */
-
 var LogoLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var src = _ref.src,
-      as = _ref.as,
-      _ref$onMouseDown = _ref.onMouseDown,
-      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    as = _ref.as,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _theming.useTheme)(),
-      activeTheme = _useTheme.activeTheme;
-
+    activeTheme = _useTheme.activeTheme;
   var ariaLabel = rest['aria-label'] || 'Logo';
   return /*#__PURE__*/_react["default"].createElement(StyledLogoLink, _extends({
     dark: activeTheme === 'dark',
@@ -63,7 +43,6 @@ var LogoLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     as: as,
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
-
       e.preventDefault();
     }
   }, rest, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["darkStyles","p","dark","css","StyledLogoLink","styled","omitEmotionProps","resetFocusStyles","sizeStyles","transitionStyles","LogoLink","forwardRef","ref","src","as","onMouseDown","rest","useTheme","activeTheme","ariaLabel","e","preventDefault","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { css } from '@emotion/react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LogoLinkProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'>,\n    WithSize {\n  /**\n   * The source of the logo image.\n   */\n  src?: string;\n}\n\nconst darkStyles = (p) =>\n  p.dark &&\n  css`\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  `;\n\ninterface StyledLogoLinkProps extends WithSize {\n  dark: boolean;\n}\nconst StyledLogoLink = styled(\n  'a',\n  omitEmotionProps('dark', 'size', 'as')\n)<StyledLogoLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ${darkStyles};\n  ${sizeStyles};\n  ${transitionStyles('opacity')};\n`;\n\n/**\n * Logo with a link.\n */\nconst LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(\n  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {\n    const { activeTheme } = useTheme();\n    const ariaLabel = rest['aria-label'] || 'Logo';\n\n    return (\n      <StyledLogoLink\n        dark={activeTheme === 'dark'}\n        aria-label={ariaLabel}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <img src={src} alt={ariaLabel} />\n      </StyledLogoLink>\n    );\n  }\n);\n\nLogoLink.displayName = 'LogoLink';\n\nexport default LogoLink;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD;EAAA,OACjBA,CAAC,CAACC,IAAF,QACAC,WADA,2JADiB;AAAA,CAAnB;;AAWA,IAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrB,GADqB,EAErB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,MAAzB,EAAiC,IAAjC,CAFqB,CAAH,yYAIhBC,wBAJgB,EAuBhBP,UAvBgB,EAwBhBQ,kBAxBgB,EAyBhB,IAAAC,wBAAA,EAAiB,SAAjB,CAzBgB,CAApB;AA4BA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAA+CC,GAA/C,EAAuD;EAAA,IAApDC,GAAoD,QAApDA,GAAoD;EAAA,IAA/CC,EAA+C,QAA/CA,EAA+C;EAAA,4BAA3CC,WAA2C;EAAA,IAA3CA,YAA2C,iCAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EACrD,gBAAwB,IAAAC,iBAAA,GAAxB;EAAA,IAAQC,WAAR,aAAQA,WAAR;;EACA,IAAMC,SAAS,GAAGH,IAAI,CAAC,YAAD,CAAJ,IAAsB,MAAxC;EAEA,oBACE,gCAAC,cAAD;IACE,IAAI,EAAEE,WAAW,KAAK,MADxB;IAEE,cAAYC,SAFd;IAGE,EAAE,EAAEL,EAHN;IAIE,WAAW,EAAE,qBAACM,CAAD,EAAO;MAClBL,YAAW,CAACK,CAAD,CAAX;;MACAA,CAAC,CAACC,cAAF;IACD;EAPH,GAQML,IARN;IASE,GAAG,EAAEJ;EATP,iBAWE;IAAK,GAAG,EAAEC,GAAV;IAAe,GAAG,EAAEM;EAApB,EAXF,CADF;AAeD,CApBc,CAAjB;AAuBAT,QAAQ,CAACY,WAAT,GAAuB,UAAvB;eAEeZ,Q"}
+{"version":3,"file":"index.js","names":["darkStyles","p","dark","css","StyledLogoLink","styled","omitEmotionProps","resetFocusStyles","sizeStyles","transitionStyles","LogoLink","forwardRef","ref","src","as","onMouseDown","rest","useTheme","activeTheme","ariaLabel","e","preventDefault","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { css } from '@emotion/react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LogoLinkProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'>,\n    WithSize {\n  /**\n   * The source of the logo image.\n   */\n  src?: string;\n}\n\nconst darkStyles = (p) =>\n  p.dark &&\n  css`\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  `;\n\ninterface StyledLogoLinkProps extends WithSize {\n  dark: boolean;\n}\nconst StyledLogoLink = styled(\n  'a',\n  omitEmotionProps('dark', 'size', 'as')\n)<StyledLogoLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ${darkStyles};\n  ${sizeStyles};\n  ${transitionStyles('opacity')};\n`;\n\n/**\n * Logo with a link.\n */\nconst LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(\n  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {\n    const { activeTheme } = useTheme();\n    const ariaLabel = rest['aria-label'] || 'Logo';\n\n    return (\n      <StyledLogoLink\n        dark={activeTheme === 'dark'}\n        aria-label={ariaLabel}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <img src={src} alt={ariaLabel} />\n      </StyledLogoLink>\n    );\n  }\n);\n\nLogoLink.displayName = 'LogoLink';\n\nexport default LogoLink;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAMA;AACA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe9C,IAAMA,UAAU,GAAG,SAAbA,UAAU,CAAIC,CAAC;EAAA,OACnBA,CAAC,CAACC,IAAI,QACNC,WAAG,2JAIF;AAAA;AAKH,IAAMC,cAAc,GAAG,IAAAC,kBAAM,EAC3B,GAAG,EACH,IAAAC,uBAAgB,EAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CACvC,yYACGC,wBAAgB,EAmBhBP,UAAU,EACVQ,kBAAU,EACV,IAAAC,wBAAgB,EAAC,SAAS,CAAC,CAC9B;;AAED;AACA;AACA;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAA+CC,GAAG,EAAK;EAAA,IAApDC,GAAG,QAAHA,GAAG;IAAEC,EAAE,QAAFA,EAAE;IAAA,wBAAEC,WAAW;IAAXA,YAAW,iCAAG,YAAM,CAAC,CAAC;IAAKC,IAAI;EACzC,gBAAwB,IAAAC,iBAAQ,GAAE;IAA1BC,WAAW,aAAXA,WAAW;EACnB,IAAMC,SAAS,GAAGH,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;EAE9C,oBACE,gCAAC,cAAc;IACb,IAAI,EAAEE,WAAW,KAAK,MAAO;IAC7B,cAAYC,SAAU;IACtB,EAAE,EAAEL,EAAG;IACP,WAAW,EAAE,qBAACM,CAAC,EAAK;MAClBL,YAAW,CAACK,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,EAAE;IACpB;EAAE,GACEL,IAAI;IACR,GAAG,EAAEJ;EAAI,iBAET;IAAK,GAAG,EAAEC,GAAI;IAAC,GAAG,EAAEM;EAAU,EAAG,CAClB;AAErB,CAAC,CACF;AAEDT,QAAQ,CAACY,WAAW,GAAG,UAAU;AAAC,eAEnBZ,QAAQ;AAAA"}