@os-design/core 1.0.196 → 1.0.197

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

@@ -1 +1 @@
-{"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","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":"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"}
+{"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":"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"}

package/dist/esm/Gallery/Status.js

@@ -1,7 +1,7 @@
-import React from 'react';
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":["React","styled","clr","omitEmotionProps","Container","p","height","Block","count","index","current","theme","galleryStatusColorBgCurrent","galleryStatusColorBg","Status","Array","fill","map","_"],"sources":["../../../src/Gallery/Status.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\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,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AAWnD,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,QAAQ,CAAC,CAAkB;AAC5E;AACA;AACA;AACA;AACA,YAAaE,CAAC,IAAKA,CAAC,CAACC,MAAO;AAC5B,CAAC;AAOD,MAAMC,KAAK,GAAGN,MAAM,CAClB,KAAK,EACLE,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CACjC;AACd;AACA,UAAWE,CAAC,IAAM,GAAG,GAAGA,CAAC,CAACG,KAAK,GAAIH,CAAC,CAACI,KAAM;AAC3C,WAAYJ,CAAC,IACTA,CAAC,CAACI,KAAK,GAAGJ,CAAC,CAACG,KAAK,GAAG,CAAC,GAChB,QAAO,GAAG,GAAGH,CAAC,CAACG,KAAM,UAAS,GAC9B,GAAE,GAAG,GAAGH,CAAC,CAACG,KAAM,GAAG;AAC5B;AACA;AACA,sBAAuBH,CAAC,IACpBA,CAAC,CAACK,OAAO,GACLR,GAAG,CAACG,CAAC,CAACM,KAAK,CAACC,2BAA2B,CAAC,GACxCV,GAAG,CAACG,CAAC,CAACM,KAAK,CAACE,oBAAoB,CAAE;AAC1C;AACA,CAAC;AAED,MAAMC,MAA6B,GAAG,CAAC;EAAEN,KAAK;EAAEE,OAAO;EAAEJ;AAAO,CAAC,kBAC/D,oBAAC,SAAS;EAAC,MAAM,EAAEA;AAAO,GACvBS,KAAK,CAACP,KAAK,CAAC,CACVQ,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,CAACC,CAAC,EAAET,KAAK,kBACZ,oBAAC,KAAK;EACJ,GAAG,EAAEA,KAAM,CAAC;EAAA;EACZ,KAAK,EAAED,KAAM;EACb,KAAK,EAAEC,KAAM;EACb,OAAO,EAAEA,KAAK,KAAKC;AAAQ,EAE9B,CAAC,CAEP;AAED,eAAeI,MAAM"}
+{"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,CAAkB;AAC5E;AACA;AACA;AACA;AACA,YAAaG,CAAC,IAAKA,CAAC,CAACC,MAAO;AAC5B,CAAC;AAOD,MAAMC,KAAK,GAAGP,MAAM,CAClB,KAAK,EACLE,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAC9C,CAAc;AACd;AACA,UAAWG,CAAC,IAAM,GAAG,GAAGA,CAAC,CAACG,KAAK,GAAIH,CAAC,CAACI,KAAM;AAC3C,WAAYJ,CAAC,IACTA,CAAC,CAACI,KAAK,GAAGJ,CAAC,CAACG,KAAK,GAAG,CAAC,GAChB,QAAO,GAAG,GAAGH,CAAC,CAACG,KAAM,UAAS,GAC9B,GAAE,GAAG,GAAGH,CAAC,CAACG,KAAM,GAAG;AAC5B;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,CAAE;AAC1C;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"}

package/dist/esm/Gallery/index.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import styled from '@emotion/styled';
 import { Left, Right } from '@os-design/icons';
-import { clr, ThemeOverrider } from '@os-design/theming';
+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';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","Left","Right","clr","ThemeOverrider","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","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\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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"}
+{"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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"}

package/dist/esm/GlobalStyles/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
 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 = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Global","useVh","resetStyles","typographyStyles","GlobalStyles","theme","displayName"],"sources":["../../../src/GlobalStyles/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Global } from '@emotion/react';\nimport { useVh } from '@os-design/utils';\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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,KAAK,QAAQ,kBAAkB;AACxC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,MAAMC,YAAsB,GAAG,MAAM;EACnCH,KAAK,EAAE;EACP,oBACE,oBAAC,MAAM;IAAC,MAAM,EAAGI,KAAK,IAAK,CAACH,WAAW,CAACG,KAAK,CAAC,EAAEF,gBAAgB,CAACE,KAAK,CAAC;EAAE,EAAG;AAEhF,CAAC;AAEDD,YAAY,CAACE,WAAW,GAAG,cAAc;AAEzC,eAAeF,YAAY"}
