@os-design/core 1.0.255 → 1.0.257

package/dist/esm/FormItem/index.js

@@ -1,75 +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 { sizeStyles } from '@os-design/styles';
-import { clr, ThemeOverrider } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useContext, useMemo } from 'react';
-import FormConfigContext from '../Form/FormConfigContext';
-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__*/React.createElement(Container, _extends({
-    role: "group",
-    id: id
-  }, rest, {
-    ref: ref
-  }), label && /*#__PURE__*/React.createElement(Label, {
-    htmlFor: fieldId
-  }, label, optional && /*#__PURE__*/React.createElement(Optional, null, "(", optionalText, ")")), /*#__PURE__*/React.createElement("div", {
-    id: fieldId,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy
-  }, /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: theme => ({
-      inputColorBorder: error ? theme.formItemColorError : theme.inputColorBorder
-    })
-  }, children)), error ? /*#__PURE__*/React.createElement(Error, {
-    "aria-live": "polite",
-    id: helpId
-  }, error) : help && /*#__PURE__*/React.createElement(Help, {
-    id: helpId
-  }, help));
-});
-FormItem.displayName = 'FormItem';
-export default FormItem;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","ThemeOverrider","omitEmotionProps","React","forwardRef","useContext","useMemo","FormConfigContext","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","Help","div","formItemColorHelp","Error","formItemColorError","FormItem","help","error","optional","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","ariaInvalid","ariaDescribedBy","undefined","createElement","_extends","role","htmlFor","overrides","inputColorBorder","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext, useMemo } from 'react';\nimport FormConfigContext from '../Form/FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * The error message located at the bottom of the field.\n   * If specified, the field has a red border.\n   * @default undefined\n   */\n  error?: string | null;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst Help = styled.div`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n`;\n\nconst Error = styled(Help)`\n  color: ${(p) => clr(p.theme.formItemColorError)};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  ({ label, help, error, optional = false, id, children, ...rest }, ref) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n    const ariaInvalid = useMemo(() => !!error, [error]);\n    const ariaDescribedBy = useMemo(\n      () => (help ? helpId : undefined),\n      [help, helpId]\n    );\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n\n        <div\n          id={fieldId}\n          aria-invalid={ariaInvalid}\n          aria-describedby={ariaDescribedBy}\n        >\n          <ThemeOverrider\n            overrides={(theme) => ({\n              inputColorBorder: error\n                ? theme.formItemColorError\n                : theme.inputColorBorder,\n            })}\n          >\n            {children}\n          </ThemeOverrider>\n        </div>\n\n        {error ? (\n          <Error aria-live='polite' id={helpId}>\n            {error}\n          </Error>\n        ) : (\n          help && <Help id={helpId}>{help}</Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,EAAEC,cAAc,QAAQ,oBAAoB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC9D,OAAOC,iBAAiB,MAAM,2BAA2B;AA2BzD,MAAMC,SAAS,GAAGV,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAW;AACnE,IAAIH,UAAU;AACd,CAAC;AAED,MAAMU,KAAK,GAAGX,MAAM,CAACY,KAAK;AAC1B;AACA;AACA;AACA,eAAgBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAK;AACzC,WAAYH,CAAC,IAAKX,GAAG,CAACW,CAAC,CAACC,KAAK,CAACG,SAAS,CAAC;AACxC,CAAC;AAED,MAAMC,QAAQ,GAAGlB,MAAM,CAACmB,IAAI;AAC5B,WAAYN,CAAC,IAAKX,GAAG,CAACW,CAAC,CAACC,KAAK,CAACM,qBAAqB,CAAC;AACpD;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrB,MAAM,CAACsB,GAAG;AACvB;AACA,eAAgBT,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAK;AACzC,WAAYH,CAAC,IAAKX,GAAG,CAACW,CAAC,CAACC,KAAK,CAACS,iBAAiB,CAAC;AAChD,CAAC;AAED,MAAMC,KAAK,GAAGxB,MAAM,CAACqB,IAAI,CAAC;AAC1B,WAAYR,CAAC,IAAKX,GAAG,CAACW,CAAC,CAACC,KAAK,CAACW,kBAAkB,CAAC;AACjD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGpB,UAAU,CACzB,CAAC;EAAEM,KAAK;EAAEe,IAAI;EAAEC,KAAK;EAAEC,QAAQ,GAAG,KAAK;EAAEC,EAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC;EAAa,CAAC,GAAG3B,UAAU,CAACE,iBAAiB,CAAC;EAEtD,MAAM0B,WAAW,GAAG3B,OAAO,CACzB,MAAMsB,EAAE,IAAIM,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EACnD,CAACT,EAAE,CACL,CAAC;EACD,MAAMU,OAAO,GAAGhC,OAAO,CAAC,MAAM,SAAS2B,WAAW,EAAE,EAAE,CAACA,WAAW,CAAC,CAAC;EACpE,MAAMM,MAAM,GAAGjC,OAAO,CAAC,MAAM,QAAQ2B,WAAW,EAAE,EAAE,CAACA,WAAW,CAAC,CAAC;EAClE,MAAMO,WAAW,GAAGlC,OAAO,CAAC,MAAM,CAAC,CAACoB,KAAK,EAAE,CAACA,KAAK,CAAC,CAAC;EACnD,MAAMe,eAAe,GAAGnC,OAAO,CAC7B,MAAOmB,IAAI,GAAGc,MAAM,GAAGG,SAAU,EACjC,CAACjB,IAAI,EAAEc,MAAM,CACf,CAAC;EAED,oBACEpC,KAAA,CAAAwC,aAAA,CAACnC,SAAS,EAAAoC,QAAA;IAACC,IAAI,EAAC,OAAO;IAACjB,EAAE,EAAEA;EAAG,GAAKE,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAChDrB,KAAK,iBACJP,KAAA,CAAAwC,aAAA,CAAClC,KAAK;IAACqC,OAAO,EAAER;EAAQ,GACrB5B,KAAK,EACLiB,QAAQ,iBAAIxB,KAAA,CAAAwC,aAAA,CAAC3B,QAAQ,QAAC,GAAC,EAACgB,YAAY,EAAC,GAAW,CAC5C,CACR,eAED7B,KAAA,CAAAwC,aAAA;IACEf,EAAE,EAAEU,OAAQ;IACZ,gBAAcE,WAAY;IAC1B,oBAAkBC;EAAgB,gBAElCtC,KAAA,CAAAwC,aAAA,CAAC1C,cAAc;IACb8C,SAAS,EAAGnC,KAAK,KAAM;MACrBoC,gBAAgB,EAAEtB,KAAK,GACnBd,KAAK,CAACW,kBAAkB,GACxBX,KAAK,CAACoC;IACZ,CAAC;EAAE,GAEFnB,QACa,CACb,CAAC,EAELH,KAAK,gBACJvB,KAAA,CAAAwC,aAAA,CAACrB,KAAK;IAAC,aAAU,QAAQ;IAACM,EAAE,EAAEW;EAAO,GAClCb,KACI,CAAC,GAERD,IAAI,iBAAItB,KAAA,CAAAwC,aAAA,CAACxB,IAAI;IAACS,EAAE,EAAEW;EAAO,GAAEd,IAAW,CAE/B,CAAC;AAEhB,CACF,CAAC;AAEDD,QAAQ,CAACyB,WAAW,GAAG,UAAU;AAEjC,eAAezB,QAAQ","ignoreList":[]}

