@pega/cosmos-react-core 5.0.0-dev.5.0 → 5.0.0-dev.6.1

package/lib/components/File/FileVisual.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, CSSProperties, SyntheticEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport { ForwardProps, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image, { StyledImage } from '../Image';\nimport { useTheme } from '../../hooks';\n\nimport { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n  /** Attachment/File type, it has an impact on background color and icon rendered. */\n  type: AttachmentType;\n  /** A string to be used as an image src for a attachment thumbnail. */\n  thumbnail?: string;\n  /** Called when a thumbnail encounters an error while loading. */\n  onThumbnailError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Reference to a button element. */\n  ref?: Ref<HTMLDivElement>;\n}\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}.${ThemeColorVariant}`;\n\nconst mapping: Record<\n  AttachmentType,\n  { backgroundColor: BackgroundColor } & (\n    | { iconName: string; text?: never }\n    | { iconName?: never; text: string }\n  )\n> = {\n  generic: {\n    iconName: 'paper-clip',\n    backgroundColor: 'slate.dark'\n  },\n  video: {\n    iconName: 'play-solid',\n    backgroundColor: 'slate.dark'\n  },\n  audio: {\n    iconName: 'speaker-on-solid',\n    backgroundColor: 'slate.dark'\n  },\n  document: {\n    iconName: 'filetype-text',\n    backgroundColor: 'blue.medium'\n  },\n  message: {\n    iconName: 'mail-solid',\n    backgroundColor: 'blue.dark'\n  },\n  pdf: {\n    text: 'PDF',\n    backgroundColor: 'red.medium'\n  },\n  spreadsheet: {\n    iconName: 'grid-solid',\n    backgroundColor: 'green.medium'\n  },\n  presentation: {\n    iconName: 'slideshow-solid',\n    backgroundColor: 'orange.medium'\n  },\n  link: {\n    iconName: 'chain',\n    backgroundColor: 'purple.dark'\n  },\n  archive: {\n    iconName: 'archive-solid',\n    backgroundColor: 'slate.dark'\n  },\n  database: {\n    iconName: 'disc-stack-solid',\n    backgroundColor: 'slate.dark'\n  },\n  image: {\n    iconName: 'picture-solid',\n    backgroundColor: 'slate.dark'\n  },\n  text: {\n    iconName: 'filetype-text',\n    backgroundColor: 'slate.dark'\n  }\n} as const;\n\nexport const StyledFileVisual = styled.div``;\n\nexport const StyledTextFrame = styled(StyledFileVisual)(({ theme }) => {\n  const {\n    base: {\n      palette: { light },\n      'border-radius': baseBorderRadius,\n      'font-size': baseFontSize,\n      'font-weight': { 'semi-bold': semiBoldWeight }\n    },\n    components: {\n      icon: {\n        size: { m: iconSize },\n        'border-radius-multiplier': borderRadiusMultiplier\n      }\n    }\n  } = theme;\n  return css`\n    background-color: var(--bg);\n    color: ${light};\n    height: ${iconSize};\n    width: ${iconSize};\n    border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n    font-size: calc(0.7 * ${baseFontSize});\n    font-weight: ${semiBoldWeight};\n    user-select: none;\n    -webkit-user-select: none;\n  `;\n});\n\nStyledTextFrame.defaultProps = defaultThemeProp;\n\nconst StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    height: 100%;\n    width: 100%;\n\n    ${StyledImage} {\n      margin: auto;\n      height: unset;\n      width: unset;\n      max-height: 100%;\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledThumbnailFrame.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(function FileVisual(\n  { type, thumbnail, onThumbnailError, ...restProps }: PropsWithoutRef<FileVisualProps>,\n  ref: FileVisualProps['ref']\n) {\n  const visualConfig = mapping[type];\n\n  const [color, lightness] = visualConfig.backgroundColor.split('.', 2) as [\n    ThemeColor,\n    ThemeColorVariant\n  ];\n\n  const {\n    base: {\n      colors: {\n        [color]: { [lightness]: backgroundColor }\n      },\n      palette: { light: foregroundColor }\n    }\n  } = useTheme();\n\n  if (thumbnail) {\n    return (\n      <Flex {...restProps} as={StyledThumbnailFrame} container>\n        <Image src={thumbnail} onError={onThumbnailError} alt='' />\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      {visualConfig.iconName ? (\n        <Icon\n          {...restProps}\n          ref={ref}\n          name={visualConfig.iconName}\n          background={backgroundColor}\n          foreground={foregroundColor}\n        />\n      ) : (\n        <Flex\n          {...restProps}\n          as={StyledTextFrame}\n          ref={ref}\n          container={{ justify: 'center', alignItems: 'center' }}\n          style={{ '--bg': backgroundColor } as CSSProperties}\n        >\n          {visualConfig.text}\n        </Flex>\n      )}\n    </>\n  );\n});\n\nexport default FileVisual;\n"]}
+{"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, FC, Ref, CSSProperties, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport type { ForwardProps, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image, { StyledImage } from '../Image';\nimport { useTheme } from '../../hooks';\n\nimport type { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n  /** Attachment/File type, it has an impact on background color and icon rendered. */\n  type: AttachmentType;\n  /** A string to be used as an image src for a attachment thumbnail. */\n  thumbnail?: string;\n  /** Called when a thumbnail encounters an error while loading. */\n  onThumbnailError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Reference to a button element. */\n  ref?: Ref<HTMLDivElement>;\n}\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}.${ThemeColorVariant}`;\n\nconst mapping: Record<\n  AttachmentType,\n  { backgroundColor: BackgroundColor } & (\n    | { iconName: string; text?: never }\n    | { iconName?: never; text: string }\n  )\n> = {\n  generic: {\n    iconName: 'paper-clip',\n    backgroundColor: 'slate.dark'\n  },\n  video: {\n    iconName: 'play-solid',\n    backgroundColor: 'slate.dark'\n  },\n  audio: {\n    iconName: 'speaker-on-solid',\n    backgroundColor: 'slate.dark'\n  },\n  document: {\n    iconName: 'filetype-text',\n    backgroundColor: 'blue.medium'\n  },\n  message: {\n    iconName: 'mail-solid',\n    backgroundColor: 'blue.dark'\n  },\n  pdf: {\n    text: 'PDF',\n    backgroundColor: 'red.medium'\n  },\n  spreadsheet: {\n    iconName: 'grid-solid',\n    backgroundColor: 'green.medium'\n  },\n  presentation: {\n    iconName: 'slideshow-solid',\n    backgroundColor: 'orange.medium'\n  },\n  link: {\n    iconName: 'chain',\n    backgroundColor: 'purple.dark'\n  },\n  archive: {\n    iconName: 'archive-solid',\n    backgroundColor: 'slate.dark'\n  },\n  database: {\n    iconName: 'disc-stack-solid',\n    backgroundColor: 'slate.dark'\n  },\n  image: {\n    iconName: 'picture-solid',\n    backgroundColor: 'slate.dark'\n  },\n  text: {\n    iconName: 'filetype-text',\n    backgroundColor: 'slate.dark'\n  }\n} as const;\n\nexport const StyledFileVisual = styled.div``;\n\nexport const StyledTextFrame = styled(StyledFileVisual)(({ theme }) => {\n  const {\n    base: {\n      palette: { light },\n      'border-radius': baseBorderRadius,\n      'font-size': baseFontSize,\n      'font-weight': { 'semi-bold': semiBoldWeight }\n    },\n    components: {\n      icon: {\n        size: { m: iconSize },\n        'border-radius-multiplier': borderRadiusMultiplier\n      }\n    }\n  } = theme;\n  return css`\n    background-color: var(--bg);\n    color: ${light};\n    height: ${iconSize};\n    width: ${iconSize};\n    border-radius: calc(${borderRadiusMultiplier} * ${baseBorderRadius});\n    font-size: calc(0.7 * ${baseFontSize});\n    font-weight: ${semiBoldWeight};\n    user-select: none;\n    -webkit-user-select: none;\n  `;\n});\n\nStyledTextFrame.defaultProps = defaultThemeProp;\n\nconst StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    height: 100%;\n    width: 100%;\n\n    ${StyledImage} {\n      margin: auto;\n      height: unset;\n      width: unset;\n      max-height: 100%;\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledThumbnailFrame.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(function FileVisual(\n  { type, thumbnail, onThumbnailError, ...restProps }: PropsWithoutRef<FileVisualProps>,\n  ref: FileVisualProps['ref']\n) {\n  const visualConfig = mapping[type];\n\n  const [color, lightness] = visualConfig.backgroundColor.split('.', 2) as [\n    ThemeColor,\n    ThemeColorVariant\n  ];\n\n  const {\n    base: {\n      colors: {\n        [color]: { [lightness]: backgroundColor }\n      },\n      palette: { light: foregroundColor }\n    }\n  } = useTheme();\n\n  if (thumbnail) {\n    return (\n      <Flex {...restProps} as={StyledThumbnailFrame} container>\n        <Image src={thumbnail} onError={onThumbnailError} alt='' />\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      {visualConfig.iconName ? (\n        <Icon\n          {...restProps}\n          ref={ref}\n          name={visualConfig.iconName}\n          background={backgroundColor}\n          foreground={foregroundColor}\n        />\n      ) : (\n        <Flex\n          {...restProps}\n          as={StyledTextFrame}\n          ref={ref}\n          container={{ justify: 'center', alignItems: 'center' }}\n          style={{ '--bg': backgroundColor } as CSSProperties}\n        >\n          {visualConfig.text}\n        </Flex>\n      )}\n    </>\n  );\n});\n\nexport default FileVisual;\n"]}

package/lib/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, Ref, ReactNode } from 'react';
-import { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
+import type { FunctionComponent, Ref, ReactNode } from 'react';
+import type { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
 type PaddingValue = number | undefined;
 export interface FlexContainerProps {
     /** Display as inline-flex. */

package/lib/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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"}

package/lib/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\ntype PaddingValue = number | undefined;\n\nexport interface FlexContainerProps {\n  /** Display as inline-flex. */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [blockInline: PaddingValue]\n    | [block: PaddingValue, inline: PaddingValue]\n    | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue]\n    | [\n        blockStart: PaddingValue,\n        inlineEnd: PaddingValue,\n        inlineStart: PaddingValue,\n        blockEnd: PaddingValue\n      ];\n  /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';\n  /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';\n  /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */\n  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';\n  /**\n   * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.\n   * @deprecated\n   */\n  itemGap?: number;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/almanac/properties/g/gap/)\n   */\n  gap?: number;\n}\n\nexport interface FlexItemProps {\n  /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */\n  alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';\n  /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */\n  grow?: number;\n  /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */\n  shrink?: number;\n  /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */\n  basis?: string;\n}\n\nexport interface BaseFlexProps {\n  container?: FlexContainerProps | true;\n  item?: FlexItemProps;\n}\n\ntype BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;\n\nexport type FlexProps = RequireAtLeastOne<\n  BaseFlexProps &\n    BaseProps &\n    AsProp & {\n      /** Content for either a container or item. */\n      children?: ReactNode;\n      /** Ref for the flex element. */\n      ref?: Ref<Element>;\n      /** Override props at extra small screen sizes and above. */\n      xs?: BreakpointFlexProps;\n      /** Override props at small screen sizes and above. */\n      sm?: BreakpointFlexProps;\n      /** Override props at medium screen sizes and above. */\n      md?: BreakpointFlexProps;\n      /** Override props at large screen sizes and above. */\n      lg?: BreakpointFlexProps;\n      /** Override props at extra large screen sizes and above. */\n      xl?: BreakpointFlexProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  if (['start', 'end'].includes(value)) return `flex-${value}`;\n  return value;\n};\n\nconst getLogicalPadding = (pad: FlexContainerProps['pad']) => {\n  if (!Array.isArray(pad)) {\n    return [pad, pad, pad, pad];\n  }\n\n  switch (pad.length) {\n    case 1:\n      return [pad[0], pad[0], pad[0], pad[0]];\n    case 2:\n      return [pad[0], pad[1], pad[0], pad[1]];\n    case 3:\n      return [pad[0], pad[1], pad[2], pad[1]];\n    case 4:\n      return pad;\n    default:\n      return [undefined, undefined, undefined, undefined];\n  }\n};\n\nconst getContainerStyles = (container: FlexProps['container'], spacing: string) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  const paddingConfig = getLogicalPadding(container.pad);\n\n  if (container && typeof container === 'object') {\n    const isRow = !container.direction || container.direction.includes('row');\n    const isReverse = container.direction && container.direction.includes('reverse');\n\n    return css`\n      display: ${container.inline ? 'inline-flex' : 'flex'};\n\n      ${paddingConfig[0] !== undefined &&\n      css`\n        padding-block-start: calc(${paddingConfig[0]} * ${spacing});\n      `}\n      ${paddingConfig[1] !== undefined &&\n      css`\n        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});\n      `}\n\n        ${paddingConfig[2] !== undefined &&\n      css`\n        padding-block-end: calc(${paddingConfig[2]} * ${spacing});\n      `}\n\n        ${paddingConfig[3] !== undefined &&\n      css`\n        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});\n      `}\n\n      ${container.direction &&\n      css`\n        flex-direction: ${container.direction};\n      `}\n\n      ${container.justify &&\n      css`\n        justify-content: ${prefix(container.justify)};\n      `}\n\n      ${container.wrap &&\n      css`\n        flex-wrap: ${container.wrap};\n      `}\n\n      ${container.alignItems &&\n      css`\n        align-items: ${prefix(container.alignItems)};\n      `}\n\n      ${container.alignContent &&\n      css`\n        align-content: ${prefix(container.alignContent)};\n      `}\n\n      ${container.itemGap &&\n      css`\n          > * {\n            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props =>\n        props.theme.base.spacing});\n            ${isReverse ? ':last-child' : ':first-child'} {\n              margin-${isRow ? 'inline-start' : 'block-start'}: 0;\n            }\n          }\n        `}\n\n      ${container.gap !== undefined &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.colGap !== undefined &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.rowGap !== undefined &&\n      css`\n        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});\n      `}\n    `;\n  }\n};\n\nconst getItemStyles = (item: FlexProps['item']) => {\n  return css`\n    ${item &&\n    css`\n      max-width: 100%;\n      min-width: 0;\n\n      ${item.grow !== undefined &&\n      css`\n        flex-grow: ${item.grow};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        flex-shrink: ${item.shrink};\n      `}\n\n      ${item.alignSelf &&\n      css`\n        align-self: ${prefix(item.alignSelf)};\n      `}\n\n      ${item.basis &&\n      css`\n        flex-basis: ${item.basis};\n      `}\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledFlex = styled.div<FlexProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints, spacing }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container, spacing)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nconst Flex: FunctionComponent<FlexProps & ForwardProps> = forwardRef(function Flex(\n  props: PropsWithoutRef<FlexProps>,\n  ref: FlexProps['ref']\n) {\n  return <StyledFlex {...props} ref={ref} />;\n});\n\nexport default Flex;\n"]}
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\ntype PaddingValue = number | undefined;\n\nexport interface FlexContainerProps {\n  /** Display as inline-flex. */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [blockInline: PaddingValue]\n    | [block: PaddingValue, inline: PaddingValue]\n    | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue]\n    | [\n        blockStart: PaddingValue,\n        inlineEnd: PaddingValue,\n        inlineStart: PaddingValue,\n        blockEnd: PaddingValue\n      ];\n  /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';\n  /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';\n  /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */\n  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';\n  /**\n   * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.\n   * @deprecated\n   */\n  itemGap?: number;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/almanac/properties/g/gap/)\n   */\n  gap?: number;\n}\n\nexport interface FlexItemProps {\n  /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */\n  alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';\n  /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */\n  grow?: number;\n  /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */\n  shrink?: number;\n  /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */\n  basis?: string;\n}\n\nexport interface BaseFlexProps {\n  container?: FlexContainerProps | true;\n  item?: FlexItemProps;\n}\n\ntype BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;\n\nexport type FlexProps = RequireAtLeastOne<\n  BaseFlexProps &\n    BaseProps &\n    AsProp & {\n      /** Content for either a container or item. */\n      children?: ReactNode;\n      /** Ref for the flex element. */\n      ref?: Ref<Element>;\n      /** Override props at extra small screen sizes and above. */\n      xs?: BreakpointFlexProps;\n      /** Override props at small screen sizes and above. */\n      sm?: BreakpointFlexProps;\n      /** Override props at medium screen sizes and above. */\n      md?: BreakpointFlexProps;\n      /** Override props at large screen sizes and above. */\n      lg?: BreakpointFlexProps;\n      /** Override props at extra large screen sizes and above. */\n      xl?: BreakpointFlexProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  if (['start', 'end'].includes(value)) return `flex-${value}`;\n  return value;\n};\n\nconst getLogicalPadding = (pad: FlexContainerProps['pad']) => {\n  if (!Array.isArray(pad)) {\n    return [pad, pad, pad, pad];\n  }\n\n  switch (pad.length) {\n    case 1:\n      return [pad[0], pad[0], pad[0], pad[0]];\n    case 2:\n      return [pad[0], pad[1], pad[0], pad[1]];\n    case 3:\n      return [pad[0], pad[1], pad[2], pad[1]];\n    case 4:\n      return pad;\n    default:\n      return [undefined, undefined, undefined, undefined];\n  }\n};\n\nconst getContainerStyles = (container: FlexProps['container'], spacing: string) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  const paddingConfig = getLogicalPadding(container.pad);\n\n  if (container && typeof container === 'object') {\n    const isRow = !container.direction || container.direction.includes('row');\n    const isReverse = container.direction && container.direction.includes('reverse');\n\n    return css`\n      display: ${container.inline ? 'inline-flex' : 'flex'};\n\n      ${paddingConfig[0] !== undefined &&\n      css`\n        padding-block-start: calc(${paddingConfig[0]} * ${spacing});\n      `}\n      ${paddingConfig[1] !== undefined &&\n      css`\n        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});\n      `}\n\n        ${paddingConfig[2] !== undefined &&\n      css`\n        padding-block-end: calc(${paddingConfig[2]} * ${spacing});\n      `}\n\n        ${paddingConfig[3] !== undefined &&\n      css`\n        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});\n      `}\n\n      ${container.direction &&\n      css`\n        flex-direction: ${container.direction};\n      `}\n\n      ${container.justify &&\n      css`\n        justify-content: ${prefix(container.justify)};\n      `}\n\n      ${container.wrap &&\n      css`\n        flex-wrap: ${container.wrap};\n      `}\n\n      ${container.alignItems &&\n      css`\n        align-items: ${prefix(container.alignItems)};\n      `}\n\n      ${container.alignContent &&\n      css`\n        align-content: ${prefix(container.alignContent)};\n      `}\n\n      ${container.itemGap &&\n      css`\n          > * {\n            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props =>\n        props.theme.base.spacing});\n            ${isReverse ? ':last-child' : ':first-child'} {\n              margin-${isRow ? 'inline-start' : 'block-start'}: 0;\n            }\n          }\n        `}\n\n      ${container.gap !== undefined &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.colGap !== undefined &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.rowGap !== undefined &&\n      css`\n        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});\n      `}\n    `;\n  }\n};\n\nconst getItemStyles = (item: FlexProps['item']) => {\n  return css`\n    ${item &&\n    css`\n      max-width: 100%;\n      min-width: 0;\n\n      ${item.grow !== undefined &&\n      css`\n        flex-grow: ${item.grow};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        flex-shrink: ${item.shrink};\n      `}\n\n      ${item.alignSelf &&\n      css`\n        align-self: ${prefix(item.alignSelf)};\n      `}\n\n      ${item.basis &&\n      css`\n        flex-basis: ${item.basis};\n      `}\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledFlex = styled.div<FlexProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints, spacing }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container, spacing)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nconst Flex: FunctionComponent<FlexProps & ForwardProps> = forwardRef(function Flex(\n  props: PropsWithoutRef<FlexProps>,\n  ref: FlexProps['ref']\n) {\n  return <StyledFlex {...props} ref={ref} />;\n});\n\nexport default Flex;\n"]}

