@pega/cosmos-react-core 5.0.0-dev.4.7 → 5.0.0-dev.4.8

package/lib/components/Flex/Flex.js

@@ -1,171 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '../../theme';
-const prefix = (value) => {
-    if (['between', 'around', 'evenly'].includes(value))
-        return `space-${value}`;
-    if (['start', 'end'].includes(value))
-        return `flex-${value}`;
-    return value;
-};
-const getLogicalPadding = (pad) => {
-    if (!Array.isArray(pad)) {
-        return [pad, pad, pad, pad];
-    }
-    switch (pad.length) {
-        case 1:
-            return [pad[0], pad[0], pad[0], pad[0]];
-        case 2:
-            return [pad[0], pad[1], pad[0], pad[1]];
-        case 3:
-            return [pad[0], pad[1], pad[2], pad[1]];
-        case 4:
-            return pad;
-        default:
-            return [undefined, undefined, undefined, undefined];
-    }
-};
-const getContainerStyles = (container, spacing) => {
-    if (!container)
-        return '';
-    if (container === true) {
-        return css `
-      display: flex;
-    `;
-    }
-    const paddingConfig = getLogicalPadding(container.pad);
-    if (container && typeof container === 'object') {
-        const isRow = !container.direction || container.direction.includes('row');
-        const isReverse = container.direction && container.direction.includes('reverse');
-        return css `
-      display: ${container.inline ? 'inline-flex' : 'flex'};
-
-      ${paddingConfig[0] !== undefined &&
-            css `
-        padding-block-start: calc(${paddingConfig[0]} * ${spacing});
-      `}
-      ${paddingConfig[1] !== undefined &&
-            css `
-        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});
-      `}
-
-        ${paddingConfig[2] !== undefined &&
-            css `
-        padding-block-end: calc(${paddingConfig[2]} * ${spacing});
-      `}
-
-        ${paddingConfig[3] !== undefined &&
-            css `
-        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});
-      `}
-
-      ${container.direction &&
-            css `
-        flex-direction: ${container.direction};
-      `}
-
-      ${container.justify &&
-            css `
-        justify-content: ${prefix(container.justify)};
-      `}
-
-      ${container.wrap &&
-            css `
-        flex-wrap: ${container.wrap};
-      `}
-
-      ${container.alignItems &&
-            css `
-        align-items: ${prefix(container.alignItems)};
-      `}
-
-      ${container.alignContent &&
-            css `
-        align-content: ${prefix(container.alignContent)};
-      `}
-
-      ${container.itemGap &&
-            css `
-          > * {
-            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props => props.theme.base.spacing});
-            ${isReverse ? ':last-child' : ':first-child'} {
-              margin-${isRow ? 'inline-start' : 'block-start'}: 0;
-            }
-          }
-        `}
-
-      ${container.gap !== undefined &&
-            css `
-        gap: calc(${container.gap} * ${props => props.theme.base.spacing});
-      `}
-
-      ${container.colGap !== undefined &&
-            css `
-        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});
-      `}
-
-      ${container.rowGap !== undefined &&
-            css `
-        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});
-      `}
-    `;
-    }
-};
-const getItemStyles = (item) => {
-    return css `
-    ${item &&
-        css `
-      max-width: 100%;
-      min-width: 0;
-
-      ${item.grow !== undefined &&
-            css `
-        flex-grow: ${item.grow};
-      `}
-
-      ${item.shrink !== undefined &&
-            css `
-        flex-shrink: ${item.shrink};
-      `}
-
-      ${item.alignSelf &&
-            css `
-        align-self: ${prefix(item.alignSelf)};
-      `}
-
-      ${item.basis &&
-            css `
-        flex-basis: ${item.basis};
-      `}
-    `}
-  `;
-};
-const breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'];
-export const StyledFlex = styled.div(({ container, item, theme: { base: { breakpoints: themeBreakpoints, spacing } }, xs, sm, md, lg, xl }) => {
-    const breakpoints = {
-        xs,
-        sm,
-        md,
-        lg,
-        xl
-    };
-    return css `
-      ${getContainerStyles(container, spacing)}
-      ${getItemStyles(item)}
-
-    ${breakpointOrder.map(breakpoint => breakpoints[breakpoint] &&
-        css `
-            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {
-              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}
-              ${getItemStyles(breakpoints[breakpoint]?.item)}
-            }
-          `)}
-    `;
-});
-StyledFlex.defaultProps = defaultThemeProp;
-const Flex = forwardRef(function Flex(props, ref) {
-    return _jsx(StyledFlex, { ...props, ref: ref });
-});
-export default Flex;
-//# sourceMappingURL=Flex.js.map

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

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

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

