@os-design/core 1.0.156 → 1.0.157

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","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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"}

package/dist/esm/GlobalStyles/index.js

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

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

@@ -1 +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,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAEA,MAAMC,YAAsB,GAAG,MAAM;EACnCH,KAAK;EACL,oBACE,oBAAC,MAAD;IAAQ,MAAM,EAAGI,KAAD,IAAW,CAACH,WAAW,CAACG,KAAD,CAAZ,EAAqBF,gBAAgB,CAACE,KAAD,CAArC;EAA3B,EADF;AAGD,CALD;;AAOAD,YAAY,CAACE,WAAb,GAA2B,cAA3B;AAEA,eAAeF,YAAf"}
+{"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"}

package/dist/esm/GlobalStyles/resetStyles.js

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-
 const resetStyles = theme => css`
   body {
     margin: 0;
@@ -11,6 +10,5 @@ const resetStyles = theme => css`
     margin: 0 0 ${theme.paragraphMarginBottom}em;
   }
 `;
-
 export default resetStyles;
 //# sourceMappingURL=resetStyles.js.map

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,GAAT,QAAoB,gBAApB;;AAIA,MAAMC,WAAW,GAAIC,KAAD,IAAoCF,GAAI;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBE,KAAK,CAACC,qBAAsB;AAC9C;AACA,CAVA;;AAYA,eAAeF,WAAf"}
+{"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"}

package/dist/esm/GlobalStyles/typographyStyles.js

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import fp from 'facepaint';
 import { m } from '@os-design/media';
 import { clr } from '@os-design/theming';
-
 const headingsFontSizeStyles = fontSize => {
   const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
   return fp(headings, {
@@ -11,7 +10,6 @@ const headingsFontSizeStyles = fontSize => {
     fontSize: fontSize.map(item => `${item}em`)
   });
 };
-
 const headingsMarginTopStyles = marginTop => {
   const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(h => `${h}:not(:first-of-type)`);
   return fp(headings, {
@@ -20,7 +18,6 @@ const headingsMarginTopStyles = marginTop => {
     marginTop: marginTop.map(item => `${item}em`)
   });
 };
-
 const typographyStyles = theme => css`
   html,
   button,
@@ -75,6 +72,5 @@ const typographyStyles = theme => css`
     ${headingsFontSizeStyles(theme.headingsFontSizeMd)}
   } ;
 `;
-
 export default typographyStyles;
 //# sourceMappingURL=typographyStyles.js.map

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,GAAT,QAAoB,gBAApB;AACA,OAAOC,EAAP,MAAe,WAAf;AAEA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAAgBC,GAAhB,QAA2B,oBAA3B;;AAEA,MAAMC,sBAAsB,GAAIC,QAAD,IAAwB;EACrD,MAAMC,QAAQ,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,EAA+B,IAA/B,CAAjB;EACA,OAAOL,EAAE,CAACK,QAAD,EAAW;IAAEC,OAAO,EAAE;EAAX,CAAX,CAAF,CAAgC;IACrCF,QAAQ,EAAEA,QAAQ,CAACG,GAAT,CAAcC,IAAD,IAAW,GAAEA,IAAK,IAA/B;EAD2B,CAAhC,CAAP;AAGD,CALD;;AAOA,MAAMC,uBAAuB,GAAIC,SAAD,IAAyB;EACvD,MAAML,QAAQ,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,EAA+B,IAA/B,EAAqCE,GAArC,CACdI,CAAD,IAAQ,GAAEA,CAAE,sBADG,CAAjB;EAGA,OAAOX,EAAE,CAACK,QAAD,EAAW;IAAEC,OAAO,EAAE;EAAX,CAAX,CAAF,CAAgC;IACrCI,SAAS,EAAEA,SAAS,CAACH,GAAV,CAAeC,IAAD,IAAW,GAAEA,IAAK,IAAhC;EAD0B,CAAhC,CAAP;AAGD,CAPD;;AASA,MAAMI,gBAAgB,GAAIC,KAAD,IAAoCd,GAAI;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,GAAG,CAACW,KAAK,CAACC,SAAP,CAAkB;AAClC;AACA;AACA;AACA,mBAAmBD,KAAK,CAACE,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMf,EAAE,CAAC,CAACC,CAAC,CAACe,GAAF,CAAMC,EAAP,EAAWhB,CAAC,CAACe,GAAF,CAAME,GAAjB,CAAD,CAAF,CAA0B;EAC1Bd,QAAQ,EAAES,KAAK,CAACT,QAAN,CAAeG,GAAf,CAAoBY,CAAD,IAAQ,GAAEA,CAAE,IAA/B;AADgB,CAA1B,CAEC;AACP;AACA;AACA;AACA,wBAAwBjB,GAAG,CAACW,KAAK,CAACO,OAAP,CAAgB;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,KAAK,CAACQ,oBAAqB;AAC7C;AACA;AACA;AACA,IAAIZ,uBAAuB,CAACI,KAAK,CAACS,iBAAP,CAA0B;AACrD;AACA;AACA,IAAInB,sBAAsB,CAACU,KAAK,CAACU,gBAAP,CAAyB;AACnD;AACA;AACA,IAAItB,CAAC,CAACe,GAAF,CAAMC,EAAG;AACb,MAAMd,sBAAsB,CAACU,KAAK,CAACW,kBAAP,CAA2B;AACvD;AACA,CArDA;;AAuDA,eAAeZ,gBAAf"}
+{"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"}

