@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

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

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

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

@@ -1,12 +1,18 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
 export interface FormProps extends BaseProps {
     /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
     children: ReactNode;
     /** Region for Form Actions. */
     actions?: ReactNode;
+    /** The heading of the form. */
+    heading?: string;
+    /** A description of the form to be displayed above the controls. */
+    description?: string;
     /** Region for Banners above the Form. */
     banners?: ReactNode;
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLFormElement>;
 }
 export declare const StyledForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFormContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,6HAA6H;IAC7H,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,0GAAgB,CAAC;AACxC,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,GAAG,YAAY,CAetC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAItD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,6HAA6H;IAC7H,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,0GAAgB,CAAC;AACxC,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,GAAG,YAAY,CAsCtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Form/Form.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { useUID } from '../../hooks';
 import Flex from '../Flex';
+import Text from '../Text';
 export const StyledForm = styled.form ``;
 export const StyledFormContent = styled.div ``;
 const Form = forwardRef((props, ref) => {
-    const { children, actions, banners, ...restProps } = props;
-    return (_jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 3 }, as: StyledForm, ref: ref }, restProps, { children: [banners,
-            _jsx(Flex, Object.assign({ as: StyledFormContent, container: { direction: 'column', gap: 3 } }, { children: children }), void 0),
-            actions && _jsx(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center' } }, { children: actions }), void 0)] }), void 0));
+    const { children, actions, heading, description, banners, ...restProps } = props;
+    const uid = useUID();
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, as: StyledForm, ref: ref, ...restProps, "aria-labelledby": heading ? `${uid}-heading` : undefined, "aria-describedby": description ? `${uid}-description` : undefined, children: [banners, (heading || description) && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [heading && (_jsx(Text, { id: `${uid}-heading`, variant: 'h3', children: heading }, void 0)), description && (_jsx(Text, { id: `${uid}-description`, as: 'p', children: description }, void 0))] }, void 0)), _jsx(Flex, { as: StyledFormContent, container: { direction: 'column', gap: 3 }, children: children }, void 0), actions && _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, children: actions }, void 0)] }, void 0));
 });
 export default Form;
 //# sourceMappingURL=Form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAW3B,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,IAAI,GAAiC,UAAU,CACnD,CAAC,KAAiC,EAAE,GAAyB,EAAE,EAAE;IAC/D,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE3D,OAAO,CACL,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,eACtF,OAAO;YACR,KAAC,IAAI,kBAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpE,QAAQ,YACJ;YAEN,OAAO,IAAI,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAG,OAAO,YAAQ,aACtF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\n\nexport interface FormProps extends BaseProps {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: ReactNode;\n  /** Region for Form Actions. */\n  actions?: ReactNode;\n  /** Region for Banners above the Form. */\n  banners?: ReactNode;\n}\n\nexport const StyledForm = styled.form``;\nexport const StyledFormContent = styled.div``;\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormProps>, ref: Ref<HTMLFontElement>) => {\n    const { children, actions, banners, ...restProps } = props;\n\n    return (\n      <Flex container={{ direction: 'column', gap: 3 }} as={StyledForm} ref={ref} {...restProps}>\n        {banners}\n        <Flex as={StyledFormContent} container={{ direction: 'column', gap: 3 }}>\n          {children}\n        </Flex>\n\n        {actions && <Flex container={{ justify: 'between', alignItems: 'center' }}>{actions}</Flex>}\n      </Flex>\n    );\n  }\n);\n\nexport default Form;\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,IAAI,GAAiC,UAAU,CACnD,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,KACJ,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,sBACrC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,aAE/D,OAAO,EACP,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAC3B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,UAAU,EAAE,OAAO,EAAC,IAAI,YACrC,OAAO,WACH,CACR,EACA,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,EAAE,EAAC,GAAG,YACnC,WAAW,WACP,CACR,YACI,CACR,EACD,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YACpE,QAAQ,WACJ,EAEN,OAAO,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,OAAO,WAAQ,YACtF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useUID } from '../../hooks';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nexport interface FormProps extends BaseProps {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: ReactNode;\n  /** Region for Form Actions. */\n  actions?: ReactNode;\n  /** The heading of the form. */\n  heading?: string;\n  /** A description of the form to be displayed above the controls. */\n  description?: string;\n  /** Region for Banners above the Form. */\n  banners?: ReactNode;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLFormElement>;\n}\n\nexport const StyledForm = styled.form``;\nexport const StyledFormContent = styled.div``;\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormProps>, ref: FormProps['ref']) => {\n    const { children, actions, heading, description, banners, ...restProps } = props;\n\n    const uid = useUID();\n\n    return (\n      <Flex\n        container={{ direction: 'column', gap: 3 }}\n        as={StyledForm}\n        ref={ref}\n        {...restProps}\n        aria-labelledby={heading ? `${uid}-heading` : undefined}\n        aria-describedby={description ? `${uid}-description` : undefined}\n      >\n        {banners}\n        {(heading || description) && (\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            {heading && (\n              <Text id={`${uid}-heading`} variant='h3'>\n                {heading}\n              </Text>\n            )}\n            {description && (\n              <Text id={`${uid}-description`} as='p'>\n                {description}\n              </Text>\n            )}\n          </Flex>\n        )}\n        <Flex as={StyledFormContent} container={{ direction: 'column', gap: 3 }}>\n          {children}\n        </Flex>\n\n        {actions && <Flex container={{ justify: 'between', alignItems: 'center' }}>{actions}</Flex>}\n      </Flex>\n    );\n  }\n);\n\nexport default Form;\n"]}

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