@@ -1,3 +0,0 @@
-export { default, StyledFlex } from './Flex';
-export type { FlexProps, FlexContainerProps, FlexItemProps } from './Flex';
-//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Flex/index.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default, StyledFlex } from './Flex';\nexport type { FlexProps, FlexContainerProps, FlexItemProps } from './Flex';\n"]}

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

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ForwardProps, OmitStrict, TestIdProp } from '../../types';
-import { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
-export interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {
-    /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
-    children: BaseFormProps['content'];
-}
-declare const _default: FC<FormProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
-};
-export default _default;
-//# sourceMappingURL=Form.d.ts.map

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

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

package/lib/components/Form/Form.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useTestIds, useUID } from '../../hooks';
-import MultiStepForm from '../MultiStepForm';
-import { withTestIds } from '../../utils';
-import { getFormTestIds } from './Form.test-ids';
-const Form = forwardRef(function Form({ testId, children, actions, progress, heading, description, banners, ...restProps }, ref) {
-    const stepId = useUID();
-    const testIds = useTestIds(testId, getFormTestIds);
-    return (_jsx(MultiStepForm, { "data-testid": testIds.root, ...restProps, heading: heading, steps: [
-            {
-                id: stepId,
-                name: '',
-                actions,
-                content: children,
-                description,
-                banners
-            }
-        ], currentStepId: stepId, progress: progress, ref: ref, autoComplete: 'off' }));
-});
-export default withTestIds(Form, getFormTestIds);
-//# sourceMappingURL=Form.js.map

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

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

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

@@ -1,2 +0,0 @@
-export declare const getFormTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
-//# sourceMappingURL=Form.test-ids.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Form.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iFAAqC,CAAC"}

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

@@ -1,3 +0,0 @@
-import { createTestIds } from '../../utils';
-export const getFormTestIds = createTestIds('form', []);
-//# sourceMappingURL=Form.test-ids.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Form.test-ids.js","sourceRoot":"","sources":["../../../src/components/Form/Form.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getFormTestIds = createTestIds('form', [] as const);\n"]}

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

@@ -1,3 +0,0 @@
-export { default } from './Form';
-export type { FormProps } from './Form';
-//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Form/index.js

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

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

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

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

@@ -1,55 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-import { AdditionalInfoProps } from '../AdditionalInfo';
-export interface FormControlProps extends BaseProps {
-    /**
-     * Sets DOM id for the control and associates label element via 'for' attribute.
-     * If an id is not pass, a random id will be generated for any render.
-     */
-    id?: string;
-    /** Set visual state based on a validation state. */
-    status?: 'success' | 'warning' | 'error' | 'pending';
-    /** Pass a string or a fragment with an Icon and string. */
-    label?: ReactNode;
-    /** Visually hides the label region. */
-    labelHidden?: boolean;
-    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */
-    info?: ReactNode;
-    /** Indicate if the field is required. The browser defaults to false. */
-    required?: boolean;
-    /** Placeholder text. The browser defaults to an empty string. */
-    placeholder?: string;
-    /** Button when clicked will show additional information on a field */
-    additionalInfo?: {
-        heading: AdditionalInfoProps['heading'];
-        content: AdditionalInfoProps['children'];
-    };
-    /**
-     * Creates a controlled input and sets the value. Requires an onChange handler to update value.
-     * value + onChange is the recommended method per React team.
-     */
-    value?: string;
-    /**
-     * 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.
-     */
-    defaultValue?: string;
-    /** Disable the control. The browser defaults to false. */
-    disabled?: boolean;
-    /** Makes the input non editable and non clickable. The browser defaults to false. */
-    readOnly?: boolean;
-    /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
-    name?: string;
-    /** Callback fired when AI suggestion is accepted/rejected */
-    onResolveSuggestion?: (accepted: boolean) => void;
-}
-export interface HandleValue {
-    /** Used to clear component inputs with imperative handle */
-    clear: () => void;
-}
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, keyof FormControlProps> & Required<Pick<FormControlProps, never>> & {
-    hasSuggestion?: boolean | undefined;
-}, never>;
-declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;
-export default FormControl;
-//# sourceMappingURL=FormControl.d.ts.map

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

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

