@os-design/core 1.0.255 → 1.0.257

package/dist/esm/ListItemActions/index.js

@@ -1,133 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { sizeStyles, transitionStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { isTouchDevice, omitEmotionProps, useForwardedRef, useSwipe } from '@os-design/utils';
-import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import Button from '../Button';
-const Container = styled.div`
-  position: relative;
-  overflow: hidden;
-
-  @media (hover: hover) {
-    // Hide actions by default
-    & > nav {
-      opacity: 0;
-    }
-
-    // Display actions either on focus, or on hover
-    &:hover,
-    &:focus-within {
-      & > nav {
-        opacity: 1;
-      }
-    }
-  }
-`;
-const swipeableStyles = p => p.swipeable && css`
-    transform: translateX(100%);
-    ${transitionStyles('transform')(p)};
-  `;
-const openedStyles = p => p.opened && css`
-    transform: translateX(0);
-  `;
-const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size'))`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-
-  display: flex;
-  align-items: center;
-
-  padding-left: ${p => p.theme.listItemActionsPaddingLeft}em;
-  padding-right: ${p => p.paddingRight}px;
-
-  background: linear-gradient(
-    to right,
-    ${p => clr([...p.theme.colorBg.slice(0, 3), 0])},
-    ${p => clr(p.theme.colorBg)}
-      ${p => p.theme.listItemActionsPaddingLeft}em
-  );
-
-  ${swipeableStyles};
-  ${openedStyles};
-  ${sizeStyles}
-`;
-let actionIndex = 0;
-
-/**
- * Shows the menu in the list item.
- */
-const ListItemActions = /*#__PURE__*/forwardRef(({
-  actions = [],
-  onTouchStart = () => {},
-  onTouchMove = () => {},
-  onTouchEnd = () => {},
-  children,
-  size,
-  ...rest
-}, ref) => {
-  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
-  const {
-    opened,
-    handlers
-  } = useSwipe();
-  const swipeable = useMemo(() => isTouchDevice(), []);
-  const touchStartHandler = useCallback(e => {
-    handlers.onTouchStart(e);
-    onTouchStart(e);
-  }, [handlers, onTouchStart]);
-  const touchMoveHandler = useCallback(e => {
-    handlers.onTouchMove(e);
-    onTouchMove(e);
-  }, [handlers, onTouchMove]);
-  const touchEndHandler = useCallback(e => {
-    handlers.onTouchEnd(e);
-    onTouchEnd(e);
-  }, [handlers, onTouchEnd]);
-  const [paddingRight, setPaddingRight] = useState(0);
-  useLayoutEffect(() => {
-    if (!containerRef.current) return;
-    const value = Number(window.getComputedStyle(containerRef.current).getPropertyValue('padding-right').replace('px', ''));
-    setPaddingRight(value);
-  }, [containerRef]);
-  const actionsComponent = useMemo(() => {
-    if (actions.length === 0) return null;
-    const items = actions.map(({
-      icon,
-      onClick = () => {},
-      ...actionRest
-    }) => {
-      actionIndex += 1;
-      return /*#__PURE__*/React.createElement(Button, _extends({
-        key: actionIndex,
-        type: "ghost",
-        wide: "never",
-        size: size,
-        onClick: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onClick(e);
-        }
-      }, actionRest), icon);
-    });
-    return /*#__PURE__*/React.createElement(Actions, {
-      swipeable: swipeable,
-      opened: opened,
-      paddingRight: paddingRight,
-      size: size
-    }, items);
-  }, [actions, opened, paddingRight, size, swipeable]);
-  return /*#__PURE__*/React.createElement(Container, _extends({
-    onTouchStart: touchStartHandler,
-    onTouchMove: touchMoveHandler,
-    onTouchEnd: touchEndHandler
-  }, rest, {
-    ref: mergedContainerRef
-  }), children, actionsComponent);
-});
-ListItemActions.displayName = 'ListItemActions';
-export default ListItemActions;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","createElement","_extends","key","type","wide","preventDefault","stopPropagation","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\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\nconst swipeableStyles = (p) =>\n  p.swipeable &&\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 extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\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  padding-right: ${(p) => p.paddingRight}px;\n\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  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ListItemLink/index.js

@@ -1,58 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { resetFocusStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import React, { forwardRef } from 'react';
-import ListItem from '../ListItem';
-const Link = styled.a`
-  ${resetFocusStyles};
-
-  cursor: pointer;
-  text-decoration: none;
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid ${p => clr(p.theme.listItemColorBorder)};
-  }
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus-within {
-      & > div {
-        background-color: ${p => clr(p.theme.listItemColorBgHover)};
-
-        & > nav {
-          background: linear-gradient(
-            to right,
-            ${p => clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
-            ${p => clr(p.theme.listItemColorBgHover)}
-              ${p => p.theme.listItemActionsPaddingLeft}em
-          );
-        }
-      }
-    }
-  }
-`;
-
-/**
- * The list item with a link.
- */
-const ListItemLink = /*#__PURE__*/forwardRef(({
-  title,
-  description,
-  left,
-  right,
-  actions,
-  children,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
-  ref: ref
-}), /*#__PURE__*/React.createElement(ListItem, {
-  title: title,
-  description: description,
-  left: left,
-  right: right,
-  actions: actions
-}, children)));
-ListItemLink.displayName = 'ListItemLink';
-export default ListItemLink;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBorder","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport ListItem, { ListItemProps } from '../ListItem';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ListItemProps;\n\nconst Link = styled.a`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      & > div {\n        background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n\n        & > nav {\n          background: linear-gradient(\n            to right,\n            ${(p) =>\n              clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n            ${(p) => clr(p.theme.listItemColorBgHover)}\n              ${(p) => p.theme.listItemActionsPaddingLeft}em\n          );\n        }\n      }\n    }\n  }\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  ({ title, description, left, right, actions, children, ...rest }, ref) => (\n    <Link {...rest} ref={ref}>\n      <ListItem\n        title={title}\n        description={description}\n        left={left}\n        right={right}\n        actions={actions}\n      >\n        {children}\n      </ListItem>\n    </Link>\n  )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,GAAG,QAAe,oBAAoB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAQrD,MAAMC,IAAI,GAAGN,MAAM,CAACO,CAAC;AACrB,IAAIN,gBAAgB;AACpB;AACA;AACA;AACA;AACA;AACA,+BAAgCO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BF,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAC;AACpE;AACA;AACA;AACA;AACA,cAAeH,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAU,CAAC;AAC5E,cAAeJ,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAC;AACtD,gBAAiBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,0BAA0B;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGV,UAAU,CAC7B,CAAC;EAAEW,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnEnB,KAAA,CAAAoB,aAAA,CAACjB,IAAI,EAAAkB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACvBnB,KAAA,CAAAoB,aAAA,CAAClB,QAAQ;EACPU,KAAK,EAAEA,KAAM;EACbC,WAAW,EAAEA,WAAY;EACzBC,IAAI,EAAEA,IAAK;EACXC,KAAK,EAAEA,KAAM;EACbC,OAAO,EAAEA;AAAQ,GAEhBC,QACO,CACN,CAEV,CAAC;AAEDN,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY","ignoreList":[]}

