@os-design/core 1.0.254 → 1.0.256

package/dist/PageContent/index.js

@@ -0,0 +1,66 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+import { horizontalPaddingStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useContext } from 'react';
+import LayoutContext from '../Layout/LayoutContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const hasNavigationStyles = p => p.hasNavigation && css`
+    ${!p.hasList && css`
+      margin-bottom: calc(
+        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)
+      );
+    `}
+    ${m.min.md} {
+      margin-bottom: 0;
+      margin-left: ${p.theme.navigationSideWidth}em;
+    }
+  `;
+const hasPageHeaderStyles = p => p.hasPageHeader && !p.hasList && css`
+    margin-top: ${p.theme.pageHeaderHeight[0] + p.marginTop}em;
+    ${m.min.md} {
+      margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}em;
+    }
+  `;
+const notHasListStyles = p => !p.hasList && css`
+    padding-top: ${p.theme.pageContentPaddingVertical}em;
+    padding-bottom: ${p.theme.pageContentPaddingVertical}em;
+    ${horizontalPaddingStyles()(p)};
+  `;
+const notHasNavigationStyles = p => !p.hasNavigation && !p.hasList && css`
+    margin-bottom: env(safe-area-inset-bottom);
+  `;
+const Container = styled('main', omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop'))`
+  margin-top: ${p => p.marginTop}em;
+  ${hasNavigationStyles};
+  ${hasPageHeaderStyles};
+  ${notHasListStyles};
+  ${notHasNavigationStyles};
+`;
+
+/**
+ * The wrapper that adds padding to the page content.
+ */
+const PageContent = /*#__PURE__*/forwardRef(({
+  hasList = false,
+  marginTop = 0,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    hasNavigation,
+    hasPageHeader
+  } = useContext(LayoutContext);
+  return /*#__PURE__*/_jsx(Container, {
+    hasNavigation: hasNavigation,
+    hasPageHeader: hasPageHeader,
+    hasList: hasList,
+    marginTop: marginTop,
+    ...rest,
+    ref: ref,
+    children: children
+  });
+});
+PageContent.displayName = 'PageContent';
+export default PageContent;

package/dist/PageHeader/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type PageHeaderLocale } from './utils/defaultLocale';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface PageHeaderProps extends JsxDivProps {
+    /**
+     * The title of the page.
+     * @default undefined
+     */
+    title: string;
+    /**
+     * The subtitle of the page.
+     * @default undefined
+     */
+    subtitle?: string;
+    /**
+     * The component located on the left side.
+     * @default undefined
+     */
+    left?: React.ReactNode;
+    /**
+     * Reduces the left padding of the page header.
+     * @default false
+     */
+    leftIsGhostButton?: boolean;
+    /**
+     * The component located on the right side.
+     * @default undefined
+     */
+    right?: React.ReactNode;
+    /**
+     * Reduces the right padding of the page header.
+     * @default false
+     */
+    rightIsGhostButton?: boolean;
+    /**
+     * The back event handler. If passed, the page header has the back button.
+     * @default undefined
+     */
+    onBack?: () => void;
+    /**
+     * The locale.
+     * @default undefined
+     */
+    locale?: PageHeaderLocale;
+}
+interface ContainerProps {
+    leftIsGhostButton?: boolean;
+    rightIsGhostButton?: boolean;
+    hasNavigationIndent?: boolean;
+}
+export declare const PageHeaderContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * The header of the page.
+ */
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default PageHeader;
+//# sourceMappingURL=index.d.ts.map

package/dist/PageHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageHeader/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAGtD,OAAsB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE7E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAuCD,UAAU,cAAc;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AACD,eAAO,MAAM,mBAAmB;;SAkIwB,MAC5C,WAAE;sGAtGb,CAAC;AAsDF;;GAEG;AACH,QAAA,MAAM,UAAU,wFAqDf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/PageHeader/index.js

@@ -0,0 +1,149 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Left } from '@os-design/icons';
+import { m } from '@os-design/media';
+import { ellipsisStyles } from '@os-design/styles';
+import { ThemeOverrider, clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useContext } from 'react';
+import Button from '../Button';
+import LayoutContext from '../Layout/LayoutContext';
+import defaultLocale from './utils/defaultLocale';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getReducedPadding = (p, isMinSm) => {
+  const i = isMinSm ? 1 : 0;
+  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;
+  if (padding < 0) padding = 0;
+  return padding;
+};
+const horizontalPaddingStyles = p => {
+  const reducedPadding = getReducedPadding(p, false);
+  const reducedPaddingSm = getReducedPadding(p, true);
+  return css`
+    padding-left: ${p.leftIsGhostButton ? reducedPadding : p.theme.horizontalPadding[0]}em;
+    padding-right: ${p.rightIsGhostButton ? reducedPadding : p.theme.horizontalPadding[0]}em;
+
+    ${m.min.sm} {
+      padding-left: ${p.leftIsGhostButton ? reducedPaddingSm : p.theme.horizontalPadding[1]}em;
+      padding-right: ${p.rightIsGhostButton ? reducedPaddingSm : p.theme.horizontalPadding[1]}em;
+    }
+  `;
+};
+const hasNavigationIndentStyles = p => p.hasNavigationIndent && css`
+    ${m.min.md} {
+      left: ${p.theme.navigationSideWidth}em;
+    }
+  `;
+export const PageHeaderContainer = styled('div', omitEmotionProps('leftIsGhostButton', 'rightIsGhostButton', 'hasNavigationIndent'))`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  height: ${p => p.theme.pageHeaderHeight[0]}em;
+  ${m.min.md} {
+    height: ${p => p.theme.pageHeaderHeight[1]}em;
+  }
+
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  z-index: 101;
+
+  background-color: ${p => clr(p.theme.pageHeaderColorBg)};
+  color: ${p => clr(p.theme.pageHeaderColorText)};
+  border-bottom: 1px solid ${p => clr(p.theme.pageHeaderColorBorder)};
+
+  ${horizontalPaddingStyles};
+  ${hasNavigationIndentStyles};
+`;
+const BackButton = styled(Button)`
+  margin-right: 0.2em;
+  flex-shrink: 0;
+`;
+const Content = styled.div`
+  overflow: hidden; // For ellipsis
+`;
+const notHasSubtitleStyles = p => !p.hasSubtitle && css`
+    font-size: ${p.theme.sizes.large}em;
+  `;
+const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
+  margin: 0;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.2;
+  ${notHasSubtitleStyles};
+  ${ellipsisStyles};
+`;
+const Subtitle = styled.div`
+  font-size: ${p => p.theme.sizes.small}em;
+  color: ${p => clr(p.theme.pageHeaderSubtitleColorText)};
+  line-height: 1.2;
+  ${ellipsisStyles};
+`;
+const Addon = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const LeftAddon = styled(Addon)`
+  padding-right: ${p => p.theme.pageHeaderAddonPaddingHorizontal}em;
+`;
+const RightAddon = styled(Addon)`
+  padding-left: ${p => p.theme.pageHeaderAddonPaddingHorizontal}em;
+  margin-left: auto;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 0.4em;
+`;
+
+/**
+ * The header of the page.
+ */
+const PageHeader = /*#__PURE__*/forwardRef(({
+  title,
+  subtitle,
+  left,
+  leftIsGhostButton = false,
+  right,
+  rightIsGhostButton = false,
+  onBack,
+  locale = defaultLocale,
+  ...rest
+}, ref) => {
+  const {
+    hasNavigation
+  } = useContext(LayoutContext);
+  return /*#__PURE__*/_jsx(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal
+    }),
+    children: /*#__PURE__*/_jsxs(PageHeaderContainer, {
+      leftIsGhostButton: leftIsGhostButton || !!onBack,
+      rightIsGhostButton: rightIsGhostButton,
+      hasNavigationIndent: hasNavigation,
+      ...rest,
+      ref: ref,
+      children: [onBack && /*#__PURE__*/_jsx(BackButton, {
+        type: "ghost",
+        wide: "never",
+        onClick: onBack,
+        "aria-label": locale.backLabel,
+        children: /*#__PURE__*/_jsx(Left, {})
+      }), left && /*#__PURE__*/_jsx(LeftAddon, {
+        children: left
+      }), /*#__PURE__*/_jsxs(Content, {
+        children: [/*#__PURE__*/_jsx(Title, {
+          hasSubtitle: !!subtitle,
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx(Subtitle, {
+          children: subtitle
+        })]
+      }), right && /*#__PURE__*/_jsx(RightAddon, {
+        children: right
+      })]
+    })
+  });
+});
+PageHeader.displayName = 'PageHeader';
+export default PageHeader;