@@ -34,7 +34,7 @@ export interface FormControlProps extends BaseProps {
     /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
     name?: string;
 }
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<FormControlProps, never> & Required<Pick<FormControlProps, never>>, never>;
+export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>>, never>;
 declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;
 export default FormControl;
 //# sourceMappingURL=FormControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID,eAAO,MAAM,iBAAiB,8KAwE5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID,eAAO,MAAM,iBAAiB,0MAwE5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js

@@ -51,7 +51,7 @@ export const StyledFormControl = styled.div(props => {
 });
 StyledFormControl.defaultProps = defaultThemeProp;
 const FormControl = forwardRef((props, ref) => {
-    return _jsx(StyledFormControl, Object.assign({ ref: ref }, props), void 0);
+    return _jsx(StyledFormControl, { ref: ref, ...props }, void 0);
 });
 export default FormControl;
 //# sourceMappingURL=FormControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EAC7F,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1F,OAAO,GAAG,CAAA;aACC,UAAU;wBACC,UAAU;0BACR,UAAU,MAAM,MAAM;oBAC5B,WAAW;oBACX,WAAW;;;;;;;;;0BASL,uBAAuB;sBAC3B,mBAAmB;;;;;sBAKnB,gBAAgB;oBAClB,MAAM;;;MAGpB,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEiB,gBAAgB;;KAEnC;;;0BAGqB,uBAAuB;sBAC3B,mBAAmB;;;;;uBAKlB,QAAQ,CAAC,CAAC;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,UAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults>(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status\n  } = props;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n  const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n  return css`\n    color: ${foreground};\n    background-color: ${background};\n    border-radius: calc(${baseRadius} * ${radius});\n    border-color: ${borderColor};\n    border-width: ${borderWidth};\n    border-style: solid;\n    &,\n    & > select {\n      outline: none;\n    }\n\n    &:disabled,\n    &[disabled] {\n      background-color: ${disabledBackgroundColor};\n      border-color: ${disabledBorderColor};\n      cursor: not-allowed;\n    }\n\n    &:focus:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n\n    ${!status &&\n    css`\n      &:hover:not([readonly]):not([disabled]):not(:focus) {\n        border-color: ${hoverBorderColor};\n      }\n    `}\n\n    &[readonly] {\n      background-color: ${readOnlyBackgroundColor};\n      border-color: ${readOnlyBorderColor};\n    }\n\n    @media (pointer: coarse) {\n      /* stylelint-disable-next-line unit-allowed-list */\n      font-size: max(${fontSize.s}, 16px);\n    }\n  `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}