package/dist/esm/ListItemSkeleton/index.js

@@ -1,32 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import React, { forwardRef } from 'react';
-import ListItem from '../ListItem';
-import Skeleton from '../Skeleton';
-const Content = styled.div`
-  width: 100%;
-`;
-const DescriptionSkeleton = styled(Skeleton)`
-  height: ${p => p.theme.sizes.small}em;
-  margin-top: 0.3em;
-`;
-
-/**
- * Provides a list item placeholder while a user waits for the content to load.
- */
-const ListItemSkeleton = /*#__PURE__*/forwardRef(({
-  hasDescription = false,
-  titleWidth = '30%',
-  descriptionWidth = '40%',
-  children,
-  ...rest
-}, ref) => /*#__PURE__*/React.createElement(ListItem, _extends({}, rest, {
-  ref: ref
-}), children || /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Skeleton, {
-  width: titleWidth
-}), hasDescription && /*#__PURE__*/React.createElement(DescriptionSkeleton, {
-  width: descriptionWidth
-}))));
-ListItemSkeleton.displayName = 'ListItemSkeleton';
-export default ListItemSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","ListItem","Skeleton","Content","div","DescriptionSkeleton","p","theme","sizes","small","ListItemSkeleton","hasDescription","titleWidth","descriptionWidth","children","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/ListItemSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\n\nexport interface ListItemSkeletonProps\n  extends Omit<ListItemProps, 'title' | 'description' | 'actions'> {\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\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 item placeholder while a user waits for the content to load.\n */\nconst ListItemSkeleton = forwardRef<HTMLDivElement, ListItemSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <ListItem {...rest} ref={ref}>\n      {children || (\n        <Content>\n          <Skeleton width={titleWidth} />\n          {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n        </Content>\n      )}\n    </ListItem>\n  )\n);\n\nListItemSkeleton.displayName = 'ListItemSkeleton';\n\nexport default ListItemSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AACrD,OAAOC,QAAQ,MAAM,aAAa;AAqBlC,MAAMC,OAAO,GAAGL,MAAM,CAACM,GAAG;AAC1B;AACA,CAAC;AAED,MAAMC,mBAAmB,GAAGP,MAAM,CAACI,QAAQ,CAAC;AAC5C,YAAaI,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAK;AACtC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGV,UAAU,CACjC,CACE;EACEW,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEHjB,KAAA,CAAAkB,aAAA,CAAChB,QAAQ,EAAAiB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC1BF,QAAQ,iBACPf,KAAA,CAAAkB,aAAA,CAACd,OAAO,qBACNJ,KAAA,CAAAkB,aAAA,CAACf,QAAQ;EAACiB,KAAK,EAAEP;AAAW,CAAE,CAAC,EAC9BD,cAAc,iBAAIZ,KAAA,CAAAkB,aAAA,CAACZ,mBAAmB;EAACc,KAAK,EAAEN;AAAiB,CAAE,CAC3D,CAEH,CAEd,CAAC;AAEDH,gBAAgB,CAACU,WAAW,GAAG,kBAAkB;AAEjD,eAAeV,gBAAgB","ignoreList":[]}