package/lib/components/Form/Form.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { ForwardProps, OmitStrict, TestIdProp } from '../../types';
-import { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
+import type { FC } from 'react';
+import type { ForwardProps, OmitStrict, TestIdProp } from '../../types';
+import type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
 export interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {
     /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
     children: BaseFormProps['content'];

package/lib/components/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;;;;AAyCD,wBAAiD"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;;;;AAyCD,wBAAiD"}

package/lib/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,IAAI,GAAiC,UAAU,CAAC,SAAS,IAAI,CACjE,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(function Form(\n  {\n    testId,\n    children,\n    actions,\n    progress,\n    heading,\n    description,\n    banners,\n    ...restProps\n  }: PropsWithoutRef<FormProps>,\n  ref: FormProps['ref']\n) {\n  const stepId = useUID();\n  const testIds = useTestIds(testId, getFormTestIds);\n\n  return (\n    <MultiStepForm\n      data-testid={testIds.root}\n      {...restProps}\n      heading={heading}\n      steps={[\n        {\n          id: stepId,\n          name: '',\n          actions,\n          content: children,\n          description,\n          banners\n        }\n      ]}\n      currentStepId={stepId}\n      progress={progress}\n      ref={ref}\n      autoComplete='off'\n    />\n  );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,IAAI,GAAiC,UAAU,CAAC,SAAS,IAAI,CACjE,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\n\nimport type { ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(function Form(\n  {\n    testId,\n    children,\n    actions,\n    progress,\n    heading,\n    description,\n    banners,\n    ...restProps\n  }: PropsWithoutRef<FormProps>,\n  ref: FormProps['ref']\n) {\n  const stepId = useUID();\n  const testIds = useTestIds(testId, getFormTestIds);\n\n  return (\n    <MultiStepForm\n      data-testid={testIds.root}\n      {...restProps}\n      heading={heading}\n      steps={[\n        {\n          id: stepId,\n          name: '',\n          actions,\n          content: children,\n          description,\n          banners\n        }\n      ]}\n      currentStepId={stepId}\n      progress={progress}\n      ref={ref}\n      autoComplete='off'\n    />\n  );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}

package/lib/components/FormControl/FormControl.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-import { AdditionalInfoProps } from '../AdditionalInfo';
+import type { FunctionComponent, ReactNode } from 'react';
+import type { BaseProps, ForwardProps } from '../../types';
+import type { AdditionalInfoProps } from '../AdditionalInfo';
 export interface FormControlProps extends BaseProps {
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.

package/lib/components/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;SA6G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;SA6G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAqDjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;;6BAGJ,KAAK;oCACE,MAAM,CAAC,IAAI;;;;;;;;4BAQnB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAAC,KAAwC,EAAE,GAAwB;IACrF,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n   * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n  /** Used to clear component inputs with imperative handle */\n  clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition-property: color, background-color, border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  function FormControl(props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}
+{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAqDjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;;6BAGJ,KAAK;oCACE,MAAM,CAAC,IAAI;;;;;;;;4BAQnB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAAC,KAAwC,EAAE,GAAwB;IACrF,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n   * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n  /** Used to clear component inputs with imperative handle */\n  clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition-property: color, background-color, border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  function FormControl(props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}

package/lib/components/FormField/FormField.d.ts

@@ -1,9 +1,9 @@
-import { FC, ReactNode, ComponentType, ReactElement } from 'react';
-import { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';
-import { FlexProps } from '../Flex';
-import { FormControlProps } from '../FormControl';
-import { LabelProps } from '../Label';
-import { elements } from './FormField.test-ids';
+import type { FC, ReactNode, ComponentType, ReactElement } from 'react';
+import type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';
+import type { FlexProps } from '../Flex';
+import type { FormControlProps } from '../FormControl';
+import type { LabelProps } from '../Label';
+import type { elements } from './FormField.test-ids';
 export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>, TestIdProp<typeof elements> {
     /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */
     children: ReactElement | ReactElement[];

package/lib/components/FormField/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAW1D,OAAO,EAAuB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrE,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAyBF,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SA+DtE,CAAC;;;;AAyRH,wBAA2D"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAY3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAyBF,eAAO,MAAM,eAAe;mBACQ,OAAO;wBAAsB,OAAO;SA+DtE,CAAC;;;;AAyRH,wBAA2D"}

package/lib/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactNode,\n  ComponentType,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  useState,\n  PropsWithoutRef,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds, elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n    TestIdProp<typeof elements> {\n  /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n  children: ReactElement | ReactElement[];\n  /**\n   * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n   * A random id will be generated if none is provided.\n   * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n   * The id prop will be used to generate the following:\n   * - FormControl <-> Label association via a Label's htmlFor prop.\n   * - FormField's wrapping element id {id}-field.\n   * - FormField info element id ${id}-info.\n   */\n  id?: string;\n  /**\n   * Determines how the wrapping label should be rendered.\n   * @default 'label'\n   */\n  labelAs?: LabelProps['as'];\n  /**\n   * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n   * @default undefined\n   */\n  labelFor?: LabelProps['htmlFor'];\n  /**\n   * Sets the id of the label.\n   * @default undefined\n   */\n  labelId?: LabelProps['id'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Visually places the label after the input.\n   * @default false\n   */\n  labelAfter?: boolean;\n  /**\n   * Property used to check whether input type is radio to handle styling for RadioCheck\n   * @default false\n   */\n  isRadioCheck?: boolean;\n  /**\n   * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n   * @default 'div'\n   */\n  as?: 'div' | 'fieldset' | ComponentType<any>;\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: boolean;\n  /** Optionally utilized by Input or Select. */\n  actions?: Action[];\n  /** Enables Flex container prop pass through. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledRequiredAsterisk = styled.span(({ theme }) => {\n  const {\n    base: {\n      palette: { urgent }\n    }\n  } = theme;\n\n  return css`\n    vertical-align: top;\n    color: ${urgent};\n  `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n  ${StyledRequiredAsterisk} {\n    margin-inline-end: auto;\n  }\n`;\n\nexport const StyledFormField = styled.div<\n  FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n  const {\n    labelAsLegend,\n    showAdditionalInfo,\n    disabled,\n    required,\n    theme: {\n      base: { 'disabled-opacity': disabledOpacity, spacing }\n    }\n  } = props;\n  const { ltr } = useDirection();\n\n  return css`\n    ${disabled &&\n    css`\n      opacity: ${disabledOpacity};\n      -webkit-user-select: none;\n      user-select: none;\n    `}\n    position: relative;\n    border: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} {\n      margin-bottom: calc(0.25 * ${spacing});\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n\n    ${labelAsLegend &&\n    (showAdditionalInfo || required) &&\n    css`\n      display: block;\n\n      > legend {\n        float: ${ltr ? 'left' : 'right'};\n      }\n\n      > ${StyledRequiredAsterisk} {\n        float: ${ltr ? 'left' : 'right'};\n\n        ${!showAdditionalInfo &&\n        css`\n          + * {\n            clear: both;\n          }\n        `}\n      }\n\n      > ${StyledAdditionalInfo} {\n        float: ${ltr ? 'right' : 'left'};\n\n        + * {\n          clear: both;\n        }\n      }\n    `}\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': baseRadius,\n        spacing\n      },\n      components: {\n        'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n        'form-field': formField\n      }\n    }\n  }) => {\n    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n    const backgroundColor = formField.pending['status-color'];\n    const hoverColors = getHoverColors(backgroundColor);\n    const color = tryCatch(() => readableColor(backgroundColor));\n    const borderColor = color ? rgba(color, 0.4) : color;\n\n    return css`\n      background-color: ${backgroundColor};\n      color: ${color};\n      font-size: ${buttonFontSize};\n      min-width: calc(3 * ${spacing});\n      min-height: calc(3 * ${spacing});\n      padding: 0 ${spacing};\n      border-radius: 0;\n      border: none;\n      &:first-child {\n        border-inline-end: ${borderWidth} solid ${borderColor};\n        border-end-start-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: calc(2 * ${spacing});\n      }\n      &:last-child {\n        border-end-end-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: 0;\n      }\n      &:hover {\n        color: ${hoverColors.foreground};\n        background-color: ${hoverColors.background};\n      }\n\n      @media (pointer: coarse) {\n        min-height: 2rem;\n      }\n    `;\n  }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst StyledInfo = styled.span`\n  display: contents;\n`;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n  props: PropsWithoutRef<FormFieldProps>,\n  ref: Ref<HTMLElement>\n) {\n  const uid = useUID();\n  const {\n    testId,\n    children: controlElement,\n    id = uid,\n    as = 'div',\n    label,\n    labelAs = 'label',\n    labelFor = id,\n    labelId,\n    labelHidden = false,\n    labelAfter = false,\n    info,\n    status,\n    isRadioCheck,\n    charLimitDisplay,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    inline = false,\n    actions,\n    container,\n    additionalInfo,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFormFieldTestIds);\n\n  const t = useI18n();\n  const labelAsLegend: boolean = labelAs === 'legend';\n  const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n  const consolidatedRef = useConsolidatedRef(ref);\n\n  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n  const labelContent = (\n    <>\n      <Label\n        data-testid={testIds.label}\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {label}\n      </Label>\n\n      {required && !labelHidden && (\n        <StyledRequiredAsterisk aria-hidden>&nbsp;*</StyledRequiredAsterisk>\n      )}\n\n      {showAdditionalInfo && (\n        <AdditionalInfo data-testid={testIds.additionalInfo} heading={additionalInfo.heading}>\n          {additionalInfo.content}\n        </AdditionalInfo>\n      )}\n    </>\n  );\n\n  const labelRow =\n    !isRadioCheck && !labelAsLegend ? (\n      <Flex\n        as={StyledLabelRow}\n        container={{ justify: 'between', alignItems: 'end' }}\n        item={{ alignSelf: 'stretch' }}\n      >\n        {labelContent}\n      </Flex>\n    ) : (\n      labelContent\n    );\n\n  // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n  // This is to ensure screen readers will announce info on errors when role is set to alert.\n  // Needs testing to confirm. Currently the expected sequence would be:\n  // - FormField renders with no error and no info\n  // - user input triggers an error status\n  // - props passed set error status and provide info text\n  // - effect runs and sets live region state which renders and is announced\n  const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n  useEffect(() => {\n    setLiveRegionInfo(info);\n  }, [info]);\n\n  // fieldset or single form control element\n  let content: FormFieldProps['children'] = labelAsLegend\n    ? controlElement\n    : cloneElement(controlElement as ReactElement, {\n        'aria-describedby': info && `${id}-info`\n      });\n\n  if (actions) {\n    content = (\n      <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n        {content}\n        <Actions items={actions} menuAt={3} />\n      </Flex>\n    );\n  }\n\n  let infoContent = (\n    // Region for additional info, help or error message.\n    // Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n    <Flex\n      data-testid={testIds.info}\n      status={status}\n      role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n      as={StyledFormFieldInfo}\n      container={{ alignItems: 'center' }}\n    >\n      {status && status !== 'pending' && typeof label === 'string' && (\n        <VisuallyHiddenText aria-hidden>{label}</VisuallyHiddenText>\n      )}\n      <StyledInfo id={`${id}-info`}>\n        {status && status !== 'pending' && (\n          <>\n            <StyledStatusIcon status={status} name={statusIconMap[status]} />\n            <VisuallyHiddenText>{` ${t(status)} `}</VisuallyHiddenText>\n          </>\n        )}\n        {liveRegionInfo}\n      </StyledInfo>\n    </Flex>\n  );\n\n  if (charLimitDisplay) {\n    infoContent = (\n      <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n        {infoContent}\n        <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n      </Flex>\n    );\n  }\n\n  if (hasSuggestion) {\n    const focusables = getFocusables(consolidatedRef);\n    infoContent = (\n      <Flex container={{ alignItems: 'start', justify: 'between' }}>\n        <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n          {t('suggestion_info')}\n          <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n        </StyledFormFieldInfo>\n        <Flex container={{ wrap: 'nowrap' }}>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionReject}\n            onClick={() => {\n              onResolveSuggestion(false);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('reject_suggestion_button_a11y')}\n          >\n            {t('no')}\n          </StyledSuggestionButton>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionAccept}\n            onClick={() => {\n              onResolveSuggestion(true);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('accept_suggestion_button_a11y')}\n          >\n            {t('yes')}\n          </StyledSuggestionButton>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      const target = e.target as HTMLElement;\n      if (!target.closest('button')) {\n        e.preventDefault();\n        onResolveSuggestion?.(true);\n      }\n    }\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{\n        direction: inline ? 'row' : 'column',\n        alignItems: inline ? 'center' : undefined,\n        ...container\n      }}\n      as={StyledFormField}\n      labelAsLegend={labelAsLegend}\n      showAdditionalInfo={showAdditionalInfo}\n      id={`${id}-field`}\n      forwardedAs={as}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      onKeyDown={hasSuggestion ? onKeyDown : undefined}\n      aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n      ref={consolidatedRef}\n    >\n      {(labelAsLegend || !labelAfter) && labelRow}\n      {content}\n      {!labelAsLegend && labelAfter && labelRow}\n      {!readOnly && infoContent}\n    </Flex>\n  );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, useState, forwardRef } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n  extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n    TestIdProp<typeof elements> {\n  /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n  children: ReactElement | ReactElement[];\n  /**\n   * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n   * A random id will be generated if none is provided.\n   * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n   * The id prop will be used to generate the following:\n   * - FormControl <-> Label association via a Label's htmlFor prop.\n   * - FormField's wrapping element id {id}-field.\n   * - FormField info element id ${id}-info.\n   */\n  id?: string;\n  /**\n   * Determines how the wrapping label should be rendered.\n   * @default 'label'\n   */\n  labelAs?: LabelProps['as'];\n  /**\n   * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n   * @default undefined\n   */\n  labelFor?: LabelProps['htmlFor'];\n  /**\n   * Sets the id of the label.\n   * @default undefined\n   */\n  labelId?: LabelProps['id'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: boolean;\n  /**\n   * Visually places the label after the input.\n   * @default false\n   */\n  labelAfter?: boolean;\n  /**\n   * Property used to check whether input type is radio to handle styling for RadioCheck\n   * @default false\n   */\n  isRadioCheck?: boolean;\n  /**\n   * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n   * @default 'div'\n   */\n  as?: 'div' | 'fieldset' | ComponentType<any>;\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: boolean;\n  /** Optionally utilized by Input or Select. */\n  actions?: Action[];\n  /** Enables Flex container prop pass through. */\n  container?: ExcludeStrict<FlexProps['container'], true>;\n  /** Character remaining count. Typically used on Textareas only */\n  charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n  ({ theme, status }) => {\n    return css`\n      height: 1em;\n      width: 1em;\n      color: ${theme.components['form-field'][status]['status-color']};\n      vertical-align: baseline;\n      margin-inline-end: 0.5ch;\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n  ({\n    status,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { 'form-field': formField }\n    }\n  }) => {\n    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      max-width: max-content;\n      margin-top: calc(0.25 * ${spacing});\n      font-size: ${infoFontSize};\n      word-break: break-word;\n      ${status &&\n      formField[status] &&\n      css`\n        color: ${formField[status]['status-color']};\n      `}\n    `;\n  }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledRequiredAsterisk = styled.span(({ theme }) => {\n  const {\n    base: {\n      palette: { urgent }\n    }\n  } = theme;\n\n  return css`\n    vertical-align: top;\n    color: ${urgent};\n  `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n  ${StyledRequiredAsterisk} {\n    margin-inline-end: auto;\n  }\n`;\n\nexport const StyledFormField = styled.div<\n  FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n  const {\n    labelAsLegend,\n    showAdditionalInfo,\n    disabled,\n    required,\n    theme: {\n      base: { 'disabled-opacity': disabledOpacity, spacing }\n    }\n  } = props;\n  const { ltr } = useDirection();\n\n  return css`\n    ${disabled &&\n    css`\n      opacity: ${disabledOpacity};\n      -webkit-user-select: none;\n      user-select: none;\n    `}\n    position: relative;\n    border: 0;\n\n    > ${StyledLabel}, > ${StyledLabelRow} {\n      margin-bottom: calc(0.25 * ${spacing});\n    }\n\n    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n    }\n\n    ${labelAsLegend &&\n    (showAdditionalInfo || required) &&\n    css`\n      display: block;\n\n      > legend {\n        float: ${ltr ? 'left' : 'right'};\n      }\n\n      > ${StyledRequiredAsterisk} {\n        float: ${ltr ? 'left' : 'right'};\n\n        ${!showAdditionalInfo &&\n        css`\n          + * {\n            clear: both;\n          }\n        `}\n      }\n\n      > ${StyledAdditionalInfo} {\n        float: ${ltr ? 'right' : 'left'};\n\n        + * {\n          clear: both;\n        }\n      }\n    `}\n  `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n  ({\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': baseRadius,\n        spacing\n      },\n      components: {\n        'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n        'form-field': formField\n      }\n    }\n  }) => {\n    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n    const backgroundColor = formField.pending['status-color'];\n    const hoverColors = getHoverColors(backgroundColor);\n    const color = tryCatch(() => readableColor(backgroundColor));\n    const borderColor = color ? rgba(color, 0.4) : color;\n\n    return css`\n      background-color: ${backgroundColor};\n      color: ${color};\n      font-size: ${buttonFontSize};\n      min-width: calc(3 * ${spacing});\n      min-height: calc(3 * ${spacing});\n      padding: 0 ${spacing};\n      border-radius: 0;\n      border: none;\n      &:first-child {\n        border-inline-end: ${borderWidth} solid ${borderColor};\n        border-end-start-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: calc(2 * ${spacing});\n      }\n      &:last-child {\n        border-end-end-radius: calc(${baseRadius} * ${radius});\n        margin-inline-start: 0;\n      }\n      &:hover {\n        color: ${hoverColors.foreground};\n        background-color: ${hoverColors.background};\n      }\n\n      @media (pointer: coarse) {\n        min-height: 2rem;\n      }\n    `;\n  }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst StyledInfo = styled.span`\n  display: contents;\n`;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n  props: PropsWithoutRef<FormFieldProps>,\n  ref: Ref<HTMLElement>\n) {\n  const uid = useUID();\n  const {\n    testId,\n    children: controlElement,\n    id = uid,\n    as = 'div',\n    label,\n    labelAs = 'label',\n    labelFor = id,\n    labelId,\n    labelHidden = false,\n    labelAfter = false,\n    info,\n    status,\n    isRadioCheck,\n    charLimitDisplay,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    inline = false,\n    actions,\n    container,\n    additionalInfo,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFormFieldTestIds);\n\n  const t = useI18n();\n  const labelAsLegend: boolean = labelAs === 'legend';\n  const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n  const consolidatedRef = useConsolidatedRef(ref);\n\n  const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n  const labelContent = (\n    <>\n      <Label\n        data-testid={testIds.label}\n        id={labelId}\n        as={labelAs}\n        htmlFor={labelAs === 'label' ? labelFor : undefined}\n        labelHidden={labelHidden}\n        onClick={(e: MouseEvent) => {\n          if (readOnly) e.preventDefault();\n        }}\n        inline={inline}\n      >\n        {label}\n      </Label>\n\n      {required && !labelHidden && (\n        <StyledRequiredAsterisk aria-hidden>&nbsp;*</StyledRequiredAsterisk>\n      )}\n\n      {showAdditionalInfo && (\n        <AdditionalInfo data-testid={testIds.additionalInfo} heading={additionalInfo.heading}>\n          {additionalInfo.content}\n        </AdditionalInfo>\n      )}\n    </>\n  );\n\n  const labelRow =\n    !isRadioCheck && !labelAsLegend ? (\n      <Flex\n        as={StyledLabelRow}\n        container={{ justify: 'between', alignItems: 'end' }}\n        item={{ alignSelf: 'stretch' }}\n      >\n        {labelContent}\n      </Flex>\n    ) : (\n      labelContent\n    );\n\n  // We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n  // This is to ensure screen readers will announce info on errors when role is set to alert.\n  // Needs testing to confirm. Currently the expected sequence would be:\n  // - FormField renders with no error and no info\n  // - user input triggers an error status\n  // - props passed set error status and provide info text\n  // - effect runs and sets live region state which renders and is announced\n  const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n  useEffect(() => {\n    setLiveRegionInfo(info);\n  }, [info]);\n\n  // fieldset or single form control element\n  let content: FormFieldProps['children'] = labelAsLegend\n    ? controlElement\n    : cloneElement(controlElement as ReactElement, {\n        'aria-describedby': info && `${id}-info`\n      });\n\n  if (actions) {\n    content = (\n      <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n        {content}\n        <Actions items={actions} menuAt={3} />\n      </Flex>\n    );\n  }\n\n  let infoContent = (\n    // Region for additional info, help or error message.\n    // Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n    <Flex\n      data-testid={testIds.info}\n      status={status}\n      role={status === 'error' || status === 'warning' ? 'alert' : undefined}\n      as={StyledFormFieldInfo}\n      container={{ alignItems: 'center' }}\n    >\n      {status && status !== 'pending' && typeof label === 'string' && (\n        <VisuallyHiddenText aria-hidden>{label}</VisuallyHiddenText>\n      )}\n      <StyledInfo id={`${id}-info`}>\n        {status && status !== 'pending' && (\n          <>\n            <StyledStatusIcon status={status} name={statusIconMap[status]} />\n            <VisuallyHiddenText>{` ${t(status)} `}</VisuallyHiddenText>\n          </>\n        )}\n        {liveRegionInfo}\n      </StyledInfo>\n    </Flex>\n  );\n\n  if (charLimitDisplay) {\n    infoContent = (\n      <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n        {infoContent}\n        <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n      </Flex>\n    );\n  }\n\n  if (hasSuggestion) {\n    const focusables = getFocusables(consolidatedRef);\n    infoContent = (\n      <Flex container={{ alignItems: 'start', justify: 'between' }}>\n        <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n          {t('suggestion_info')}\n          <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n        </StyledFormFieldInfo>\n        <Flex container={{ wrap: 'nowrap' }}>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionReject}\n            onClick={() => {\n              onResolveSuggestion(false);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('reject_suggestion_button_a11y')}\n          >\n            {t('no')}\n          </StyledSuggestionButton>\n          <StyledSuggestionButton\n            data-testid={testIds.suggestionAccept}\n            onClick={() => {\n              onResolveSuggestion(true);\n              focusables[0]?.focus();\n            }}\n            aria-label={t('accept_suggestion_button_a11y')}\n          >\n            {t('yes')}\n          </StyledSuggestionButton>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      const target = e.target as HTMLElement;\n      if (!target.closest('button')) {\n        e.preventDefault();\n        onResolveSuggestion?.(true);\n      }\n    }\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{\n        direction: inline ? 'row' : 'column',\n        alignItems: inline ? 'center' : undefined,\n        ...container\n      }}\n      as={StyledFormField}\n      labelAsLegend={labelAsLegend}\n      showAdditionalInfo={showAdditionalInfo}\n      id={`${id}-field`}\n      forwardedAs={as}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      onKeyDown={hasSuggestion ? onKeyDown : undefined}\n      aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n      ref={consolidatedRef}\n    >\n      {(labelAsLegend || !labelAfter) && labelRow}\n      {content}\n      {!labelAsLegend && labelAfter && labelRow}\n      {!readOnly && infoContent}\n    </Flex>\n  );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}

package/lib/components/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '../../types';
-import GridProps from './Grid.types';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '../../types';
+import type GridProps from './Grid.types';
 export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & GridProps, never>;
 declare const Grid: FunctionComponent<GridProps & ForwardProps>;
 export default Grid;

package/lib/components/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,SAAS,MAAM,cAAc,CAAC;AAwLrC,eAAO,MAAM,UAAU,qHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAKpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAwL1C,eAAO,MAAM,UAAU,qHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAKpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport GridProps from './Grid.types';\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  return value;\n};\n\nconst getContainerStyles = (gridProps: GridProps['container']) => {\n  if (!gridProps) return;\n\n  if (gridProps === true) {\n    return css`\n      display: grid;\n    `;\n  }\n\n  const {\n    inline,\n    pad,\n    cols,\n    autoCols,\n    rows,\n    autoRows,\n    autoFlow,\n    areas,\n    template,\n    colGap,\n    rowGap,\n    gap,\n    justifyItems,\n    justifyContent,\n    alignItems,\n    alignContent\n  } = gridProps;\n\n  return css`\n    display: ${inline ? 'inline-grid' : 'grid'};\n\n    ${pad !== undefined &&\n    css`\n      padding: ${({\n        theme: {\n          base: { spacing }\n        }\n      }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} * ${spacing})`).join(' ')};\n    `}\n\n    ${cols &&\n    css`\n      grid-template-columns: ${cols};\n    `}\n\n    ${autoCols &&\n    css`\n      grid-auto-columns: ${autoCols};\n    `}\n\n    ${rows &&\n    css`\n      grid-template-rows: ${rows};\n    `}\n\n    ${autoRows &&\n    css`\n      grid-auto-rows: ${autoRows};\n    `}\n\n    ${autoFlow &&\n    css`\n      grid-auto-flow: ${autoFlow};\n    `}\n\n    ${areas &&\n    css`\n      grid-template-areas: ${areas};\n    `}\n\n    ${template &&\n    css`\n      grid-template: ${template};\n    `}\n\n    ${gap !== undefined &&\n    css`\n      gap: calc(${gap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${colGap !== undefined &&\n    css`\n      column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${rowGap !== undefined &&\n    css`\n      row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${justifyItems &&\n    css`\n      justify-items: ${justifyItems};\n    `}\n\n    ${justifyContent &&\n    css`\n      justify-content: ${prefix(justifyContent)};\n    `}\n\n    ${alignItems &&\n    css`\n      align-items: ${alignItems};\n    `}\n\n    ${alignContent &&\n    css`\n      align-content: ${prefix(alignContent)};\n    `}\n  `;\n};\n\nconst getItemStyles = (props: GridProps['item']) => {\n  if (!props) return;\n\n  const {\n    colStart,\n    colEnd,\n    colStartEnd,\n    rowStart,\n    rowEnd,\n    rowStartEnd,\n    area,\n    justifySelf,\n    alignSelf\n  } = props;\n\n  return css`\n    ${colStart &&\n    css`\n      grid-column-start: ${colStart};\n    `}\n\n    ${colEnd &&\n    css`\n      grid-column-end: ${colEnd};\n    `}\n\n    ${colStartEnd &&\n    css`\n      grid-column: ${colStartEnd};\n    `}\n\n    ${rowStart &&\n    css`\n      grid-row-start: ${rowStart};\n    `}\n\n    ${rowEnd &&\n    css`\n      grid-row-end: ${rowEnd};\n    `}\n\n    ${rowStartEnd &&\n    css`\n      grid-row: ${rowStartEnd};\n    `}\n\n    ${area &&\n    css`\n      grid-area: ${area};\n    `}\n\n    ${justifySelf &&\n    css`\n      justify-self: ${justifySelf};\n    `}\n\n    ${alignSelf &&\n    css`\n      align-self: ${alignSelf};\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledGrid = styled.div<GridProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst Grid: FunctionComponent<GridProps & ForwardProps> = forwardRef(function Grid(\n  props: PropsWithoutRef<GridProps>,\n  ref: GridProps['ref']\n) {\n  return <StyledGrid {...props} ref={ref} />;\n});\n\nexport default Grid;\n"]}
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport type GridProps from './Grid.types';\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  return value;\n};\n\nconst getContainerStyles = (gridProps: GridProps['container']) => {\n  if (!gridProps) return;\n\n  if (gridProps === true) {\n    return css`\n      display: grid;\n    `;\n  }\n\n  const {\n    inline,\n    pad,\n    cols,\n    autoCols,\n    rows,\n    autoRows,\n    autoFlow,\n    areas,\n    template,\n    colGap,\n    rowGap,\n    gap,\n    justifyItems,\n    justifyContent,\n    alignItems,\n    alignContent\n  } = gridProps;\n\n  return css`\n    display: ${inline ? 'inline-grid' : 'grid'};\n\n    ${pad !== undefined &&\n    css`\n      padding: ${({\n        theme: {\n          base: { spacing }\n        }\n      }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} * ${spacing})`).join(' ')};\n    `}\n\n    ${cols &&\n    css`\n      grid-template-columns: ${cols};\n    `}\n\n    ${autoCols &&\n    css`\n      grid-auto-columns: ${autoCols};\n    `}\n\n    ${rows &&\n    css`\n      grid-template-rows: ${rows};\n    `}\n\n    ${autoRows &&\n    css`\n      grid-auto-rows: ${autoRows};\n    `}\n\n    ${autoFlow &&\n    css`\n      grid-auto-flow: ${autoFlow};\n    `}\n\n    ${areas &&\n    css`\n      grid-template-areas: ${areas};\n    `}\n\n    ${template &&\n    css`\n      grid-template: ${template};\n    `}\n\n    ${gap !== undefined &&\n    css`\n      gap: calc(${gap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${colGap !== undefined &&\n    css`\n      column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${rowGap !== undefined &&\n    css`\n      row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${justifyItems &&\n    css`\n      justify-items: ${justifyItems};\n    `}\n\n    ${justifyContent &&\n    css`\n      justify-content: ${prefix(justifyContent)};\n    `}\n\n    ${alignItems &&\n    css`\n      align-items: ${alignItems};\n    `}\n\n    ${alignContent &&\n    css`\n      align-content: ${prefix(alignContent)};\n    `}\n  `;\n};\n\nconst getItemStyles = (props: GridProps['item']) => {\n  if (!props) return;\n\n  const {\n    colStart,\n    colEnd,\n    colStartEnd,\n    rowStart,\n    rowEnd,\n    rowStartEnd,\n    area,\n    justifySelf,\n    alignSelf\n  } = props;\n\n  return css`\n    ${colStart &&\n    css`\n      grid-column-start: ${colStart};\n    `}\n\n    ${colEnd &&\n    css`\n      grid-column-end: ${colEnd};\n    `}\n\n    ${colStartEnd &&\n    css`\n      grid-column: ${colStartEnd};\n    `}\n\n    ${rowStart &&\n    css`\n      grid-row-start: ${rowStart};\n    `}\n\n    ${rowEnd &&\n    css`\n      grid-row-end: ${rowEnd};\n    `}\n\n    ${rowStartEnd &&\n    css`\n      grid-row: ${rowStartEnd};\n    `}\n\n    ${area &&\n    css`\n      grid-area: ${area};\n    `}\n\n    ${justifySelf &&\n    css`\n      justify-self: ${justifySelf};\n    `}\n\n    ${alignSelf &&\n    css`\n      align-self: ${alignSelf};\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledGrid = styled.div<GridProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst Grid: FunctionComponent<GridProps & ForwardProps> = forwardRef(function Grid(\n  props: PropsWithoutRef<GridProps>,\n  ref: GridProps['ref']\n) {\n  return <StyledGrid {...props} ref={ref} />;\n});\n\nexport default Grid;\n"]}

package/lib/components/Grid/Grid.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, Ref } from 'react';
-import { BaseProps, AsProp, RequireAtLeastOne } from '../../types';
+import type { ReactNode, Ref } from 'react';
+import type { BaseProps, AsProp, RequireAtLeastOne } from '../../types';
 export interface GridContainerProps {
     /**
      * Display the grid as an inline-grid.
@@ -107,5 +107,5 @@ type GridProps = RequireAtLeastOne<BaseGridProps & BaseProps & AsProp & {
     /** Override props for the grid at extra large screen size. */
     xl?: BreakpointGridProps;
 }, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-export default GridProps;
+export type { GridProps as default };
 //# sourceMappingURL=Grid.types.d.ts.map

package/lib/components/Grid/Grid.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yHAAyH;IACzH,GAAG,CAAC,EACA,MAAM,GACN,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAC5B,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,GACtC,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAChD,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/D,wHAAwH;IACxH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gHAAgH;IAChH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qHAAqH;IACrH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;IAC3D,8GAA8G;IAC9G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1F;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACpD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;CACzF;AAED,MAAM,WAAW,aAAa;IAC5B,mHAAmH;IACnH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mGAAmG;IACnG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gHAAgH;IAChH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACpD;AAED,MAAM,WAAW,aAAa;IAC5B,yGAAyG;IACzG,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,aAAa,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;AAElF,KAAK,SAAS,GAAG,iBAAiB,CAChC,aAAa,GACX,SAAS,GACT,MAAM,GAAG;IACP,mGAAmG;IACnG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,8DAA8D;IAC9D,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,wDAAwD;IACxD,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,yDAAyD;IACzD,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,wDAAwD;IACxD,EAAE,CAAC,EAAE,mBAAmB,CAAC;IACzB,8DAA8D;IAC9D,EAAE,CAAC,EAAE,mBAAmB,CAAC;CAC1B,EACH,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CACxD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Grid/Grid.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.types.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, AsProp, RequireAtLeastOne } from '../../types';\n\nexport interface GridContainerProps {\n  /**\n   * Display the grid as an inline-grid.\n   * @default false\n   */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [topRightBottomLeft: number]\n    | [topBottom: number, rightLeft: number]\n    | [top: number, rightLeft: number, bottom: number]\n    | [top: number, right: number, bottom: number, left: number];\n  /** [grid-template-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) */\n  cols?: string;\n  /** [grid-auto-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) */\n  autoCols?: string;\n  /** [grid-template-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) */\n  rows?: string;\n  /** [grid-auto-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) */\n  autoRows?: string;\n  /** [grid-auto-flow](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow) */\n  autoFlow?: 'row' | 'column' | 'row dense' | 'column dense';\n  /** [grid-template-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas) */\n  areas?: string;\n  /** [grid-template](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template) */\n  template?: string;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-gap)\n   */\n  gap?: number;\n  /**\n   * [justify-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-items)\n   * @default 'stretch'\n   */\n  justifyItems?: 'start' | 'end' | 'center' | 'stretch';\n  /**\n   * [justify-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content)\n   * @default 'start'\n   */\n  justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'around' | 'between' | 'evenly';\n  /**\n   * [align-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-items)\n   * @default 'stretch'\n   */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center';\n  /**\n   * [align-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-content)\n   * @default 'start'\n   */\n  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'around' | 'between' | 'evenly';\n}\n\nexport interface GridItemProps {\n  /** [grid-column-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  colStart?: string;\n  /** [grid-column-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  colEnd?: string;\n  /** [grid-column](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) */\n  colStartEnd?: string;\n  /** [grid-row-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  rowStart?: string;\n  /** [grid-row-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  rowEnd?: string;\n  /** [grid-row](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) */\n  rowStartEnd?: string;\n  /** [grid-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-area) */\n  area?: string;\n  /**\n   * [justify-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self)\n   * @default 'stretch'\n   */\n  justifySelf?: 'start' | 'end' | 'center' | 'stretch';\n  /**\n   * [align-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-self)\n   * @default 'stretch'\n   */\n  alignSelf?: 'stretch' | 'start' | 'end' | 'center';\n}\n\nexport interface BaseGridProps {\n  /** Creates a [grid container.](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display) */\n  container?: GridContainerProps | true;\n  /** Designate as a Grid item to leverage grid item props. */\n  item?: GridItemProps;\n}\n\ntype BreakpointGridProps = RequireAtLeastOne<BaseGridProps, 'container' | 'item'>;\n\ntype GridProps = RequireAtLeastOne<\n  BaseGridProps &\n    BaseProps &\n    AsProp & {\n      /** Any ReactNode to use as grid items. To leverage item based props, use Grid with \"item\" prop. */\n      children?: ReactNode;\n      /** Ref for the grid element. */\n      ref?: Ref<Element>;\n      /** Override props for the grid at extra small screen size. */\n      xs?: BreakpointGridProps;\n      /** Override props for the grid at small screen size. */\n      sm?: BreakpointGridProps;\n      /** Override props for the grid at medium screen size. */\n      md?: BreakpointGridProps;\n      /** Override props for the grid at large screen size. */\n      lg?: BreakpointGridProps;\n      /** Override props for the grid at extra large screen size. */\n      xl?: BreakpointGridProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\nexport default GridProps;\n"]}
+{"version":3,"file":"Grid.types.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, AsProp, RequireAtLeastOne } from '../../types';\n\nexport interface GridContainerProps {\n  /**\n   * Display the grid as an inline-grid.\n   * @default false\n   */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [topRightBottomLeft: number]\n    | [topBottom: number, rightLeft: number]\n    | [top: number, rightLeft: number, bottom: number]\n    | [top: number, right: number, bottom: number, left: number];\n  /** [grid-template-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) */\n  cols?: string;\n  /** [grid-auto-columns](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) */\n  autoCols?: string;\n  /** [grid-template-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows) */\n  rows?: string;\n  /** [grid-auto-rows](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-columns-rows) */\n  autoRows?: string;\n  /** [grid-auto-flow](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow) */\n  autoFlow?: 'row' | 'column' | 'row dense' | 'column dense';\n  /** [grid-template-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas) */\n  areas?: string;\n  /** [grid-template](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template) */\n  template?: string;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-gap)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-gap)\n   */\n  gap?: number;\n  /**\n   * [justify-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-items)\n   * @default 'stretch'\n   */\n  justifyItems?: 'start' | 'end' | 'center' | 'stretch';\n  /**\n   * [justify-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-content)\n   * @default 'start'\n   */\n  justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'around' | 'between' | 'evenly';\n  /**\n   * [align-items](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-items)\n   * @default 'stretch'\n   */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center';\n  /**\n   * [align-content](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-content)\n   * @default 'start'\n   */\n  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'around' | 'between' | 'evenly';\n}\n\nexport interface GridItemProps {\n  /** [grid-column-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  colStart?: string;\n  /** [grid-column-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  colEnd?: string;\n  /** [grid-column](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) */\n  colStartEnd?: string;\n  /** [grid-row-start](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  rowStart?: string;\n  /** [grid-row-end](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row-start-end) */\n  rowEnd?: string;\n  /** [grid-row](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-column-row) */\n  rowStartEnd?: string;\n  /** [grid-area](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-area) */\n  area?: string;\n  /**\n   * [justify-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-self)\n   * @default 'stretch'\n   */\n  justifySelf?: 'start' | 'end' | 'center' | 'stretch';\n  /**\n   * [align-self](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-align-self)\n   * @default 'stretch'\n   */\n  alignSelf?: 'stretch' | 'start' | 'end' | 'center';\n}\n\nexport interface BaseGridProps {\n  /** Creates a [grid container.](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-display) */\n  container?: GridContainerProps | true;\n  /** Designate as a Grid item to leverage grid item props. */\n  item?: GridItemProps;\n}\n\ntype BreakpointGridProps = RequireAtLeastOne<BaseGridProps, 'container' | 'item'>;\n\ntype GridProps = RequireAtLeastOne<\n  BaseGridProps &\n    BaseProps &\n    AsProp & {\n      /** Any ReactNode to use as grid items. To leverage item based props, use Grid with \"item\" prop. */\n      children?: ReactNode;\n      /** Ref for the grid element. */\n      ref?: Ref<Element>;\n      /** Override props for the grid at extra small screen size. */\n      xs?: BreakpointGridProps;\n      /** Override props for the grid at small screen size. */\n      sm?: BreakpointGridProps;\n      /** Override props for the grid at medium screen size. */\n      md?: BreakpointGridProps;\n      /** Override props for the grid at large screen size. */\n      lg?: BreakpointGridProps;\n      /** Override props for the grid at extra large screen size. */\n      xl?: BreakpointGridProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\n// No way to do 'export default type GridProps = ...'\n// eslint-disable-next-line no-restricted-exports\nexport type { GridProps as default };\n"]}

package/lib/components/HTML/HTML.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent, Ref } from 'react';
-import { DefaultTheme } from 'styled-components';
-import { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
+import type { FunctionComponent, Ref } from 'react';
+import type { DefaultTheme } from 'styled-components';
+import type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 export interface HTMLProps extends BaseProps, NoChildrenProp, TestIdProp {
     content: string;
     customTags?: string[];

package/lib/components/HTML/HTML.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQlF,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAqBrB,CAAC;;;;AA4EH,wBAAiD"}
+{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQvF,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAqBrB,CAAC;;;;AA4EH,wBAAiD"}