@pega/cosmos-react-core 4.0.0-dev.13.0 → 4.0.0-dev.14.1

package/lib/components/SummaryList/SummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions, { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /** Identifier for the icon within Pega icons.  */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element.  */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n  extends OmitStrict<SummaryItemProps, 'actions'>,\n    Pick<ActionsProps, 'contextualLabel'>,\n    ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0;\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' | 'name'>) => {\n  const t = useI18n();\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={\n              itemActions && (\n                <Actions\n                  items={itemActions}\n                  contextualLabel={\n                    name && contextualLabel\n                      ? t('action_from_summarylist_heading', [contextualLabel, name])\n                      : contextualLabel\n                  }\n                />\n              )\n            }\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      name,\n      count,\n      actions,\n      items,\n      onViewAll,\n      loading,\n      noItemsText,\n      error,\n      ...restProps\n    }: PropsWithoutRef<SummaryListProps>,\n    ref: SummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const content = useMemo(() => {\n      if (loading) {\n        return (\n          <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n        );\n      }\n\n      if (error) {\n        return <ErrorState {...(error === true ? {} : error)} />;\n      }\n\n      return items.length > 0 ? (\n        <SummaryListItems name={name} items={items} />\n      ) : (\n        <EmptyState message={noItemsText} />\n      );\n    }, [loading, items, noItemsText, error]);\n\n    return (\n      <Card ref={ref} {...restProps}>\n        {(icon || name || typeof count === 'number' || actions) && (\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {icon && <Icon name={icon} />}\n              {name && <Text variant='h2'>{name}</Text>}\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </Flex>\n            {actions && <Actions items={actions} />}\n          </CardHeader>\n        )}\n\n        <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n        {!error && typeof count === 'number' && count > items.length && onViewAll && (\n          <CardFooter justify='center'>\n            <Button\n              variant='link'\n              aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n              onClick={onViewAll}\n            >\n              {t('view_all')}\n            </Button>\n          </CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\n\nexport default SummaryList;\n"]}
+{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions, { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /** Identifier for the icon within Pega icons. */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n  extends OmitStrict<SummaryItemProps, 'actions'>,\n    Pick<ActionsProps, 'contextualLabel'>,\n    ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0;\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' | 'name'>) => {\n  const t = useI18n();\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={\n              itemActions && (\n                <Actions\n                  items={itemActions}\n                  contextualLabel={\n                    name && contextualLabel\n                      ? t('action_from_summarylist_heading', [contextualLabel, name])\n                      : contextualLabel\n                  }\n                />\n              )\n            }\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      name,\n      count,\n      actions,\n      items,\n      onViewAll,\n      loading,\n      noItemsText,\n      error,\n      ...restProps\n    }: PropsWithoutRef<SummaryListProps>,\n    ref: SummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const content = useMemo(() => {\n      if (loading) {\n        return (\n          <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n        );\n      }\n\n      if (error) {\n        return <ErrorState {...(error === true ? {} : error)} />;\n      }\n\n      return items.length > 0 ? (\n        <SummaryListItems name={name} items={items} />\n      ) : (\n        <EmptyState message={noItemsText} />\n      );\n    }, [loading, items, noItemsText, error]);\n\n    return (\n      <Card ref={ref} {...restProps}>\n        {(icon || name || typeof count === 'number' || actions) && (\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {icon && <Icon name={icon} />}\n              {name && <Text variant='h2'>{name}</Text>}\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </Flex>\n            {actions && <Actions items={actions} />}\n          </CardHeader>\n        )}\n\n        <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n        {!error && typeof count === 'number' && count > items.length && onViewAll && (\n          <CardFooter justify='center'>\n            <Button\n              variant='link'\n              aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n              onClick={onViewAll}\n            >\n              {t('view_all')}\n            </Button>\n          </CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\n\nexport default SummaryList;\n"]}

package/lib/components/Table/Table.d.ts

@@ -10,7 +10,7 @@ export interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {
     label: string;
     /**
      * The text alignment of the column header and the row contents for the column.
-     * @default "left"
+     * @default 'left'
      */
     align?: 'left' | 'center' | 'right';
     /**

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default \"left\"\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData>\n  extends BaseProps,\n    NoChildrenProp {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nexport const StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAC3D,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAqD5C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAiD,KAAK,CAAC,EAAE;IACvF,MAAM,EACJ,cAAc,EACd,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,sBAAsB,EAAE,OAAO,EAAE,EAC5C,OAAO,EACR,EACD,UAAU,EAAE,EAAE,KAAK,EAAE,EACtB,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,qBAAqB,GAAG,QAAQ,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,MAAM,OAAO,GAAG,CAAC;IACvF,MAAM,mBAAmB,GAAG,QAAQ,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,OAAO,GAAG,CAAC;IACnF,MAAM,iBAAiB,GAAG,YAAY,KAAK,CAAC,MAAM,CAAC,oBAAoB,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,OAAO,GAAG,CAAC;IAE/H,MAAM,YAAY,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;IAC7F,MAAM,UAAU,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;IAEvF,OAAO,GAAG,CAAA;;;;;;;mBAOO,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,IACzE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAC1D,EAAE;yBACe,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;6BACpD,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;uBAI5D,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG;sBAC9D,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;gCAI9C,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;+BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;8BAIvD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;6BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;;;mBAMhE,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,IACvE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAC1D,EAAE;yBACe,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;6BAClD,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;0BAIvD,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG;yBAC5D,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;gCAI/C,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;+BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;8BAIrD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;6BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;MAI3E,cAAc;QAChB,GAAG,CAAA;;;4BAGqB,OAAO;;KAE9B;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAC1B,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBAClB,KAAK,IAAI,MAAM;mBACd,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;GACxC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAChC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;mBACK,SAAS,CAAC,MAAM,CAAC,WAAW,CAAa,CAAC;qBACxC,MAAM,CAAC,aAAa,CAAC;eAC3B,MAAM,CAAC,kBAAkB,CAAC;0BACf,MAAM,CAAC,kBAAkB,CAAC;KAC/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAC9B,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,IAAI,EAAE,EAChB,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;aACE,IAAI,CAAC,kBAAkB,CAAC;wBACb,IAAI,CAAC,kBAAkB,CAAC;GAC7C,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;sBACX,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACtD,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAGlC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAA;IACrC,YAAY;CACf,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,KAAkC,EAAE,GAA0B,EAAE,EAAE;IAC1F,MAAM,EACJ,OAAO,EACP,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,KAAK,EACtB,OAAO,GAAG,KAAK,EACf,cAAc,GAAG,EAAE,EACnB,KAAK,EACL,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,IAAI,cACH,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClC,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,iCACzB,KAAK,GACD,CACR,EACD,KAAC,kBAAkB,cACjB,MAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,cAAc,EAAE,cAAc,KAAM,SAAS,aACjE,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAClB,eAAC,UAAU,IAAC,EAAE,EAAE,gBAAgB,KAAM,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAClE,GAAG,CAAC,KAAK,CACC,CACd,CAAC,GACC,GACC,EACR,4BACG,OAAO,IAAI,CACV,uBACE,KAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,YACxC,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,cAAc,GAAI,GACrC,GACjB,CACN,EACA,IAAI,CAAC,MAAM,GAAG,CAAC;wCACd,CAAC,OAAO;wCACR,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACd,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,CAC/C,eAAC,UAAU,IAAC,EAAE,EAAE,cAAc,KAAM,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,EAAE,EAAE,IACnE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,GAAG,GAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC5D,CACd,CAAC,IALK,GAAG,CAAC,EAAE,CAMV,CACN,CAAC,EACH,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAChC,uBACE,KAAC,eAAe,IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,YACtC,KAAC,UAAU,KAAG,GACE,GACf,CACN,IACK,IACI,GACK,IACT,GACT,CACR,CAAC;AACJ,CAAC,CAEuB,CAAC;AAEzB,eAAe,KAAK,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default 'left'\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData>\n  extends BaseProps,\n    NoChildrenProp {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nexport const StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}

package/lib/components/Tabs/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAsHD,eAAO,MAAM,SAAS,gNA0BrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAYpC,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AA4HD,eAAO,MAAM,SAAS,gNA6BrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAYpC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -117,31 +117,34 @@ const getVerticalStyles = ({ selected, theme }) => {
     }
   `;
 };
-export const StyledTab = styled(BareButton) `
-  position: relative;
-  background: none;
-  cursor: pointer;
+export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
+    position: relative;
+    background: none;
+    cursor: pointer;
+    white-space: nowrap;
 
-  ${props => props.tabType === 'horizontal' ? getHorizontalStyles(props) : getVerticalStyles(props)}
-  ${props => props.selected &&
+    ${selected &&
     css `
       font-weight: bold;
     `}
-  white-space: nowrap;
 
-  & + & {
-    margin-inline-start: 0;
-  }
+    & + & {
+      margin-inline-start: 0;
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: ${props => props.theme.base['disabled-opacity']};
-  }
-`;
+    &:disabled {
+      cursor: not-allowed;
+      opacity: ${theme.base['disabled-opacity']};
+    }
+
+    ${tabType === 'horizontal'
+    ? getHorizontalStyles({ theme, selected })
+    : getVerticalStyles({ theme, selected })}
+  `);
 StyledTab.defaultProps = defaultThemeProp;
 const Tab = forwardRef(({ selected, content, count, type, disabled, ...restProps }, ref) => {
     return (_jsxs(StyledTab, { ref: ref, selected: selected, tabType: type, disabled: disabled, ...restProps, children: [_jsx("span", { "data-content": content, children: content }), count] }));

package/lib/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalStyles = ({ selected, theme }: StyledProps<StyledTabProps>) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({ selected, theme }: StyledProps<StyledTabProps>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>`\n  position: relative;\n  background: none;\n  cursor: pointer;\n\n  ${props =>\n    props.tabType === 'horizontal' ? getHorizontalStyles(props) : getVerticalStyles(props)}\n  ${props =>\n    props.selected &&\n    css`\n      font-weight: bold;\n    `}\n  white-space: nowrap;\n\n  & + & {\n    margin-inline-start: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: ${props => props.theme.base['disabled-opacity']};\n  }\n`;\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n  (\n    { selected, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <StyledTab ref={ref} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n        <span data-content={content}>{content}</span>\n        {count}\n      </StyledTab>\n    );\n  }\n);\n\nexport default Tab;\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected })\n      : getVerticalStyles({ theme, selected })}\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n  (\n    { selected, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <StyledTab ref={ref} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n        <span data-content={content}>{content}</span>\n        {count}\n      </StyledTab>\n    );\n  }\n);\n\nexport default Tab;\n"]}

package/lib/components/Tabs/TabPanel.d.ts

@@ -6,7 +6,7 @@ interface TabPanelProps {
     /**
      * The current selected value of the tabs. Controls the visibility of the tab panel.
      * The tabsValue must match the tabId in order for the TabPanel to show itself.
-     * */
+     */
     currentTabId?: string;
     /** Content of the tab panel. */
     children: ReactNode;

package/lib/components/Tabs/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;SAGK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAehB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAehB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   * */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

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

@@ -18,7 +18,7 @@ export interface TabsProps extends BaseProps, NoChildrenProp {
      */
     tabs: Tab[];
     /** The type handles what direction the tabs will be rendered in.
-     * @default "horizontal"
+     * @default 'horizontal'
      */
     type?: 'horizontal' | 'vertical';
     /** The currentTabId tells the tab list which Tab should be active. */

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\n\nexport interface Tab {\n  /** The name that will be displayed on the Tab. */\n  name: string;\n  /** The id that is referenced when a Tab is activated. */\n  id: string;\n  /** A link to navigate to when the Tab is clicked. */\n  href?: string;\n  /** If a count is provided, the Count Badge will be rendered alongside the Tab name. */\n  count?: number;\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface TabsProps extends BaseProps, NoChildrenProp {\n  /** An array of Tab data used to render the individual tabs.\n   * @default []\n   */\n  tabs: Tab[];\n  /** The type handles what direction the tabs will be rendered in.\n   * @default \"horizontal\"\n   */\n  type?: 'horizontal' | 'vertical';\n  /** The currentTabId tells the tab list which Tab should be active. */\n  currentTabId: string;\n  /** The onTabClick will take a callback function that is called every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n"]}
+{"version":3,"file":"Tabs.types.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\n\nexport interface Tab {\n  /** The name that will be displayed on the Tab. */\n  name: string;\n  /** The id that is referenced when a Tab is activated. */\n  id: string;\n  /** A link to navigate to when the Tab is clicked. */\n  href?: string;\n  /** If a count is provided, the Count Badge will be rendered alongside the Tab name. */\n  count?: number;\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface TabsProps extends BaseProps, NoChildrenProp {\n  /** An array of Tab data used to render the individual tabs.\n   * @default []\n   */\n  tabs: Tab[];\n  /** The type handles what direction the tabs will be rendered in.\n   * @default 'horizontal'\n   */\n  type?: 'horizontal' | 'vertical';\n  /** The currentTabId tells the tab list which Tab should be active. */\n  currentTabId: string;\n  /** The onTabClick will take a callback function that is called every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n"]}

package/lib/components/Text/Text.d.ts

@@ -5,12 +5,10 @@ export interface TextProps extends BaseProps, AsProp {
     children: ReactNode;
     /**
      * Typographical sizes and styles.
-     * @default "primary"
+     * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    /**
-     * Render text with semantic color based on a status.
-     */
+    /** Render text with semantic color based on a status. */
     status?: 'error' | 'warning' | 'success';
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAc,GAAG,EAAmB,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAKjF,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5E;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAID,eAAO,MAAM,UAAU,qMAoCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CASrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAc,GAAG,EAAmB,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAKjF,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5E,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAID,eAAO,MAAM,UAAU,qMAoCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CASrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,UAAU,EAAwB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAoB3D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE;QACV,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;KACX;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;KACxE;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;aAClC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB,EACrB,EAAE;IACF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAkD,CAAC;IACzF,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, AsProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n  /** Text content. */\n  children: ReactNode;\n  /**\n   * Typographical sizes and styles.\n   * @default \"primary\"\n   */\n  variant?: 'primary' | 'secondary' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /**\n   * Render text with semantic color based on a status.\n   */\n  status?: 'error' | 'warning' | 'success';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n  const {\n    variant,\n    status,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n        transparency: { 'transparent-2': secondaryAlpha }\n      },\n      components: { text }\n    }\n  } = props;\n\n  let color: string | undefined;\n\n  if (status) {\n    color = {\n      error,\n      warning,\n      success\n    }[status];\n  }\n\n  if (variant === 'secondary') {\n    color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n  }\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n    font-weight: ${text[variant]['font-weight']};\n    color: ${color};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: FunctionComponent<TextProps & ForwardProps> = forwardRef(\n  (\n    { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n    ref: TextProps['ref']\n  ) => {\n    // If variant is for a heading, and no as is passed, set as to heading tag.\n    if (!as && /h\\d/i.test(variant)) as = variant as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n  }\n);\n\nexport default Text;\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,UAAU,EAAwB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAkB3D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE;QACV,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;KACX;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;KACxE;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;aAClC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB,EACrB,EAAE;IACF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAkD,CAAC;IACzF,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, AsProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n  /** Text content. */\n  children: ReactNode;\n  /**\n   * Typographical sizes and styles.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Render text with semantic color based on a status. */\n  status?: 'error' | 'warning' | 'success';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n  const {\n    variant,\n    status,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n        transparency: { 'transparent-2': secondaryAlpha }\n      },\n      components: { text }\n    }\n  } = props;\n\n  let color: string | undefined;\n\n  if (status) {\n    color = {\n      error,\n      warning,\n      success\n    }[status];\n  }\n\n  if (variant === 'secondary') {\n    color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n  }\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n    font-weight: ${text[variant]['font-weight']};\n    color: ${color};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: FunctionComponent<TextProps & ForwardProps> = forwardRef(\n  (\n    { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n    ref: TextProps['ref']\n  ) => {\n    // If variant is for a heading, and no as is passed, set as to heading tag.\n    if (!as && /h\\d/i.test(variant)) as = variant as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n  }\n);\n\nexport default Text;\n"]}

package/lib/components/TextArea/TextArea.js

@@ -55,7 +55,7 @@ const TextArea = forwardRef((props, ref) => {
             as: StyledTextArea
         } }));
     return label || displayCharCount ? (_jsx(FormField, { ...{
-            testId: testIds.root,
+            testId: testIds,
             additionalInfo,
             label,
             labelHidden,

package/lib/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default false\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      testId,\n      additionalInfo,\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = false,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const testIds = useTestIds(testId, getTextAreaTestIds);\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if ('value' in props) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if ('defaultValue' in props) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          'data-testid': testIds.control,\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          readOnly,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          testId: testIds.root,\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          readOnly,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                readOnly={readOnly}\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TextArea;\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default false\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      testId,\n      additionalInfo,\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = false,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const testIds = useTestIds(testId, getTextAreaTestIds);\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if ('value' in props) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if ('defaultValue' in props) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          'data-testid': testIds.control,\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          readOnly,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          testId: testIds,\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          readOnly,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                readOnly={readOnly}\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TextArea;\n"]}

package/lib/components/TextArea/TextArea.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getTextAreaTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["control"]>;
+export declare const getTextAreaTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=TextArea.test-ids.d.ts.map

package/lib/components/TextArea/TextArea.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,gGAAmD,CAAC"}
+{"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,wKAAgE,CAAC"}

package/lib/components/TextArea/TextArea.test-ids.js

@@ -1,3 +1,4 @@
 import { createTestIds } from '../../utils';
-export const getTextAreaTestIds = createTestIds('text-area', ['control']);
+import { elements } from '../FormField/FormField.test-ids';
+export const getTextAreaTestIds = createTestIds('text-area', ['control', ...elements]);
 //# sourceMappingURL=TextArea.test-ids.js.map

package/lib/components/TextArea/TextArea.test-ids.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.test-ids.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getTextAreaTestIds = createTestIds('text-area', ['control'] as const);\n"]}
+{"version":3,"file":"TextArea.test-ids.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getTextAreaTestIds = createTestIds('text-area', ['control', ...elements] as const);\n"]}

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

@@ -17,7 +17,7 @@ export interface ToastMessage {
     }) => void;
 }
 export interface ToasterProps {
-    /** The element(s) responsible for handling the Toaster state.  */
+    /** The element(s) responsible for handling the Toaster state. */
     children: ReactNode;
     /**
      * Time in milliseconds to automatically dismiss Toast.

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uIAAuI;IACvI,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;QAAE,EAAE,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAClG;AAED,MAAM,WAAW,YAAY;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,uIAAuI;IACvI,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC"}
+{"version":3,"file":"Toaster.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uIAAuI;IACvI,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;QAAE,EAAE,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAClG;AAED,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,uIAAuI;IACvI,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.types.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: NonNullable<ToastMessage['id']>; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n}\n"]}
+{"version":3,"file":"Toaster.types.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: NonNullable<ToastMessage['id']>; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state. */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n}\n"]}

package/lib/components/Tooltip/Tooltip.d.ts

@@ -8,12 +8,12 @@ export interface TooltipProps extends BaseProps {
     target: Element | null;
     /**
      * Delay showing the tooltip on mouseenter.
-     * @default "short"
+     * @default 'short'
      */
     showDelay?: Delay;
     /**
      * Delay hiding the tooltip on mouseleave.
-     * @default "long"
+     * @default 'long'
      */
     hideDelay?: Delay;
     /**
@@ -28,7 +28,7 @@ export interface TooltipProps extends BaseProps {
     describeTarget?: boolean;
     /**
      * Sets the placement of the tooltip relative to the target.
-     * @default "bottom"
+     * @default 'bottom'
      */
     placement?: PopoverProps['placement'];
     ref?: Ref<HTMLDivElement>;

package/lib/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n  /** Text content for the tooltip. */\n  children: string | string[];\n  /** Element to serve as the tooltip's target. */\n  target: Element | null;\n  /**\n   * Delay showing the tooltip on mouseenter.\n   * @default \"short\"\n   */\n  showDelay?: Delay;\n  /**\n   * Delay hiding the tooltip on mouseleave.\n   * @default \"long\"\n   */\n  hideDelay?: Delay;\n  /**\n   * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default true\n   */\n  portal?: PopoverProps['portal'];\n  /**\n   * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n   * @default true\n   */\n  describeTarget?: boolean;\n  /**\n   * Sets the placement of the tooltip relative to the target.\n   * @default \"bottom\"\n   */\n  placement?: PopoverProps['placement'];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    background-color: ${theme.components.tooltip['background-color']};\n    color: ${theme.components.tooltip['foreground-color']};\n    font-size: ${fontSize.xxs};\n    max-width: 40ch;\n    padding: ${theme.base.spacing};\n    white-space: pre-line;\n    word-break: break-word;\n    pointer-events: none;\n    z-index: ${theme.base['z-index'].tooltip};\n  `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      target,\n      showDelay = 'short',\n      hideDelay = 'long',\n      portal = true,\n      placement = 'bottom',\n      describeTarget = true,\n      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const tooltipRef = useConsolidatedRef(ref);\n    const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n    const showTooltip = useCallback(() => {\n      setShow(true);\n    }, []);\n\n    const onMouseDown = useCallback(\n      ({ target: eTarget }: MouseEvent) => {\n        lastClickedRef.current = eTarget;\n        if (eTarget === tooltipRef.current || eTarget === target) return;\n        setShow(false);\n      },\n      [target]\n    );\n\n    const onFocusOut = useCallback(() => {\n      if (lastClickedRef.current !== tooltipRef.current) {\n        setShow(false);\n      }\n      lastClickedRef.current = null;\n    }, []);\n\n    const onMouseEnter = useCallback(() => {\n      setShow(true);\n    }, [target]);\n\n    const onMouseLeave = useCallback(() => {\n      if (document.activeElement !== target) {\n        setShow(false);\n      }\n    }, [target]);\n\n    const onKeyDown = useCallback(\n      ({ key }: KeyboardEvent) => {\n        if (key === 'Escape' && document.activeElement === target) {\n          setShow(false);\n        }\n      },\n      [target]\n    );\n\n    useEffect(() => {\n      if (!target) return;\n\n      document.addEventListener('keydown', onKeyDown);\n      document.addEventListener('mousedown', onMouseDown);\n\n      target.addEventListener('focusin', showTooltip);\n      target.addEventListener('focusout', onFocusOut);\n\n      target.addEventListener('mouseenter', onMouseEnter);\n      target.addEventListener('mouseleave', onMouseLeave);\n\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n        document.removeEventListener('mousedown', onMouseDown);\n\n        target.removeEventListener('focusin', showTooltip);\n        target.removeEventListener('focusout', onFocusOut);\n\n        target.removeEventListener('mouseenter', onMouseEnter);\n        target.removeEventListener('mouseleave', onMouseLeave);\n      };\n    }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n    useEffect(() => {\n      if (target && describeTarget && show) {\n        const describedBy = target.getAttribute('aria-describedby');\n        // Set the attribute to the old attribute plus the id\n        target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n      } else if (target) {\n        // Get the old attribute\n        const describedBy = target.getAttribute('aria-describedby');\n        if (describedBy) {\n          // If the old attribute matches the id just remove it entirely\n          if (describedBy === id) {\n            target.removeAttribute('aria-describedby');\n          } else {\n            // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n            const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\\\s+)${id}`), '');\n            target.setAttribute('aria-describedby', oldDescribedBy);\n          }\n        }\n      }\n    }, [describeTarget, target, show]);\n\n    return (\n      <Popover\n        id={id}\n        {...restProps}\n        show={show}\n        showDelay={showDelay}\n        hideDelay={hideDelay}\n        groupId='tooltip'\n        strategy='fixed'\n        portal={portal}\n        as={StyledTooltip}\n        role='tooltip'\n        target={target}\n        arrow\n        placement={placement}\n        onMouseDown={onMouseDown}\n        hideOnTargetHidden\n        ref={tooltipRef}\n      >\n        {children}\n      </Popover>\n    );\n  }\n);\n\nexport default Tooltip;\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAgC,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmCjD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC;aACvD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC;iBACxC,QAAQ,CAAC,GAAG;;eAEd,KAAK,CAAC,IAAI,CAAC,OAAO;;;;eAIlB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,MAAM,EAClB,MAAM,GAAG,IAAI,EACb,SAAS,GAAG,QAAQ,EACpB,cAAc,GAAG,IAAI,EACrB,GAAG,SAAS,EACkB,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAyC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1E,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAc,EAAE,EAAE;QAClC,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;QACjC,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,OAAO,KAAK,MAAM;YAAE,OAAO;QACjE,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,cAAc,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE;YACjD,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;QACD,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,QAAQ,CAAC,aAAa,KAAK,MAAM,EAAE;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,MAAM,EAAE;YACzD,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAEpD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAEhD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACpD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YAEvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YAEnD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,cAAc,IAAI,IAAI,EAAE;YACpC,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;YAC5D,qDAAqD;YACrD,MAAM,CAAC,YAAY,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACpF;aAAM,IAAI,MAAM,EAAE;YACjB,wBAAwB;YACxB,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;YAC5D,IAAI,WAAW,EAAE;gBACf,8DAA8D;gBAC9D,IAAI,WAAW,KAAK,EAAE,EAAE;oBACtB,MAAM,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;iBAC5C;qBAAM;oBACL,uGAAuG;oBACvG,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBAC9E,MAAM,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;iBACzD;aACF;SACF;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,EAAE,KACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAC,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,aAAa,EACjB,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,kBAAkB,QAClB,GAAG,EAAE,UAAU,YAEd,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\n\nexport interface TooltipProps extends BaseProps {\n  /** Text content for the tooltip. */\n  children: string | string[];\n  /** Element to serve as the tooltip's target. */\n  target: Element | null;\n  /**\n   * Delay showing the tooltip on mouseenter.\n   * @default 'short'\n   */\n  showDelay?: Delay;\n  /**\n   * Delay hiding the tooltip on mouseleave.\n   * @default 'long'\n   */\n  hideDelay?: Delay;\n  /**\n   * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n   * @default true\n   */\n  portal?: PopoverProps['portal'];\n  /**\n   * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n   * @default true\n   */\n  describeTarget?: boolean;\n  /**\n   * Sets the placement of the tooltip relative to the target.\n   * @default 'bottom'\n   */\n  placement?: PopoverProps['placement'];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    background-color: ${theme.components.tooltip['background-color']};\n    color: ${theme.components.tooltip['foreground-color']};\n    font-size: ${fontSize.xxs};\n    max-width: 40ch;\n    padding: ${theme.base.spacing};\n    white-space: pre-line;\n    word-break: break-word;\n    pointer-events: none;\n    z-index: ${theme.base['z-index'].tooltip};\n  `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      target,\n      showDelay = 'short',\n      hideDelay = 'long',\n      portal = true,\n      placement = 'bottom',\n      describeTarget = true,\n      ...restProps\n    }: PropsWithoutRef<TooltipProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const id = useUID();\n    const [show, setShow] = useState(false);\n    const tooltipRef = useConsolidatedRef(ref);\n    const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n    const showTooltip = useCallback(() => {\n      setShow(true);\n    }, []);\n\n    const onMouseDown = useCallback(\n      ({ target: eTarget }: MouseEvent) => {\n        lastClickedRef.current = eTarget;\n        if (eTarget === tooltipRef.current || eTarget === target) return;\n        setShow(false);\n      },\n      [target]\n    );\n\n    const onFocusOut = useCallback(() => {\n      if (lastClickedRef.current !== tooltipRef.current) {\n        setShow(false);\n      }\n      lastClickedRef.current = null;\n    }, []);\n\n    const onMouseEnter = useCallback(() => {\n      setShow(true);\n    }, [target]);\n\n    const onMouseLeave = useCallback(() => {\n      if (document.activeElement !== target) {\n        setShow(false);\n      }\n    }, [target]);\n\n    const onKeyDown = useCallback(\n      ({ key }: KeyboardEvent) => {\n        if (key === 'Escape' && document.activeElement === target) {\n          setShow(false);\n        }\n      },\n      [target]\n    );\n\n    useEffect(() => {\n      if (!target) return;\n\n      document.addEventListener('keydown', onKeyDown);\n      document.addEventListener('mousedown', onMouseDown);\n\n      target.addEventListener('focusin', showTooltip);\n      target.addEventListener('focusout', onFocusOut);\n\n      target.addEventListener('mouseenter', onMouseEnter);\n      target.addEventListener('mouseleave', onMouseLeave);\n\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n        document.removeEventListener('mousedown', onMouseDown);\n\n        target.removeEventListener('focusin', showTooltip);\n        target.removeEventListener('focusout', onFocusOut);\n\n        target.removeEventListener('mouseenter', onMouseEnter);\n        target.removeEventListener('mouseleave', onMouseLeave);\n      };\n    }, [target, showTooltip, onMouseDown, onFocusOut, onMouseLeave, onKeyDown]);\n\n    useEffect(() => {\n      if (target && describeTarget && show) {\n        const describedBy = target.getAttribute('aria-describedby');\n        // Set the attribute to the old attribute plus the id\n        target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n      } else if (target) {\n        // Get the old attribute\n        const describedBy = target.getAttribute('aria-describedby');\n        if (describedBy) {\n          // If the old attribute matches the id just remove it entirely\n          if (describedBy === id) {\n            target.removeAttribute('aria-describedby');\n          } else {\n            // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n            const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\\\s+)${id}`), '');\n            target.setAttribute('aria-describedby', oldDescribedBy);\n          }\n        }\n      }\n    }, [describeTarget, target, show]);\n\n    return (\n      <Popover\n        id={id}\n        {...restProps}\n        show={show}\n        showDelay={showDelay}\n        hideDelay={hideDelay}\n        groupId='tooltip'\n        strategy='fixed'\n        portal={portal}\n        as={StyledTooltip}\n        role='tooltip'\n        target={target}\n        arrow\n        placement={placement}\n        onMouseDown={onMouseDown}\n        hideOnTargetHidden\n        ref={tooltipRef}\n      >\n        {children}\n      </Popover>\n    );\n  }\n);\n\nexport default Tooltip;\n"]}