package/dist/esm/ListSkeleton/index.js

@@ -1,37 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, useCallback } from 'react';
-import List from '../List';
-import ListItemSkeleton from '../ListItemSkeleton';
-/**
- * Provides a list placeholder while a user waits for the content to load.
- */
-const ListSkeleton = /*#__PURE__*/forwardRef(({
-  hasDescription,
-  titleWidth,
-  descriptionWidth,
-  left,
-  right,
-  children,
-  itemCount = 10,
-  ...rest
-}, ref) => {
-  const itemRenderer = useCallback(({
-    style
-  }) => /*#__PURE__*/React.createElement(ListItemSkeleton, {
-    hasDescription: hasDescription,
-    titleWidth: titleWidth,
-    descriptionWidth: descriptionWidth,
-    left: left,
-    right: right,
-    style: style
-  }, children), [children, descriptionWidth, hasDescription, left, right, titleWidth]);
-  return /*#__PURE__*/React.createElement(List, _extends({
-    itemCount: itemCount,
-    itemRenderer: itemRenderer
-  }, rest, {
-    ref: ref
-  }));
-});
-ListSkeleton.displayName = 'ListSkeleton';
-export default ListSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","List","ListItemSkeleton","ListSkeleton","hasDescription","titleWidth","descriptionWidth","left","right","children","itemCount","rest","ref","itemRenderer","style","createElement","_extends","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport List, { ListProps } from '../List';\nimport ListItemSkeleton, { ListItemSkeletonProps } from '../ListItemSkeleton';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer' | 'children'>,\n    Pick<\n      ListItemSkeletonProps,\n      | 'hasDescription'\n      | 'titleWidth'\n      | 'descriptionWidth'\n      | 'left'\n      | 'right'\n      | 'children'\n    > {\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\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,\n      titleWidth,\n      descriptionWidth,\n      left,\n      right,\n      children,\n      itemCount = 10,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItemSkeleton\n          hasDescription={hasDescription}\n          titleWidth={titleWidth}\n          descriptionWidth={descriptionWidth}\n          left={left}\n          right={right}\n          style={style}\n        >\n          {children}\n        </ListItemSkeleton>\n      ),\n      [children, 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,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,OAAOC,IAAI,MAAqB,SAAS;AACzC,OAAOC,gBAAgB,MAAiC,qBAAqB;AAoB7E;AACA;AACA;AACA,MAAMC,YAAY,gBAAGJ,UAAU,CAC7B,CACE;EACEK,cAAc;EACdC,UAAU;EACVC,gBAAgB;EAChBC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,SAAS,GAAG,EAAE;EACd,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAGb,WAAW,CAC9B,CAAC;IAAEc;EAAM,CAAC,kBACRhB,KAAA,CAAAiB,aAAA,CAACb,gBAAgB;IACfE,cAAc,EAAEA,cAAe;IAC/BC,UAAU,EAAEA,UAAW;IACvBC,gBAAgB,EAAEA,gBAAiB;IACnCC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbM,KAAK,EAAEA;EAAM,GAEZL,QACe,CACnB,EACD,CAACA,QAAQ,EAAEH,gBAAgB,EAAEF,cAAc,EAAEG,IAAI,EAAEC,KAAK,EAAEH,UAAU,CACtE,CAAC;EAED,oBACEP,KAAA,CAAAiB,aAAA,CAACd,IAAI,EAAAe,QAAA;IACHN,SAAS,EAAEA,SAAU;IACrBG,YAAY,EAAEA;EAAa,GACvBF,IAAI;IACRC,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDT,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC,eAAed,YAAY","ignoreList":[]}