+{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EAC7F,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1F,OAAO,GAAG,CAAA;aACC,UAAU;wBACC,UAAU;0BACR,UAAU,MAAM,MAAM;oBAC5B,WAAW;oBACX,WAAW;;;;;;;;;0BASL,uBAAuB;sBAC3B,mBAAmB;;;;;sBAKnB,gBAAgB;oBAClB,MAAM;;;MAGpB,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEiB,gBAAgB;;KAEnC;;;0BAGqB,uBAAuB;sBAC3B,mBAAmB;;;;;uBAKlB,QAAQ,CAAC,CAAC;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,WAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults>(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status\n  } = props;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n  const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n  return css`\n    color: ${foreground};\n    background-color: ${background};\n    border-radius: calc(${baseRadius} * ${radius});\n    border-color: ${borderColor};\n    border-width: ${borderWidth};\n    border-style: solid;\n    &,\n    & > select {\n      outline: none;\n    }\n\n    &:disabled,\n    &[disabled] {\n      background-color: ${disabledBackgroundColor};\n      border-color: ${disabledBorderColor};\n      cursor: not-allowed;\n    }\n\n    &:focus:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n\n    ${!status &&\n    css`\n      &:hover:not([readonly]):not([disabled]):not(:focus) {\n        border-color: ${hoverBorderColor};\n      }\n    `}\n\n    &[readonly] {\n      background-color: ${readOnlyBackgroundColor};\n      border-color: ${readOnlyBorderColor};\n    }\n\n    @media (pointer: coarse) {\n      /* stylelint-disable-next-line unit-allowed-list */\n      font-size: max(${fontSize.s}, 16px);\n    }\n  `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}

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

@@ -26,18 +26,16 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
      * @default false
      */
     labelHidden?: boolean;
+    /**
+     * Visually places the label after the input.
+     * @default false
+     */
+    labelAfter?: boolean;
     /**
      * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup
      * @default "div"
      */
     as?: 'div' | 'fieldset' | ComponentType<any>;
