@os-design/core 1.0.254 → 1.0.256

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAC1D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD;;GAEG;AACH,QAAA,MAAM,QAAQ,0GAmDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/FormItem/index.js

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useContext, useMemo } from 'react';
+import FormConfigContext from '../Form/FormConfigContext';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('size'))`
+  ${sizeStyles};
+`;
+const Label = styled.label`
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 0.4em;
+  font-size: ${p => p.theme.sizes.small}em;
+  color: ${p => clr(p.theme.colorText)};
+`;
+const Optional = styled.span`
+  color: ${p => clr(p.theme.formItemColorOptional)};
+  margin-left: 0.3em;
+`;
+const Help = styled.div`
+  margin-top: 0.1em;
+  font-size: ${p => p.theme.sizes.small}em;
+  color: ${p => clr(p.theme.formItemColorHelp)};
+`;
+const Error = styled(Help)`
+  color: ${p => clr(p.theme.formItemColorError)};
+`;
+
+/**
+ * The wrapper of the field.
+ */
+const FormItem = /*#__PURE__*/forwardRef(({
+  label,
+  help,
+  error,
+  optional = false,
+  id,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    optionalText
+  } = useContext(FormConfigContext);
+  const containerId = useMemo(() => id || Math.random().toString(36).slice(2, 11), [id]);
+  const fieldId = useMemo(() => `field-${containerId}`, [containerId]);
+  const helpId = useMemo(() => `help-${containerId}`, [containerId]);
+  const ariaInvalid = useMemo(() => !!error, [error]);
+  const ariaDescribedBy = useMemo(() => help ? helpId : undefined, [help, helpId]);
+  return /*#__PURE__*/_jsxs(Container, {
+    role: "group",
+    id: id,
+    ...rest,
+    ref: ref,
+    children: [label && /*#__PURE__*/_jsxs(Label, {
+      htmlFor: fieldId,
+      children: [label, optional && /*#__PURE__*/_jsxs(Optional, {
+        children: ["(", optionalText, ")"]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      id: fieldId,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": ariaDescribedBy,
+      children: /*#__PURE__*/_jsx(ThemeOverrider, {
+        overrides: theme => ({
+          inputColorBorder: error ? theme.formItemColorError : theme.inputColorBorder
+        }),
+        children: children
+      })
+    }), error ? /*#__PURE__*/_jsx(Error, {
+      "aria-live": "polite",
+      id: helpId,
+      children: error
+    }) : help && /*#__PURE__*/_jsx(Help, {
+      id: helpId,
+      children: help
+    })]
+  });
+});
+FormItem.displayName = 'FormItem';
+export default FormItem;

package/dist/Gallery/Status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../src/Gallery/Status.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB;AAqCD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAajC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Gallery/Status.js

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('height'))`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: ${p => p.height}px;
+`;
+const Block = styled('div', omitEmotionProps('count', 'index', 'current'))`
+  position: absolute;
+  left: ${p => 100 / p.count * p.index}%;
+  width: ${p => p.index < p.count - 1 ? `calc(${100 / p.count}% - 2px)` : `${100 / p.count}%`};
+  height: 100%;
+
+  background-color: ${p => p.current ? clr(p.theme.galleryStatusColorBgCurrent) : clr(p.theme.galleryStatusColorBg)};
+  backdrop-filter: blur(0.2em);
+`;
+const Status = ({
+  count,
+  current,
+  height
+}) => /*#__PURE__*/_jsx(Container, {
+  height: height,
+  children: Array(count).fill(0).map((_, index) => /*#__PURE__*/_jsx(Block, {
+    count: count,
+    index: index,
+    current: index === current
+  }, index))
+});
+export default Status;

package/dist/Gallery/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type ImageProps } from '../Image';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface GalleryProps extends JsxDivProps {
+    /**
+     * The image urls.
+     */
+    urls: string[] | ReadonlyArray<string>;
+    /**
+     * The aspect ratio of the gallery.
+     * E.g. [16,9] – 16:9.
+     */
+    aspectRatio?: [number, number];
+    /**
+     * The props of the image component.
+     */
+    imageProps?: Omit<ImageProps, 'url'>;
+    /**
+     * Whether the navigation buttons is shown.
+     */
+    hideArrows?: boolean;
+    /**
+     * The children that can be displayed on top of the image.
+     * E.g. tags.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The image gallery. Change the cursor/touch position to change images.
+ * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
+ */
+declare const Gallery: React.ForwardRefExoticComponent<GalleryProps & React.RefAttributes<HTMLDivElement>>;
+export default Gallery;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Gallery/index.tsx"],"names":[],"mappings":"AASA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AA6ClD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C;;OAEG;IACH,IAAI,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAKD;;;GAGG;AACH,QAAA,MAAM,OAAO,qFA6LZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/Gallery/index.js

@@ -0,0 +1,193 @@
+import styled from '@emotion/styled';
+import { Left, Right } from '@os-design/icons';
+import { ThemeOverrider, clr } from '@os-design/theming';
+import { isTouchDevice, omitEmotionProps, useForwardedRef, useSize } from '@os-design/utils';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button from '../Button';
+import Image from '../Image';
+import GalleryStatus from './Status';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('heightPercent'))`
+  position: relative;
+  padding-bottom: ${p => p.heightPercent}%;
+
+  display: flex;
+  justify-content: center;
+
+  background-color: ${p => clr(p.theme.galleryColorBg)};
+  border-radius: ${p => p.theme.borderRadius}em;
+  overflow: hidden;
+`;
+const StyledImage = styled(Image)`
+  position: absolute;
+  width: auto;
+  height: 100%;
+  border-radius: 0;
+`;
+const NavButton = styled(Button)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+
+  background-color: hsla(0, 0%, 0%, 0.5);
+  backdrop-filter: blur(0.2em);
+`;
+const LeftButton = styled(NavButton)`
+  left: 0.2em;
+`;
+const RightButton = styled(NavButton)`
+  right: 0.2em;
+`;
+const MIN_DIST_PX = 30;
+const MAX_ANGLE = 30;
+
+/**
+ * The image gallery. Change the cursor/touch position to change images.
+ * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
+ */
+const Gallery = /*#__PURE__*/forwardRef(({
+  urls,
+  aspectRatio = [16, 9],
+  imageProps = {},
+  hideArrows = false,
+  children,
+  ...rest
+}, ref) => {
+  const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);
+  const [imageUrl, setImageUrl] = useState(undefined);
+  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);
+  const heightPercent = useMemo(() => Math.round(aspectRatio[1] / aspectRatio[0] * 1000000) / 10000, [aspectRatio]);
+  const imageIndexRef = useRef(imageIndex);
+  useEffect(() => {
+    imageIndexRef.current = imageIndex;
+  }, [imageIndex]);
+
+  // Update the image if the index was changed
+  useEffect(() => {
+    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
+  }, [imageIndex, urls]);
+  const startTouchPosRef = useRef(null);
+  const size = useSize(innerContainerRef);
+  const sizeRef = useRef(size);
+  useEffect(() => {
+    sizeRef.current = size;
+  }, [size]);
+  const statusHeight = useMemo(() => Math.round(size.height / 70), [size.height]);
+  const updateGalleryImage = useCallback(clientX => {
+    if (!innerContainerRef.current) return;
+    const {
+      x
+    } = innerContainerRef.current.getBoundingClientRect();
+    const widthPerImage = sizeRef.current.width / urls.length;
+    const xPos = clientX - x;
+    if (xPos < 0) return;
+    const nextIndex = Math.floor(xPos / widthPerImage);
+    if (imageIndexRef.current !== nextIndex) {
+      setImageIndex(nextIndex);
+    }
+  }, [innerContainerRef, urls.length]);
+  const prev = useCallback(() => {
+    const index = imageIndexRef.current;
+    if (index === null) return;
+    setImageIndex(index > 0 ? index - 1 : urls.length - 1);
+  }, [urls.length]);
+  const next = useCallback(() => {
+    const index = imageIndexRef.current;
+    if (index === null) return;
+    setImageIndex(index < urls.length - 1 ? index + 1 : 0);
+  }, [urls.length]);
+  const left = useCallback(e => {
+    prev();
+    e.preventDefault();
+  }, [prev]);
+  const right = useCallback(e => {
+    next();
+    e.preventDefault();
+  }, [next]);
+  const mouseMoveHandler = useCallback(e => updateGalleryImage(e.clientX), [updateGalleryImage]);
+  const touchStartHandler = useCallback(e => {
+    const {
+      clientX,
+      clientY
+    } = e.touches[0];
+    startTouchPosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+  }, []);
+  const touchMoveHandler = useCallback(e => {
+    if (!startTouchPosRef.current) return;
+    const {
+      x,
+      y
+    } = startTouchPosRef.current;
+    const {
+      clientX,
+      clientY
+    } = e.touches[0];
+    const diffX = Math.abs(x - clientX);
+    const diffY = Math.abs(y - clientY);
+    const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+    if (diff < MIN_DIST_PX) return;
+    const angle = Math.atan(diffY / diffX) * 180 / Math.PI;
+    if (angle > MAX_ANGLE) {
+      startTouchPosRef.current = null;
+      return;
+    }
+    if (x < clientX) prev();else next();
+    startTouchPosRef.current = null;
+  }, [next, prev]);
+  const touchEndHandler = useCallback(() => {
+    startTouchPosRef.current = null;
+  }, []);
+  const handlers = useMemo(() => {
+    if (isTouchDevice()) {
+      return {
+        onTouchStart: touchStartHandler,
+        onTouchMove: touchMoveHandler,
+        onTouchEnd: touchEndHandler
+      };
+    }
+    return {
+      onMouseMove: mouseMoveHandler
+    };
+  }, [mouseMoveHandler, touchEndHandler, touchMoveHandler, touchStartHandler]);
+  return /*#__PURE__*/_jsx(ThemeOverrider, {
+    activeTheme: "dark",
+    children: /*#__PURE__*/_jsxs(Container, {
+      heightPercent: heightPercent,
+      ...handlers,
+      ...rest,
+      ref: mergedContainerRef,
+      children: [/*#__PURE__*/_jsx(StyledImage, {
+        url: imageUrl,
+        ...imageProps
+      }), urls.length > 1 && imageIndex !== null && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(GalleryStatus, {
+          count: urls.length,
+          current: imageIndex,
+          height: statusHeight
+        }), isTouchDevice() && !hideArrows && /*#__PURE__*/_jsxs(ThemeOverrider, {
+          overrides: {
+            colorPrimary: [0, 0, 100]
+          },
+          children: [/*#__PURE__*/_jsx(LeftButton, {
+            type: "ghost",
+            wide: "never",
+            size: "small",
+            onClick: left,
+            children: /*#__PURE__*/_jsx(Left, {})
+          }), /*#__PURE__*/_jsx(RightButton, {
+            type: "ghost",
+            wide: "never",
+            size: "small",
+            onClick: right,
+            children: /*#__PURE__*/_jsx(Right, {})
+          })]
+        })]
+      }), children]
+    })
+  });
+});
+Gallery.displayName = 'Gallery';
+export default Gallery;

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GlobalStyles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAKzB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/GlobalStyles/index.js

@@ -0,0 +1,14 @@
+import { Global } from '@emotion/react';
+import { useVh } from '@os-design/utils';
+import React from 'react';
+import resetStyles from './resetStyles';
+import typographyStyles from './typographyStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GlobalStyles = () => {
+  useVh();
+  return /*#__PURE__*/_jsx(Global, {
+    styles: theme => [resetStyles(theme), typographyStyles(theme)]
+  });
+};
+GlobalStyles.displayName = 'GlobalStyles';
+export default GlobalStyles;

package/dist/GlobalStyles/resetStyles.d.ts

@@ -0,0 +1,5 @@
+import type { SerializedStyles } from '@emotion/serialize';
+import type { Theme } from '@os-design/theming';
+declare const resetStyles: (theme: Theme) => SerializedStyles;
+export default resetStyles;
+//# sourceMappingURL=resetStyles.d.ts.map

package/dist/GlobalStyles/resetStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resetStyles.d.ts","sourceRoot":"","sources":["../../src/GlobalStyles/resetStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,WAAW,UAAW,KAAK,KAAG,gBAUnC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/GlobalStyles/resetStyles.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+const resetStyles = theme => css`
+  body {
+    margin: 0;
+  }
+
+  p,
+  figure,
+  pre {
+    margin: 0 0 ${theme.paragraphMarginBottom}em;
+  }
+`;
+export default resetStyles;

package/dist/GlobalStyles/typographyStyles.d.ts

@@ -0,0 +1,5 @@
+import type { SerializedStyles } from '@emotion/serialize';
+import { type Theme } from '@os-design/theming';
+declare const typographyStyles: (theme: Theme) => SerializedStyles;
+export default typographyStyles;
+//# sourceMappingURL=typographyStyles.d.ts.map

package/dist/GlobalStyles/typographyStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyStyles.d.ts","sourceRoot":"","sources":["../../src/GlobalStyles/typographyStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,KAAK,KAAK,EAAO,MAAM,oBAAoB,CAAC;AAmBrD,QAAA,MAAM,gBAAgB,UAAW,KAAK,KAAG,gBAqDxC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/GlobalStyles/typographyStyles.js

@@ -0,0 +1,75 @@
+import { css } from '@emotion/react';
+import { m } from '@os-design/media';
+import { clr } from '@os-design/theming';
+import fp from 'facepaint';
+const headingsFontSizeStyles = fontSize => {
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+  return fp(headings, {
+    literal: true
+  })({
+    fontSize: fontSize.map(item => `${item}em`)
+  });
+};
+const headingsMarginTopStyles = marginTop => {
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(h => `${h}:not(:first-of-type)`);
+  return fp(headings, {
+    literal: true
+  })({
+    marginTop: marginTop.map(item => `${item}em`)
+  });
+};
+const typographyStyles = theme => css`
+  html,
+  button,
+  input,
+  textarea,
+  select {
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+  }
+
+  html,
+  input {
+    color: ${clr(theme.colorText)};
+  }
+
+  html {
+    line-height: ${theme.lineHeight};
+
+    // Sets the font smoothing
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+
+    // Sets the base font size and increases it on large screens
+    ${fp([m.min.md, m.min.xxl])({
+  fontSize: theme.fontSize.map(s => `${s}px`)
+})};
+  }
+
+  body {
+    background-color: ${clr(theme.colorBg)};
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 0 0 ${theme.headingsMarginBottom}em;
+  }
+
+  // Sets the margin top of headings
+  ${headingsMarginTopStyles(theme.headingsMarginTop)};
+
+  // Sets the base font size of headings
+  ${headingsFontSizeStyles(theme.headingsFontSize)};
+
+  // Sets the font size of headings on large screens
+  ${m.min.md} {
+    ${headingsFontSizeStyles(theme.headingsFontSizeMd)}
+  }
+`;
+export default typographyStyles;

package/dist/HeaderSkeleton/index.d.ts

@@ -0,0 +1,19 @@
+import { type SkeletonProps } from '../Skeleton';
+export interface HeaderSkeletonProps extends SkeletonProps {
+    /**
+     * The header type.
+     * @default 1
+     */
+    type?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Whether the header has top and bottom margins.
+     * @default false
+     */
+    hasMargin?: boolean;
+}
+/**
+ * Provides a header placeholder while a user waits for the content to load.
+ */
+declare const HeaderSkeleton: import("react").ForwardRefExoticComponent<HeaderSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default HeaderSkeleton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HeaderSkeleton/index.tsx"],"names":[],"mappings":"AAKA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAyBD;;GAEG;AACH,QAAA,MAAM,cAAc,gHAUnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/HeaderSkeleton/index.js

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+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: ${p.theme.headingsMarginTop[p.type - 1]}em 0
+      ${p.theme.headingsMarginBottom}em;
+  `;
+const MULTIPLIER = 0.9;
+const StyledHeaderSkeleton = styled(Skeleton, omitEmotionProps('type', 'hasMargin'))`
+  font-size: ${p => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;
+  ${m.min.md} {
+    font-size: ${p => p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER}em;
+  }
+  ${hasMarginStyles};
+`;
+
+/**
+ * Provides a header placeholder while a user waits for the content to load.
+ */
+const HeaderSkeleton = /*#__PURE__*/forwardRef(({
+  type = 1,
+  hasMargin = false,
+  width = '100%',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(StyledHeaderSkeleton, {
+  type: type,
+  hasMargin: hasMargin,
+  width: width,
+  ...rest,
+  ref: ref
+}));
+HeaderSkeleton.displayName = 'HeaderSkeleton';
+export default HeaderSkeleton;

package/dist/Image/index.d.ts

@@ -0,0 +1,35 @@
+type JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;
+export interface ImageProps extends JsxImgProps {
+    /**
+     * The image URL.
+     * @default undefined
+     */
+    url?: string;
+    /**
+     * All available sizes of the image.
+     * @default [72, 192, 512, 1024, 2560]
+     */
+    sizes?: number[];
+    /**
+     * The image size if the browser does not support lazy loading.
+     * @default 72
+     */
+    defaultSize?: number;
+    /**
+     * Whether the image is cropped.
+     * @default false
+     */
+    cropped?: boolean;
+    /**
+     * Sets object-fit: cover.
+     * @default false
+     */
+    cover?: boolean;
+}
+/**
+ * The image with lazy loading. Required lazysizes.
+ * Should be loaded by @os-team/image-storage.
+ */
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Image/index.tsx"],"names":[],"mappings":"AAQA,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC;AACvE,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAiBD;;;GAGG;AACH,QAAA,MAAM,KAAK,yGA0CV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/Image/index.js

@@ -0,0 +1,52 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';
+const coverStyles = p => p.cover && css`
+    height: 100%;
+    object-fit: cover;
+  `;
+const StyledImage = styled('img', omitEmotionProps('cover'))`
+  display: block; // To remove the indent under the image
+  width: 100%;
+  border-radius: ${p => p.theme.borderRadius}em;
+  ${coverStyles};
+`;
+
+/**
+ * The image with lazy loading. Required lazysizes.
+ * Should be loaded by @os-team/image-storage.
+ */
+const Image = /*#__PURE__*/forwardRef(({
+  url,
+  sizes = [72, 192, 512, 1024, 2560],
+  defaultSize = 72,
+  cropped = false,
+  cover = false,
+  className,
+  ...rest
+}, ref) => {
+  const getUrl = useCallback(size => `${url}-${size}${cropped ? '-c' : ''}`, [url, cropped]);
+  if (!url) {
+    return /*#__PURE__*/_jsx(StyledImage, {
+      src: EMPTY_IMAGE,
+      className: className,
+      ...rest,
+      ref: ref
+    });
+  }
+  return /*#__PURE__*/_jsx(StyledImage, {
+    src: getUrl(defaultSize),
+    srcSet: EMPTY_IMAGE,
+    "data-sizes": "auto",
+    "data-srcset": sizes.map(size => `${getUrl(size)} ${size}w`).join(', '),
+    cover: cover,
+    className: [className, 'lazyload'].filter(i => i).join(' '),
+    ...rest,
+    ref: ref
+  });
+});
+Image.displayName = 'Image';
+export default Image;

package/dist/ImageSkeleton/index.d.ts

@@ -0,0 +1,8 @@
+import { type SkeletonProps } from '../Skeleton';
+export type ImageSkeletonProps = Omit<SkeletonProps, 'width'>;
+/**
+ * Provides an image placeholder while a user waits for the content to load.
+ */
+declare const ImageSkeleton: import("react").ForwardRefExoticComponent<ImageSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ImageSkeleton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ImageSkeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;AAM9D;;GAEG;AACH,QAAA,MAAM,aAAa,+GAElB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/ImageSkeleton/index.js

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledImageSkeleton = styled(Skeleton)`
+  height: 100%;
+`;
+
+/**
+ * Provides an image placeholder while a user waits for the content to load.
+ */
+const ImageSkeleton = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledImageSkeleton, {
+  width: "100%",
+  ...props,
+  ref: ref
+}));
+ImageSkeleton.displayName = 'ImageSkeleton';
+export default ImageSkeleton;