@os-design/core 1.0.203 → 1.0.205

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","CheckCircle","CloseCircle","InfoCircle","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","createElement","_extends","role","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n  /**\n   * Type of styles.\n   */\n  type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    background-color: ${clr(p.theme.alertInfoColorBg)};\n  `;\n\nconst successContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    background-color: ${clr(p.theme.alertSuccessColorBg)};\n  `;\n\nconst errorContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    background-color: ${clr(p.theme.alertErrorColorBg)};\n  `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('type', 'size')\n)<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: 1em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${infoContainerStyles};\n  ${successContainerStyles};\n  ${errorContainerStyles};\n  ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    color: ${clr(p.theme.alertInfoColorIcon)};\n  `;\n\nconst successIconContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    color: ${clr(p.theme.alertSuccessColorIcon)};\n  `;\n\nconst errorIconContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    color: ${clr(p.theme.alertErrorColorIcon)};\n  `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n  display: flex;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n\n  ${infoIconContainerStyles};\n  ${successIconContainerStyles};\n  ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n  info: InfoCircle,\n  success: CheckCircle,\n  error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ type, size, children, ...rest }, ref) => {\n    const Icon = useMemo(() => typeIconMap[type], [type]);\n\n    return (\n      <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n        <IconContainer type={type}>\n          <Icon />\n        </IconContainer>\n        <span>{children}</span>\n      </Container>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","CheckCircle","CloseCircle","InfoCircle","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","createElement","_extends","role","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n  /**\n   * Type of styles.\n   */\n  type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    background-color: ${clr(p.theme.alertInfoColorBg)};\n  `;\n\nconst successContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    background-color: ${clr(p.theme.alertSuccessColorBg)};\n  `;\n\nconst errorContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    background-color: ${clr(p.theme.alertErrorColorBg)};\n  `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('type', 'size')\n)<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: 1em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${infoContainerStyles};\n  ${successContainerStyles};\n  ${errorContainerStyles};\n  ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    color: ${clr(p.theme.alertInfoColorIcon)};\n  `;\n\nconst successIconContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    color: ${clr(p.theme.alertSuccessColorIcon)};\n  `;\n\nconst errorIconContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    color: ${clr(p.theme.alertErrorColorIcon)};\n  `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n  display: flex;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n\n  ${infoIconContainerStyles};\n  ${successIconContainerStyles};\n  ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n  info: InfoCircle,\n  success: CheckCircle,\n  error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ type, size, children, ...rest }, ref) => {\n    const Icon = useMemo(() => typeIconMap[type], [type]);\n\n    return (\n      <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n        <IconContainer type={type}>\n          <Icon />\n        </IconContainer>\n        <span>{children}</span>\n      </Container>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","UserIcon","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","createElement","_extends","url","cropped","initials","role","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\n\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n  /**\n   * Used to render the first letter if the image URL is not specified.\n   * @default undefined\n   */\n  firstName?: string;\n  /**\n   * Used to render the second letter if the image URL is not specified.\n   * @default undefined\n   */\n  lastName?: string;\n  /**\n   * The URL of the image.\n   * @default undefined\n   */\n  image?: string;\n  /**\n   * The props of the image.\n   * @default undefined\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the user is online.\n   * @default false\n   */\n  online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  position: relative;\n  width: 1em;\n  height: 1em;\n  min-width: 1em;\n  min-height: 1em;\n  ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n  bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n  'div',\n  omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n  width: 100%;\n  height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  font-weight: 500;\n  line-height: 1;\n\n  color: hsl(0, 0%, 100%);\n  background-color: ${(p) => clr(p.bgColor)};\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  white-space: nowrap; // To disable multiline text\n  overflow: hidden; // To trim the image corners\n\n  ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n  font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n  font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n  position: absolute;\n  right: -0.05em;\n  bottom: -0.05em;\n  width: ${OUTER_SIZE}em;\n  height: ${OUTER_SIZE}em;\n  border-radius: 50%;\n  background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    width: ${INNER_SIZE}em;\n    height: ${INNER_SIZE}em;\n    border-radius: 50%;\n    background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n  }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      firstName,\n      lastName,\n      image,\n      imageProps = {},\n      online = false,\n      size = '2em',\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n\n    const bgColor = useMemo<Color>(() => {\n      const parts: string[] = [];\n      if (firstName) parts.push(firstName);\n      if (lastName) parts.push(lastName);\n      if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n      return theme.avatarDefaultColorBg;\n    }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n    const fullName = useMemo(\n      () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n      [firstName, lastName]\n    );\n\n    const renderChildren = useCallback(() => {\n      // Render the image if the image property was specified\n      if (image) return <Image url={image} cropped {...imageProps} />;\n\n      // Render the initials of the name if either firstName or lastName was specified\n      const initials = nameToInitials({ firstName, lastName });\n      if (initials) return <Initials>{initials}</Initials>;\n\n      // Otherwise render the user icon\n      return <UserIcon />;\n    }, [image, imageProps, firstName, lastName]);\n\n    return (\n      <Container size={size}>\n        <AvatarContainer\n          bgColor={bgColor}\n          role='img'\n          aria-label={fullName || 'User'}\n          {...rest}\n          ref={ref}\n        >\n          {renderChildren()}\n        </AvatarContainer>\n        {online && <Online />}\n      </Container>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","UserIcon","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","createElement","_extends","url","cropped","initials","role","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n  /**\n   * Used to render the first letter if the image URL is not specified.\n   * @default undefined\n   */\n  firstName?: string;\n  /**\n   * Used to render the second letter if the image URL is not specified.\n   * @default undefined\n   */\n  lastName?: string;\n  /**\n   * The URL of the image.\n   * @default undefined\n   */\n  image?: string;\n  /**\n   * The props of the image.\n   * @default undefined\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the user is online.\n   * @default false\n   */\n  online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  position: relative;\n  width: 1em;\n  height: 1em;\n  min-width: 1em;\n  min-height: 1em;\n  ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n  bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n  'div',\n  omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n  width: 100%;\n  height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  font-weight: 500;\n  line-height: 1;\n\n  color: hsl(0, 0%, 100%);\n  background-color: ${(p) => clr(p.bgColor)};\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  white-space: nowrap; // To disable multiline text\n  overflow: hidden; // To trim the image corners\n\n  ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n  font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n  font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n  position: absolute;\n  right: -0.05em;\n  bottom: -0.05em;\n  width: ${OUTER_SIZE}em;\n  height: ${OUTER_SIZE}em;\n  border-radius: 50%;\n  background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    width: ${INNER_SIZE}em;\n    height: ${INNER_SIZE}em;\n    border-radius: 50%;\n    background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n  }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      firstName,\n      lastName,\n      image,\n      imageProps = {},\n      online = false,\n      size = '2em',\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n\n    const bgColor = useMemo<Color>(() => {\n      const parts: string[] = [];\n      if (firstName) parts.push(firstName);\n      if (lastName) parts.push(lastName);\n      if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n      return theme.avatarDefaultColorBg;\n    }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n    const fullName = useMemo(\n      () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n      [firstName, lastName]\n    );\n\n    const renderChildren = useCallback(() => {\n      // Render the image if the image property was specified\n      if (image) return <Image url={image} cropped {...imageProps} />;\n\n      // Render the initials of the name if either firstName or lastName was specified\n      const initials = nameToInitials({ firstName, lastName });\n      if (initials) return <Initials>{initials}</Initials>;\n\n      // Otherwise render the user icon\n      return <UserIcon />;\n    }, [image, imageProps, firstName, lastName]);\n\n    return (\n      <Container size={size}>\n        <AvatarContainer\n          bgColor={bgColor}\n          role='img'\n          aria-label={fullName || 'User'}\n          {...rest}\n          ref={ref}\n        >\n          {renderChildren()}\n        </AvatarContainer>\n        {online && <Online />}\n      </Container>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","Container","AvatarSkeleton","size","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n  ({ size = '2em', ...rest }, ref) => (\n    <Container size={size} {...rest} ref={ref}>\n      <Skeleton width='1em' />\n    </Container>\n  )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMM,cAAc,gBAAGH,UAAU,CAC/B,CAAC;EAAEI,IAAI,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC7BP,KAAA,CAAAQ,aAAA,CAACL,SAAS,EAAAM,QAAA;EAACJ,IAAI,EAAEA;AAAK,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACxCP,KAAA,CAAAQ,aAAA,CAACN,QAAQ;EAACQ,KAAK,EAAC;AAAK,CAAE,CACd,CAEf,CAAC;AAEDN,cAAc,CAACO,WAAW,GAAG,gBAAgB;AAE7C,eAAeP,cAAc"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","Container","AvatarSkeleton","size","rest","ref","createElement","_extends","width","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n  ({ size = '2em', ...rest }, ref) => (\n    <Container size={size} {...rest} ref={ref}>\n      <Skeleton width='1em' />\n    </Container>\n  )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMM,cAAc,gBAAGH,UAAU,CAC/B,CAAC;EAAEI,IAAI,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC7BP,KAAA,CAAAQ,aAAA,CAACL,SAAS,EAAAM,QAAA;EAACJ,IAAI,EAAEA;AAAK,GAAKC,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACxCP,KAAA,CAAAQ,aAAA,CAACN,QAAQ;EAACQ,KAAK,EAAC;AAAK,CAAE,CACd,CAEf,CAAC;AAEDN,cAAc,CAACO,WAAW,GAAG,gBAAgB;AAE7C,eAAeP,cAAc"}

package/dist/esm/Button/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.js","names":["keyframes","styled","Loading","clr","omitEmotionProps","React","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children","createElement","Fragment"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nimport { Loading } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\n\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,GAAG,QAAQ,oBAAoB;AAExC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAYzB,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAI;AAC7B;AACA,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC/D,CAAC;AAED,MAAMC,UAAU,GAAGV,MAAM,CAACM,GAAI;AAC9B;AACA,kBAAmBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC9D,CAAC;AAED,MAAME,OAAO,GAAGX,MAAM,CAACY,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,qBAAsB;AAC5D;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGd,MAAM,CAACC,OAAO,CAAE;AACpC;AACA,CAAC;AAED,MAAMc,aAAa,GAAGhB,SAAU;AAChC;AACA;AACA,CAAC;AAKD,MAAMiB,gBAAgB,GAAGhB,MAAM,CAC7B,KAAK,EACLG,gBAAgB,CAAC,QAAQ,CAC3B,CAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACC,IAAI,CAAE;AACrC,sBAAuBX,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACE,EAAE,CAAE;AAC9C,eAAeJ,aAAc,IAAIR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACY,eAAgB;AAC/D,CAAC;;AAED;AACA,MAAMC,aAA2C,GAAGA,CAAC;EACnDC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,KAAK;EACfC,aAAa;EACbC;AACF,CAAC,kBACCtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACGN,IAAI,iBAAIlB,KAAA,CAAAuB,aAAA,CAACtB,SAAS,QAAEiB,IAAgB,CAAC,eACtClB,KAAA,CAAAuB,aAAA,CAAChB,OAAO,QAAEe,QAAkB,CAAC,EAC5BH,KAAK,iBAAInB,KAAA,CAAAuB,aAAA,CAACjB,UAAU,QAAEa,KAAkB,CAAC,EACzCC,OAAO,iBACNpB,KAAA,CAAAuB,aAAA,CAACX,gBAAgB;EAACC,MAAM,EAAEQ;AAAc,gBACtCrB,KAAA,CAAAuB,aAAA,CAACb,WAAW,MAAE,CACE,CAEpB,CACH;AAED,eAAeO,aAAa"}
+{"version":3,"file":"ButtonContent.js","names":["keyframes","styled","Loading","clr","omitEmotionProps","React","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children","createElement","Fragment"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React from 'react';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,MAAM,OAAO;AAWzB,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAI;AAC7B;AACA,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC/D,CAAC;AAED,MAAMC,UAAU,GAAGV,MAAM,CAACM,GAAI;AAC9B;AACA,kBAAmBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC9D,CAAC;AAED,MAAME,OAAO,GAAGX,MAAM,CAACY,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,qBAAsB;AAC5D;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGd,MAAM,CAACC,OAAO,CAAE;AACpC;AACA,CAAC;AAED,MAAMc,aAAa,GAAGhB,SAAU;AAChC;AACA;AACA,CAAC;AAKD,MAAMiB,gBAAgB,GAAGhB,MAAM,CAC7B,KAAK,EACLG,gBAAgB,CAAC,QAAQ,CAC3B,CAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACC,IAAI,CAAE;AACrC,sBAAuBX,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACU,MAAM,CAACE,EAAE,CAAE;AAC9C,eAAeJ,aAAc,IAAIR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACY,eAAgB;AAC/D,CAAC;;AAED;AACA,MAAMC,aAA2C,GAAGA,CAAC;EACnDC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,KAAK;EACfC,aAAa;EACbC;AACF,CAAC,kBACCtB,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,QACGN,IAAI,iBAAIlB,KAAA,CAAAuB,aAAA,CAACtB,SAAS,QAAEiB,IAAgB,CAAC,eACtClB,KAAA,CAAAuB,aAAA,CAAChB,OAAO,QAAEe,QAAkB,CAAC,EAC5BH,KAAK,iBAAInB,KAAA,CAAAuB,aAAA,CAACjB,UAAU,QAAEa,KAAkB,CAAC,EACzCC,OAAO,iBACNpB,KAAA,CAAAuB,aAAA,CAACX,gBAAgB;EAACC,MAAM,EAAEQ;AAAc,gBACtCrB,KAAA,CAAAuB,aAAA,CAACb,WAAW,MAAE,CACE,CAEpB,CACH;AAED,eAAeO,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AAExC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIT,UAAW;AACf,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGb,UAAU,CACjC,CAAC;EAAEc,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzBjB,KAAA,CAAAkB,aAAA,CAACf,SAAS,EAAAgB,QAAA;EAACC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACtDjB,KAAA,CAAAkB,aAAA,CAACX,aAAa,MAAE,CAAC,EAChBQ,QAAQ,iBAAIf,KAAA,CAAAkB,aAAA,CAACP,IAAI,QAAEI,QAAe,CAC1B,CAEf,CAAC;AAEDD,gBAAgB,CAACO,WAAW,GAAG,kBAAkB;AAEjD,eAAeP,gBAAgB"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIT,UAAW;AACf,CAAC;AAED,MAAMU,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGb,UAAU,CACjC,CAAC;EAAEc,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzBjB,KAAA,CAAAkB,aAAA,CAACf,SAAS,EAAAgB,QAAA;EAACC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACtDjB,KAAA,CAAAkB,aAAA,CAACX,aAAa,MAAE,CAAC,EAChBQ,QAAQ,iBAAIf,KAAA,CAAAkB,aAAA,CAACP,IAAI,QAAEI,QAAe,CAC1B,CAEf,CAAC;AAEDD,gBAAgB,CAACO,WAAW,GAAG,kBAAkB;AAEjD,eAAeP,gBAAgB"}

package/dist/esm/DatePicker/DatePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.js","names":["styled","getAccessibilityDateLabel","useDatePickerCalendar","Left","Right","ellipsisStyles","resetFocusStyles","transitionStyles","clr","React","useCallback","useEffect","useRef","Button","MonthContainer","div","Month","Calendar","p","theme","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DayInRange","colorText","slice","DatePickerCalendar","firstDayOfWeek","locale","value","onSelect","valueRef","current","onSelectRef","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","createElement","Fragment","type","wide","size","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","map","item","_extends","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Color, clr } from '@os-design/theming';\n\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: Date | [Date, Date] | null;\n  onSelect?: (value: Date) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DayInRange = styled(Day)`\n  background-color: ${(p) =>\n    clr([\n      ...p.theme.colorText.slice(0, 3),\n      (p.theme.colorText[3] || 1) * 0.05,\n    ] as Color)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onSelect = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const onSelectRef = useRef(onSelect);\n  useEffect(() => {\n    onSelectRef.current = onSelect;\n  }, [onSelect]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        onSelectRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          onSelectRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'dayInRange') {\n            return (\n              <DayInRange key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayInRange>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerCalendar.js","names":["styled","getAccessibilityDateLabel","useDatePickerCalendar","Left","Right","ellipsisStyles","resetFocusStyles","transitionStyles","clr","React","useCallback","useEffect","useRef","Button","MonthContainer","div","Month","Calendar","p","theme","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DayInRange","colorText","slice","DatePickerCalendar","firstDayOfWeek","locale","value","onSelect","valueRef","current","onSelectRef","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","onKeyDown","e","includes","key","preventDefault","onMouseDown","createElement","Fragment","type","wide","size","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","map","item","_extends","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport { Left, Right } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Color, clr } from '@os-design/theming';\nimport React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: Date | [Date, Date] | null;\n  onSelect?: (value: Date) => void;\n}\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DayInRange = styled(Day)`\n  background-color: ${(p) =>\n    clr([\n      ...p.theme.colorText.slice(0, 3),\n      (p.theme.colorText[3] || 1) * 0.05,\n    ] as Color)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onSelect = () => {},\n}) => {\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const onSelectRef = useRef(onSelect);\n  useEffect(() => {\n    onSelectRef.current = onSelect;\n  }, [onSelect]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        onSelectRef.current(date);\n      },\n      onKeyDown: (e) => {\n        if (['Enter', ' '].includes(e.key)) {\n          onSelectRef.current(date);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'dayInRange') {\n            return (\n              <DayInRange key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayInRange>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}

package/dist/esm/Drawer/index.js

@@ -8,7 +8,7 @@ import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
 import React, { forwardRef, useCallback, useContext } from 'react';
 import FocusLock from 'react-focus-lock';
 import { ModalMask } from '../Modal';
-const DRAWER_CONTAINER_Z_INDEX = 900;
+const DRAWER_CONTAINER_Z_INDEX = 1000;
 const DRAWER_BOX_SHADOW_SIZE_EM = 1;
 const DrawerMask = styled(ModalMask)`
   z-index: ${DRAWER_CONTAINER_Z_INDEX};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","createElement","autoFocus","Provider","value","_extends","tabIndex","onKeyDown","role","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  enableScrollingStyles,\n  resetFocusStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  ${resetFocusStyles};\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\n\n    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseDrawerContext.Provider value={onClose}>\n              <Content\n                placement={placement}\n                width={width}\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                {...rest}\n                ref={ref}\n              >\n                {children}\n              </Content>\n            </CloseDrawerContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","keyframes","styled","Portal","enableScrollingStyles","resetFocusStyles","sizeStyles","clr","useTheme","omitEmotionProps","useBodyScroll","useClosable","React","forwardRef","useCallback","useContext","FocusLock","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","CloseDrawerContext","createContext","useCloseDrawer","Drawer","onClose","size","children","onClick","rest","ref","mounted","clickHandler","e","stopPropagation","keyDownHandler","key","createElement","autoFocus","Provider","value","_extends","tabIndex","onKeyDown","role","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport Portal from '@os-design/portal';\nimport {\n  WithSize,\n  enableScrollingStyles,\n  resetFocusStyles,\n  sizeStyles,\n} from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 1000;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  ${resetFocusStyles};\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\nconst CloseDrawerContext = React.createContext<() => void>(() => {});\n\nexport const useCloseDrawer = () => useContext(CloseDrawerContext);\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    useBodyScroll(!visible);\n\n    const clickHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        onClick(e);\n      },\n      [onClick]\n    );\n\n    const keyDownHandler = useCallback(\n      (e) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          onClose();\n        }\n      },\n      [onClose]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus>\n            <CloseDrawerContext.Provider value={onClose}>\n              <Content\n                placement={placement}\n                width={width}\n                visible={visible}\n                size={size}\n                tabIndex={-1}\n                onKeyDown={keyDownHandler}\n                onClick={clickHandler}\n                role='dialog'\n                aria-modal\n                {...rest}\n                ref={ref}\n              >\n                {children}\n              </Content>\n            </CloseDrawerContext.Provider>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","ellipsisStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","Container","p","theme","formDividerColor","Content","div","Title","colorText","sizes","large","Description","inputColorPlaceholder","small","FormDivider","title","description","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,UAAU,QAAkB,mBAAmB;AACxE,SAASC,GAAG,QAAQ,oBAAoB;AAExC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AACjE;AACA;AACA,IAAIR,UAAW;AACf,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACC,KAAM;AAC1C;AACA,IAAIf,cAAe;AACnB,CAAC;AAED,MAAMgB,WAAW,GAAGjB,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACS,qBAAqB,CAAE;AACrD,eAAgBV,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACI,KAAM;AAC1C;AACA,IAAIlB,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMmB,WAAW,gBAAGd,UAAU,CAC5B,CAAC;EAAEe,KAAK;EAAEC,WAAW;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnCnB,KAAA,CAAAoB,aAAA,CAAClB,SAAS,EAAAmB,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBAC7CnB,KAAA,CAAAoB,aAAA,CAACd,OAAO,qBACNN,KAAA,CAAAoB,aAAA,CAACZ,KAAK,QAAEQ,KAAa,CAAC,eACtBhB,KAAA,CAAAoB,aAAA,CAACR,WAAW,QAAEK,WAAyB,CAChC,CACA,CAEf,CAAC;AAEDF,WAAW,CAACQ,WAAW,GAAG,aAAa;AAEvC,eAAeR,WAAW"}
+{"version":3,"file":"index.js","names":["styled","ellipsisStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","Container","p","theme","formDividerColor","Content","div","Title","colorText","sizes","large","Description","inputColorPlaceholder","small","FormDivider","title","description","rest","ref","createElement","_extends","role","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,UAAU,QAAkB,mBAAmB;AACxE,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BI,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AACjE;AACA;AACA,IAAIR,UAAW;AACf,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACC,KAAM;AAC1C;AACA,IAAIf,cAAe;AACnB,CAAC;AAED,MAAMgB,WAAW,GAAGjB,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACS,qBAAqB,CAAE;AACrD,eAAgBV,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACI,KAAM;AAC1C;AACA,IAAIlB,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMmB,WAAW,gBAAGd,UAAU,CAC5B,CAAC;EAAEe,KAAK;EAAEC,WAAW;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnCnB,KAAA,CAAAoB,aAAA,CAAClB,SAAS,EAAAmB,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBAC7CnB,KAAA,CAAAoB,aAAA,CAACd,OAAO,qBACNN,KAAA,CAAAoB,aAAA,CAACZ,KAAK,QAAEQ,KAAa,CAAC,eACtBhB,KAAA,CAAAoB,aAAA,CAACR,WAAW,QAAEK,WAAyB,CAChC,CACA,CAEf,CAAC;AAEDF,WAAW,CAACQ,WAAW,GAAG,aAAa;AAEvC,eAAeR,WAAW"}

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

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

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["css","styled","m","omitEmotionProps","React","forwardRef","Skeleton","hasMarginStyles","p","hasMargin","theme","headingsMarginTop","type","headingsMarginBottom","MULTIPLIER","StyledHeaderSkeleton","headingsFontSize","min","md","headingsFontSizeMd","HeaderSkeleton","width","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/HeaderSkeleton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface HeaderSkeletonProps extends SkeletonProps {\n  /**\n   * The header type.\n   * @default 1\n   */\n  type?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the header has top and bottom margins.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin: ${p.theme.headingsMarginTop[p.type - 1]}em 0\n      ${p.theme.headingsMarginBottom}em;\n  `;\n\nconst MULTIPLIER = 0.9;\n\ntype StyledHeaderSkeletonProps = Required<\n  Pick<HeaderSkeletonProps, 'type' | 'hasMargin'>\n>;\nconst StyledHeaderSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('type', 'hasMargin')\n)<StyledHeaderSkeletonProps>`\n  font-size: ${(p) => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;\n  ${m.min.md} {\n    font-size: ${(p) => p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER}em;\n  }\n  ${hasMarginStyles};\n`;\n\n/**\n * Provides a header placeholder while a user waits for the content to load.\n */\nconst HeaderSkeleton = forwardRef<HTMLDivElement, HeaderSkeletonProps>(\n  ({ type = 1, hasMargin = false, width = '100%', ...rest }, ref) => (\n    <StyledHeaderSkeleton\n      type={type}\n      hasMargin={hasMargin}\n      width={width}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nHeaderSkeleton.displayName = 'HeaderSkeleton';\n\nexport default HeaderSkeleton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAerD,MAAMC,eAAe,GAAIC,CAAC,IACxBA,CAAC,CAACC,SAAS,IACXT,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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","useCallback","EMPTY_IMAGE","coverStyles","p","cover","StyledImage","theme","borderRadius","Image","url","sizes","defaultSize","cropped","className","rest","ref","getUrl","size","createElement","_extends","src","srcSet","map","join","filter","i","displayName"],"sources":["../../../src/Image/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback } from 'react';\n\nconst EMPTY_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';\n\ntype JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;\nexport interface ImageProps extends JsxImgProps {\n  /**\n   * The image URL.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * All available sizes of the image.\n   * @default [72, 192, 512, 1024, 2560]\n   */\n  sizes?: number[];\n  /**\n   * The image size if the browser does not support lazy loading.\n   * @default 72\n   */\n  defaultSize?: number;\n  /**\n   * Whether the image is cropped.\n   * @default false\n   */\n  cropped?: boolean;\n  /**\n   * Sets object-fit: cover.\n   * @default false\n   */\n  cover?: boolean;\n}\n\nconst coverStyles = (p) =>\n  p.cover &&\n  css`\n    height: 100%;\n    object-fit: cover;\n  `;\n\ntype StyledImageProps = Pick<ImageProps, 'cover'>;\nconst StyledImage = styled('img', omitEmotionProps('cover'))<StyledImageProps>`\n  display: block; // To remove the indent under the image\n  width: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  ${coverStyles};\n`;\n\n/**\n * The image with lazy loading. Required lazysizes.\n * Should be loaded by @os-team/image-storage.\n */\nconst Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      url,\n      sizes = [72, 192, 512, 1024, 2560],\n      defaultSize = 72,\n      cropped = false,\n      cover = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const getUrl = useCallback(\n      (size: number) => `${url}-${size}${cropped ? '-c' : ''}`,\n      [url, cropped]\n    );\n\n    if (!url) {\n      return (\n        <StyledImage\n          src={EMPTY_IMAGE}\n          className={className}\n          {...rest}\n          ref={ref}\n        />\n      );\n    }\n\n    return (\n      <StyledImage\n        src={getUrl(defaultSize)}\n        srcSet={EMPTY_IMAGE}\n        data-sizes='auto'\n        data-srcset={sizes.map((size) => `${getUrl(size)} ${size}w`).join(', ')}\n        cover={cover}\n        className={[className, 'lazyload'].filter((i) => i).join(' ')}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,MAAMC,WAAW,GACf,oHAAoH;AA+BtH,MAAMC,WAAW,GAAIC,CAAC,IACpBA,CAAC,CAACC,KAAK,IACPT,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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","Skeleton","StyledImageSkeleton","ImageSkeleton","props","ref","createElement","_extends","width","displayName"],"sources":["../../../src/ImageSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type ImageSkeletonProps = Omit<SkeletonProps, 'width'>;\n\nconst StyledImageSkeleton = styled(Skeleton)`\n  height: 100%;\n`;\n\n/**\n * Provides an image placeholder while a user waits for the content to load.\n */\nconst ImageSkeleton = forwardRef<HTMLDivElement, ImageSkeletonProps>(\n  (props, ref) => <StyledImageSkeleton width='100%' {...props} ref={ref} />\n);\n\nImageSkeleton.displayName = 'ImageSkeleton';\n\nexport default ImageSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,mBAAmB,GAAGJ,MAAM,CAACG,QAAQ,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.map

@@ -1 +1 @@
-{"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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"}
+{"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';\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/InputPassword/index.js.map

@@ -1 +1 @@
-{"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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"}
+{"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';\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';\nimport Input, { InputProps } from '../Input';\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","StyledInputSkeleton","p","theme","baseHeight","InputSkeleton","props","ref","createElement","_extends","width","displayName"],"sources":["../../../src/InputSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type InputSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledInputSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: ${(p) => p.theme.baseHeight}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides an input placeholder while a user waits for the content to load.\n */\nconst InputSkeleton = forwardRef<HTMLDivElement, InputSkeletonProps>(\n  (props, ref) => <StyledInputSkeleton width='100%' {...props} ref={ref} />\n);\n\nInputSkeleton.displayName = 'InputSkeleton';\n\nexport default InputSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,mBAAmB,GAAGN,MAAM,CAChCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,CACzB,CAAY;AACZ,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,UAAW;AACtC,IAAIR,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMS,aAAa,gBAAGN,UAAU,CAC9B,CAACO,KAAK,EAAEC,GAAG,kBAAKT,KAAA,CAAAU,aAAA,CAACP,mBAAmB,EAAAQ,QAAA;EAACC,KAAK,EAAC;AAAM,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CAC1E,CAAC;AAEDF,aAAa,CAACM,WAAW,GAAG,eAAe;AAE3C,eAAeN,aAAa"}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","omitEmotionProps","React","forwardRef","Skeleton","StyledInputSkeleton","p","theme","baseHeight","InputSkeleton","props","ref","createElement","_extends","width","displayName"],"sources":["../../../src/InputSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type InputSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledInputSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: ${(p) => p.theme.baseHeight}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides an input placeholder while a user waits for the content to load.\n */\nconst InputSkeleton = forwardRef<HTMLDivElement, InputSkeletonProps>(\n  (props, ref) => <StyledInputSkeleton width='100%' {...props} ref={ref} />\n);\n\nInputSkeleton.displayName = 'InputSkeleton';\n\nexport default InputSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,QAAQ,MAAyB,aAAa;AAIrD,MAAMC,mBAAmB,GAAGN,MAAM,CAChCK,QAAQ,EACRH,gBAAgB,CAAC,MAAM,CACzB,CAAY;AACZ,YAAaK,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,UAAW;AACtC,IAAIR,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMS,aAAa,gBAAGN,UAAU,CAC9B,CAACO,KAAK,EAAEC,GAAG,kBAAKT,KAAA,CAAAU,aAAA,CAACP,mBAAmB,EAAAQ,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/LinkButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","disabledStyles","p","disabled","StyledLinkButton","withComponent","LinkButton","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/LinkButton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\n\nimport useButtonColors from '../Button/utils/useButtonColors';\n\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type LinkButtonProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ButtonProps;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    pointer-events: none;\n  `;\n\nconst StyledLinkButton = styled(\n  StyledButton.withComponent('a'),\n  omitEmotionProps('as', 'disabled')\n)`\n  text-decoration: none;\n  display: inline-flex;\n  ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as the a tag.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      as,\n      onMouseDown = () => {},\n      onKeyDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledLinkButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown(e);\n          if (disabled || loading) e.preventDefault();\n        }}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledLinkButton>\n    );\n  }\n);\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AAEnD,OAAOC,eAAe,MAAM,iCAAiC;AAU7D,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN;AACA,GAAG;AAEH,MAAMW,gBAAgB,GAAGV,MAAM,CAC7BI,YAAY,CAACO,aAAa,CAAC,GAAG,CAAC,EAC/BV,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIM,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGT,UAAU,CAC3B,CACE;EACEU,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACtDO,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,oBACEP,KAAA,CAAA0B,aAAA,CAAClB,gBAAgB,EAAAmB,QAAA;IACfC,OAAO,EAAEjB,IAAK;IACdkB,MAAM,EAAEL,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGW,CAAC,IAAK;MAClBX,WAAW,CAACW,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFX,SAAS,EAAGU,CAAC,IAAK;MAChBV,SAAS,CAACU,CAAC,CAAC;MACZ,IAAIvB,QAAQ,IAAIS,OAAO,EAAEc,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAexB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETvB,KAAA,CAAA0B,aAAA,CAACvB,aAAa;IACZU,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CAAC;AAEvB,CACF,CAAC;AAEDX,UAAU,CAACsB,WAAW,GAAG,YAAY;AAErC,eAAetB,UAAU"}
+{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","disabledStyles","p","disabled","StyledLinkButton","withComponent","LinkButton","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/LinkButton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type LinkButtonProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ButtonProps;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    pointer-events: none;\n  `;\n\nconst StyledLinkButton = styled(\n  StyledButton.withComponent('a'),\n  omitEmotionProps('as', 'disabled')\n)`\n  text-decoration: none;\n  display: inline-flex;\n  ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as the a tag.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      as,\n      onMouseDown = () => {},\n      onKeyDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledLinkButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown(e);\n          if (disabled || loading) e.preventDefault();\n        }}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledLinkButton>\n    );\n  }\n);\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAS7D,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN;AACA,GAAG;AAEH,MAAMW,gBAAgB,GAAGV,MAAM,CAC7BI,YAAY,CAACO,aAAa,CAAC,GAAG,CAAC,EAC/BV,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIM,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGT,UAAU,CAC3B,CACE;EACEU,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACtDO,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,oBACEP,KAAA,CAAA0B,aAAA,CAAClB,gBAAgB,EAAAmB,QAAA;IACfC,OAAO,EAAEjB,IAAK;IACdkB,MAAM,EAAEL,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGW,CAAC,IAAK;MAClBX,WAAW,CAACW,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFX,SAAS,EAAGU,CAAC,IAAK;MAChBV,SAAS,CAACU,CAAC,CAAC;MACZ,IAAIvB,QAAQ,IAAIS,OAAO,EAAEc,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAexB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETvB,KAAA,CAAA0B,aAAA,CAACvB,aAAa;IACZU,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CAAC;AAEvB,CACF,CAAC;AAEDX,UAAU,CAACsB,WAAW,GAAG,YAAY;AAErC,eAAetB,UAAU"}