-    /**
-     * Flex ordering for the FormField Label.
-     * Default DOM renders Label after the form control element.
-     * Passing -1 will reverse the order in presentation (Label before the form control element).
-     * @default -1
-     */
-    labelOrder?: -1 | 0 | 1;
     /**
      * Layout field elements inline in a row.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAI1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAwC1B,CAAC;AAMH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAgIhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAI1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAsC1B,CAAC;AAMH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAyHhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FormField/FormField.js

@@ -34,7 +34,7 @@ export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-
 });
 StyledFormFieldInfo.defaultProps = defaultThemeProp;
 export const StyledFormField = styled.div(props => {
-    const { disabled, required, labelOrder, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing } } } = props;
+    const { disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing } } } = props;
     return css `
     ${disabled &&
         css `
@@ -46,7 +46,6 @@ export const StyledFormField = styled.div(props => {
     border: 0;
 
     > ${StyledLabel} {
-      order: ${labelOrder};
       margin-bottom: calc(0.25 * ${spacing});
       ${disabled &&
         css `
@@ -66,13 +65,12 @@ StyledFormField.defaultProps = defaultThemeProp;
 const statusIconMap = { error: 'warn-solid', warning: 'warn', success: 'check' };
 const FormField = forwardRef((props, ref) => {
     const uid = useUID();
-    const { children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelOrder = -1, labelHidden = 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', labelHidden = false, labelAfter = false, info, status, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, actions, container, ...restProps } = props;
     const labelAsLegend = labelAs === 'legend';
-    const styledLabel = (_jsxs(Label, Object.assign({ as: labelAs, htmlFor: labelAs === 'label' ? id : undefined, labelHidden: labelHidden, onClick: (e) => {
+    const styledLabel = (_jsxs(Label, { as: labelAs, htmlFor: labelAs === 'label' ? id : 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));
+        }, inline: inline, children: [status && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] }, void 0)), label] }, void 0));
     /*
       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.
@@ -93,8 +91,7 @@ const FormField = forwardRef((props, ref) => {
             'aria-describedby': info && `${id}-info`
         });
     if (actions) {
-        content = (_jsxs(Flex, Object.assign({ 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 }, void 0)] }, void 0));
     }
     let infoContent = info ? (
     /*
@@ -102,22 +99,15 @@ 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, Object.assign({ 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 }, void 0)) : undefined;
     if (charLimitDisplay) {
-        infoContent = (_jsxs(Flex, Object.assign({ container: { justify: infoContent ? 'between' : 'end', gap: 1 } }, { children: [infoContent,
-                _jsx(Flex, Object.assign({ 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 }, void 0)] }, void 0));
     }
-    return (_jsxs(Flex, Object.assign({}, restProps, { container: {
+    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, labelOrder: labelOrder, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: ref }, { children: [
-            /* fieldset legend needs to be first child of fieldset */
-            labelAsLegend && styledLabel,
-            content,
-            /* id associated label, this can follow control as it is bound by for/id */
-            !labelAsLegend && styledLabel,
-            infoContent] }), void 0));
+        }, 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));
 });
 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   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: 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   * Flex ordering for the FormField Label.\n   * Default DOM renders Label after the form control element.\n   * Passing -1 will reverse the order in presentation (Label before the form control element).\n   * @default -1\n   */\n  labelOrder?: -1 | 0 | 1;\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    labelOrder,\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      order: ${labelOrder};\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      labelOrder = -1,\n      labelHidden = 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        as={labelAs}\n        htmlFor={labelAs === 'label' ? id : 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        labelOrder={labelOrder}\n        aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n        ref={ref}\n      >\n        {\n          /* fieldset legend needs to be first child of fieldset */\n          labelAsLegend && styledLabel\n        }\n        {content}\n        {\n          /* id associated label, this can follow control as it is bound by for/id */\n          !labelAsLegend && styledLabel\n        }\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":";AAAA,OAAO,EAIL,YAAY,EAEZ,SAAS,EACT,QAAQ,EAER,UAAU,EAEX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAmB,MAAM,SAAS,CAAC;AAC1C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,KAAK,EAAE,EAAc,WAAW,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAiD3B,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CACnC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACpB,OAAO,GAAG,CAAA;;;eAGC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC;;;KAGhE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EACjE,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACxC,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;;gCAEkB,OAAO;mBACpB,YAAY;;QAEvB,MAAM;QACR,SAAS,CAAC,MAAM,CAAC;QACjB,GAAG,CAAA;iBACQ,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC;OAC3C;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAiB,KAAK,CAAC,EAAE;IAChE,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,MAAM,EAAE,EACnB,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;MACN,QAAQ;QACV,GAAG,CAAA;iBACU,eAAe;;;KAG3B;;;;QAIG,WAAW;mCACgB,OAAO;QAClC,QAAQ;QACV,GAAG,CAAA;;OAEF;;;mBAGY,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;;;iBAG9B,MAAM;;;GAGpB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,aAAa,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AAEjF,MAAM,SAAS,GAAsC,UAAU,CAC7D,CAAC,KAAsC,EAAE,GAAqB,EAAE,EAAE;IAChE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,QAAQ,EAAE,cAAc,EACxB,EAAE,GAAG,GAAG,EACR,EAAE,GAAG,KAAK,EACV,KAAK,EACL,OAAO,GAAG,OAAO,EACjB,WAAW,GAAG,KAAK,EACnB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,KAAK,EACd,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAY,OAAO,KAAK,QAAQ,CAAC;IAEpD,MAAM,WAAW,GAAG,CAClB,MAAC,KAAK,IACJ,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,QAAQ;gBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnC,CAAC,EACD,MAAM,EAAE,MAAM,aAEb,MAAM,IAAI,CAAC,WAAW,IAAI,CACzB,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,WAAI,CAClE,EACA,KAAK,YACA,CACT,CAAC;IAEF;;;;;;;;MAQE;IACF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAY,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,0CAA0C;IAC1C,IAAI,OAAO,GAA+B,aAAa;QACrD,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,YAAY,CAAC,cAA8B,EAAE;YAC3C,kBAAkB,EAAE,IAAI,IAAI,GAAG,EAAE,OAAO;SACzC,CAAC,CAAC;IAEP,IAAI,OAAO,EAAE;QACX,OAAO,GAAG,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAChD,OAAO,EACR,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,WAAI,YACjC,CACR,CAAC;KACH;IAED,IAAI,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACvB;;;;MAIE;IACF,KAAC,mBAAmB,IAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACtE,EAAE,EAAE,GAAG,EAAE,OAAO,YAEf,cAAc,WACK,CACvB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,IAAI,gBAAgB,EAAE;QACpB,WAAW,GAAG,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,WAAW,EACZ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YAAG,gBAAgB,WAAQ,YAC/C,CACR,CAAC;KACH;IAED,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YACpC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YACzC,GAAG,SAAS;SACb,EACD,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,WAAW,EAAE,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,sBACA,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,EAClE,GAAG,EAAE,GAAG,aAEP,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,IAAI,WAAW,EAC7C,OAAO,EACP,CAAC,aAAa,IAAI,UAAU,IAAI,WAAW,EAC3C,WAAW,YACP,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","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   * 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      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        as={labelAs}\n        htmlFor={labelAs === 'label' ? id : 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"]}

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import GridProps from './Grid.types';
-export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<GridProps, never> & Required<Pick<GridProps, never>>, never>;
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps, never>;
 declare const Grid: FunctionComponent<GridProps & ForwardProps>;
 export default Grid;
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9D,OAAO,SAAS,MAAM,cAAc,CAAC;AA2LrC,eAAO,MAAM,UAAU,gKAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,SAAS,MAAM,cAAc,CAAC;AA2LrC,eAAO,MAAM,UAAU,gHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Grid/Grid.js

@@ -19,7 +19,7 @@ const getContainerStyles = (gridProps) => {
     return css `
     display: ${inline ? 'inline-grid' : 'grid'};
 
-    ${typeof pad !== 'undefined' &&
+    ${pad !== undefined &&
         css `
       /* stylelint-disable function-name-case, function-whitespace-after */
       padding: ${({ theme: { base: { spacing } } }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} * ${spacing})`).join(' ')};
@@ -62,17 +62,17 @@ const getContainerStyles = (gridProps) => {
       grid-template: ${template};
     `}
 
-    ${typeof gap !== 'undefined' &&
+    ${gap !== undefined &&
         css `
       gap: calc(${gap} * ${props => props.theme.base.spacing});
     `}
 
-    ${typeof colGap !== 'undefined' &&
+    ${colGap !== undefined &&
         css `
       column-gap: calc(${colGap} * ${props => props.theme.base.spacing});
     `}
 
-    ${typeof rowGap !== 'undefined' &&
+    ${rowGap !== undefined &&
         css `
       row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});
     `}
@@ -150,8 +150,7 @@ const getItemStyles = (props) => {
   `;
 };
 const breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'];
-export const StyledGrid = styled.div(props => {
-    const { container, item, theme: { base: { breakpoints: themeBreakpoints } }, xs, sm, md, lg, xl } = props;
+export const StyledGrid = styled.div(({ container, item, theme: { base: { breakpoints: themeBreakpoints } }, xs, sm, md, lg, xl }) => {
     const breakpoints = {
         xs,
         sm,
@@ -160,24 +159,21 @@ export const StyledGrid = styled.div(props => {
         xl
     };
     return css `
-    ${getContainerStyles(container)}
-    ${getItemStyles(item)}
-
-    ${breakpointOrder.map(breakpoint => {
-        var _a, _b;
-        return breakpoints[breakpoint] &&
-            css `
-          @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {
-            ${getContainerStyles((_a = breakpoints[breakpoint]) === null || _a === void 0 ? void 0 : _a.container)}
-            ${getItemStyles((_b = breakpoints[breakpoint]) === null || _b === void 0 ? void 0 : _b.item)}
-          }
-        `;
-    })}
-  `;
+      ${getContainerStyles(container)}
+      ${getItemStyles(item)}
+
+    ${breakpointOrder.map(breakpoint => breakpoints[breakpoint] &&
+        css `
+            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {
+              ${getContainerStyles(breakpoints[breakpoint]?.container)}
+              ${getItemStyles(breakpoints[breakpoint]?.item)}
+            }
+          `)}
+    `;
 });
 StyledGrid.defaultProps = defaultThemeProp;
 const Grid = forwardRef((props, ref) => {
-    return _jsx(StyledGrid, Object.assign({}, props, { ref: ref }), void 0);
+    return _jsx(StyledGrid, { ...props, ref: ref }, void 0);
 });
 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, PropsWithDefaults } 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    ${typeof 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    ${typeof gap !== 'undefined' &&\n    css`\n      gap: calc(${gap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${typeof colGap !== 'undefined' &&\n    css`\n      column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n    `}\n\n    ${typeof 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<PropsWithDefaults<GridProps>>(props => {\n  const {\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  } = props;\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\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/Icon/Icon.js

@@ -22,8 +22,7 @@ export const StyledIcon = styled.svg `
 `;
 const emptyIconDefinition = Object.freeze({ Component: () => null });
 const Icon = forwardRef(({ name, ...restProps }, ref) => {
-    var _a;
-    const [iconDef, setIconDef] = useState((_a = iconRegistry.get(name)) !== null && _a !== void 0 ? _a : emptyIconDefinition);
+    const [iconDef, setIconDef] = useState(iconRegistry.get(name) ?? emptyIconDefinition);
     useEffect(() => {
         if (iconRegistry.has(name)) {
             setIconDef(iconRegistry.get(name));
@@ -32,12 +31,11 @@ const Icon = forwardRef(({ name, ...restProps }, ref) => {
         const controller = new AbortController();
         import(`./icons/${encodeURIComponent(name)}.icon`)
             .then((module) => {
-            var _a;
             if (!module.name || !module.Component)
                 throw new Error('Malformed icon definition');
             registerIcon(module);
             if (!controller.signal.aborted)
-                setIconDef((_a = iconRegistry.get(module.name)) !== null && _a !== void 0 ? _a : emptyIconDefinition);
+                setIconDef(iconRegistry.get(module.name) ?? emptyIconDefinition);
         })
             .catch(() => {
             if (!controller.signal.aborted)
@@ -47,7 +45,7 @@ const Icon = forwardRef(({ name, ...restProps }, ref) => {
             controller.abort();
         };
     }, [name]);
-    return (_jsx(StyledIcon, Object.assign({}, 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, { ...restProps, role: 'img', ref: ref, xmlns: 'http://www.w3.org/2000/svg', viewBox: iconDef.viewBox, children: _jsx(iconDef.Component, {}, void 0) }, void 0));
 });
 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,MAAA,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,mCAAI,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,MAAA,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,mCAAI,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,oBACL,SAAS,IACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,CAAC,OAAO,gBAExB,KAAC,OAAO,CAAC,SAAS,aAAG,YACV,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,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"]}