package/lib/components/FormControl/FormControl.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { mix, rgba } from 'polished';
-import { defaultThemeProp } from '../../theme';
-import { calculateFontSize } from '../../styles';
-export const StyledFormControl = styled.div(({ theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale, animation: { speed, timing }, palette }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } }, status, hasSuggestion }) => {
-    const fontSize = calculateFontSize(baseFontSize, baseFontScale);
-    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;
-    const backgroundColor = hasSuggestion && status
-        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
-        : background;
-    return css `
-      color: ${foreground};
-      background-color: ${backgroundColor};
-      border-radius: calc(${baseRadius} * ${radius});
-      border-color: ${borderColor};
-      border-width: ${borderWidth};
-      border-style: solid;
-      transition-property: color, background-color, border-color;
-      transition-duration: ${speed};
-      transition-timing-function: ${timing.ease};
-      &,
-      & > select {
-        outline: none;
-      }
-
-      &:disabled,
-      &[disabled] {
-        background-color: ${disabledBackgroundColor};
-        border-color: ${disabledBorderColor};
-        cursor: not-allowed;
-      }
-
-      &:focus:not([disabled]) {
-        border-color: ${focusBorderColor};
-        box-shadow: ${shadow};
-        ${hasSuggestion &&
-        css `
-          background-color: ${background};
-        `}
-      }
-
-      &:focus-within:not([disabled]) {
-        ${hasSuggestion &&
-        css `
-          background-color: ${background};
-        `}
-      }
-
-      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
-        ${!status &&
-        css `
-          border-color: ${hoverBorderColor};
-        `}
-        ${hasSuggestion &&
-        css `
-          background-color: ${background};
-          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
-        `}
-      }
-
-      ${hasSuggestion &&
-        css `
-        border-end-end-radius: 0;
-      `}
-
-      &[readonly] {
-        background-color: ${readOnlyBackgroundColor};
-        border-color: ${readOnlyBorderColor};
-      }
-
-      @media (pointer: coarse) {
-        /* stylelint-disable-next-line unit-allowed-list */
-        font-size: max(${fontSize.s}, 16px);
-      }
-    `;
-});
-StyledFormControl.defaultProps = defaultThemeProp;
-const FormControl = forwardRef(function FormControl(props, ref) {
-    return _jsx(StyledFormControl, { ref: ref, ...props });
-});
-export default FormControl;
-//# sourceMappingURL=FormControl.js.map

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

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

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

@@ -1,3 +0,0 @@
-export { default, StyledFormControl } from './FormControl';
-export type { FormControlProps, HandleValue } from './FormControl';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/FormControl/index.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default, StyledFormControl } from './FormControl';\nexport type { FormControlProps, HandleValue } from './FormControl';\n"]}

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

@@ -1,76 +0,0 @@
-import { FC, ReactNode, ComponentType, ReactElement } from 'react';
-import { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';
-import { FlexProps } from '../Flex';
-import { FormControlProps } from '../FormControl';
-import { LabelProps } from '../Label';
-import { elements } from './FormField.test-ids';
-export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>, TestIdProp<typeof elements> {
-    /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */
-    children: ReactElement | ReactElement[];
-    /**
-     * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.
-     * A random id will be generated if none is provided.
-     * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.
-     * The id prop will be used to generate the following:
-     * - FormControl <-> Label association via a Label's htmlFor prop.
-     * - FormField's wrapping element id {id}-field.
-     * - FormField info element id ${id}-info.
-     */
-    id?: string;
-    /**
-     * Determines how the wrapping label should be rendered.
-     * @default 'label'
-     */
-    labelAs?: LabelProps['as'];
-    /**
-     * Overrides the for attribute on the label. If this is not set it will default to the forms id.
-     * @default undefined
-     */
-    labelFor?: LabelProps['htmlFor'];
-    /**
-     * Sets the id of the label.
-     * @default undefined
-     */
-    labelId?: LabelProps['id'];
-    /**
-     * Visually hides the label region.
-     * @default false
-     */
-    labelHidden?: boolean;
-    /**
-     * Visually places the label after the input.
-     * @default false
-     */
-    labelAfter?: boolean;
-    /**
-     * Property used to check whether input type is radio to handle styling for RadioCheck
-     * @default false
-     */
-    isRadioCheck?: boolean;
-    /**
-     * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup
-     * @default 'div'
-     */
-    as?: 'div' | 'fieldset' | ComponentType<any>;
-    /**
-     * Layout field elements inline in a row.
-     * @default false
-     */
-    inline?: boolean;
-    /** Optionally utilized by Input or Select. */
-    actions?: Action[];
-    /** Enables Flex container prop pass through. */
-    container?: ExcludeStrict<FlexProps['container'], true>;
-    /** Character remaining count. Typically used on Textareas only */
-    charLimitDisplay?: ReactNode;
-}
-export declare const StyledFormFieldInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, "status">, never>;
-export declare const StyledFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FormFieldProps & {
-    labelAsLegend: boolean;
-    showAdditionalInfo: boolean;
-}, never>;
-declare const _default: FC<FormFieldProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
-};
-export default _default;
-//# sourceMappingURL=FormField.d.ts.map

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

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