package/dist/PageHeader/utils/defaultLocale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultLocale.d.ts","sourceRoot":"","sources":["../../../src/PageHeader/utils/defaultLocale.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,gBAEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/PageHeader/utils/defaultLocale.js

@@ -0,0 +1,4 @@
+const defaultLocale = {
+  backLabel: 'Back'
+};
+export default defaultLocale;

package/dist/PageHeaderInputSearch/index.d.ts

@@ -0,0 +1,25 @@
+import { type InputSearchProps } from '../InputSearch';
+import { type PageHeaderInputSearchLocale } from './utils/defaultLocale';
+export interface PageHeaderInputSearchProps extends Omit<InputSearchProps, 'size' | 'locale'> {
+    /**
+     * The locale.
+     * @default undefined
+     */
+    locale?: PageHeaderInputSearchLocale;
+    /**
+     * Whether the search input opens on mount.
+     * @default false
+     */
+    autoOpen?: boolean;
+    /**
+     * The close event handler.
+     * @default undefined
+     */
+    onClose?: () => void;
+}
+/**
+ * The search input for the page header.
+ */
+declare const PageHeaderInputSearch: import("react").ForwardRefExoticComponent<PageHeaderInputSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export default PageHeaderInputSearch;
+//# sourceMappingURL=index.d.ts.map