package/dist/esm/LogoLink/index.js

@@ -1,68 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { useTheme } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-const darkStyles = p => p.dark && css`
-    img {
-      filter: brightness(0) invert(1); // Make the logo white
-    }
-  `;
-const StyledLogoLink = styled('a', omitEmotionProps('dark', 'size', 'as'))`
-  ${resetFocusStyles};
-  cursor: pointer;
-  text-decoration: none;
-  display: block;
-  height: 1.5em;
-
-  img {
-    display: block;
-    height: 100%;
-    transform: rotate(0); // Fixes moves on hover
-  }
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      opacity: 0.7;
-    }
-  }
-
-  ${darkStyles};
-  ${sizeStyles};
-  ${transitionStyles('opacity')};
-`;
-
-/**
- * Logo with a link.
- */
-const LogoLink = /*#__PURE__*/forwardRef(({
-  src,
-  as,
-  onMouseDown = () => {},
-  ...rest
-}, ref) => {
-  const {
-    activeTheme
-  } = useTheme();
-  const ariaLabel = rest['aria-label'] || 'Logo';
-  return /*#__PURE__*/React.createElement(StyledLogoLink, _extends({
-    dark: activeTheme === 'dark',
-    "aria-label": ariaLabel,
-    as: as,
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    }
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement("img", {
-    src: src,
-    alt: ariaLabel
-  }));
-});
-LogoLink.displayName = 'LogoLink';
-export default LogoLink;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","useTheme","omitEmotionProps","React","forwardRef","darkStyles","p","dark","StyledLogoLink","LogoLink","src","as","onMouseDown","rest","ref","activeTheme","ariaLabel","createElement","_extends","e","preventDefault","alt","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,UAAU,GAAIC,CAAC,IACnBA,CAAC,CAACC,IAAI,IACNX,GAAG;AACL;AACA;AACA;AACA,GAAG;AAKH,MAAMY,cAAc,GAAGX,MAAM,CAC3B,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CACvC,CAAsB;AACtB,IAAIJ,gBAAgB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIO,UAAU;AACd,IAAIN,UAAU;AACd,IAAIC,gBAAgB,CAAC,SAAS,CAAC;AAC/B,CAAC;;AAED;AACA;AACA;AACA,MAAMS,QAAQ,gBAAGL,UAAU,CACzB,CAAC;EAAEM,GAAG;EAAEC,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACrD,MAAM;IAAEC;EAAY,CAAC,GAAGd,QAAQ,CAAC,CAAC;EAClC,MAAMe,SAAS,GAAGH,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;EAE9C,oBACEV,KAAA,CAAAc,aAAA,CAACT,cAAc,EAAAU,QAAA;IACbX,IAAI,EAAEQ,WAAW,KAAK,MAAO;IAC7B,cAAYC,SAAU;IACtBL,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGO,CAAC,IAAK;MAClBP,WAAW,CAACO,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB;EAAE,GACEP,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETX,KAAA,CAAAc,aAAA;IAAKP,GAAG,EAAEA,GAAI;IAACW,GAAG,EAAEL;EAAU,CAAE,CAClB,CAAC;AAErB,CACF,CAAC;AAEDP,QAAQ,CAACa,WAAW,GAAG,UAAU;AAEjC,eAAeb,QAAQ","ignoreList":[]}

package/dist/esm/Menu/index.js

@@ -1,86 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { useIsMinWidth } from '@os-design/media';
-import { MenuContext } from '@os-design/menu-utils';
-import { enableScrollingStyles } from '@os-design/styles';
-import { useBrowserLayoutEffect, useForwardedRef, useKeyPress } from '@os-design/utils';
-import React, { forwardRef, useMemo } from 'react';
-import Modal from '../Modal';
-import Popover from '../Popover';
-import useFocusWithArrows from './utils/useFocusWithArrows';
-const StyledPopover = styled(Popover)`
-  padding: ${p => p.theme.menuPaddingVertical}em 0;
-  min-width: ${p => p.theme.menuMinWidth}em;
-  max-height: ${p => p.theme.menuMaxHeight}em;
-  overflow: hidden;
-  ${enableScrollingStyles('y')};
-`;
-const StyledModal = styled(Modal)`
-  padding-left: 0;
-  padding-right: 0;
-`;
-
-/**
- * The dropdown menu.
- */
-const Menu = /*#__PURE__*/forwardRef(({
-  closeOnSelect = true,
-  modalTitle,
-  trigger,
-  placement = 'bottom-start',
-  visible,
-  onClose = () => {},
-  size,
-  className,
-  id,
-  children,
-  ...rest
-}, ref) => {
-  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
-  useFocusWithArrows(containerRef);
-  useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
-  const isMinXs = useIsMinWidth('xs');
-  const menuId = useMemo(() => id || `menu-${Math.random().toString(36).slice(2, 11)}`, [id]);
-
-  // Replace the aria-haspopup attribute from true to menu
-  useBrowserLayoutEffect(() => {
-    if (!trigger) return;
-    const {
-      current
-    } = trigger;
-    if (!current) return;
-    current.setAttribute('aria-haspopup', 'menu');
-    current.setAttribute('aria-controls', menuId);
-  }, [menuId]);
-  const contextValue = useMemo(() => ({
-    closeOnSelect,
-    onClose
-  }), [closeOnSelect, onClose]);
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: contextValue
-  }, isMinXs ? /*#__PURE__*/React.createElement(StyledPopover, _extends({
-    trigger: trigger,
-    placement: placement,
-    visible: visible,
-    onClose: onClose,
-    size: size,
-    className: className,
-    id: menuId,
-    role: "menu"
-  }, rest, {
-    ref: mergedContainerRef
-  }), children) : /*#__PURE__*/React.createElement(StyledModal, {
-    title: modalTitle,
-    footer: null,
-    visible: visible,
-    onClose: onClose,
-    size: size,
-    className: className,
-    id: menuId,
-    role: "menu",
-    ref: mergedContainerRef
-  }, children));
-});
-Menu.displayName = 'Menu';
-export default Menu;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","useIsMinWidth","MenuContext","enableScrollingStyles","useBrowserLayoutEffect","useForwardedRef","useKeyPress","React","forwardRef","useMemo","Modal","Popover","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","createElement","Provider","value","_extends","role","title","footer","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { useIsMinWidth } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, RefObject, useMemo } from 'react';\nimport Modal from '../Modal';\nimport Popover, { PopoverProps } from '../Popover';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Menu/utils/useFocusWithArrows.js