+{"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';\n\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;AAEzB,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"resetStyles.js","names":["css","resetStyles","theme","paragraphMarginBottom"],"sources":["../../../src/GlobalStyles/resetStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { Theme } from '@os-design/theming';\nimport { SerializedStyles } from '@emotion/serialize';\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,GAAI;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBE,KAAK,CAACC,qBAAsB;AAC9C;AACA,CAAC;AAED,eAAeF,WAAW"}
+{"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,GAAI;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBE,KAAK,CAACC,qBAAsB;AAC9C;AACA,CAAC;AAED,eAAeF,WAAW"}

package/dist/esm/GlobalStyles/typographyStyles.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import fp from 'facepaint';
 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, {

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

@@ -1 +1 @@
-{"version":3,"file":"typographyStyles.js","names":["css","fp","m","clr","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 fp from 'facepaint';\nimport { SerializedStyles } from '@emotion/serialize';\nimport { m } from '@os-design/media';\nimport { Theme, clr } from '@os-design/theming';\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;AACpC,OAAOC,EAAE,MAAM,WAAW;AAE1B,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAAgBC,GAAG,QAAQ,oBAAoB;AAE/C,MAAMC,sBAAsB,GAAIC,QAAkB,IAAK;EACrD,MAAMC,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EACrD,OAAOL,EAAE,CAACK,QAAQ,EAAE;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCF,QAAQ,EAAEA,QAAQ,CAACG,GAAG,CAAEC,IAAI,IAAM,GAAEA,IAAK,IAAG;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,IAAM,GAAEA,CAAE,sBAAqB,CAClC;EACD,OAAOX,EAAE,CAACK,QAAQ,EAAE;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCI,SAAS,EAAEA,SAAS,CAACH,GAAG,CAAEC,IAAI,IAAM,GAAEA,IAAK,IAAG;EAChD,CAAC,CAAC;AACJ,CAAC;AAED,MAAMI,gBAAgB,GAAIC,KAAY,IAAuBd,GAAI;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,GAAG,CAACW,KAAK,CAACC,SAAS,CAAE;AAClC;AACA;AACA;AACA,mBAAmBD,KAAK,CAACE,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMf,EAAE,CAAC,CAACC,CAAC,CAACe,GAAG,CAACC,EAAE,EAAEhB,CAAC,CAACe,GAAG,CAACE,GAAG,CAAC,CAAC,CAAC;EAC1Bd,QAAQ,EAAES,KAAK,CAACT,QAAQ,CAACG,GAAG,CAAEY,CAAC,IAAM,GAAEA,CAAE,IAAG;AAC9C,CAAC,CAAE;AACP;AACA;AACA;AACA,wBAAwBjB,GAAG,CAACW,KAAK,CAACO,OAAO,CAAE;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,KAAK,CAACQ,oBAAqB;AAC7C;AACA;AACA;AACA,IAAIZ,uBAAuB,CAACI,KAAK,CAACS,iBAAiB,CAAE;AACrD;AACA;AACA,IAAInB,sBAAsB,CAACU,KAAK,CAACU,gBAAgB,CAAE;AACnD;AACA;AACA,IAAItB,CAAC,CAACe,GAAG,CAACC,EAAG;AACb,MAAMd,sBAAsB,CAACU,KAAK,CAACW,kBAAkB,CAAE;AACvD;AACA,CAAC;AAED,eAAeZ,gBAAgB"}
+{"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,IAAM,GAAEA,IAAK,IAAG;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,IAAM,GAAEA,CAAE,sBACd,CAAC;EACD,OAAOT,EAAE,CAACG,QAAQ,EAAE;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCI,SAAS,EAAEA,SAAS,CAACH,GAAG,CAAEC,IAAI,IAAM,GAAEA,IAAK,IAAG;EAChD,CAAC,CAAC;AACJ,CAAC;AAED,MAAMI,gBAAgB,GAAIC,KAAY,IAAuBd,GAAI;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaE,GAAG,CAACY,KAAK,CAACC,SAAS,CAAE;AAClC;AACA;AACA;AACA,mBAAmBD,KAAK,CAACE,UAAW;AACpC;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,IAAM,GAAEA,CAAE,IAAG;AAC9C,CAAC,CAAE;AACP;AACA;AACA;AACA,wBAAwBlB,GAAG,CAACY,KAAK,CAACO,OAAO,CAAE;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,KAAK,CAACQ,oBAAqB;AAC7C;AACA;AACA;AACA,IAAIZ,uBAAuB,CAACI,KAAK,CAACS,iBAAiB,CAAE;AACrD;AACA;AACA,IAAInB,sBAAsB,CAACU,KAAK,CAACU,gBAAgB,CAAE;AACnD;AACA;AACA,IAAIvB,CAAC,CAACgB,GAAG,CAACC,EAAG;AACb,MAAMd,sBAAsB,CAACU,KAAK,CAACW,kBAAkB,CAAE;AACvD;AACA,CAAC;AAED,eAAeZ,gBAAgB"}

package/dist/esm/HeaderSkeleton/index.js

@@ -1,9 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import React, { forwardRef } from 'react';
-import { omitEmotionProps } from '@os-design/utils';
 import { m } from '@os-design/media';
-import { css } from '@emotion/react';
+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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","omitEmotionProps","m","css","Skeleton","hasMarginStyles","p","hasMargin","theme","headingsMarginTop","type","headingsMarginBottom","MULTIPLIER","StyledHeaderSkeleton","headingsFontSize","min","md","headingsFontSizeMd","HeaderSkeleton","width","rest","ref","displayName"],"sources":["../../../src/HeaderSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/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,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,QAAQ,MAAyB,aAAa;AAerD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXJ,GAAI;AACN,cAAcG,CAAC,CAACE,KAAK,CAACC,iBAAiB,CAACH,CAAC,CAACI,IAAI,GAAG,CAAC,CAAE;AACpD,QAAQJ,CAAC,CAACE,KAAK,CAACG,oBAAqB;AACrC,GAAG;AAEH,MAAMC,UAAU,GAAG,GAAG;AAKtB,MAAMC,oBAAoB,GAAGf,MAAM,CACjCM,QAAQ,EACRH,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,CACV;AAC7B,eAAgBK,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACM,gBAAgB,CAACR,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAW;AACxE,IAAIV,CAAC,CAACa,GAAG,CAACC,EAAG;AACb,iBAAkBV,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACS,kBAAkB,CAACX,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAW;AAC5E;AACA,IAAIP,eAAgB;AACpB,CAAC;;AAED;AACA;AACA;AACA,MAAMa,cAAc,gBAAGlB,UAAU,CAC/B,CAAC;EAAEU,IAAI,GAAG,CAAC;EAAEH,SAAS,GAAG,KAAK;EAAEY,KAAK,GAAG,MAAM;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC5D,oBAAC,oBAAoB;EACnB,IAAI,EAAEX,IAAK;EACX,SAAS,EAAEH,SAAU;EACrB,KAAK,EAAEY;AAAM,GACTC,IAAI;EACR,GAAG,EAAEC;AAAI,GAEZ,CACF;AAEDH,cAAc,CAACI,WAAW,GAAG,gBAAgB;AAE7C,eAAeJ,cAAc"}
+{"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';\n\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\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;AAEpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AAEpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAerD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXT,GAAI;AACN,cAAcQ,CAAC,CAACE,KAAK,CAACC,iBAAiB,CAACH,CAAC,CAACI,IAAI,GAAG,CAAC,CAAE;AACpD,QAAQJ,CAAC,CAACE,KAAK,CAACG,oBAAqB;AACrC,GAAG;AAEH,MAAMC,UAAU,GAAG,GAAG;AAKtB,MAAMC,oBAAoB,GAAGd,MAAM,CACjCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,EAAE,WAAW,CACtC,CAA6B;AAC7B,eAAgBK,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACM,gBAAgB,CAACR,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAW;AACxE,IAAIZ,CAAC,CAACe,GAAG,CAACC,EAAG;AACb,iBAAkBV,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACS,kBAAkB,CAACX,CAAC,CAACI,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAW;AAC5E;AACA,IAAIP,eAAgB;AACpB,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"}

package/dist/esm/Image/index.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useCallback } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { omitEmotionProps } from '@os-design/utils';
-import { css } from '@emotion/react';
+import React, { forwardRef, useCallback } from 'react';
 const EMPTY_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';
 const coverStyles = p => p.cover && css`
     height: 100%;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","styled","omitEmotionProps","css","EMPTY_IMAGE","coverStyles","p","cover","StyledImage","theme","borderRadius","Image","url","sizes","defaultSize","cropped","className","rest","ref","getUrl","size","map","join","filter","i","displayName"],"sources":["../../../src/Image/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/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,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,WAAW,GACf,oHAAoH;AA+BtH,MAAMC,WAAW,GAAIC,CAAC,IACpBA,CAAC,CAACC,KAAK,IACPJ,GAAI;AACN;AACA;AACA,GAAG;AAGH,MAAMK,WAAW,GAAGP,MAAM,CAAC,KAAK,EAAEC,gBAAgB,CAAC,OAAO,CAAC,CAAoB;AAC/E;AACA;AACA,mBAAoBI,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACC,YAAa;AAC/C,IAAIL,WAAY;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA,MAAMM,KAAK,gBAAGZ,UAAU,CACtB,CACE;EACEa,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,GAAGnB,WAAW,CACvBoB,IAAY,IAAM,GAAER,GAAI,IAAGQ,IAAK,GAAEL,OAAO,GAAG,IAAI,GAAG,EAAG,EAAC,EACxD,CAACH,GAAG,EAAEG,OAAO,CAAC,CACf;EAED,IAAI,CAACH,GAAG,EAAE;IACR,oBACE,oBAAC,WAAW;MACV,GAAG,EAAER,WAAY;MACjB,SAAS,EAAEY;IAAU,GACjBC,IAAI;MACR,GAAG,EAAEC;IAAI,GACT;EAEN;EAEA,oBACE,oBAAC,WAAW;IACV,GAAG,EAAEC,MAAM,CAACL,WAAW,CAAE;IACzB,MAAM,EAAEV,WAAY;IACpB,cAAW,MAAM;IACjB,eAAaS,KAAK,CAACQ,GAAG,CAAED,IAAI,IAAM,GAAED,MAAM,CAACC,IAAI,CAAE,IAAGA,IAAK,GAAE,CAAC,CAACE,IAAI,CAAC,IAAI,CAAE;IACxE,KAAK,EAAEf,KAAM;IACb,SAAS,EAAE,CAACS,SAAS,EAAE,UAAU,CAAC,CAACO,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAAC,CAACF,IAAI,CAAC,GAAG;EAAE,GAC1DL,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;AAEDP,KAAK,CAACc,WAAW,GAAG,OAAO;AAE3B,eAAed,KAAK"}
+{"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';\n\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;AAEpC,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,GAAI;AACN;AACA;AACA,GAAG;AAGH,MAAMU,WAAW,GAAGT,MAAM,CAAC,KAAK,EAAEC,gBAAgB,CAAC,OAAO,CAAC,CAAoB;AAC/E;AACA;AACA,mBAAoBM,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACC,YAAa;AAC/C,IAAIL,WAAY;AAChB,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,IAAM,GAAER,GAAI,IAAGQ,IAAK,GAAEL,OAAO,GAAG,IAAI,GAAG,EAAG,EAAC,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,IAAM,GAAED,MAAM,CAACC,IAAI,CAAE,IAAGA,IAAK,GAAE,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"}

package/dist/esm/ImageSkeleton/index.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
+import React, { forwardRef } from 'react';
 import Skeleton from '../Skeleton';
 const StyledImageSkeleton = styled(Skeleton)`
   height: 100%;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","Skeleton","StyledImageSkeleton","ImageSkeleton","props","ref","displayName"],"sources":["../../../src/ImageSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\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,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,mBAAmB,GAAGF,MAAM,CAACC,QAAQ,CAAE;AAC7C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,aAAa,gBAAGJ,UAAU,CAC9B,CAACK,KAAK,EAAEC,GAAG,kBAAK,oBAAC,mBAAmB;EAAC,KAAK,EAAC;AAAM,GAAKD,KAAK;EAAE,GAAG,EAAEC;AAAI,GAAG,CAC1E;AAEDF,aAAa,CAACG,WAAW,GAAG,eAAe;AAE3C,eAAeH,aAAa"}
+{"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';\n\nimport React, { forwardRef } from 'react';\n\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;AAEpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,mBAAmB,GAAGJ,MAAM,CAACG,QAAQ,CAAE;AAC7C;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"}

package/dist/esm/Input/index.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
-import styled from '@emotion/styled';
-import { clr, ThemeOverrider } from '@os-design/theming';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Loading } from '@os-design/icons';
+import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import getFocusableElements from './utils/getFocusableElements';
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","onFocus","e","target","current","focusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","Loading","resetFocusStyles","sizeStyles","transitionStyles","clr","ThemeOverrider","omitEmotionProps","useForwardedRef","React","forwardRef","useCallback","useMemo","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","createElement","rightHasPaddingValue","onFocus","e","target","current","focusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","_extends","tabIndex","overrides","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\n\nimport React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/dist/esm/Input/utils/getFocusableElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFocusableElements.js","names":["getFocusableElements","element","querySelectorAll","filter","el","hasAttribute"],"sources":["../../../../src/Input/utils/getFocusableElements.ts"],"sourcesContent":["const getFocusableElements = (element: ParentNode): HTMLElement[] =>\n  [\n    ...element.querySelectorAll<HTMLElement>(\n      'a, button, input, textarea, select, details,[tabindex]:not([tabindex=\"-1\"])'\n    ),\n  ].filter((el) => !el.hasAttribute('disabled'));\n\nexport default getFocusableElements;\n"],"mappings":"AAAA,MAAMA,oBAAoB,GAAIC,OAAmB,IAC/C,CACE,GAAGA,OAAO,CAACC,gBAAgB,CACzB,6EAA6E,CAC9E,CACF,CAACC,MAAM,CAAEC,EAAE,IAAK,CAACA,EAAE,CAACC,YAAY,CAAC,UAAU,CAAC,CAAC;AAEhD,eAAeL,oBAAoB"}
+{"version":3,"file":"getFocusableElements.js","names":["getFocusableElements","element","querySelectorAll","filter","el","hasAttribute"],"sources":["../../../../src/Input/utils/getFocusableElements.ts"],"sourcesContent":["const getFocusableElements = (element: ParentNode): HTMLElement[] =>\n  [\n    ...element.querySelectorAll<HTMLElement>(\n      'a, button, input, textarea, select, details,[tabindex]:not([tabindex=\"-1\"])'\n    ),\n  ].filter((el) => !el.hasAttribute('disabled'));\n\nexport default getFocusableElements;\n"],"mappings":"AAAA,MAAMA,oBAAoB,GAAIC,OAAmB,IAC/C,CACE,GAAGA,OAAO,CAACC,gBAAgB,CACzB,6EACF,CAAC,CACF,CAACC,MAAM,CAAEC,EAAE,IAAK,CAACA,EAAE,CAACC,YAAY,CAAC,UAAU,CAAC,CAAC;AAEhD,eAAeL,oBAAoB"}

package/dist/esm/InputNumber/index.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import { getNextCaret, getNextState, numberToFormattedString, useGetCaretWithinValue, useValidate } from '@os-design/input-number-utils';
 import { useForwardedRef } from '@os-design/utils';
-import { numberToFormattedString, getNextState, getNextCaret, useValidate, useGetCaretWithinValue } from '@os-design/input-number-utils';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import Input from '../Input';
 import defaultLocale from './utils/defaultLocale';
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useEffect","useMemo","useState","useForwardedRef","numberToFormattedString","getNextState","getNextCaret","useValidate","useGetCaretWithinValue","Input","defaultLocale","InputNumber","min","max","precision","prefix","suffix","decimalSeparator","thousandsSeparator","locale","value","onChange","onSelect","onFocus","rest","ref","options","inputRef","mergedInputRef","valueString","setValueString","selection","setSelection","start","end","getCaretWithinValue","current","setSelectionRange","e","selectionStart","selectionEnd","currentTarget","length","v","nextState","valueNumber","nextCaret","prevValueString","nextValueString","prevCaret","deleteKeyPressed","nativeEvent","inputType","undefined","emptyLabel","displayName"],"sources":["../../../src/InputNumber/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useState } from 'react';\nimport { useForwardedRef } from '@os-design/utils';\nimport {\n  numberToFormattedString,\n  getNextState,\n  getNextCaret,\n  useValidate,\n  useGetCaretWithinValue,\n} from '@os-design/input-number-utils';\nimport Input, { InputProps } from '../Input';\nimport defaultLocale, { InputNumberLocale } from './utils/defaultLocale';\n\nexport interface InputNumberProps\n  extends Omit<InputProps, 'type' | 'value' | 'onChange'> {\n  /**\n   * The minimum value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The maximum value.\n   * @default 2147483647\n   */\n  max?: number;\n  /**\n   * The number of digits after the decimal point.\n   * @default 0\n   */\n  precision?: number;\n  /**\n   * The string before the number.\n   * @default undefined\n   */\n  prefix?: string;\n  /**\n   * The string after the number.\n   * @default undefined\n   */\n  suffix?: string;\n  /**\n   * The decimal separator.\n   * @default .\n   */\n  decimalSeparator?: '.' | ',';\n  /**\n   * The thousands separator.\n   * @default ' '\n   */\n  thousandsSeparator?: ' ' | '.' | ',' | null;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputNumberLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The change event handler.\n   * Returns null when the input value is empty.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\n/**\n * The input for entering a number.\n */\nconst InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(\n  (\n    {\n      min = 0,\n      max = 2147483647,\n      precision = 0,\n      prefix = '',\n      suffix = '',\n      decimalSeparator = '.',\n      thousandsSeparator = ' ',\n      locale = defaultLocale,\n      value = null,\n      onChange = () => {},\n      onSelect = () => {},\n      onFocus = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    useValidate({\n      min,\n      max,\n      precision,\n      prefix,\n      suffix,\n      decimalSeparator,\n      thousandsSeparator,\n    });\n\n    const options = useMemo(\n      () => ({\n        min,\n        max,\n        precision,\n        prefix,\n        suffix,\n        decimalSeparator,\n        thousandsSeparator,\n      }),\n      [\n        min,\n        max,\n        precision,\n        prefix,\n        suffix,\n        decimalSeparator,\n        thousandsSeparator,\n      ]\n    );\n\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [valueString, setValueString] = useState<string>(\n      numberToFormattedString(value, options)\n    );\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n    const getCaretWithinValue = useGetCaretWithinValue(prefix, suffix);\n\n    // Update the value\n    useEffect(() => {\n      setValueString(numberToFormattedString(value, options));\n    }, [value, options]);\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    return (\n      <Input\n        onSelect={(e) => {\n          // Update the selection state.\n          // Don't use `getCaretWithinValue` here to allow a user to copy\n          // the input value with a prefix and suffix.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onFocus={(e) => {\n          // Move the caret to the end of the input value and before the suffix\n          setSelection({\n            start: getCaretWithinValue(valueString.length, valueString),\n            end: getCaretWithinValue(valueString.length, valueString),\n          });\n          onFocus(e);\n        }}\n        value={valueString}\n        onChange={(v, e) => {\n          // Get a new value as a string and number\n          const nextState = getNextState(v, options);\n\n          // Set the new string value in the input field\n          setValueString(nextState.valueString);\n\n          // Send the new numeric value in the onChange callback\n          onChange(nextState.valueNumber);\n\n          // Update the caret position\n          const nextCaret = getCaretWithinValue(\n            getNextCaret({\n              value: v,\n              prevValueString: valueString,\n              nextValueString: nextState.valueString,\n              prevCaret: selection.end,\n              deleteKeyPressed:\n                (e.nativeEvent as InputEvent).inputType ===\n                'deleteContentBackward',\n              options,\n            }),\n            nextState.valueString\n          );\n          setSelection({ start: nextCaret, end: nextCaret });\n        }}\n        role='spinbutton'\n        aria-valuenow={\n          value !== undefined && value !== null ? value : undefined\n        }\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuetext={valueString === '' ? locale.emptyLabel : undefined}\n        inputMode='decimal'\n        autoComplete='off'\n        autoCorrect='off'\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["getNextCaret","getNextState","numberToFormattedString","useGetCaretWithinValue","useValidate","useForwardedRef","React","forwardRef","useEffect","useMemo","useState","Input","defaultLocale","InputNumber","min","max","precision","prefix","suffix","decimalSeparator","thousandsSeparator","locale","value","onChange","onSelect","onFocus","rest","ref","options","inputRef","mergedInputRef","valueString","setValueString","selection","setSelection","start","end","getCaretWithinValue","current","setSelectionRange","createElement","_extends","e","selectionStart","selectionEnd","currentTarget","length","v","nextState","valueNumber","nextCaret","prevValueString","nextValueString","prevCaret","deleteKeyPressed","nativeEvent","inputType","role","undefined","emptyLabel","inputMode","autoComplete","autoCorrect","displayName"],"sources":["../../../src/InputNumber/index.tsx"],"sourcesContent":["import {\n  getNextCaret,\n  getNextState,\n  numberToFormattedString,\n  useGetCaretWithinValue,\n  useValidate,\n} from '@os-design/input-number-utils';\nimport { useForwardedRef } from '@os-design/utils';\nimport React, { forwardRef, useEffect, useMemo, useState } from 'react';\nimport Input, { InputProps } from '../Input';\nimport defaultLocale, { InputNumberLocale } from './utils/defaultLocale';\n\nexport interface InputNumberProps\n  extends Omit<InputProps, 'type' | 'value' | 'onChange'> {\n  /**\n   * The minimum value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The maximum value.\n   * @default 2147483647\n   */\n  max?: number;\n  /**\n   * The number of digits after the decimal point.\n   * @default 0\n   */\n  precision?: number;\n  /**\n   * The string before the number.\n   * @default undefined\n   */\n  prefix?: string;\n  /**\n   * The string after the number.\n   * @default undefined\n   */\n  suffix?: string;\n  /**\n   * The decimal separator.\n   * @default .\n   */\n  decimalSeparator?: '.' | ',';\n  /**\n   * The thousands separator.\n   * @default ' '\n   */\n  thousandsSeparator?: ' ' | '.' | ',' | null;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputNumberLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The change event handler.\n   * Returns null when the input value is empty.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\n/**\n * The input for entering a number.\n */\nconst InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(\n  (\n    {\n      min = 0,\n      max = 2147483647,\n      precision = 0,\n      prefix = '',\n      suffix = '',\n      decimalSeparator = '.',\n      thousandsSeparator = ' ',\n      locale = defaultLocale,\n      value = null,\n      onChange = () => {},\n      onSelect = () => {},\n      onFocus = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    useValidate({\n      min,\n      max,\n      precision,\n      prefix,\n      suffix,\n      decimalSeparator,\n      thousandsSeparator,\n    });\n\n    const options = useMemo(\n      () => ({\n        min,\n        max,\n        precision,\n        prefix,\n        suffix,\n        decimalSeparator,\n        thousandsSeparator,\n      }),\n      [\n        min,\n        max,\n        precision,\n        prefix,\n        suffix,\n        decimalSeparator,\n        thousandsSeparator,\n      ]\n    );\n\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [valueString, setValueString] = useState<string>(\n      numberToFormattedString(value, options)\n    );\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n    const getCaretWithinValue = useGetCaretWithinValue(prefix, suffix);\n\n    // Update the value\n    useEffect(() => {\n      setValueString(numberToFormattedString(value, options));\n    }, [value, options]);\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    return (\n      <Input\n        onSelect={(e) => {\n          // Update the selection state.\n          // Don't use `getCaretWithinValue` here to allow a user to copy\n          // the input value with a prefix and suffix.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onFocus={(e) => {\n          // Move the caret to the end of the input value and before the suffix\n          setSelection({\n            start: getCaretWithinValue(valueString.length, valueString),\n            end: getCaretWithinValue(valueString.length, valueString),\n          });\n          onFocus(e);\n        }}\n        value={valueString}\n        onChange={(v, e) => {\n          // Get a new value as a string and number\n          const nextState = getNextState(v, options);\n\n          // Set the new string value in the input field\n          setValueString(nextState.valueString);\n\n          // Send the new numeric value in the onChange callback\n          onChange(nextState.valueNumber);\n\n          // Update the caret position\n          const nextCaret = getCaretWithinValue(\n            getNextCaret({\n              value: v,\n              prevValueString: valueString,\n              nextValueString: nextState.valueString,\n              prevCaret: selection.end,\n              deleteKeyPressed:\n                (e.nativeEvent as InputEvent).inputType ===\n                'deleteContentBackward',\n              options,\n            }),\n            nextState.valueString\n          );\n          setSelection({ start: nextCaret, end: nextCaret });\n        }}\n        role='spinbutton'\n        aria-valuenow={\n          value !== undefined && value !== null ? value : undefined\n        }\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuetext={valueString === '' ? locale.emptyLabel : undefined}\n        inputMode='decimal'\n        autoComplete='off'\n        autoCorrect='off'\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";AAAA,SACEA,YAAY,EACZC,YAAY,EACZC,uBAAuB,EACvBC,sBAAsB,EACtBC,WAAW,QACN,+BAA+B;AACtC,SAASC,eAAe,QAAQ,kBAAkB;AAClD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACvE,OAAOC,KAAK,MAAsB,UAAU;AAC5C,OAAOC,aAAa,MAA6B,uBAAuB;AA8DxE;AACA;AACA;AACA,MAAMC,WAAW,gBAAGN,UAAU,CAC5B,CACE;EACEO,GAAG,GAAG,CAAC;EACPC,GAAG,GAAG,UAAU;EAChBC,SAAS,GAAG,CAAC;EACbC,MAAM,GAAG,EAAE;EACXC,MAAM,GAAG,EAAE;EACXC,gBAAgB,GAAG,GAAG;EACtBC,kBAAkB,GAAG,GAAG;EACxBC,MAAM,GAAGT,aAAa;EACtBU,KAAK,GAAG,IAAI;EACZC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACHvB,WAAW,CAAC;IACVU,GAAG;IACHC,GAAG;IACHC,SAAS;IACTC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,MAAMQ,OAAO,GAAGnB,OAAO,CACrB,OAAO;IACLK,GAAG;IACHC,GAAG;IACHC,SAAS;IACTC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC,EACF,CACEN,GAAG,EACHC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,gBAAgB,EAChBC,kBAAkB,CAEtB,CAAC;EAED,MAAM,CAACS,QAAQ,EAAEC,cAAc,CAAC,GAAGzB,eAAe,CAACsB,GAAG,CAAC;EACvD,MAAM,CAACI,WAAW,EAAEC,cAAc,CAAC,GAAGtB,QAAQ,CAC5CR,uBAAuB,CAACoB,KAAK,EAAEM,OAAO,CACxC,CAAC;EACD,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAY;IAAEyB,KAAK,EAAE,CAAC;IAAEC,GAAG,EAAE;EAAE,CAAC,CAAC;EAC3E,MAAMC,mBAAmB,GAAGlC,sBAAsB,CAACc,MAAM,EAAEC,MAAM,CAAC;;EAElE;EACAV,SAAS,CAAC,MAAM;IACdwB,cAAc,CAAC9B,uBAAuB,CAACoB,KAAK,EAAEM,OAAO,CAAC,CAAC;EACzD,CAAC,EAAE,CAACN,KAAK,EAAEM,OAAO,CAAC,CAAC;;EAEpB;EACApB,SAAS,CAAC,MAAM;IACd,IAAI,CAACqB,QAAQ,CAACS,OAAO,EAAE;IACvBT,QAAQ,CAACS,OAAO,CAACC,iBAAiB,CAACN,SAAS,CAACE,KAAK,EAAEF,SAAS,CAACG,GAAG,CAAC;EACpE,CAAC,EAAE,CAACP,QAAQ,EAAEI,SAAS,CAAC,CAAC;EAEzB,oBACE3B,KAAA,CAAAkC,aAAA,CAAC7B,KAAK,EAAA8B,QAAA;IACJjB,QAAQ,EAAGkB,CAAC,IAAK;MACf;MACA;MACA;MACA,MAAM;QAAEC,cAAc;QAAEC;MAAa,CAAC,GAAGF,CAAC,CAACG,aAAa;MACxDX,YAAY,CAAC;QAAEC,KAAK,EAAEQ,cAAc,IAAI,CAAC;QAAEP,GAAG,EAAEQ,YAAY,IAAI;MAAE,CAAC,CAAC;MACpEpB,QAAQ,CAACkB,CAAC,CAAC;IACb,CAAE;IACFjB,OAAO,EAAGiB,CAAC,IAAK;MACd;MACAR,YAAY,CAAC;QACXC,KAAK,EAAEE,mBAAmB,CAACN,WAAW,CAACe,MAAM,EAAEf,WAAW,CAAC;QAC3DK,GAAG,EAAEC,mBAAmB,CAACN,WAAW,CAACe,MAAM,EAAEf,WAAW;MAC1D,CAAC,CAAC;MACFN,OAAO,CAACiB,CAAC,CAAC;IACZ,CAAE;IACFpB,KAAK,EAAES,WAAY;IACnBR,QAAQ,EAAEA,CAACwB,CAAC,EAAEL,CAAC,KAAK;MAClB;MACA,MAAMM,SAAS,GAAG/C,YAAY,CAAC8C,CAAC,EAAEnB,OAAO,CAAC;;MAE1C;MACAI,cAAc,CAACgB,SAAS,CAACjB,WAAW,CAAC;;MAErC;MACAR,QAAQ,CAACyB,SAAS,CAACC,WAAW,CAAC;;MAE/B;MACA,MAAMC,SAAS,GAAGb,mBAAmB,CACnCrC,YAAY,CAAC;QACXsB,KAAK,EAAEyB,CAAC;QACRI,eAAe,EAAEpB,WAAW;QAC5BqB,eAAe,EAAEJ,SAAS,CAACjB,WAAW;QACtCsB,SAAS,EAAEpB,SAAS,CAACG,GAAG;QACxBkB,gBAAgB,EACbZ,CAAC,CAACa,WAAW,CAAgBC,SAAS,KACvC,uBAAuB;QACzB5B;MACF,CAAC,CAAC,EACFoB,SAAS,CAACjB,WACZ,CAAC;MACDG,YAAY,CAAC;QAAEC,KAAK,EAAEe,SAAS;QAAEd,GAAG,EAAEc;MAAU,CAAC,CAAC;IACpD,CAAE;IACFO,IAAI,EAAC,YAAY;IACjB,iBACEnC,KAAK,KAAKoC,SAAS,IAAIpC,KAAK,KAAK,IAAI,GAAGA,KAAK,GAAGoC,SACjD;IACD,iBAAe5C,GAAI;IACnB,iBAAeC,GAAI;IACnB,kBAAgBgB,WAAW,KAAK,EAAE,GAAGV,MAAM,CAACsC,UAAU,GAAGD,SAAU;IACnEE,SAAS,EAAC,SAAS;IACnBC,YAAY,EAAC,KAAK;IAClBC,WAAW,EAAC;EAAK,GACbpC,IAAI;IACRC,GAAG,EAAEG;EAAe,EACrB,CAAC;AAEN,CACF,CAAC;AAEDjB,WAAW,CAACkD,WAAW,GAAG,aAAa;AAEvC,eAAelD,WAAW"}

package/dist/esm/InputPassword/index.js

@@ -1,12 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import styled from '@emotion/styled';
 import { Eye, EyeInvisible } from '@os-design/icons';
 import { ThemeOverrider, useTheme } from '@os-design/theming';
 import { useForwardedRef, useForwardedState } from '@os-design/utils';
 import getPasswordScore from '@os-team/password-score';
-import styled from '@emotion/styled';
-import Input from '../Input';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import Button from '../Button';
+import Input from '../Input';
 import Progress from '../Progress';
 import defaultLocale from './utils/defaultLocale';
 const StrengthMeterProgress = styled(Progress)`

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useEffect","useMemo","useState","Eye","EyeInvisible","ThemeOverrider","useTheme","useForwardedRef","useForwardedState","getPasswordScore","styled","Input","Button","Progress","defaultLocale","StrengthMeterProgress","InputPassword","showStrengthMeter","strengthNames","strengthThresholds","locale","value","defaultValue","onChange","onSelect","disabled","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","selection","setSelection","start","end","invisible","setInvisible","theme","current","setSelectionRange","score","strength","name","color","inputPasswordColorPowerful","inputPasswordColorStrong","inputPasswordColorGood","inputPasswordColorWeak","focus","showLabel","hideLabel","e","selectionStart","selectionEnd","currentTarget","progressColorStroke","progressColorStrokeSuccess","undefined","displayName"],"sources":["../../../src/InputPassword/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useState } from 'react';\nimport { Eye, EyeInvisible } from '@os-design/icons';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport getPasswordScore from '@os-team/password-score';\nimport styled from '@emotion/styled';\nimport Input, { InputProps } from '../Input';\nimport Button from '../Button';\nimport Progress from '../Progress';\nimport defaultLocale, { InputPasswordLocale } from './utils/defaultLocale';\n\nexport interface InputPasswordProps extends Omit<InputProps, 'type'> {\n  /**\n   * Whether the password strength meter is visible.\n   * @default false\n   */\n  showStrengthMeter?: boolean;\n  /**\n   * The name of a weak, good, strong, and powerful password.\n   * Located to the right of the password strength meter.\n   * @default undefined\n   */\n  strengthNames?: Record<'weak' | 'good' | 'strong' | 'powerful', string>;\n  /**\n   * From what number of score the password is considered\n   * good, strong, and powerful.\n   * @default [30, 60, 80]\n   */\n  strengthThresholds?: [number, number, number];\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputPasswordLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\nconst StrengthMeterProgress = styled(Progress)`\n  margin-top: 0.4em;\n`;\n\n/**\n * The input for entering a password.\n */\nconst InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      showStrengthMeter = false,\n      strengthNames,\n      strengthThresholds = [30, 60, 80],\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      onSelect = () => {},\n      disabled,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n    const [invisible, setInvisible] = useState(true);\n    const { theme } = useTheme();\n\n    // Update the selection of the input when changing the invisible flag\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection, invisible]);\n\n    const score = useMemo(\n      () => getPasswordScore(forwardedValue || ''),\n      [forwardedValue]\n    );\n\n    const strength = useMemo(() => {\n      if (score >= strengthThresholds[2]) {\n        return {\n          name: 'powerful',\n          color: theme.inputPasswordColorPowerful,\n        };\n      }\n      if (score >= strengthThresholds[1]) {\n        return {\n          name: 'strong',\n          color: theme.inputPasswordColorStrong,\n        };\n      }\n      if (score >= strengthThresholds[0]) {\n        return {\n          name: 'good',\n          color: theme.inputPasswordColorGood,\n        };\n      }\n      return {\n        name: 'weak',\n        color: theme.inputPasswordColorWeak,\n      };\n    }, [\n      score,\n      strengthThresholds,\n      theme.inputPasswordColorPowerful,\n      theme.inputPasswordColorStrong,\n      theme.inputPasswordColorGood,\n      theme.inputPasswordColorWeak,\n    ]);\n\n    return (\n      <>\n        <Input\n          type={invisible ? 'password' : 'text'}\n          right={\n            <>\n              <Button\n                key='invisible-button'\n                type='ghost'\n                wide='never'\n                size='small'\n                disabled={disabled}\n                onClick={() => {\n                  setInvisible(!invisible);\n                  if (!inputRef.current) return;\n                  inputRef.current.focus();\n                }}\n                aria-label={invisible ? locale.showLabel : locale.hideLabel}\n              >\n                {invisible ? <EyeInvisible /> : <Eye />}\n              </Button>\n              {right}\n            </>\n          }\n          value={forwardedValue}\n          onChange={setForwardedValue}\n          onSelect={(e) => {\n            // Update the selection state\n            const { selectionStart, selectionEnd } = e.currentTarget;\n            setSelection({\n              start: selectionStart || 0,\n              end: selectionEnd || 0,\n            });\n            onSelect(e);\n          }}\n          disabled={disabled}\n          {...rest}\n          ref={mergedInputRef}\n        />\n        {showStrengthMeter && (\n          <ThemeOverrider\n            overrides={{\n              progressColorStroke: strength.color,\n              get progressColorStrokeSuccess() {\n                // eslint-disable-next-line react/no-this-in-sfc\n                return this.progressColorStroke;\n              },\n            }}\n          >\n            <StrengthMeterProgress\n              size='small'\n              height='0.25em'\n              percent={score}\n              text={strengthNames ? strengthNames[strength.name] : undefined}\n            />\n          </ThemeOverrider>\n        )}\n      </>\n    );\n  }\n);\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","Eye","EyeInvisible","ThemeOverrider","useTheme","useForwardedRef","useForwardedState","getPasswordScore","React","forwardRef","useEffect","useMemo","useState","Button","Input","Progress","defaultLocale","StrengthMeterProgress","InputPassword","showStrengthMeter","strengthNames","strengthThresholds","locale","value","defaultValue","onChange","onSelect","disabled","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","selection","setSelection","start","end","invisible","setInvisible","theme","current","setSelectionRange","score","strength","name","color","inputPasswordColorPowerful","inputPasswordColorStrong","inputPasswordColorGood","inputPasswordColorWeak","createElement","Fragment","_extends","type","key","wide","size","onClick","focus","showLabel","hideLabel","e","selectionStart","selectionEnd","currentTarget","overrides","progressColorStroke","progressColorStrokeSuccess","height","percent","text","undefined","displayName"],"sources":["../../../src/InputPassword/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport { Eye, EyeInvisible } from '@os-design/icons';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport getPasswordScore from '@os-team/password-score';\nimport React, { forwardRef, useEffect, useMemo, useState } from 'react';\nimport Button from '../Button';\n\nimport Input, { InputProps } from '../Input';\n\nimport Progress from '../Progress';\nimport defaultLocale, { InputPasswordLocale } from './utils/defaultLocale';\n\nexport interface InputPasswordProps extends Omit<InputProps, 'type'> {\n  /**\n   * Whether the password strength meter is visible.\n   * @default false\n   */\n  showStrengthMeter?: boolean;\n  /**\n   * The name of a weak, good, strong, and powerful password.\n   * Located to the right of the password strength meter.\n   * @default undefined\n   */\n  strengthNames?: Record<'weak' | 'good' | 'strong' | 'powerful', string>;\n  /**\n   * From what number of score the password is considered\n   * good, strong, and powerful.\n   * @default [30, 60, 80]\n   */\n  strengthThresholds?: [number, number, number];\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputPasswordLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\nconst StrengthMeterProgress = styled(Progress)`\n  margin-top: 0.4em;\n`;\n\n/**\n * The input for entering a password.\n */\nconst InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      showStrengthMeter = false,\n      strengthNames,\n      strengthThresholds = [30, 60, 80],\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      onSelect = () => {},\n      disabled,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n    const [invisible, setInvisible] = useState(true);\n    const { theme } = useTheme();\n\n    // Update the selection of the input when changing the invisible flag\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection, invisible]);\n\n    const score = useMemo(\n      () => getPasswordScore(forwardedValue || ''),\n      [forwardedValue]\n    );\n\n    const strength = useMemo(() => {\n      if (score >= strengthThresholds[2]) {\n        return {\n          name: 'powerful',\n          color: theme.inputPasswordColorPowerful,\n        };\n      }\n      if (score >= strengthThresholds[1]) {\n        return {\n          name: 'strong',\n          color: theme.inputPasswordColorStrong,\n        };\n      }\n      if (score >= strengthThresholds[0]) {\n        return {\n          name: 'good',\n          color: theme.inputPasswordColorGood,\n        };\n      }\n      return {\n        name: 'weak',\n        color: theme.inputPasswordColorWeak,\n      };\n    }, [\n      score,\n      strengthThresholds,\n      theme.inputPasswordColorPowerful,\n      theme.inputPasswordColorStrong,\n      theme.inputPasswordColorGood,\n      theme.inputPasswordColorWeak,\n    ]);\n\n    return (\n      <>\n        <Input\n          type={invisible ? 'password' : 'text'}\n          right={\n            <>\n              <Button\n                key='invisible-button'\n                type='ghost'\n                wide='never'\n                size='small'\n                disabled={disabled}\n                onClick={() => {\n                  setInvisible(!invisible);\n                  if (!inputRef.current) return;\n                  inputRef.current.focus();\n                }}\n                aria-label={invisible ? locale.showLabel : locale.hideLabel}\n              >\n                {invisible ? <EyeInvisible /> : <Eye />}\n              </Button>\n              {right}\n            </>\n          }\n          value={forwardedValue}\n          onChange={setForwardedValue}\n          onSelect={(e) => {\n            // Update the selection state\n            const { selectionStart, selectionEnd } = e.currentTarget;\n            setSelection({\n              start: selectionStart || 0,\n              end: selectionEnd || 0,\n            });\n            onSelect(e);\n          }}\n          disabled={disabled}\n          {...rest}\n          ref={mergedInputRef}\n        />\n        {showStrengthMeter && (\n          <ThemeOverrider\n            overrides={{\n              progressColorStroke: strength.color,\n              get progressColorStrokeSuccess() {\n                // eslint-disable-next-line react/no-this-in-sfc\n                return this.progressColorStroke;\n              },\n            }}\n          >\n            <StrengthMeterProgress\n              size='small'\n              height='0.25em'\n              percent={score}\n              text={strengthNames ? strengthNames[strength.name] : undefined}\n            />\n          </ThemeOverrider>\n        )}\n      </>\n    );\n  }\n);\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":"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"}