package/dist/esm/HeaderSkeleton/index.js

@@ -1,17 +1,14 @@
 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 React, { forwardRef } from 'react';
 import { omitEmotionProps } from '@os-design/utils';
 import { m } from '@os-design/media';
 import { css } from '@emotion/react';
 import Skeleton from '../Skeleton';
-
 const hasMarginStyles = p => p.hasMargin && css`
     margin: ${p.theme.headingsMarginTop[p.type - 1]}em 0
       ${p.theme.headingsMarginBottom}em;
   `;
-
 const MULTIPLIER = 0.9;
 const StyledHeaderSkeleton = styled(Skeleton, omitEmotionProps('type', 'hasMargin'))`
   font-size: ${p => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;
@@ -20,10 +17,10 @@ const StyledHeaderSkeleton = styled(Skeleton, omitEmotionProps('type', 'hasMargi
   }
   ${hasMarginStyles};
 `;
+
 /**
  * Provides a header placeholder while a user waits for the content to load.
  */
-
 const HeaderSkeleton = /*#__PURE__*/forwardRef(({
   type = 1,
   hasMargin = false,

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,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,QAAP,MAAwC,aAAxC;;AAeA,MAAMC,eAAe,GAAIC,CAAD,IACtBA,CAAC,CAACC,SAAF,IACAJ,GAAI;AACN,cAAcG,CAAC,CAACE,KAAF,CAAQC,iBAAR,CAA0BH,CAAC,CAACI,IAAF,GAAS,CAAnC,CAAsC;AACpD,QAAQJ,CAAC,CAACE,KAAF,CAAQG,oBAAqB;AACrC,GALA;;AAOA,MAAMC,UAAU,GAAG,GAAnB;AAKA,MAAMC,oBAAoB,GAAGf,MAAM,CACjCM,QADiC,EAEjCH,gBAAgB,CAAC,MAAD,EAAS,WAAT,CAFiB,CAGN;AAC7B,eAAgBK,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQM,gBAAR,CAAyBR,CAAC,CAACI,IAAF,GAAS,CAAlC,IAAuCE,UAAW;AACxE,IAAIV,CAAC,CAACa,GAAF,CAAMC,EAAG;AACb,iBAAkBV,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQS,kBAAR,CAA2BX,CAAC,CAACI,IAAF,GAAS,CAApC,IAAyCE,UAAW;AAC5E;AACA,IAAIP,eAAgB;AACpB,CATA;AAWA;AACA;AACA;;AACA,MAAMa,cAAc,gBAAGlB,UAAU,CAC/B,CAAC;EAAEU,IAAI,GAAG,CAAT;EAAYH,SAAS,GAAG,KAAxB;EAA+BY,KAAK,GAAG,MAAvC;EAA+C,GAAGC;AAAlD,CAAD,EAA2DC,GAA3D,kBACE,oBAAC,oBAAD;EACE,IAAI,EAAEX,IADR;EAEE,SAAS,EAAEH,SAFb;EAGE,KAAK,EAAEY;AAHT,GAIMC,IAJN;EAKE,GAAG,EAAEC;AALP,GAF6B,CAAjC;AAYAH,cAAc,CAACI,WAAf,GAA6B,gBAA7B;AAEA,eAAeJ,cAAf"}
+{"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"}

package/dist/esm/Image/index.js

@@ -1,27 +1,24 @@
 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 styled from '@emotion/styled';
 import { omitEmotionProps } from '@os-design/utils';
 import { css } from '@emotion/react';
 const EMPTY_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';
-
 const coverStyles = p => p.cover && css`
     height: 100%;
     object-fit: cover;
   `;
-
 const StyledImage = styled('img', omitEmotionProps('cover'))`
   display: block; // To remove the indent under the image
   width: 100%;
   border-radius: ${p => p.theme.borderRadius}em;
   ${coverStyles};
 `;
+
 /**
  * The image with lazy loading. Required lazysizes.
  * Should be loaded by @os-team/image-storage.
  */
-
 const Image = /*#__PURE__*/forwardRef(({
   url,
   sizes = [72, 192, 512, 1024, 2560],
@@ -32,7 +29,6 @@ const Image = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const getUrl = useCallback(size => `${url}-${size}${cropped ? '-c' : ''}`, [url, cropped]);
-
   if (!url) {
     return /*#__PURE__*/React.createElement(StyledImage, _extends({
       src: EMPTY_IMAGE,
@@ -41,7 +37,6 @@ const Image = /*#__PURE__*/forwardRef(({
       ref: ref
     }));
   }
-
   return /*#__PURE__*/React.createElement(StyledImage, _extends({
     src: getUrl(defaultSize),
     srcSet: EMPTY_IMAGE,

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,KAAP,IAAgBC,UAAhB,EAA4BC,WAA5B,QAA+C,OAA/C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AAEA,MAAMC,WAAW,GACf,oHADF;;AAgCA,MAAMC,WAAW,GAAIC,CAAD,IAClBA,CAAC,CAACC,KAAF,IACAJ,GAAI;AACN;AACA;AACA,GALA;;AAQA,MAAMK,WAAW,GAAGP,MAAM,CAAC,KAAD,EAAQC,gBAAgB,CAAC,OAAD,CAAxB,CAAqD;AAC/E;AACA;AACA,mBAAoBI,CAAD,IAAOA,CAAC,CAACG,KAAF,CAAQC,YAAa;AAC/C,IAAIL,WAAY;AAChB,CALA;AAOA;AACA;AACA;AACA;;AACA,MAAMM,KAAK,gBAAGZ,UAAU,CACtB,CACE;EACEa,GADF;EAEEC,KAAK,GAAG,CAAC,EAAD,EAAK,GAAL,EAAU,GAAV,EAAe,IAAf,EAAqB,IAArB,CAFV;EAGEC,WAAW,GAAG,EAHhB;EAIEC,OAAO,GAAG,KAJZ;EAKER,KAAK,GAAG,KALV;EAMES,SANF;EAOE,GAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;EACH,MAAMC,MAAM,GAAGnB,WAAW,CACvBoB,IAAD,IAAmB,GAAER,GAAI,IAAGQ,IAAK,GAAEL,OAAO,GAAG,IAAH,GAAU,EAAG,EAD/B,EAExB,CAACH,GAAD,EAAMG,OAAN,CAFwB,CAA1B;;EAKA,IAAI,CAACH,GAAL,EAAU;IACR,oBACE,oBAAC,WAAD;MACE,GAAG,EAAER,WADP;MAEE,SAAS,EAAEY;IAFb,GAGMC,IAHN;MAIE,GAAG,EAAEC;IAJP,GADF;EAQD;;EAED,oBACE,oBAAC,WAAD;IACE,GAAG,EAAEC,MAAM,CAACL,WAAD,CADb;IAEE,MAAM,EAAEV,WAFV;IAGE,cAAW,MAHb;IAIE,eAAaS,KAAK,CAACQ,GAAN,CAAWD,IAAD,IAAW,GAAED,MAAM,CAACC,IAAD,CAAO,IAAGA,IAAK,GAA5C,EAAgDE,IAAhD,CAAqD,IAArD,CAJf;IAKE,KAAK,EAAEf,KALT;IAME,SAAS,EAAE,CAACS,SAAD,EAAY,UAAZ,EAAwBO,MAAxB,CAAgCC,CAAD,IAAOA,CAAtC,EAAyCF,IAAzC,CAA8C,GAA9C;EANb,GAOML,IAPN;IAQE,GAAG,EAAEC;EARP,GADF;AAYD,CAzCqB,CAAxB;AA4CAP,KAAK,CAACc,WAAN,GAAoB,OAApB;AAEA,eAAed,KAAf"}
+{"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"}

package/dist/esm/ImageSkeleton/index.js

@@ -1,15 +1,14 @@
 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 Skeleton from '../Skeleton';
 const StyledImageSkeleton = styled(Skeleton)`
   height: 100%;
 `;
+
 /**
  * Provides an image placeholder while a user waits for the content to load.
  */
-
 const ImageSkeleton = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(StyledImageSkeleton, _extends({
   width: "100%"
 }, props, {

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,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,QAAP,MAAwC,aAAxC;AAIA,MAAMC,mBAAmB,GAAGF,MAAM,CAACC,QAAD,CAAW;AAC7C;AACA,CAFA;AAIA;AACA;AACA;;AACA,MAAME,aAAa,gBAAGJ,UAAU,CAC9B,CAACK,KAAD,EAAQC,GAAR,kBAAgB,oBAAC,mBAAD;EAAqB,KAAK,EAAC;AAA3B,GAAsCD,KAAtC;EAA6C,GAAG,EAAEC;AAAlD,GADc,CAAhC;AAIAF,aAAa,CAACG,WAAd,GAA4B,eAA5B;AAEA,eAAeH,aAAf"}
+{"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"}

package/dist/esm/Input/index.js

@@ -1,5 +1,4 @@
 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, useMemo } from 'react';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
 import { omitEmotionProps, useForwardedRef } from '@os-design/utils';
@@ -8,7 +7,6 @@ import { clr, ThemeOverrider } from '@os-design/theming';
 import { css } from '@emotion/react';
 import { Loading } from '@os-design/icons';
 import getFocusableElements from './utils/getFocusableElements';
-
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover {
@@ -16,14 +14,12 @@ const hoverStyles = p => !p.disabled && css`
       }
     }
   `;
-
 const focusStyles = p => !p.disabled && css`
     &:focus-within {
       border-color: ${clr(p.theme.inputFocusColorBorder)};
       box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};
     }
   `;
-
 const disabledStyles = p => p.disabled && css`
     cursor: not-allowed;
     color: ${clr(p.theme.inputDisabledColorText)};
@@ -38,7 +34,6 @@ const disabledStyles = p => p.disabled && css`
       }
     }
   `;
-
 export const InputContainer = styled('div', omitEmotionProps('disabled', 'size'))`
   ${resetFocusStyles};
 
@@ -58,15 +53,12 @@ export const InputContainer = styled('div', omitEmotionProps('disabled', 'size')
   ${sizeStyles};
   ${transitionStyles('border-color', 'box-shadow')};
 `;
-
 const notHasLeftStyles = p => !p.hasLeft && css`
     padding-left: ${p.theme.inputPaddingHorizontal}em;
   `;
-
 const notHasRightStyles = p => !p.hasRight && css`
     padding-right: ${p.theme.inputPaddingHorizontal}em;
   `;
-
 export const StyledInput = styled('input', omitEmotionProps('hasLeft', 'hasRight'))`
   ${resetFocusStyles};
   appearance: none;
@@ -107,10 +99,10 @@ const RightAddon = styled(Addon)`
       padding-right: ${p.theme.inputPaddingHorizontal}em;
     `}
 `;
+
 /**
  * The basic input component.
  */
-
 const Input = /*#__PURE__*/forwardRef(({
   type = 'text',
   left,
@@ -146,7 +138,6 @@ const Input = /*#__PURE__*/forwardRef(({
       const focusableElements = getFocusableElements(document);
       const inputFocusableElements = innerContainerRef.current ? getFocusableElements(innerContainerRef.current) : [];
       const firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
-
       if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
         const inputContainerIndex = focusableElements.findIndex(el => el === innerContainerRef.current);
         if (inputContainerIndex === 0) return;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","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","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } 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    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(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        onKeyDown={(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        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":";;AAAA,OAAOA,KAAP,IAA2CC,UAA3C,EAAuDC,OAAvD,QAAsE,OAAtE;AACA,SACEC,gBADF,EAEEC,UAFF,EAGEC,gBAHF,QAKO,mBALP;AAMA,SAASC,gBAAT,EAA2BC,eAA3B,QAAkD,kBAAlD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,oBAAP,MAAiC,8BAAjC;;AAkEA,MAAMC,WAAW,GAAIC,CAAD,IAClB,CAACA,CAAC,CAACC,QAAH,IACAL,GAAI;AACN;AACA;AACA,wBAAwBF,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,qBAAT,CAAgC;AAC3D;AACA;AACA,GARA;;AAUA,MAAMC,WAAW,GAAIJ,CAAD,IAClB,CAACA,CAAC,CAACC,QAAH,IACAL,GAAI;AACN;AACA,sBAAsBF,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQG,qBAAT,CAAgC;AACzD,iCAAiCX,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQI,qBAAT,CAAgC;AACpE;AACA,GAPA;;AASA,MAAMC,cAAc,GAAIP,CAAD,IACrBA,CAAC,CAACC,QAAF,IACAL,GAAI;AACN;AACA,aAAaF,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQM,sBAAT,CAAiC;AACjD,wBAAwBd,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQO,oBAAT,CAA+B;AAC1D,oBAAoBf,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQQ,wBAAT,CAAmC;AAC1D;AACA;AACA;AACA;AACA;AACA,iBAAiBhB,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQS,6BAAT,CAAwC;AAC5D;AACA;AACA,GAfA;;AAkBA,OAAO,MAAMC,cAAc,GAAGnB,MAAM,CAClC,KADkC,EAElCF,gBAAgB,CAAC,UAAD,EAAa,MAAb,CAFkB,CAGb;AACvB,IAAIH,gBAAiB;AACrB;AACA;AACA;AACA,YAAaY,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQW,UAAW;AACtC;AACA,sBAAuBb,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQY,YAAT,CAAuB;AACvD;AACA,YAAad,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQa,gBAAiB;AAC5C,MAAOf,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQc,gBAAT,CAA2B;AAC3C,mBAAoBhB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQe,YAAa;AAC/C;AACA,IAAIlB,WAAY;AAChB,IAAIK,WAAY;AAChB,IAAIG,cAAe;AACnB,IAAIlB,UAAW;AACf,IAAIC,gBAAgB,CAAC,cAAD,EAAiB,YAAjB,CAA+B;AACnD,CArBO;;AAuBP,MAAM4B,gBAAgB,GAAIlB,CAAD,IACvB,CAACA,CAAC,CAACmB,OAAH,IACAvB,GAAI;AACN,oBAAoBI,CAAC,CAACE,KAAF,CAAQkB,sBAAuB;AACnD,GAJA;;AAMA,MAAMC,iBAAiB,GAAIrB,CAAD,IACxB,CAACA,CAAC,CAACsB,QAAH,IACA1B,GAAI;AACN,qBAAqBI,CAAC,CAACE,KAAF,CAAQkB,sBAAuB;AACpD,GAJA;;AAUA,OAAO,MAAMG,WAAW,GAAG9B,MAAM,CAC/B,OAD+B,EAE/BF,gBAAgB,CAAC,SAAD,EAAY,UAAZ,CAFe,CAGb;AACpB,IAAIH,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,WAAYY,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQsB,cAAT,CAAyB;AAC9C;AACA;AACA;AACA,aAAcxB,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQuB,qBAAT,CAAgC;AACvD;AACA;AACA,IAAIP,gBAAiB;AACrB,IAAIG,iBAAkB;AACtB,CApBO;AAyBP,MAAMK,KAAK,GAAGjC,MAAM,CAAC,MAAD,EAASF,gBAAgB,CAAC,YAAD,CAAzB,CAAqD;AACzE;AACA;AACA;AACA,WAAYS,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQuB,qBAAT,CAAgC;AACrD;AACA;AACA;AACA;AACA,CATA;AAWA,MAAME,SAAS,GAAGlC,MAAM,CAACiC,KAAD,CAAQ;AAChC,mBAAoB1B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQ0B,2BAA4B;AAC9D,IAAK5B,CAAD,IACAA,CAAC,CAAC6B,UAAF,IACAjC,GAAI;AACR,sBAAsBI,CAAC,CAACE,KAAF,CAAQkB,sBAAuB;AACrD,KAAM;AACN,CAPA;AASA,MAAMU,UAAU,GAAGrC,MAAM,CAACiC,KAAD,CAAQ;AACjC,kBAAmB1B,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQ0B,2BAA4B;AAC7D,IAAK5B,CAAD,IACAA,CAAC,CAAC6B,UAAF,IACAjC,GAAI;AACR,uBAAuBI,CAAC,CAACE,KAAF,CAAQkB,sBAAuB;AACtD,KAAM;AACN,CAPA;AASA;AACA;AACA;;AACA,MAAMW,KAAK,gBAAG7C,UAAU,CACtB,CACE;EACE8C,IAAI,GAAG,MADT;EAEEC,IAFF;EAGEC,cAAc,GAAG,KAHnB;EAIEC,KAJF;EAKEC,eAAe,GAAG,KALpB;EAMEnC,QAAQ,GAAG,KANb;EAOEoC,OAAO,GAAG,KAPZ;EAQEC,YARF;EASEC,cAAc,GAAG,EATnB;EAUEC,IAVF;EAWEC,KAXF;EAYEC,QAAQ,GAAG,MAAM,CAAE,CAZrB;EAaE,GAAGC;AAbL,CADF,EAgBEC,GAhBF,KAiBK;EACH,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IACJtD,eAAe,CAAC8C,YAAD,CADjB;EAGA,MAAMS,UAAU,GAAG5D,OAAO,CACxB,MAAOkD,OAAO,gBAAG,oBAAC,OAAD,OAAH,GAAiBF,KADP,EAExB,CAACE,OAAD,EAAUF,KAAV,CAFwB,CAA1B;EAKA,MAAMa,oBAAoB,GAAG7D,OAAO,CAClC,MAAOkD,OAAO,GAAG,IAAH,GAAUD,eADU,EAElC,CAACC,OAAD,EAAUD,eAAV,CAFkC,CAApC;EAKA,oBACE,oBAAC,cAAD;IACE,QAAQ,EAAEnC,QADZ;IAEE,IAAI,EAAEuC,IAFR;IAGE,QAAQ,EAAE,CAACvC,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAH7B;IAIE,OAAO,EAAGgD,CAAD,IAAO;MACd;MACA;MACA,IAAIhD,QAAQ,IAAIgD,CAAC,CAACC,MAAF,KAAaL,iBAAiB,CAACM,OAA/C,EAAwD;MACxD,MAAMC,iBAAiB,GAAGtD,oBAAoB,CAC5C+C,iBAAiB,CAACM,OAD0B,CAA9C;MAGAC,iBAAiB,CAAC,CAAD,CAAjB,CAAqBC,KAArB;IACD,CAZH;IAaE,SAAS,EAAGJ,CAAD,IAAO;MAChB;MACA;MACA,MAAMG,iBAAiB,GAAGtD,oBAAoB,CAACwD,QAAD,CAA9C;MACA,MAAMC,sBAAsB,GAAGV,iBAAiB,CAACM,OAAlB,GAC3BrD,oBAAoB,CAAC+C,iBAAiB,CAACM,OAAnB,CADO,GAE3B,EAFJ;MAGA,MAAMK,0BAA0B,GAC9BD,sBAAsB,CAAC,CAAD,CAAtB,KAA8BD,QAAQ,CAACG,aADzC;;MAEA,IAAID,0BAA0B,IAAIP,CAAC,CAACS,GAAF,KAAU,KAAxC,IAAiDT,CAAC,CAACU,QAAvD,EAAiE;QAC/D,MAAMC,mBAAmB,GAAGR,iBAAiB,CAACS,SAAlB,CACzBC,EAAD,IAAQA,EAAE,KAAKjB,iBAAiB,CAACM,OADP,CAA5B;QAGA,IAAIS,mBAAmB,KAAK,CAA5B,EAA+B;QAC/B,MAAMG,2BAA2B,GAC/BX,iBAAiB,CAACQ,mBAAmB,GAAG,CAAvB,CADnB;QAEAG,2BAA2B,CAACV,KAA5B;MACD;IACF,CA/BH;IAgCE,GAAG,EAAEP;EAhCP,GAiCMP,cAjCN,GAmCGN,IAAI,iBACH,oBAAC,cAAD;IAAgB,SAAS,EAAE;MAAE+B,uBAAuB,EAAE;IAA3B;EAA3B,gBACE,oBAAC,SAAD;IAAW,UAAU,EAAE9B;EAAvB,GAAwCD,IAAxC,CADF,CApCJ,eAyCE,oBAAC,WAAD;IACE,IAAI,EAAED,IADR;IAEE,QAAQ,EAAE/B,QAFZ;IAGE,OAAO,EAAE,CAAC,CAACgC,IAHb;IAIE,QAAQ,EAAE,CAAC,CAACE,KAJd;IAKE,KAAK,EAAEM,KAAK,IAAI,EALlB;IAME,QAAQ,EAAGQ,CAAD,IAAOP,QAAQ,CAACO,CAAC,CAACC,MAAF,CAAST,KAAV,EAAiBQ,CAAjB;EAN3B,GAOMN,IAPN;IAQE,GAAG,EAAEC;EARP,GAzCF,EAoDGG,UAAU,iBACT,oBAAC,cAAD;IAAgB,SAAS,EAAE;MAAEiB,uBAAuB,EAAE;IAA3B;EAA3B,gBACE,oBAAC,UAAD;IAAY,UAAU,EAAEhB;EAAxB,GACGD,UADH,CADF,CArDJ,CADF;AA8DD,CA9FqB,CAAxB;AAiGAhB,KAAK,CAACkC,WAAN,GAAoB,OAApB;AAEA,eAAelC,KAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","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","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } 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    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(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        onKeyDown={(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        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

@@ -1,4 +1,3 @@
 const getFocusableElements = element => [...element.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
-
 export default getFocusableElements;
 //# sourceMappingURL=getFocusableElements.js.map

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,OAAD,IAC3B,CACE,GAAGA,OAAO,CAACC,gBAAR,CACD,6EADC,CADL,EAIEC,MAJF,CAIUC,EAAD,IAAQ,CAACA,EAAE,CAACC,YAAH,CAAgB,UAAhB,CAJlB,CADF;;AAOA,eAAeL,oBAAf"}
+{"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"}

package/dist/esm/InputNumber/index.js

@@ -1,11 +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 React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useForwardedRef } from '@os-design/utils';
 import { numberToFormattedString, getNextState, getNextCaret, useValidate, useGetCaretWithinValue } from '@os-design/input-number-utils';
 import Input from '../Input';
 import defaultLocale from './utils/defaultLocale';
-
 /**
  * The input for entering a number.
  */
@@ -48,12 +46,14 @@ const InputNumber = /*#__PURE__*/forwardRef(({
     start: 0,
     end: 0
   });
-  const getCaretWithinValue = useGetCaretWithinValue(prefix, suffix); // Update the value
+  const getCaretWithinValue = useGetCaretWithinValue(prefix, suffix);
 
+  // Update the value
   useEffect(() => {
     setValueString(numberToFormattedString(value, options));
-  }, [value, options]); // Update the selection
+  }, [value, options]);
 
+  // Update the selection
   useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.setSelectionRange(selection.start, selection.end);
@@ -84,12 +84,15 @@ const InputNumber = /*#__PURE__*/forwardRef(({
     value: valueString,
     onChange: (v, e) => {
       // Get a new value as a string and number
-      const nextState = getNextState(v, options); // Set the new string value in the input field
+      const nextState = getNextState(v, options);
 
-      setValueString(nextState.valueString); // Send the new numeric value in the onChange callback
+      // Set the new string value in the input field
+      setValueString(nextState.valueString);
 
-      onChange(nextState.valueNumber); // Update the caret position
+      // Send the new numeric value in the onChange callback
+      onChange(nextState.valueNumber);
 
+      // Update the caret position
       const nextCaret = getCaretWithinValue(getNextCaret({
         value: v,
         prevValueString: valueString,