@@ -1,30 +0,0 @@
-import { useKeyPress } from '@os-design/utils';
-import { useCallback } from 'react';
-const useFocusWithArrows = ref => {
-  const arrowKeyPressListener = useCallback(e => {
-    if (!ref.current) return;
-    const focusableListItems = ref.current.querySelectorAll('button:not([disabled])');
-    const {
-      activeElement
-    } = document;
-    const curFocusedIndex = activeElement ? [...focusableListItems].indexOf(activeElement) : -1;
-    let nextFocusedIndex;
-    if (curFocusedIndex === -1 && e.key === 'ArrowUp') {
-      nextFocusedIndex = focusableListItems.length - 1;
-    } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {
-      nextFocusedIndex = 0;
-    } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {
-      nextFocusedIndex = curFocusedIndex > 0 ? curFocusedIndex - 1 : focusableListItems.length - 1;
-    } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {
-      nextFocusedIndex = curFocusedIndex < focusableListItems.length - 1 ? curFocusedIndex + 1 : 0;
-    }
-    if (nextFocusedIndex === undefined) return;
-    const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);
-    if (!nextFocusedListItem) return;
-    nextFocusedListItem.focus();
-    e.preventDefault();
-  }, [ref]);
-  useKeyPress(typeof window !== 'undefined' ? window : undefined, ['ArrowUp', 'ArrowDown'], arrowKeyPressListener);
-};
-export default useFocusWithArrows;
-//# sourceMappingURL=useFocusWithArrows.js.map