package/dist/PageHeaderInputSearch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageHeaderInputSearch/index.tsx"],"names":[],"mappings":"AAOA,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGpE,OAAsB,EACpB,KAAK,2BAA2B,EACjC,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAwCD;;GAEG;AACH,QAAA,MAAM,qBAAqB,yHAmE1B,CAAC;AAIF,eAAe,qBAAqB,CAAC"}

package/dist/PageHeaderInputSearch/index.js

@@ -0,0 +1,93 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Close, Search } from '@os-design/icons';
+import { ThemeOverrider, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useClosable } from '@os-design/utils';
+import { forwardRef, useContext, useState } from 'react';
+import Button from '../Button';
+import InputSearch from '../InputSearch';
+import LayoutContext from '../Layout/LayoutContext';
+import { PageHeaderContainer } from '../PageHeader';
+import defaultLocale from './utils/defaultLocale';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const fadeIn = keyframes`
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+`;
+const fadeOut = keyframes`
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+`;
+const visibleStyles = p => p.visible && css`
+    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+const invisibleStyles = p => !p.visible && css`
+    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+const Container = styled(PageHeaderContainer, omitEmotionProps('visible'))`
+  z-index: 102; // After PageHeaderContainer
+  ${visibleStyles};
+  ${invisibleStyles};
+`;
+const CloseButton = styled(Button)`
+  margin-left: ${p => p.theme.pageHeaderAddonPaddingHorizontal}em;
+`;
+
+/**
+ * The search input for the page header.
+ */
+const PageHeaderInputSearch = /*#__PURE__*/forwardRef(({
+  locale = defaultLocale,
+  autoOpen = false,
+  onClose = () => {},
+  loading = false,
+  ...rest
+}, ref) => {
+  const [visible, setVisible] = useState(autoOpen);
+  const {
+    theme
+  } = useTheme();
+  const mounted = useClosable(visible, theme.transitionDelay);
+  const {
+    hasNavigation
+  } = useContext(LayoutContext);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      type: "ghost",
+      wide: "never",
+      loading: loading,
+      onClick: () => setVisible(true),
+      "aria-label": locale.searchLabel,
+      children: /*#__PURE__*/_jsx(Search, {})
+    }), mounted && /*#__PURE__*/_jsx(ThemeOverrider, {
+      overrides: t => ({
+        buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal
+      }),
+      children: /*#__PURE__*/_jsxs(Container, {
+        visible: visible,
+        rightIsGhostButton: true,
+        hasNavigationIndent: hasNavigation,
+        children: [/*#__PURE__*/_jsx(InputSearch
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        , {
+          autoFocus: true,
+          locale: locale,
+          loading: loading,
+          ...rest,
+          ref: ref
+        }), /*#__PURE__*/_jsx(CloseButton, {
+          type: "ghost",
+          wide: "never",
+          onClick: () => {
+            setVisible(false);
+            onClose();
+          },
+          "aria-label": locale.closeLabel,
+          children: /*#__PURE__*/_jsx(Close, {})
+        })]
+      })
+    })]
+  });
+});
+PageHeaderInputSearch.displayName = 'PageHeaderInputSearch';
+export default PageHeaderInputSearch;

