@pega/cosmos-react-core 3.0.0-dev.2.0 → 3.0.0-dev.21.0

package/lib/components/FormField/FormField.js

@@ -1,13 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement, useEffect, useState, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { readableColor, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Actions from '../Actions';
-import { useUID } from '../../hooks';
+import { useConsolidatedRef, useI18n, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
-import { calculateFontSize } from '../../styles';
-import Icon from '../Icon';
+import { calculateFontSize, getHoverColors } from '../../styles';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { getFocusables, tryCatch } from '../../utils';
+import Button from '../Button';
+import Icon, { registerIcon } from '../Icon';
+import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
+import * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';
+import * as checkIcon from '../Icon/icons/check.icon';
+import AdditionalInfo from '../AdditionalInfo';
+registerIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
     return css `
       height: 1em;
@@ -44,7 +53,10 @@ export const StyledFormField = styled.div(props => {
     `}
     position: relative;
     border: 0;
-
+    & label,
+    legend {
+      align-self: center;
+    }
     > ${StyledLabel} {
       margin-bottom: calc(0.25 * ${spacing});
       ${disabled &&
@@ -62,15 +74,55 @@ export const StyledFormField = styled.div(props => {
   `;
 });
 StyledFormField.defaultProps = defaultThemeProp;
-const statusIconMap = { error: 'warn-solid', warning: 'warn', success: 'check' };
+const StyledSuggestionButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing }, components: { 'form-control': { 'border-radius': radius, 'border-width': borderWidth }, 'form-field': formField } } }) => {
+    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
+    const backgroundColor = formField.pending['status-color'];
+    const hoverColors = getHoverColors(backgroundColor);
+    const color = tryCatch(() => readableColor(backgroundColor));
+    const borderColor = color ? rgba(color, 0.4) : color;
+    return css `
+      background-color: ${backgroundColor};
+      color: ${color};
+      font-size: ${buttonFontSize};
+      min-width: calc(3 * ${spacing});
+      min-height: calc(3 * ${spacing});
+      padding: 0 ${spacing};
+      border-radius: 0;
+      border: none;
+      &:first-child {
+        border-inline-end: ${borderWidth} solid ${borderColor};
+        border-end-start-radius: calc(${baseRadius} * ${radius});
+        margin-inline-start: calc(2 * ${spacing});
+      }
+      &:last-child {
+        border-end-end-radius: calc(${baseRadius} * ${radius});
+        margin-inline-start: 0;
+      }
+      &:hover {
+        background-color: ${hoverColors.background};
+      }
+
+      @media (pointer: coarse) {
+        min-height: 2rem;
+      }
+    `;
+});
+StyledSuggestionButton.defaultProps = defaultThemeProp;
+const statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };
 const FormField = forwardRef((props, ref) => {
     const uid = useUID();
-    const { children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, ...restProps } = props;
+    const { children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, additionalInfo, onResolveSuggestion, ...restProps } = props;
+    const t = useI18n();
     const labelAsLegend = labelAs === 'legend';
-    const styledLabel = (_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
-            if (readOnly)
-                e.preventDefault();
-        }, inline: inline, children: [status && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] }, void 0)), label] }, void 0));
+    const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
+    const consolidatedRef = useConsolidatedRef(ref);
+    const styledLabel = isRadioCheck ? (_jsxs(_Fragment, { children: [_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
+                    if (readOnly)
+                        e.preventDefault();
+                }, inline: inline, children: [status && status !== 'pending' && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }), additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] })) : (_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
+                    if (readOnly)
+                        e.preventDefault();
+                }, inline: inline, children: [status && status !== 'pending' && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }), additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }));
     /*
       We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.
       This is to ensure screen readers will announce info on errors when role is set to alert.
@@ -91,7 +143,7 @@ const FormField = forwardRef((props, ref) => {
             'aria-describedby': info && `${id}-info`
         });
     if (actions) {
-        content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 }, void 0)] }, void 0));
+        content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
     }
     let infoContent = info ? (
     /*
@@ -99,15 +151,34 @@ const FormField = forwardRef((props, ref) => {
       Withholding aria-live="assertive" to avoid iOS issue. See below.
       https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
     */
-    _jsx(StyledFormFieldInfo, { status: status, role: status === 'error' || status === 'warning' ? 'alert' : undefined, id: `${id}-info`, children: liveRegionInfo }, void 0)) : undefined;
+    _jsx(StyledFormFieldInfo, { status: status, role: status === 'error' || status === 'warning' ? 'alert' : undefined, id: `${id}-info`, children: liveRegionInfo })) : undefined;
     if (charLimitDisplay) {
-        infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay }, void 0)] }, void 0));
+        infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
+    }
+    if (hasSuggestion) {
+        const focusables = getFocusables(consolidatedRef);
+        infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { status: status, id: `${id}-info`, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { onClick: () => {
+                                onResolveSuggestion(false);
+                                focusables[0]?.focus();
+                            }, "aria-label": t('reject_suggestion_button_a11y'), children: t('no') }), _jsx(StyledSuggestionButton, { onClick: () => {
+                                onResolveSuggestion(true);
+                                focusables[0]?.focus();
+                            }, "aria-label": t('accept_suggestion_button_a11y'), children: t('yes') })] })] }));
     }
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            const target = e.target;
+            if (!target.closest('button')) {
+                e.preventDefault();
+                onResolveSuggestion?.(true);
+            }
+        }
+    };
     return (_jsxs(Flex, { ...restProps, container: {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             ...container
-        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: ref, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }, void 0));
+        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: consolidatedRef, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }));
 });
 export default FormField;
 //# sourceMappingURL=FormField.js.map

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

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

package/lib/components/Grid/Grid.js

@@ -173,7 +173,7 @@ export const StyledGrid = styled.div(({ container, item, theme: { base: { breakp
 });
 StyledGrid.defaultProps = defaultThemeProp;
 const Grid = forwardRef((props, ref) => {
-    return _jsx(StyledGrid, { ...props, ref: ref }, void 0);
+    return _jsx(StyledGrid, { ...props, ref: ref });
 });
 export default Grid;
 //# sourceMappingURL=Grid.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { FunctionComponent, Ref } from 'react';
+import { DefaultTheme } from 'styled-components';
+import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export interface HTMLProps extends BaseProps, NoChildrenProp {
+    content: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const listStyles: import("styled-components").FlattenSimpleInterpolation;
+export declare const getTableStyles: (theme: DefaultTheme) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getHtmlStyles: (theme: DefaultTheme) => string;
+export declare const StyledHTML: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+declare const HTML: FunctionComponent<HTMLProps & ForwardProps>;
+export default HTML;
+//# sourceMappingURL=HTML.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAmBrB,CAAC;AAiBH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAerD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/HTML/HTML.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import dompurify from 'dompurify';
+import { StyledPopover } from '../Popover';
+import { defaultThemeProp } from '../../theme';
+import { calculateFontSize } from '../../styles';
+import { sameOrigin } from '../../utils';
+export const listStyles = css `
+  ul,
+  ol {
+    padding-inline-start: 2.5rem;
+  }
+
+  li {
+    margin: 0.5rem 0;
+  }
+
+  ul li {
+    ul {
+      margin-inline-start: 1rem;
+      list-style-type: circle;
+    }
+
+    ul ul {
+      margin-inline-start: 2rem;
+      list-style-type: square;
+    }
+
+    ul ul ul {
+      margin-inline-start: 3rem;
+      list-style-type: disc;
+    }
+  }
+
+  ol li {
+    ol {
+      margin-inline-start: 1rem;
+      list-style-type: lower-alpha;
+    }
+
+    ol ol {
+      margin-inline-start: 2rem;
+      list-style-type: lower-roman;
+    }
+
+    ol ol ol {
+      margin-inline-start: 3rem;
+      list-style-type: decimal;
+    }
+  }
+`;
+export const getTableStyles = (theme) => css `
+  border-collapse: collapse;
+
+  td {
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
+    min-width: 6.25rem;
+  }
+
+  tr:first-child {
+    td:first-child {
+      border-top-left-radius: 0.125rem;
+    }
+
+    td:last-child {
+      border-top-right-radius: 0.125rem;
+    }
+  }
+
+  tr:last-child {
+    td:first-child {
+      border-bottom-left-radius: 0.125rem;
+    }
+
+    td:last-child {
+      border-bottom-right-radius: 0.125rem;
+    }
+  }
+`;
+export const getHtmlStyles = (theme) => {
+    const { base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette }, components: { text } } = theme;
+    const fontSize = calculateFontSize(baseFontSize, baseFontScale);
+    return `
+    ${listStyles}
+    table {
+      ${getTableStyles(theme)}
+    }
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 0.25rem;
+    }
+    a {
+      color: ${palette.interactive};
+    }
+    pre {
+      white-space: break-spaces;
+    }
+    p {
+      min-height: ${fontSize[text.primary['font-size']]};
+    }
+    h1 {
+      font-size: ${fontSize[text.h1['font-size']]};
+      font-weight: ${text.h1['font-weight']};
+      min-height: ${fontSize[text.h1['font-size']]};
+    }
+    h2 {
+      font-size: ${fontSize[text.h2['font-size']]};
+      font-weight: ${text.h2['font-weight']};
+      min-height: ${fontSize[text.h2['font-size']]};
+    }
+    h3 {
+      font-size: ${fontSize[text.h3['font-size']]};
+      font-weight: ${text.h3['font-weight']};
+      min-height: ${fontSize[text.h3['font-size']]};
+    }
+    h4 {
+      font-size: ${fontSize[text.h4['font-size']]};
+      font-weight: ${text.h4['font-weight']};
+      min-height: ${fontSize[text.h4['font-size']]};
+    }
+    h5 {
+      font-size: ${fontSize[text.h5['font-size']]};
+      font-weight: ${text.h5['font-weight']};
+      min-height: ${fontSize[text.h5['font-size']]};
+    }
+    h6 {
+      font-size: ${fontSize[text.h6['font-size']]};
+      font-weight: ${text.h6['font-weight']};
+      min-height: ${fontSize[text.h6['font-size']]};
+    }
+  `;
+};
+export const StyledHTML = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    overflow-x: auto;
+    ${getHtmlStyles(theme)}
+
+    ${StyledPopover} ul {
+      ul {
+        padding-inline-start: 0;
+      }
+      ol {
+        padding-inline-start: 0;
+      }
+    }
+
+    ${StyledPopover} li {
+      margin: 0;
+    }
+  `;
+});
+StyledHTML.defaultProps = defaultThemeProp;
+dompurify.addHook('uponSanitizeAttribute', node => {
+    const href = node.getAttribute('href');
+    if (node.tagName === 'A' && href) {
+        const fullURL = new URL(/^[a-z][a-z0-9.+-]*:/i.test(href) ? href : `https:${href}`);
+        if (!sameOrigin(window.location, fullURL)) {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener');
+        }
+        else {
+            node.removeAttribute('target');
+        }
+    }
+});
+const HTML = forwardRef(({ content, ...restProps }, ref) => {
+    const [mounted, setMounted] = useState(false);
+    const sanitizedHtml = useMemo(() => {
+        return mounted ? dompurify.sanitize(content) : '';
+    }, [content, mounted]);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    return sanitizedHtml ? (_jsx(StyledHTML, { dangerouslySetInnerHTML: { __html: sanitizedHtml }, ref: ref, ...restProps })) : null;
+});
+export default HTML;
+//# sourceMappingURL=HTML.js.map

package/lib/components/HTML/HTML.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { sameOrigin } from '../../utils';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n  content: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return `\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n    img {\n      max-width: 100%;\n      height: auto;\n      border-radius: 0.25rem;\n    }\n    a {\n      color: ${palette.interactive};\n    }\n    pre {\n      white-space: break-spaces;\n    }\n    p {\n      min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n      min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n      min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n      min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n      min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n      min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n      min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n    }\n  `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-x: auto;\n    ${getHtmlStyles(theme)}\n\n    ${StyledPopover} ul {\n      ul {\n        padding-inline-start: 0;\n      }\n      ol {\n        padding-inline-start: 0;\n      }\n    }\n\n    ${StyledPopover} li {\n      margin: 0;\n    }\n  `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\ndompurify.addHook('uponSanitizeAttribute', node => {\n  const href = node.getAttribute('href');\n  if (node.tagName === 'A' && href) {\n    const fullURL = new URL(/^[a-z][a-z0-9.+-]*:/i.test(href) ? href : `https:${href}`);\n    if (!sameOrigin(window.location, fullURL)) {\n      node.setAttribute('target', '_blank');\n      node.setAttribute('rel', 'noopener');\n    } else {\n      node.removeAttribute('target');\n    }\n  }\n});\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n  ({ content, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n    const [mounted, setMounted] = useState(false);\n    const sanitizedHtml = useMemo(() => {\n      return mounted ? dompurify.sanitize(content) : '';\n    }, [content, mounted]);\n\n    useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    return sanitizedHtml ? (\n      <StyledHTML dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} {...restProps} />\n    ) : null;\n  }\n);\n\nexport default HTML;\n"]}

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

@@ -0,0 +1,2 @@
+export { default, StyledHTML, HTMLProps } from './HTML';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/HTML/index.js

@@ -0,0 +1,2 @@
+export { default, StyledHTML } from './HTML';
+//# sourceMappingURL=index.js.map

package/lib/components/HTML/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/HTML/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAa,MAAM,QAAQ,CAAC","sourcesContent":["export { default, StyledHTML, HTMLProps } from './HTML';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,GAAG,EAEH,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAID,eAAO,MAAM,YAAY,aAAc,UAAU,EAAE,SAIlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,UAAU,EAAE,SAIvD,CAAC;AAEF,eAAO,MAAM,UAAU,yGAMtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAwCrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,GAAG,EAEH,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAID,eAAO,MAAM,YAAY,aAAc,UAAU,EAAE,SAIlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,UAAU,EAAE,SAIvD,CAAC;AAEF,eAAO,MAAM,UAAU,yGAMtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAkCrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Icon/Icon.js

@@ -45,7 +45,7 @@ const Icon = forwardRef(({ name, ...restProps }, ref) => {
             controller.abort();
         };
     }, [name]);
-    return (_jsx(StyledIcon, { ...restProps, role: 'img', ref: ref, xmlns: 'http://www.w3.org/2000/svg', viewBox: iconDef.viewBox, children: _jsx(iconDef.Component, {}, void 0) }, void 0));
+    return (_jsx(StyledIcon, { role: 'presentation', ...restProps, viewBox: iconDef.viewBox, ref: ref, children: _jsx(iconDef.Component, {}) }));
 });
 export default Icon;
 //# sourceMappingURL=Icon.js.map

package/lib/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAoBvC,MAAM,YAAY,GAAG,IAAI,GAAG,EAA0B,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IACrD,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IAC1D,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,mBAAmB,GAA6B,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;AAE/F,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAA8B,EAAE,GAAqB,EAAE,EAAE;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,CAAC;YACpC,OAAO;SACR;QAED,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,WAAW,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;aAC/C,IAAI,CAAC,CAAC,MAAkB,EAAE,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;YAEpF,YAAY,CAAC,MAAM,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAC5B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,CAAC,OAAO,YAExB,KAAC,OAAO,CAAC,SAAS,aAAG,WACV,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useEffect,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface IconDefinition {\n  Component: ComponentType;\n  viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n  name: string;\n}\n\nexport interface IconProps extends BaseProps, NoChildrenProp {\n  /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. */\n  name: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<SVGSVGElement>;\n}\n\nconst iconRegistry = new Map<string, IconDefinition>();\n\nexport const registerIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ name, ...iconDef }) => {\n    if (!iconRegistry.has(name)) iconRegistry.set(name, iconDef);\n  });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ name, ...iconDef }) => {\n    iconRegistry.set(name, iconDef);\n  });\n};\n\nexport const StyledIcon = styled.svg`\n  display: inline-block;\n  fill: currentColor;\n  height: 1.125rem;\n  width: 1.125rem;\n  vertical-align: middle;\n`;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon: FunctionComponent<IconProps & ForwardProps> = forwardRef(\n  ({ name, ...restProps }: PropsWithoutRef<IconProps>, ref: IconProps['ref']) => {\n    const [iconDef, setIconDef] = useState(iconRegistry.get(name) ?? emptyIconDefinition);\n\n    useEffect(() => {\n      if (iconRegistry.has(name)) {\n        setIconDef(iconRegistry.get(name)!);\n        return;\n      }\n\n      const controller = new AbortController();\n      import(`./icons/${encodeURIComponent(name)}.icon`)\n        .then((module: IconModule) => {\n          if (!module.name || !module.Component) throw new Error('Malformed icon definition');\n\n          registerIcon(module);\n          if (!controller.signal.aborted)\n            setIconDef(iconRegistry.get(module.name) ?? emptyIconDefinition);\n        })\n        .catch(() => {\n          if (!controller.signal.aborted) setIconDef(emptyIconDefinition);\n        });\n\n      return () => {\n        controller.abort();\n      };\n    }, [name]);\n\n    return (\n      <StyledIcon\n        {...restProps}\n        role='img'\n        ref={ref}\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox={iconDef.viewBox}\n      >\n        <iconDef.Component />\n      </StyledIcon>\n    );\n  }\n);\n\nexport default Icon;\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAoBvC,MAAM,YAAY,GAAG,IAAI,GAAG,EAA0B,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IACrD,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IAC1D,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,mBAAmB,GAA6B,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;AAE/F,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAA8B,EAAE,GAAqB,EAAE,EAAE;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,CAAC;YACpC,OAAO;SACR;QAED,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,WAAW,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;aAC/C,IAAI,CAAC,CAAC,MAAkB,EAAE,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;YAEpF,YAAY,CAAC,MAAM,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAC5B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,KAAC,UAAU,IAAC,IAAI,EAAC,cAAc,KAAK,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,YAC/E,KAAC,OAAO,CAAC,SAAS,KAAG,GACV,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useEffect,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface IconDefinition {\n  Component: ComponentType;\n  viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n  name: string;\n}\n\nexport interface IconProps extends BaseProps, NoChildrenProp {\n  /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. */\n  name: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<SVGSVGElement>;\n}\n\nconst iconRegistry = new Map<string, IconDefinition>();\n\nexport const registerIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ name, ...iconDef }) => {\n    if (!iconRegistry.has(name)) iconRegistry.set(name, iconDef);\n  });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n  icons.forEach(({ name, ...iconDef }) => {\n    iconRegistry.set(name, iconDef);\n  });\n};\n\nexport const StyledIcon = styled.svg`\n  display: inline-block;\n  fill: currentColor;\n  height: 1.125rem;\n  width: 1.125rem;\n  vertical-align: middle;\n`;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon: FunctionComponent<IconProps & ForwardProps> = forwardRef(\n  ({ name, ...restProps }: PropsWithoutRef<IconProps>, ref: IconProps['ref']) => {\n    const [iconDef, setIconDef] = useState(iconRegistry.get(name) ?? emptyIconDefinition);\n\n    useEffect(() => {\n      if (iconRegistry.has(name)) {\n        setIconDef(iconRegistry.get(name)!);\n        return;\n      }\n\n      const controller = new AbortController();\n      import(`./icons/${encodeURIComponent(name)}.icon`)\n        .then((module: IconModule) => {\n          if (!module.name || !module.Component) throw new Error('Malformed icon definition');\n\n          registerIcon(module);\n          if (!controller.signal.aborted)\n            setIconDef(iconRegistry.get(module.name) ?? emptyIconDefinition);\n        })\n        .catch(() => {\n          if (!controller.signal.aborted) setIconDef(emptyIconDefinition);\n        });\n\n      return () => {\n        controller.abort();\n      };\n    }, [name]);\n\n    return (\n      <StyledIcon role='presentation' {...restProps} viewBox={iconDef.viewBox} ref={ref}>\n        <iconDef.Component />\n      </StyledIcon>\n    );\n  }\n);\n\nexport default Icon;\n"]}