package/dist/esm/Menu/utils/useFocusWithArrows.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusWithArrows.js","names":["useKeyPress","useCallback","useFocusWithArrows","ref","arrowKeyPressListener","e","current","focusableListItems","querySelectorAll","activeElement","document","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { KeyPressListener, useKeyPress } from '@os-design/utils';\nimport { RefObject, useCallback } from 'react';\n\nconst useFocusWithArrows = (ref: RefObject<Element>): void => {\n  const arrowKeyPressListener = useCallback<KeyPressListener>(\n    (e) => {\n      if (!ref.current) return;\n      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(\n        'button:not([disabled])'\n      );\n      const { activeElement } = document;\n      const curFocusedIndex = activeElement\n        ? ([...focusableListItems] as Element[]).indexOf(activeElement)\n        : -1;\n\n      let nextFocusedIndex;\n      if (curFocusedIndex === -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex = focusableListItems.length - 1;\n      } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex = 0;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex =\n          curFocusedIndex > 0\n            ? curFocusedIndex - 1\n            : focusableListItems.length - 1;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex =\n          curFocusedIndex < focusableListItems.length - 1\n            ? curFocusedIndex + 1\n            : 0;\n      }\n\n      if (nextFocusedIndex === undefined) return;\n      const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);\n      if (!nextFocusedListItem) return;\n\n      nextFocusedListItem.focus();\n      e.preventDefault();\n    },\n    [ref]\n  );\n\n  useKeyPress(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    ['ArrowUp', 'ArrowDown'],\n    arrowKeyPressListener\n  );\n};\n\nexport default useFocusWithArrows;\n"],"mappings":"AAAA,SAA2BA,WAAW,QAAQ,kBAAkB;AAChE,SAAoBC,WAAW,QAAQ,OAAO;AAE9C,MAAMC,kBAAkB,GAAIC,GAAuB,IAAW;EAC5D,MAAMC,qBAAqB,GAAGH,WAAW,CACtCI,CAAC,IAAK;IACL,IAAI,CAACF,GAAG,CAACG,OAAO,EAAE;IAClB,MAAMC,kBAAkB,GAAGJ,GAAG,CAACG,OAAO,CAACE,gBAAgB,CACrD,wBACF,CAAC;IACD,MAAM;MAAEC;IAAc,CAAC,GAAGC,QAAQ;IAClC,MAAMC,eAAe,GAAGF,aAAa,GAChC,CAAC,GAAGF,kBAAkB,CAAC,CAAeK,OAAO,CAACH,aAAa,CAAC,GAC7D,CAAC,CAAC;IAEN,IAAII,gBAAgB;IACpB,IAAIF,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IAClD,CAAC,MAAM,IAAIJ,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MAC1DD,gBAAgB,GAAG,CAAC;IACtB,CAAC,MAAM,IAAIF,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAC,GACfA,eAAe,GAAG,CAAC,GACnBJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IACrC,CAAC,MAAM,IAAIJ,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC,GAC3CJ,eAAe,GAAG,CAAC,GACnB,CAAC;IACT;IAEA,IAAIE,gBAAgB,KAAKG,SAAS,EAAE;IACpC,MAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAI,CAACL,gBAAgB,CAAC;IACrE,IAAI,CAACI,mBAAmB,EAAE;IAE1BA,mBAAmB,CAACE,KAAK,CAAC,CAAC;IAC3Bd,CAAC,CAACe,cAAc,CAAC,CAAC;EACpB,CAAC,EACD,CAACjB,GAAG,CACN,CAAC;EAEDH,WAAW,CACR,OAAOqB,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGL,SAAS,EACnD,CAAC,SAAS,EAAE,WAAW,CAAC,EACxBZ,qBACF,CAAC;AACH,CAAC;AAED,eAAeF,kBAAkB","ignoreList":[]}

package/dist/esm/MenuDivider/index.js

@@ -1,21 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import styled from '@emotion/styled';
-import { clr } from '@os-design/theming';
-import React, { forwardRef } from 'react';
-const Container = styled.div`
-  padding-top: 0.4em;
-  border-bottom: 1px solid ${p => clr(p.theme.menuDividerColor)};
-  margin-bottom: 0.4em;
-`;
-
-/**
- * The divider of menu items.
- */
-const MenuDivider = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(Container, _extends({
-  role: "separator"
-}, props, {
-  ref: ref
-})));
-MenuDivider.displayName = 'MenuDivider';
-export default MenuDivider;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","clr","React","forwardRef","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","createElement","_extends","role","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAIzC,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG;AAC5B;AACA,6BAA8BC,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAC;AACjE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGN,UAAU,CAC5B,CAACO,KAAK,EAAEC,GAAG,kBAAKT,KAAA,CAAAU,aAAA,CAACR,SAAS,EAAAS,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CACpE,CAAC;AAEDF,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW","ignoreList":[]}