package/lib/components/URL/URLDisplay.d.ts

@@ -7,7 +7,7 @@ export interface URLDisplayProps extends BaseProps, NoChildrenProp {
     displayText?: string;
     /**
      * Controls styling of the field.
-     * @default "link"
+     * @default 'link'
      */
     variant?: 'link' | 'text' | 'qrcode';
     /** Ref for the wrapping element. */

package/lib/components/URL/URLDisplay.js

@@ -12,7 +12,7 @@ import QRCode from '../QRCode';
 const generateUrlMarkup = (url) => {
     const markedUrl = url
         .split('//')
-        /* Insert \x1f (unit separator) char as a placeholder at correct position. */
+        // Insert \x1f (unit separator) char as a placeholder at correct position.
         .map(str => {
         return str
             .replace(/:/giu, '$&\x1f')
@@ -20,7 +20,7 @@ const generateUrlMarkup = (url) => {
             .replace(/[=&]/giu, '\x1f$&\x1f');
     })
         .join('//\x1f');
-    /* Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping. */
+    // Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping.
     return markedUrl.split('\x1f').reduce((urlFragments, part) => {
         urlFragments.push(part, _jsx("wbr", {}, urlFragments.length));
         return urlFragments;

package/lib/components/URL/URLDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"URLDisplay.js","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AAEvF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAgB/B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAa,EAAE;IACnD,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,IAAI,CAAC;QACZ,6EAA6E;SAC5E,GAAG,CAAC,GAAG,CAAC,EAAE;QACT,OAAO,GAAG;aACP,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;aACzB,OAAO,CAAC,kBAAkB,EAAE,QAAQ,CAAC;aACrC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC,CAAC;SACD,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElB,+HAA+H;IAC/H,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAc,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE;QACxE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAU,YAAY,CAAC,MAAM,CAAI,CAAC,CAAC;QAC3D,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B,EAC3B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,CAAC;IAEF,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC;KACH;IACD,IAAI,OAAO,KAAK,QAAQ,EAAE;QACxB,OAAO,CACL,KAAC,MAAM,IACL,GAAG,EAAE,GAA4B,KAC7B,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,WAAW,GAClB,CACH,CAAC;KACH;IACD,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\n\nimport Link from '../Link';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport QRCode from '../QRCode';\n\nexport interface URLDisplayProps extends BaseProps, NoChildrenProp {\n  /** URL address, includes scheme, 'http://', 'https://' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default \"link\"\n   */\n  variant?: 'link' | 'text' | 'qrcode';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement | HTMLImageElement | HTMLDivElement>;\n}\n\n/**\n * Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.\n * It helps breaking a long url correctly to avoid parent container overflow issues\n * according to \"The Chicago Manual of Style\" copywriting standard.\n * @param url input url to construct markup for\n * @returns array of nodes\n */\nconst generateUrlMarkup = (url: string): ReactNode => {\n  const markedUrl = url\n    .split('//')\n    /* Insert \\x1f (unit separator) char as a placeholder at correct position. */\n    .map(str => {\n      return str\n        .replace(/:/giu, '$&\\x1f')\n        .replace(/[/~.,\\\\-_?#%]/giu, '\\x1f$&')\n        .replace(/[=&]/giu, '\\x1f$&\\x1f');\n    })\n    .join('//\\x1f');\n\n  /* Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping. */\n  return markedUrl.split('\\x1f').reduce<ReactNode[]>((urlFragments, part) => {\n    urlFragments.push(part, <wbr key={urlFragments.length} />);\n    return urlFragments;\n  }, []);\n};\n\nconst URLDisplay: FunctionComponent<URLDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<URLDisplayProps>,\n    ref: URLDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || generateUrlMarkup(value)\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n\n    if (variant === 'text' || !value) {\n      return (\n        <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n          {displayValue}\n        </span>\n      );\n    }\n    if (variant === 'qrcode') {\n      return (\n        <QRCode\n          ref={ref as Ref<HTMLImageElement>}\n          {...restProps}\n          value={value}\n          label={displayText}\n        />\n      );\n    }\n    return (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default URLDisplay;\n"]}
+{"version":3,"file":"URLDisplay.js","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AAEvF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAgB/B;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAa,EAAE;IACnD,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,IAAI,CAAC;QACZ,0EAA0E;SACzE,GAAG,CAAC,GAAG,CAAC,EAAE;QACT,OAAO,GAAG;aACP,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;aACzB,OAAO,CAAC,kBAAkB,EAAE,QAAQ,CAAC;aACrC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC,CAAC;SACD,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElB,4HAA4H;IAC5H,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAc,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE;QACxE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAU,YAAY,CAAC,MAAM,CAAI,CAAC,CAAC;QAC3D,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAoC,EACxF,GAA2B,EAC3B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,iBAAiB,CAAC,KAAK,CAAC,CACxC,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,CAAC;IAEF,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC;KACH;IACD,IAAI,OAAO,KAAK,QAAQ,EAAE;QACxB,OAAO,CACL,KAAC,MAAM,IACL,GAAG,EAAE,GAA4B,KAC7B,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,WAAW,GAClB,CACH,CAAC;KACH;IACD,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\n\nimport Link from '../Link';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport QRCode from '../QRCode';\n\nexport interface URLDisplayProps extends BaseProps, NoChildrenProp {\n  /** URL address, includes scheme, 'http://', 'https://' */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Controls styling of the field.\n   * @default 'link'\n   */\n  variant?: 'link' | 'text' | 'qrcode';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement | HTMLSpanElement | HTMLImageElement | HTMLDivElement>;\n}\n\n/**\n * Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.\n * It helps breaking a long url correctly to avoid parent container overflow issues\n * according to \"The Chicago Manual of Style\" copywriting standard.\n * @param url input url to construct markup for\n * @returns array of nodes\n */\nconst generateUrlMarkup = (url: string): ReactNode => {\n  const markedUrl = url\n    .split('//')\n    // Insert \\x1f (unit separator) char as a placeholder at correct position.\n    .map(str => {\n      return str\n        .replace(/:/giu, '$&\\x1f')\n        .replace(/[/~.,\\\\-_?#%]/giu, '\\x1f$&')\n        .replace(/[=&]/giu, '\\x1f$&\\x1f');\n    })\n    .join('//\\x1f');\n\n  // Replace unit separator character with <wbr /> element. Create an array of nodes in place of string to pass tags escaping.\n  return markedUrl.split('\\x1f').reduce<ReactNode[]>((urlFragments, part) => {\n    urlFragments.push(part, <wbr key={urlFragments.length} />);\n    return urlFragments;\n  }, []);\n};\n\nconst URLDisplay: FunctionComponent<URLDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<URLDisplayProps>,\n    ref: URLDisplayProps['ref']\n  ) => {\n    const displayValue = value ? (\n      displayText || generateUrlMarkup(value)\n    ) : (\n      <span aria-hidden='true'>&ndash;&ndash;</span>\n    );\n\n    if (variant === 'text' || !value) {\n      return (\n        <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n          {displayValue}\n        </span>\n      );\n    }\n    if (variant === 'qrcode') {\n      return (\n        <QRCode\n          ref={ref as Ref<HTMLImageElement>}\n          {...restProps}\n          value={value}\n          label={displayText}\n        />\n      );\n    }\n    return (\n      <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n        {displayValue}\n      </Link>\n    );\n  }\n);\n\nexport default URLDisplay;\n"]}