package/dist/esm/Gallery/Status.js

@@ -1,35 +0,0 @@
-import styled from '@emotion/styled';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps } from '@os-design/utils';
-import React from 'react';
-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__*/React.createElement(Container, {
-  height: height
-}, Array(count).fill(0).map((_, index) => /*#__PURE__*/React.createElement(Block, {
-  key: index // eslint-disable-line react/no-array-index-key
-  ,
-  count: count,
-  index: index,
-  current: index === current
-})));
-export default Status;
-//# sourceMappingURL=Status.js.map

package/dist/esm/Gallery/Status.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Status.js","names":["styled","clr","omitEmotionProps","React","Container","p","height","Block","count","index","current","theme","galleryStatusColorBgCurrent","galleryStatusColorBg","Status","createElement","Array","fill","map","_","key"],"sources":["../../../src/Gallery/Status.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\n\ninterface StatusProps {\n  count: number;\n  current: number;\n  height: number;\n}\n\ninterface ContainerProps {\n  height: number;\n}\nconst Container = styled('div', omitEmotionProps('height'))<ContainerProps>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: ${(p) => p.height}px;\n`;\n\ninterface BlockProps {\n  count: number;\n  index: number;\n  current: boolean;\n}\nconst Block = styled(\n  'div',\n  omitEmotionProps('count', 'index', 'current')\n)<BlockProps>`\n  position: absolute;\n  left: ${(p) => (100 / p.count) * p.index}%;\n  width: ${(p) =>\n    p.index < p.count - 1\n      ? `calc(${100 / p.count}% - 2px)`\n      : `${100 / p.count}%`};\n  height: 100%;\n\n  background-color: ${(p) =>\n    p.current\n      ? clr(p.theme.galleryStatusColorBgCurrent)\n      : clr(p.theme.galleryStatusColorBg)};\n  backdrop-filter: blur(0.2em);\n`;\n\nconst Status: React.FC<StatusProps> = ({ count, current, height }) => (\n  <Container height={height}>\n    {Array(count)\n      .fill(0)\n      .map((_, index) => (\n        <Block\n          key={index} // eslint-disable-line react/no-array-index-key\n          count={count}\n          index={index}\n          current={index === current}\n        />\n      ))}\n  </Container>\n);\n\nexport default Status;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAWzB,MAAMC,SAAS,GAAGJ,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,QAAQ,CAAC,CAAiB;AAC3E;AACA;AACA;AACA;AACA,YAAaG,CAAC,IAAKA,CAAC,CAACC,MAAM;AAC3B,CAAC;AAOD,MAAMC,KAAK,GAAGP,MAAM,CAClB,KAAK,EACLE,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAC9C,CAAa;AACb;AACA,UAAWG,CAAC,IAAM,GAAG,GAAGA,CAAC,CAACG,KAAK,GAAIH,CAAC,CAACI,KAAK;AAC1C,WAAYJ,CAAC,IACTA,CAAC,CAACI,KAAK,GAAGJ,CAAC,CAACG,KAAK,GAAG,CAAC,GACjB,QAAQ,GAAG,GAAGH,CAAC,CAACG,KAAK,UAAU,GAC/B,GAAG,GAAG,GAAGH,CAAC,CAACG,KAAK,GAAG;AAC3B;AACA;AACA,sBAAuBH,CAAC,IACpBA,CAAC,CAACK,OAAO,GACLT,GAAG,CAACI,CAAC,CAACM,KAAK,CAACC,2BAA2B,CAAC,GACxCX,GAAG,CAACI,CAAC,CAACM,KAAK,CAACE,oBAAoB,CAAC;AACzC;AACA,CAAC;AAED,MAAMC,MAA6B,GAAGA,CAAC;EAAEN,KAAK;EAAEE,OAAO;EAAEJ;AAAO,CAAC,kBAC/DH,KAAA,CAAAY,aAAA,CAACX,SAAS;EAACE,MAAM,EAAEA;AAAO,GACvBU,KAAK,CAACR,KAAK,CAAC,CACVS,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,CAACC,CAAC,EAAEV,KAAK,kBACZN,KAAA,CAAAY,aAAA,CAACR,KAAK;EACJa,GAAG,EAAEX,KAAM,CAAC;EAAA;EACZD,KAAK,EAAEA,KAAM;EACbC,KAAK,EAAEA,KAAM;EACbC,OAAO,EAAED,KAAK,KAAKC;AAAQ,CAC5B,CACF,CACM,CACZ;AAED,eAAeI,MAAM","ignoreList":[]}

package/dist/esm/Gallery/index.js

@@ -1,184 +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 { 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';
-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__*/React.createElement(ThemeOverrider, {
-    activeTheme: "dark"
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    heightPercent: heightPercent
-  }, handlers, rest, {
-    ref: mergedContainerRef
-  }), /*#__PURE__*/React.createElement(StyledImage, _extends({
-    url: imageUrl
-  }, imageProps)), urls.length > 1 && imageIndex !== null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GalleryStatus, {
-    count: urls.length,
-    current: imageIndex,
-    height: statusHeight
-  }), isTouchDevice() && !hideArrows && /*#__PURE__*/React.createElement(ThemeOverrider, {
-    overrides: {
-      colorPrimary: [0, 0, 100]
-    }
-  }, /*#__PURE__*/React.createElement(LeftButton, {
-    type: "ghost",
-    wide: "never",
-    size: "small",
-    onClick: left
-  }, /*#__PURE__*/React.createElement(Left, null)), /*#__PURE__*/React.createElement(RightButton, {
-    type: "ghost",
-    wide: "never",
-    size: "small",
-    onClick: right
-  }, /*#__PURE__*/React.createElement(Right, null)))), children));
-});
-export default Gallery;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","Left","Right","ThemeOverrider","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSize","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","NavButton","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","imageProps","hideArrows","children","rest","ref","innerContainerRef","mergedContainerRef","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","startTouchPosRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","left","e","preventDefault","right","mouseMoveHandler","touchStartHandler","clientY","touches","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","createElement","activeTheme","_extends","url","Fragment","count","overrides","colorPrimary","type","wide","onClick"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { ThemeOverrider, clr } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the navigation buttons is shown.\n   */\n  hideArrows?: boolean;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 30;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    {\n      urls,\n      aspectRatio = [16, 9],\n      imageProps = {},\n      hideArrows = false,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\n\n    const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n    const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n    const heightPercent = useMemo(\n      () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n      [aspectRatio]\n    );\n\n    const imageIndexRef = useRef(imageIndex);\n    useEffect(() => {\n      imageIndexRef.current = imageIndex;\n    }, [imageIndex]);\n\n    // Update the image if the index was changed\n    useEffect(() => {\n      setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n    }, [imageIndex, urls]);\n\n    const startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\n    const sizeRef = useRef(size);\n    useEffect(() => {\n      sizeRef.current = size;\n    }, [size]);\n\n    const statusHeight = useMemo(\n      () => Math.round(size.height / 70),\n      [size.height]\n    );\n\n    const updateGalleryImage = useCallback(\n      (clientX: number) => {\n        if (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.current.getBoundingClientRect();\n        const widthPerImage = sizeRef.current.width / urls.length;\n        const xPos = clientX - x;\n        if (xPos < 0) return;\n        const nextIndex = Math.floor(xPos / widthPerImage);\n        if (imageIndexRef.current !== nextIndex) {\n          setImageIndex(nextIndex);\n        }\n      },\n      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\n\n    const left = useCallback<MouseEventHandler>(\n      (e) => {\n        prev();\n        e.preventDefault();\n      },\n      [prev]\n    );\n\n    const right = useCallback<MouseEventHandler>(\n      (e) => {\n        next();\n        e.preventDefault();\n      },\n      [next]\n    );\n\n    const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (e) => updateGalleryImage(e.clientX),\n      [updateGalleryImage]\n    );\n\n    const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n      (e) => {\n        const { clientX, clientY } = e.touches[0];\n        startTouchPosRef.current = { x: clientX, y: clientY };\n      },\n      []\n    );\n\n    const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n      (e) => {\n        if (!startTouchPosRef.current) return;\n        const { x, y } = startTouchPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startTouchPosRef.current = null;\n          return;\n        }\n        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\n      startTouchPosRef.current = null;\n    }, []);\n\n    const handlers = useMemo(() => {\n      if (isTouchDevice()) {\n        return {\n          onTouchStart: touchStartHandler,\n          onTouchMove: touchMoveHandler,\n          onTouchEnd: touchEndHandler,\n        };\n      }\n      return {\n        onMouseMove: mouseMoveHandler,\n      };\n    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && !hideArrows && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={left}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={right}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\n  }\n);\n\nexport default Gallery;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/GlobalStyles/index.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Global","useVh","React","resetStyles","typographyStyles","GlobalStyles","createElement","styles","theme","displayName"],"sources":["../../../src/GlobalStyles/index.tsx"],"sourcesContent":["import { Global } from '@emotion/react';\nimport { useVh } from '@os-design/utils';\nimport React from 'react';\nimport resetStyles from './resetStyles';\nimport typographyStyles from './typographyStyles';\n\nconst GlobalStyles: React.FC = () => {\n  useVh();\n  return (\n    <Global styles={(theme) => [resetStyles(theme), typographyStyles(theme)]} />\n  );\n};\n\nGlobalStyles.displayName = 'GlobalStyles';\n\nexport default GlobalStyles;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,MAAMC,YAAsB,GAAGA,CAAA,KAAM;EACnCJ,KAAK,CAAC,CAAC;EACP,oBACEC,KAAA,CAAAI,aAAA,CAACN,MAAM;IAACO,MAAM,EAAGC,KAAK,IAAK,CAACL,WAAW,CAACK,KAAK,CAAC,EAAEJ,gBAAgB,CAACI,KAAK,CAAC;EAAE,CAAE,CAAC;AAEhF,CAAC;AAEDH,YAAY,CAACI,WAAW,GAAG,cAAc;AAEzC,eAAeJ,YAAY","ignoreList":[]}

package/dist/esm/GlobalStyles/resetStyles.js

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

package/dist/esm/GlobalStyles/resetStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"resetStyles.js","names":["css","resetStyles","theme","paragraphMarginBottom"],"sources":["../../../src/GlobalStyles/resetStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\nimport { Theme } from '@os-design/theming';\n\nconst resetStyles = (theme: Theme): SerializedStyles => css`\n  body {\n    margin: 0;\n  }\n\n  p,\n  figure,\n  pre {\n    margin: 0 0 ${theme.paragraphMarginBottom}em;\n  }\n`;\n\nexport default resetStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAIpC,MAAMC,WAAW,GAAIC,KAAY,IAAuBF,GAAG;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBE,KAAK,CAACC,qBAAqB;AAC7C;AACA,CAAC;AAED,eAAeF,WAAW","ignoreList":[]}

package/dist/esm/GlobalStyles/typographyStyles.js

@@ -1,76 +0,0 @@
-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;
-//# sourceMappingURL=typographyStyles.js.map

package/dist/esm/GlobalStyles/typographyStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typographyStyles.js","names":["css","m","clr","fp","headingsFontSizeStyles","fontSize","headings","literal","map","item","headingsMarginTopStyles","marginTop","h","typographyStyles","theme","colorText","lineHeight","min","md","xxl","s","colorBg","headingsMarginBottom","headingsMarginTop","headingsFontSize","headingsFontSizeMd"],"sources":["../../../src/GlobalStyles/typographyStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\nimport { m } from '@os-design/media';\nimport { Theme, clr } from '@os-design/theming';\nimport fp from 'facepaint';\n\nconst headingsFontSizeStyles = (fontSize: number[]) => {\n  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n  return fp(headings, { literal: true })({\n    fontSize: fontSize.map((item) => `${item}em`),\n  });\n};\n\nconst headingsMarginTopStyles = (marginTop: number[]) => {\n  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(\n    (h) => `${h}:not(:first-of-type)`\n  );\n  return fp(headings, { literal: true })({\n    marginTop: marginTop.map((item) => `${item}em`),\n  });\n};\n\nconst typographyStyles = (theme: Theme): SerializedStyles => css`\n  html,\n  button,\n  input,\n  textarea,\n  select {\n    font-family: 'Helvetica Neue', Helvetica, sans-serif;\n  }\n\n  html,\n  input {\n    color: ${clr(theme.colorText)};\n  }\n\n  html {\n    line-height: ${theme.lineHeight};\n\n    // Sets the font smoothing\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n\n    // Sets the base font size and increases it on large screens\n    ${fp([m.min.md, m.min.xxl])({\n      fontSize: theme.fontSize.map((s) => `${s}px`),\n    })};\n  }\n\n  body {\n    background-color: ${clr(theme.colorBg)};\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: bold;\n    line-height: 1.2;\n    margin: 0 0 ${theme.headingsMarginBottom}em;\n  }\n\n  // Sets the margin top of headings\n  ${headingsMarginTopStyles(theme.headingsMarginTop)};\n\n  // Sets the base font size of headings\n  ${headingsFontSizeStyles(theme.headingsFontSize)};\n\n  // Sets the font size of headings on large screens\n  ${m.min.md} {\n    ${headingsFontSizeStyles(theme.headingsFontSizeMd)}\n  }\n`;\n\nexport default typographyStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAAgBC,GAAG,QAAQ,oBAAoB;AAC/C,OAAOC,EAAE,MAAM,WAAW;AAE1B,MAAMC,sBAAsB,GAAIC,QAAkB,IAAK;EACrD,MAAMC,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EACrD,OAAOH,EAAE,CAACG,QAAQ,EAAE;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCF,QAAQ,EAAEA,QAAQ,CAACG,GAAG,CAAEC,IAAI,IAAK,GAAGA,IAAI,IAAI;EAC9C,CAAC,CAAC;AACJ,CAAC;AAED,MAAMC,uBAAuB,GAAIC,SAAmB,IAAK;EACvD,MAAML,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAACE,GAAG,CACtDI,CAAC,IAAK,GAAGA,CAAC,sBACb,CAAC;EACD,OAAOT,EAAE,CAACG,QAAQ,EAAE;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCI,SAAS,EAAEA,SAAS,CAACH,GAAG,CAAEC,IAAI,IAAK,GAAGA,IAAI,IAAI;EAChD,CAAC,CAAC;AACJ,CAAC;AAED,MAAMI,gBAAgB,GAAIC,KAAY,IAAuBd,GAAG;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaE,GAAG,CAACY,KAAK,CAACC,SAAS,CAAC;AACjC;AACA;AACA;AACA,mBAAmBD,KAAK,CAACE,UAAU;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMb,EAAE,CAAC,CAACF,CAAC,CAACgB,GAAG,CAACC,EAAE,EAAEjB,CAAC,CAACgB,GAAG,CAACE,GAAG,CAAC,CAAC,CAAC;EAC1Bd,QAAQ,EAAES,KAAK,CAACT,QAAQ,CAACG,GAAG,CAAEY,CAAC,IAAK,GAAGA,CAAC,IAAI;AAC9C,CAAC,CAAC;AACN;AACA;AACA;AACA,wBAAwBlB,GAAG,CAACY,KAAK,CAACO,OAAO,CAAC;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,KAAK,CAACQ,oBAAoB;AAC5C;AACA;AACA;AACA,IAAIZ,uBAAuB,CAACI,KAAK,CAACS,iBAAiB,CAAC;AACpD;AACA;AACA,IAAInB,sBAAsB,CAACU,KAAK,CAACU,gBAAgB,CAAC;AAClD;AACA;AACA,IAAIvB,CAAC,CAACgB,GAAG,CAACC,EAAE;AACZ,MAAMd,sBAAsB,CAACU,KAAK,CAACW,kBAAkB,CAAC;AACtD;AACA,CAAC;AAED,eAAeZ,gBAAgB","ignoreList":[]}

package/dist/esm/HeaderSkeleton/index.js

@@ -1,38 +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 { m } from '@os-design/media';
-import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-import Skeleton from '../Skeleton';
-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__*/React.createElement(StyledHeaderSkeleton, _extends({
-  type: type,
-  hasMargin: hasMargin,
-  width: width
-}, rest, {
-  ref: ref
-})));
-HeaderSkeleton.displayName = 'HeaderSkeleton';
-export default HeaderSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","m","omitEmotionProps","React","forwardRef","Skeleton","hasMarginStyles","p","hasMargin","theme","headingsMarginTop","type","headingsMarginBottom","MULTIPLIER","StyledHeaderSkeleton","headingsFontSize","min","md","headingsFontSizeMd","HeaderSkeleton","width","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/HeaderSkeleton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface HeaderSkeletonProps extends SkeletonProps {\n  /**\n   * The header type.\n   * @default 1\n   */\n  type?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the header has top and bottom margins.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin: ${p.theme.headingsMarginTop[p.type - 1]}em 0\n      ${p.theme.headingsMarginBottom}em;\n  `;\n\nconst MULTIPLIER = 0.9;\n\ntype StyledHeaderSkeletonProps = Required<\n  Pick<HeaderSkeletonProps, 'type' | 'hasMargin'>\n>;\nconst StyledHeaderSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('type', 'hasMargin')\n)<StyledHeaderSkeletonProps>`\n  font-size: ${(p) => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;\n  ${m.min.md} {\n    font-size: ${(p) => p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER}em;\n  }\n  ${hasMarginStyles};\n`;\n\n/**\n * Provides a header placeholder while a user waits for the content to load.\n */\nconst HeaderSkeleton = forwardRef<HTMLDivElement, HeaderSkeletonProps>(\n  ({ type = 1, hasMargin = false, width = '100%', ...rest }, ref) => (\n    <StyledHeaderSkeleton\n      type={type}\n      hasMargin={hasMargin}\n      width={width}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nHeaderSkeleton.displayName = 'HeaderSkeleton';\n\nexport default HeaderSkeleton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAerD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXT,GAAG;AACL,cAAcQ,CAAC,CAACE,KAAK,CAACC,iBAAiB,CAACH,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC;AACnD,QAAQJ,CAAC,CAACE,KAAK,CAACG,oBAAoB;AACpC,GAAG;AAEH,MAAMC,UAAU,GAAG,GAAG;AAKtB,MAAMC,oBAAoB,GAAGd,MAAM,CACjCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,EAAE,WAAW,CACtC,CAA4B;AAC5B,eAAgBK,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACM,gBAAgB,CAACR,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAU;AACvE,IAAIZ,CAAC,CAACe,GAAG,CAACC,EAAE;AACZ,iBAAkBV,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACS,kBAAkB,CAACX,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAU;AAC3E;AACA,IAAIP,eAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMa,cAAc,gBAAGf,UAAU,CAC/B,CAAC;EAAEO,IAAI,GAAG,CAAC;EAAEH,SAAS,GAAG,KAAK;EAAEY,KAAK,GAAG,MAAM;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC5DnB,KAAA,CAAAoB,aAAA,CAACT,oBAAoB,EAAAU,QAAA;EACnBb,IAAI,EAAEA,IAAK;EACXH,SAAS,EAAEA,SAAU;EACrBY,KAAK,EAAEA;AAAM,GACTC,IAAI;EACRC,GAAG,EAAEA;AAAI,EACV,CAEL,CAAC;AAEDH,cAAc,CAACM,WAAW,GAAG,gBAAgB;AAE7C,eAAeN,cAAc","ignoreList":[]}

package/dist/esm/Image/index.js

@@ -1,53 +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 { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useCallback } from 'react';
-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__*/React.createElement(StyledImage, _extends({
-      src: EMPTY_IMAGE,
-      className: className
-    }, rest, {
-      ref: ref
-    }));
-  }
-  return /*#__PURE__*/React.createElement(StyledImage, _extends({
-    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;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","useCallback","EMPTY_IMAGE","coverStyles","p","cover","StyledImage","theme","borderRadius","Image","url","sizes","defaultSize","cropped","className","rest","ref","getUrl","size","createElement","_extends","src","srcSet","map","join","filter","i","displayName"],"sources":["../../../src/Image/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback } from 'react';\n\nconst EMPTY_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';\n\ntype JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;\nexport interface ImageProps extends JsxImgProps {\n  /**\n   * The image URL.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * All available sizes of the image.\n   * @default [72, 192, 512, 1024, 2560]\n   */\n  sizes?: number[];\n  /**\n   * The image size if the browser does not support lazy loading.\n   * @default 72\n   */\n  defaultSize?: number;\n  /**\n   * Whether the image is cropped.\n   * @default false\n   */\n  cropped?: boolean;\n  /**\n   * Sets object-fit: cover.\n   * @default false\n   */\n  cover?: boolean;\n}\n\nconst coverStyles = (p) =>\n  p.cover &&\n  css`\n    height: 100%;\n    object-fit: cover;\n  `;\n\ntype StyledImageProps = Pick<ImageProps, 'cover'>;\nconst StyledImage = styled('img', omitEmotionProps('cover'))<StyledImageProps>`\n  display: block; // To remove the indent under the image\n  width: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  ${coverStyles};\n`;\n\n/**\n * The image with lazy loading. Required lazysizes.\n * Should be loaded by @os-team/image-storage.\n */\nconst Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      url,\n      sizes = [72, 192, 512, 1024, 2560],\n      defaultSize = 72,\n      cropped = false,\n      cover = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const getUrl = useCallback(\n      (size: number) => `${url}-${size}${cropped ? '-c' : ''}`,\n      [url, cropped]\n    );\n\n    if (!url) {\n      return (\n        <StyledImage\n          src={EMPTY_IMAGE}\n          className={className}\n          {...rest}\n          ref={ref}\n        />\n      );\n    }\n\n    return (\n      <StyledImage\n        src={getUrl(defaultSize)}\n        srcSet={EMPTY_IMAGE}\n        data-sizes='auto'\n        data-srcset={sizes.map((size) => `${getUrl(size)} ${size}w`).join(', ')}\n        cover={cover}\n        className={[className, 'lazyload'].filter((i) => i).join(' ')}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,MAAMC,WAAW,GACf,oHAAoH;AA+BtH,MAAMC,WAAW,GAAIC,CAAC,IACpBA,CAAC,CAACC,KAAK,IACPT,GAAG;AACL;AACA;AACA,GAAG;AAGH,MAAMU,WAAW,GAAGT,MAAM,CAAC,KAAK,EAAEC,gBAAgB,CAAC,OAAO,CAAC,CAAmB;AAC9E;AACA;AACA,mBAAoBM,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACC,YAAY;AAC9C,IAAIL,WAAW;AACf,CAAC;;AAED;AACA;AACA;AACA;AACA,MAAMM,KAAK,gBAAGT,UAAU,CACtB,CACE;EACEU,GAAG;EACHC,KAAK,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;EAClCC,WAAW,GAAG,EAAE;EAChBC,OAAO,GAAG,KAAK;EACfR,KAAK,GAAG,KAAK;EACbS,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,MAAM,GAAGhB,WAAW,CACvBiB,IAAY,IAAK,GAAGR,GAAG,IAAIQ,IAAI,GAAGL,OAAO,GAAG,IAAI,GAAG,EAAE,EAAE,EACxD,CAACH,GAAG,EAAEG,OAAO,CACf,CAAC;EAED,IAAI,CAACH,GAAG,EAAE;IACR,oBACEX,KAAA,CAAAoB,aAAA,CAACb,WAAW,EAAAc,QAAA;MACVC,GAAG,EAAEnB,WAAY;MACjBY,SAAS,EAAEA;IAAU,GACjBC,IAAI;MACRC,GAAG,EAAEA;IAAI,EACV,CAAC;EAEN;EAEA,oBACEjB,KAAA,CAAAoB,aAAA,CAACb,WAAW,EAAAc,QAAA;IACVC,GAAG,EAAEJ,MAAM,CAACL,WAAW,CAAE;IACzBU,MAAM,EAAEpB,WAAY;IACpB,cAAW,MAAM;IACjB,eAAaS,KAAK,CAACY,GAAG,CAAEL,IAAI,IAAK,GAAGD,MAAM,CAACC,IAAI,CAAC,IAAIA,IAAI,GAAG,CAAC,CAACM,IAAI,CAAC,IAAI,CAAE;IACxEnB,KAAK,EAAEA,KAAM;IACbS,SAAS,EAAE,CAACA,SAAS,EAAE,UAAU,CAAC,CAACW,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAAC,CAACF,IAAI,CAAC,GAAG;EAAE,GAC1DT,IAAI;IACRC,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDP,KAAK,CAACkB,WAAW,GAAG,OAAO;AAE3B,eAAelB,KAAK","ignoreList":[]}

package/dist/esm/ImageSkeleton/index.js

@@ -1,19 +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 Skeleton from '../Skeleton';
-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__*/React.createElement(StyledImageSkeleton, _extends({
-  width: "100%"
-}, props, {
-  ref: ref
-})));
-ImageSkeleton.displayName = 'ImageSkeleton';
-export default ImageSkeleton;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","Skeleton","StyledImageSkeleton","ImageSkeleton","props","ref","createElement","_extends","width","displayName"],"sources":["../../../src/ImageSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type ImageSkeletonProps = Omit<SkeletonProps, 'width'>;\n\nconst StyledImageSkeleton = styled(Skeleton)`\n  height: 100%;\n`;\n\n/**\n * Provides an image placeholder while a user waits for the content to load.\n */\nconst ImageSkeleton = forwardRef<HTMLDivElement, ImageSkeletonProps>(\n  (props, ref) => <StyledImageSkeleton width='100%' {...props} ref={ref} />\n);\n\nImageSkeleton.displayName = 'ImageSkeleton';\n\nexport default ImageSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,mBAAmB,GAAGJ,MAAM,CAACG,QAAQ,CAAC;AAC5C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,aAAa,gBAAGH,UAAU,CAC9B,CAACI,KAAK,EAAEC,GAAG,kBAAKN,KAAA,CAAAO,aAAA,CAACJ,mBAAmB,EAAAK,QAAA;EAACC,KAAK,EAAC;AAAM,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAC1E,CAAC;AAEDF,aAAa,CAACM,WAAW,GAAG,eAAe;AAE3C,eAAeN,aAAa","ignoreList":[]}