package/dist/esm/List/WindowScroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"WindowScroller.js","names":["useEvent","React","useCallback","useEffect","useRef","disableBodyPointerEvents","enableBodyPointerEventsAfterDelay","DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document","createElement","Fragment"],"sources":["../../../src/List/WindowScroller.tsx"],"sourcesContent":["import { useEvent } from '@os-design/utils';\n\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport {\n  disableBodyPointerEvents,\n  enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n  top: number;\n  left: number;\n}\n\ninterface WindowScrollerProps {\n  onScroll?: (props: ScrollPosition) => void;\n  children?: React.ReactNode;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n  onScroll = () => {},\n  children,\n}) => {\n  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  }, [onScroll]);\n\n  const scrollListener = useCallback(() => {\n    disableBodyPointerEvents();\n    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n    if (!onScrollRef.current) return;\n    onScrollRef.current({\n      top: window.pageYOffset,\n      left: window.pageXOffset,\n    });\n  }, []);\n\n  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n  useEvent(document, 'scroll', scrollListener);\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,kBAAkB;AAE3C,OAAOC,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAE7D,SACEC,wBAAwB,EACxBC,iCAAiC,QAC5B,2BAA2B;AAYlC;AACA;AACA;AACA;AACA,OAAO,MAAMC,mCAAmC,GAAG,GAAG;AAEtD,MAAMC,cAA6C,GAAGA,CAAC;EACrDC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC;AACF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGP,MAAM,CAAkC,CAAC;EAE7DD,SAAS,CAAC,MAAM;IACdQ,WAAW,CAACC,OAAO,GAAGH,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMI,cAAc,GAAGX,WAAW,CAAC,MAAM;IACvCG,wBAAwB,CAAC,CAAC;IAC1BC,iCAAiC,CAACC,mCAAmC,CAAC;IACtE,IAAI,CAACI,WAAW,CAACC,OAAO,EAAE;IAC1BD,WAAW,CAACC,OAAO,CAAC;MAClBE,GAAG,EAAEC,MAAM,CAACC,WAAW;MACvBC,IAAI,EAAEF,MAAM,CAACG;IACf,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM,MAAMG,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAC/DN,QAAQ,CAACmB,QAAQ,EAAE,QAAQ,EAAEN,cAAc,CAAC;;EAE5C;EACA,oBAAOZ,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,QAAGX,QAAW,CAAC;AACxB,CAAC;AAED,eAAeF,cAAc"}
+{"version":3,"file":"WindowScroller.js","names":["useEvent","React","useCallback","useEffect","useRef","disableBodyPointerEvents","enableBodyPointerEventsAfterDelay","DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document","createElement","Fragment"],"sources":["../../../src/List/WindowScroller.tsx"],"sourcesContent":["import { useEvent } from '@os-design/utils';\nimport React, { useCallback, useEffect, useRef } from 'react';\nimport {\n  disableBodyPointerEvents,\n  enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n  top: number;\n  left: number;\n}\n\ninterface WindowScrollerProps {\n  onScroll?: (props: ScrollPosition) => void;\n  children?: React.ReactNode;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n  onScroll = () => {},\n  children,\n}) => {\n  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  }, [onScroll]);\n\n  const scrollListener = useCallback(() => {\n    disableBodyPointerEvents();\n    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n    if (!onScrollRef.current) return;\n    onScrollRef.current({\n      top: window.pageYOffset,\n      left: window.pageXOffset,\n    });\n  }, []);\n\n  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n  useEvent(document, 'scroll', scrollListener);\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,kBAAkB;AAC3C,OAAOC,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC7D,SACEC,wBAAwB,EACxBC,iCAAiC,QAC5B,2BAA2B;AAYlC;AACA;AACA;AACA;AACA,OAAO,MAAMC,mCAAmC,GAAG,GAAG;AAEtD,MAAMC,cAA6C,GAAGA,CAAC;EACrDC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC;AACF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGP,MAAM,CAAkC,CAAC;EAE7DD,SAAS,CAAC,MAAM;IACdQ,WAAW,CAACC,OAAO,GAAGH,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMI,cAAc,GAAGX,WAAW,CAAC,MAAM;IACvCG,wBAAwB,CAAC,CAAC;IAC1BC,iCAAiC,CAACC,mCAAmC,CAAC;IACtE,IAAI,CAACI,WAAW,CAACC,OAAO,EAAE;IAC1BD,WAAW,CAACC,OAAO,CAAC;MAClBE,GAAG,EAAEC,MAAM,CAACC,WAAW;MACvBC,IAAI,EAAEF,MAAM,CAACG;IACf,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM,MAAMG,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAC/DN,QAAQ,CAACmB,QAAQ,EAAE,QAAQ,EAAEN,cAAc,CAAC;;EAE5C;EACA,oBAAOZ,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,QAAGX,QAAW,CAAC;AACxB,CAAC;AAED,eAAeF,cAAc"}