package/dist/PageHeaderInputSearch/utils/defaultLocale.d.ts

@@ -0,0 +1,8 @@
+import { type InputSearchLocale } from '../../InputSearch/utils/defaultLocale';
+export interface PageHeaderInputSearchLocale extends InputSearchLocale {
+    searchLabel: string;
+    closeLabel: string;
+}
+declare const defaultLocale: PageHeaderInputSearchLocale;
+export default defaultLocale;
+//# sourceMappingURL=defaultLocale.d.ts.map

package/dist/PageHeaderInputSearch/utils/defaultLocale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultLocale.d.ts","sourceRoot":"","sources":["../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"names":[],"mappings":"AAAA,OAAiC,EAC/B,KAAK,iBAAiB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,2BAA4B,SAAQ,iBAAiB;IACpE,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,2BAIpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/PageHeaderInputSearch/utils/defaultLocale.js

@@ -0,0 +1,7 @@
+import inputSearchDefaultLocale from '../../InputSearch/utils/defaultLocale';
+const defaultLocale = {
+  ...inputSearchDefaultLocale,
+  searchLabel: 'Search',
+  closeLabel: 'Close search'
+};
+export default defaultLocale;

package/dist/PageHeaderSkeleton/index.d.ts

@@ -0,0 +1,10 @@
+import type { WithSize } from '@os-design/styles';
+import { type SkeletonProps } from '../Skeleton';
+export type PageHeaderSkeletonProps = SkeletonProps & WithSize;
+/**
+ * Provides a page header placeholder while a user waits for
+ * the content to load.
+ */
+declare const PageHeaderSkeleton: import("react").ForwardRefExoticComponent<SkeletonProps & WithSize & import("react").RefAttributes<HTMLDivElement>>;
+export default PageHeaderSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/PageHeaderSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageHeaderSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIlD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG,QAAQ,CAAC;AAE/D;;;GAGG;AACH,QAAA,MAAM,kBAAkB,qHAcvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/dist/PageHeaderSkeleton/index.js

@@ -0,0 +1,27 @@
+import { forwardRef, useContext } from 'react';
+import LayoutContext from '../Layout/LayoutContext';
+import { PageHeaderContainer } from '../PageHeader';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Provides a page header placeholder while a user waits for
+ * the content to load.
+ */
+const PageHeaderSkeleton = /*#__PURE__*/forwardRef(({
+  width = '30%',
+  ...rest
+}, ref) => {
+  const {
+    hasNavigation
+  } = useContext(LayoutContext);
+  return /*#__PURE__*/_jsx(PageHeaderContainer, {
+    hasNavigationIndent: hasNavigation,
+    ...rest,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: width
+    })
+  });
+});
+PageHeaderSkeleton.displayName = 'PageHeaderSkeleton';
+export default PageHeaderSkeleton;

package/dist/ParagraphSkeleton/index.d.ts

@@ -0,0 +1,24 @@
+import { type SkeletonProps } from '../Skeleton';
+export interface ParagraphSkeletonProps extends SkeletonProps {
+    /**
+     * The number of rows.
+     * @default 4
+     */
+    rows?: number;
+    /**
+     * The width of the last row.
+     * @default 70%
+     */
+    width?: string;
+    /**
+     * Whether the paragraph has a bottom margin.
+     * @default false
+     */
+    hasMargin?: boolean;
+}
+/**
+ * Provides a paragraph placeholder while a user waits for the content to load.
+ */
+declare const ParagraphSkeleton: import("react").ForwardRefExoticComponent<ParagraphSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ParagraphSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/ParagraphSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ParagraphSkeleton/index.tsx"],"names":[],"mappings":"AAIA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmBD;;GAEG;AACH,QAAA,MAAM,iBAAiB,mHAatB,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/dist/ParagraphSkeleton/index.js

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+const hasMarginStyles = p => p.hasMargin && css`
+    margin-bottom: ${p.theme.paragraphMarginBottom + (p.theme.lineHeight - 1)}em;
+  `;
+const Container = styled('div', omitEmotionProps('hasMargin'))`
+  & > *:not(:last-of-type) {
+    margin-bottom: ${p => p.theme.lineHeight - 1}em;
+  }
+  ${hasMarginStyles};
+`;
+let key = 0;
+
+/**
+ * Provides a paragraph placeholder while a user waits for the content to load.
+ */
+const ParagraphSkeleton = /*#__PURE__*/forwardRef(({
+  rows = 4,
+  width = '70%',
+  hasMargin = false,
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Container, {
+  hasMargin: hasMargin,
+  ...rest,
+  ref: ref,
+  children: Array(rows).fill(0).map((_, index) => {
+    key += 1;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      width: index < rows - 1 ? '100%' : width
+    }, key);
+  })
+}));
+ParagraphSkeleton.displayName = 'ParagraphSkeleton';
+export default ParagraphSkeleton;

package/dist/Popover/index.d.ts

@@ -0,0 +1,42 @@
+import { type WithSize } from '@os-design/styles';
+import { type RefObject } from 'react';
+import { type Placement, type Rect } from './utils/usePopoverPosition';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface PopoverProps extends JsxDivProps, WithSize {
+    /**
+     * The element next to which the popover appears.
+     * @default undefined
+     */
+    trigger?: RefObject<Element> | Rect;
+    /**
+     * On which side of the element the popover will appear.
+     * @default top
+     */
+    placement?: Placement;
+    /**
+     * The gap between the element and the popover in em.
+     * @default 0.2
+     */
+    gap?: number;
+    /**
+     * Whether the popover to flip if it does not fit in the window.
+     * @default true
+     */
+    flip?: boolean;
+    /**
+     * Whether the popover is visible.
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * The close event handler.
+     * @default undefined
+     */
+    onClose?: () => void;
+}
+/**
+ * The pop-up window located next to the element.
+ */
+declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Popover;
+//# sourceMappingURL=index.d.ts.map

package/dist/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAW9D,OAAO,EAGL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAA2B,EACzB,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,4BAA4B,CAAC;AAEpC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,QAAQ;IACzD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDD;;GAEG;AACH,QAAA,MAAM,OAAO,yGAwHZ,CAAC;AAIF,eAAe,OAAO,CAAC"}