@popsure/dirty-swan 0.57.8 → 0.58.0

package/dist/cjs/lib/components/input/checkbox/index.d.ts

@@ -16,5 +16,6 @@ export interface CheckboxProps<ValueType extends string> {
         label?: string;
         option?: string;
     };
+    fieldLegend?: string;
 }
-export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, }: CheckboxProps<ValueType> & {}) => JSX.Element;
+export declare const Checkbox: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, fieldLegend, }: CheckboxProps<ValueType> & {}) => JSX.Element;

package/dist/cjs/lib/components/input/checkbox/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { CheckboxProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, }: CheckboxProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, bordered, classNames: classNamesObj, fieldLegend, }: CheckboxProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -9,6 +9,9 @@ declare const story: {
         value: {
             description: string;
         };
+        fieldLegend: {
+            description: string;
+        };
         onChange: {
             description: string;
             action: boolean;
@@ -46,6 +49,7 @@ declare const story: {
                 description: string;
             };
         };
+        fieldLegend: string;
         wide: boolean;
         bordered: boolean;
         inlineLayout: boolean;
@@ -59,12 +63,12 @@ declare const story: {
     };
 };
 export declare const CheckboxStory: {
-    ({ onChange, options, wide, bordered, classNames, inlineLayout, }: CheckboxProps<string>): JSX.Element;
+    ({ onChange, options, wide, bordered, classNames, inlineLayout, fieldLegend, }: CheckboxProps<string>): JSX.Element;
     storyName: string;
 };
-export declare const CheckboxWithCustomWrapperStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomOptionStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomLabelStyles: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithInlineLayout: ({ onChange }: CheckboxProps<string>) => JSX.Element;
-export declare const CheckboxWithCustomLabel: ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomWrapperStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomOptionStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabelStyles: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithInlineLayout: ({ onChange, }: CheckboxProps<string>) => JSX.Element;
+export declare const CheckboxWithCustomLabel: ({ onChange, wide, classNames, inlineLayout, }: CheckboxProps<string>) => JSX.Element;
 export default story;

package/dist/cjs/lib/components/input/radio/index.d.ts

@@ -19,5 +19,7 @@ export interface RadioProps<ValueType extends string> {
     };
     bordered?: boolean;
     disabled?: boolean;
+    fieldLegend?: string;
+    groupName?: string;
 }
-export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, }: RadioProps<ValueType>) => JSX.Element;
+export declare const Radio: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, fieldLegend, groupName, }: RadioProps<ValueType>) => JSX.Element;

package/dist/cjs/lib/components/input/radio/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { RadioProps } from '.';
 declare const story: {
     title: string;
-    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, }: RadioProps<ValueType>) => JSX.Element;
+    component: <ValueType extends string>({ options, value, onChange, wide, inlineLayout, inlineIcon, classNames: classNamesObj, bordered, disabled, fieldLegend, groupName, }: RadioProps<ValueType>) => JSX.Element;
     argTypes: {
         options: {
             description: string;
@@ -9,6 +9,12 @@ declare const story: {
         value: {
             description: string;
         };
+        fieldLegend: {
+            description: string;
+        };
+        groupName: {
+            description: string;
+        };
         onChange: {
             description: string;
             action: boolean;
@@ -50,6 +56,8 @@ declare const story: {
                 description: string;
             };
         };
+        fieldLegend: string;
+        groupName: string;
         value: string;
         wide: boolean;
         classNames: {
@@ -64,7 +72,7 @@ declare const story: {
     };
 };
 export declare const RadioStory: {
-    ({ onChange, options, wide, classNames, inlineLayout, bordered, disabled, }: RadioProps<string>): JSX.Element;
+    ({ onChange, options, wide, classNames, inlineLayout, bordered, disabled, fieldLegend, groupName, }: RadioProps<string>): JSX.Element;
     storyName: string;
 };
 export declare const RadioWithCustomWrapperStyles: ({ onChange, }: RadioProps<string>) => JSX.Element;

package/dist/cjs/lib/components/multiDropzone/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { Accept, FileError } from "react-dropzone";
-import { AcceptType, TextOverrides, UploadStatus } from "../types";
+import { Accept, FileError, FileRejection } from 'react-dropzone';
+import { AcceptType, TextOverrides, UploadStatus } from '../types';
 export declare const getUploadStatus: (progress: number, error?: string) => UploadStatus;
 export declare const DOCUMENT_FILES_ACCEPT: Accept;
 export declare const IMAGE_FILES_ACCEPT: Accept;
@@ -11,3 +11,10 @@ export declare const getErrorMessage: ({ code, message }: FileError, { fileList,
     fileList?: string;
     maxSize?: number;
 }, textOverrides?: TextOverrides) => string;
+export declare const getStatusMessage: ({ acceptedFiles, filesRejected, fileList, maxSize, textOverrides, }: {
+    acceptedFiles: File[];
+    filesRejected: FileRejection[];
+    fileList?: string;
+    maxSize?: number;
+    textOverrides?: TextOverrides;
+}) => string;

package/dist/esm/{TableSection-a26ba0c5.js → TableSection-ebace923.js}

@@ -128,4 +128,4 @@ var TableSection = function (_a) {
 };
 
 export { TableSection as T, isBaseCell as i, useMediaQuery as u };
-//# sourceMappingURL=TableSection-a26ba0c5.js.map
+//# sourceMappingURL=TableSection-ebace923.js.map

package/dist/esm/{TableSection-a26ba0c5.js.map → TableSection-ebace923.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TableSection-a26ba0c5.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  if (typeof window === 'undefined') {\n    return {\n      initialValue: false,\n      queryString: '',\n    };\n  }\n\n  switch (breakpoint) {\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableSection-ebace923.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  if (typeof window === 'undefined') {\n    return {\n      initialValue: false,\n      queryString: '',\n    };\n  }\n\n  switch (breakpoint) {\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/chip/index.js

@@ -6,13 +6,13 @@ import '../icon/IconWrapper/IconWrapper.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../index-6ea95111.js';
 
-var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
+var css_248z = ".style-module_chip__3LMgV {\n  background: var(--ds-primary-100);\n  border: 2px solid var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 4px 8px;\n  width: fit-content;\n  width: -moz-fit-content;\n  display: flex;\n  align-items: center;\n  animation-name: style-module_appearInAnimation__33Ebn;\n  animation-duration: 0.5s;\n  animation-fill-mode: both;\n}\n\n.style-module_chip__3LMgV:hover {\n  transition: 0.2s ease-in;\n  border: 2px solid var(--ds-primary-500);\n}\n\n.style-module_chip-image__2vVqF {\n  width: 24px;\n  height: 14px;\n}\n\n.style-module_chip-button-container__3gSRY {\n  color: #b1b0f5;\n  position: relative;\n  width: 16px;\n  height: 16px;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n}\n.style-module_chip-button-container__3gSRY:hover {\n  color: #8e8cee;\n}\n.style-module_chip-button-container__3gSRY:focus-visible {\n  outline: 2px solid var(--ds-primary-500);\n  border-radius: 2px;\n}\n\n.style-module_chip-remove-button__3LK7e {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.style-module_chip-remove-button__3LK7e svg {\n  vertical-align: top;\n}\n\n@keyframes style-module_appearInAnimation__33Ebn {\n  from {\n    opacity: 0;\n    transform: translateX(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}";
 var styles = {"chip":"style-module_chip__3LMgV","appearInAnimation":"style-module_appearInAnimation__33Ebn","chip-image":"style-module_chip-image__2vVqF","chip-button-container":"style-module_chip-button-container__3gSRY","chip-remove-button":"style-module_chip-remove-button__3LK7e"};
 styleInject(css_248z);
 
 var Chip = (function (_a) {
     var className = _a.className, value = _a.value, onRemove = _a.onRemove;
-    return (jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles['chip']), children: [value.leftIcon && (jsx("img", { className: "mr8 ".concat(styles['chip-image']), src: value.leftIcon, alt: value.value })), jsx("div", { className: "mr8", children: value.value }), jsx("button", { className: "c-pointer ".concat(styles['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, children: jsx(XIcon, { className: styles['chip-remove-button'] }) })] }));
+    return (jsxs("div", { className: "p-p mr8 mb8 d-flex ".concat(className, " ").concat(styles['chip']), children: [value.leftIcon && (jsx("img", { className: "mr8 ".concat(styles['chip-image']), src: value.leftIcon, alt: value.value })), jsx("div", { className: "mr8", children: value.value }), jsx("button", { className: "c-pointer ".concat(styles['chip-button-container']), type: "button", onClick: function () { return onRemove(value); }, "aria-label": "Remove ".concat(value.value, " option"), children: jsx(XIcon, { className: styles['chip-remove-button'] }) })] }));
 });
 
 export default Chip;

package/dist/esm/components/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/chip/index.tsx"],"sourcesContent":["import { Option } from '../../models/autoSuggestInput';\nimport { XIcon } from '../icon/icons';\n\nimport styles from './style.module.scss';\n\nexport interface ChipProps {\n  value: Option;\n  onRemove: (value: Option) => void;\n  className?: string;\n}\n\nexport default ({\n  className,\n  value,\n  onRemove,\n}: ChipProps) => (\n  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>\n    {value.leftIcon && (\n      <img\n        className={`mr8 ${styles['chip-image']}`}\n        src={value.leftIcon}\n        alt={value.value}\n      />\n    )}\n    <div className=\"mr8\">{value.value}</div>\n    <button\n      className={`c-pointer ${styles['chip-button-container']}`}\n      type=\"button\"\n      onClick={() => onRemove(value)}\n    >\n      <XIcon className={styles['chip-remove-button']} />\n    </button>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAWA,YAAe,UAAC,EAIJ;QAHV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA;IACO,QACfA,cAAK,SAAS,EAAE,6BAAsB,SAAS,cAAI,MAAM,CAAC,MAAM,CAAC,CAAE,aAChE,KAAK,CAAC,QAAQ,KACbC,aACE,SAAS,EAAE,cAAO,MAAM,CAAC,YAAY,CAAC,CAAE,EACxC,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,KAAK,GAChB,CACH,EACDA,aAAK,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAO,EACxCA,gBACE,SAAS,EAAE,oBAAa,MAAM,CAAC,uBAAuB,CAAC,CAAE,EACzD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,GAAA,YAE9BA,IAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,GAAI,GAC3C,IACL;AAjBS,CAkBhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/chip/index.tsx"],"sourcesContent":["import { Option } from '../../models/autoSuggestInput';\nimport { XIcon } from '../icon/icons';\n\nimport styles from './style.module.scss';\n\nexport interface ChipProps {\n  value: Option;\n  onRemove: (value: Option) => void;\n  className?: string;\n}\n\nexport default ({\n  className,\n  value,\n  onRemove,\n}: ChipProps) => (\n  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>\n    {value.leftIcon && (\n      <img\n        className={`mr8 ${styles['chip-image']}`}\n        src={value.leftIcon}\n        alt={value.value}\n      />\n    )}\n    <div className=\"mr8\">{value.value}</div>\n    <button\n      className={`c-pointer ${styles['chip-button-container']}`}\n      type=\"button\"\n      onClick={() => onRemove(value)}\n      aria-label={`Remove ${value.value} option`}\n    >\n      <XIcon className={styles['chip-remove-button']} />\n    </button>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAWA,YAAe,UAAC,EAIJ;QAHV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA;IACO,QACfA,cAAK,SAAS,EAAE,6BAAsB,SAAS,cAAI,MAAM,CAAC,MAAM,CAAC,CAAE,aAChE,KAAK,CAAC,QAAQ,KACbC,aACE,SAAS,EAAE,cAAO,MAAM,CAAC,YAAY,CAAC,CAAE,EACxC,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,GAAG,EAAE,KAAK,CAAC,KAAK,GAChB,CACH,EACDA,aAAK,SAAS,EAAC,KAAK,YAAE,KAAK,CAAC,KAAK,GAAO,EACxCA,gBACE,SAAS,EAAE,oBAAa,MAAM,CAAC,uBAAuB,CAAC,CAAE,EACzD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,CAAC,GAAA,gBAClB,iBAAU,KAAK,CAAC,KAAK,YAAS,YAE1CA,IAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,GAAI,GAC3C,IACL;AAlBS,CAmBhB;;;;"}

package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js

@@ -12,7 +12,7 @@ styleInject(css_248z);
 
 var TableInfoButton = function (_a) {
     var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (jsx("button", { className: "p-btn--secondary ".concat(styles.button, " ").concat(className), type: "button", "data-testid": "ds-table-info-button", onClick: onClick, children: jsx(Info, { size: 20 }) }));
+    return (jsx("button", { className: "p-btn--secondary ".concat(styles.button, " ").concat(className), type: "button", "data-testid": "ds-table-info-button", onClick: onClick, "aria-label": "View more information", title: "View more information", children: jsx(Info, { size: 20 }) }));
 };
 
 export default TableInfoButton;

package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableInfoButton/index.tsx"],"sourcesContent":["import Info from '../../../icon/icons/Info';\nimport styles from './style.module.scss';\n\nconst TableInfoButton = ({\n  onClick,\n  className = '',\n}: {\n  onClick: () => void;\n  className?: string;\n}) => (\n  <button\n    className={`p-btn--secondary ${styles.button} ${className}`}\n    type=\"button\"\n    data-testid=\"ds-table-info-button\"\n    onClick={onClick}\n  >\n    <Info size={20} />\n  </button>\n);\n\nexport default TableInfoButton;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;IAGM,eAAe,GAAG,UAAC,EAMxB;QALC,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIV,QACJA,gBACE,SAAS,EAAE,2BAAoB,MAAM,CAAC,MAAM,cAAI,SAAS,CAAE,EAC3D,IAAI,EAAC,QAAQ,iBACD,sBAAsB,EAClC,OAAO,EAAE,OAAO,YAEhBA,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX;AARL;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableInfoButton/index.tsx"],"sourcesContent":["import Info from '../../../icon/icons/Info';\nimport styles from './style.module.scss';\n\nconst TableInfoButton = ({\n  onClick,\n  className = '',\n}: {\n  onClick: () => void;\n  className?: string;\n}) => (\n  <button\n    className={`p-btn--secondary ${styles.button} ${className}`}\n    type=\"button\"\n    data-testid=\"ds-table-info-button\"\n    onClick={onClick}\n    aria-label=\"View more information\"\n    title=\"View more information\"\n  >\n    <Info size={20} />\n  </button>\n);\n\nexport default TableInfoButton;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;IAGM,eAAe,GAAG,UAAC,EAMxB;QALC,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIV,QACJA,gBACE,SAAS,EAAE,2BAAoB,MAAM,CAAC,MAAM,cAAI,SAAS,CAAE,EAC3D,IAAI,EAAC,QAAQ,iBACD,sBAAsB,EAClC,OAAO,EAAE,OAAO,gBACL,uBAAuB,EAClC,KAAK,EAAC,uBAAuB,YAE7BA,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX;AAVL;;;;"}

package/dist/esm/components/input/checkbox/index.js

@@ -1,15 +1,15 @@
 import { _ as __spreadArray } from '../../../tslib.es6-a39f91fc.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
+var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n  border: 0;\n  margin: 0;\n  min-width: 0;\n  padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
 var styles = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};
 styleInject(css_248z);
 
 var Checkbox = function (_a) {
     var _b;
-    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames;
+    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames, fieldLegend = _a.fieldLegend;
     var hasNoneValue = Object.keys(options).includes('NONE');
     var handleOnChange = function (newValue) {
         if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
@@ -34,23 +34,26 @@ var Checkbox = function (_a) {
     var isCheckboxLabelObject = function (label) {
         return label.title !== undefined;
     };
-    return (jsx("div", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
+    var legend = fieldLegend !== null && fieldLegend !== void 0 ? fieldLegend : (Object.keys(options).length > 1
+        ? 'Select one or more options'
+        : 'You may select this option');
+    return (jsxs("fieldset", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
             _b[styles.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: entries.map(function (_a) {
-            var currentValue = _a[0], label = _a[1];
-            var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
-            var customIcon = label === null || label === void 0 ? void 0 : label.icon;
-            return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-checkbox', {
-                            'p-checkbox--no-icon': customIcon,
-                        }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
-                            'p-label--bordered': bordered,
-                            'jc-center': customIcon,
-                            'fd-column': customIcon,
-                        }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
-        }) }));
+            _b)), children: [jsx("legend", { className: "sr-only", children: legend }), entries.map(function (_a) {
+                var currentValue = _a[0], label = _a[1];
+                var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
+                var customIcon = label === null || label === void 0 ? void 0 : label.icon;
+                return (jsxs("div", { className: classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.option, children: [jsx("input", { className: classNames('p-checkbox', {
+                                'p-checkbox--no-icon': customIcon,
+                            }), id: currentValue, type: "checkbox", value: currentValue, onChange: function () { return handleOnChange(currentValue); }, checked: checked, "data-testid": "checkbox-input-".concat(currentValue) }), jsxs("label", { htmlFor: currentValue, className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.label, 'p-label pr16', {
+                                'p-label--bordered': bordered,
+                                'jc-center': customIcon,
+                                'fd-column': customIcon,
+                            }), "data-cy": "checkbox-".concat(currentValue), "data-testid": "checkbox-".concat(currentValue), children: [customIcon && jsx("div", { className: "mt8", children: customIcon === null || customIcon === void 0 ? void 0 : customIcon(checked) }), isCheckboxLabelObject(label) ? (jsxs("div", { children: [jsx("p", { className: "p-p", children: label.title }), jsx("span", { className: "d-block p-p p-p--small tc-grey-600", children: label.description })] })) : (label)] })] }, currentValue));
+            })] }));
 };
 
 export { Checkbox };

package/dist/esm/components/input/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  return (\n    <div\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n  fieldLegend,\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  const legend =\n    fieldLegend ??\n    (Object.keys(options).length > 1\n      ? 'Select one or more options'\n      : 'You may select this option');\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{legend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.stories.js

@@ -16,16 +16,19 @@ var story = {
         value: {
             description: 'Current checked values.',
         },
+        fieldLegend: {
+            description: 'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',
+        },
         onChange: {
             description: 'Function called everytime a value changes.',
             action: true,
             table: {
-                category: "Callbacks",
+                category: 'Callbacks',
             },
         },
         wide: {
             description: 'Property that defines if options should fill 100% of available horizontal space',
-            defaultValue: false
+            defaultValue: false,
         },
         bordered: {
             control: 'boolean',
@@ -42,37 +45,38 @@ var story = {
         options: {
             CAT: {
                 title: 'Cat',
-                description: 'At least 1'
+                description: 'At least 1',
             },
             DOG: {
                 title: 'Dog',
-                description: 'At least 2'
+                description: 'At least 2',
             },
             NONE: {
                 title: 'None',
-                description: 'No pets'
-            }
+                description: 'No pets',
+            },
         },
+        fieldLegend: 'Owned pets',
         wide: false,
         bordered: true,
         inlineLayout: false,
         classNames: {
             container: '',
             label: '',
-            option: ''
+            option: '',
         },
         value: [],
-        className: ''
-    }
+        className: '',
+    },
 };
 var CheckboxStory = function (_a) {
-    var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout;
+    var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout, fieldLegend = _a.fieldLegend;
     var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
     var handleOnChange = function (newValue) {
         setCheckedValues(newValue);
         onChange(newValue);
     };
-    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout }));
+    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout, fieldLegend: fieldLegend }));
 };
 var CheckboxWithCustomWrapperStyles = function (_a) {
     var onChange = _a.onChange;
@@ -85,7 +89,7 @@ var CheckboxWithCustomWrapperStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT1: 'Cat',
             DOG1: 'Dog',
-        }, classNames: { container: "p32 bg-primary-300 br24 bs-lg" } }));
+        }, classNames: { container: 'p32 bg-primary-300 br24 bs-lg' } }));
 };
 var CheckboxWithCustomOptionStyles = function (_a) {
     var onChange = _a.onChange;
@@ -98,7 +102,7 @@ var CheckboxWithCustomOptionStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT2: 'Cat',
             DOG2: 'Dog',
-        }, classNames: { option: "mb32 p24 bg-green-100 br12 bs-lg" } }));
+        }, classNames: { option: 'mb32 p24 bg-green-100 br12 bs-lg' } }));
 };
 var CheckboxWithCustomLabelStyles = function (_a) {
     var onChange = _a.onChange;
@@ -111,7 +115,7 @@ var CheckboxWithCustomLabelStyles = function (_a) {
     return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
             CAT3: 'Cat',
             DOG3: 'Dog',
-        }, classNames: { label: "bg-grey-900 tc-white" } }));
+        }, classNames: { label: 'bg-grey-900 tc-white' } }));
 };
 var CheckboxWithInlineLayout = function (_a) {
     var onChange = _a.onChange;
@@ -128,7 +132,7 @@ var CheckboxWithInlineLayout = function (_a) {
             RABBIT: 'Rabbit',
             RAT: 'Rat',
             ANOTHER: 'Other',
-        }, classNames: { option: "w30" }, inlineLayout: true, wide: true }));
+        }, classNames: { option: 'w30' }, inlineLayout: true, wide: true }));
 };
 var CheckboxWithCustomLabel = function (_a) {
     var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
@@ -140,18 +144,18 @@ var CheckboxWithCustomLabel = function (_a) {
     };
     return (jsx(Checkbox, { options: {
             BIGDOG: {
-                icon: function () { return jsx("img", { src: images.bigDog, alt: '' }); },
+                icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
                 title: 'Dog',
             },
             FISH: {
-                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: '' }); },
+                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
                 title: 'Fish',
             },
             OTHER: {
-                icon: function () { return jsx("img", { src: images.brokenGlass, alt: '' }); },
+                icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
                 title: 'Other',
-            }
-        }, onChange: handleOnChange, value: checkedValues, classNames: { option: "w30" }, inlineLayout: true }));
+            },
+        }, onChange: handleOnChange, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
 };
 CheckboxStory.storyName = 'Checkbox';
 

package/dist/esm/components/input/checkbox/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description: 'Object that contains the possible options for rendering in the input.',\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n    wide: {\n      description: 'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false\n    },\n    bordered: {\n      control: 'boolean',\n      description: 'Property that defines if checkbox should show the border around each label',\n    },\n    inlineLayout: {\n      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n    },\n  },\n  args: {\n    options: {\n      CAT:{\n        title: 'Cat',\n        description: 'At least 1'\n      },\n      DOG:{\n        title: 'Dog',\n        description: 'At least 2'\n      },\n      NONE:{\n        title: 'None',\n        description: 'No pets'\n      }\n    },\n    wide: false,\n    bordered: true,\n    inlineLayout: false,\n    classNames: {\n      container: '',\n      label: '',\n      option: ''\n    },\n    value: [],\n    className: ''\n  }\n};\n\nexport const CheckboxStory = ({ \n  onChange,\n  options,\n  wide,\n  bordered,\n  classNames,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      bordered={bordered}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n    />\n  );\n}\n\nexport const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }} \n      classNames={{ container: \"p32 bg-primary-300 br24 bs-lg\" }}\n    />\n  );\n}\n\nexport const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }} \n      classNames={{ option: \"mb32 p24 bg-green-100 br12 bs-lg\" }}\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }} \n      classNames={{ label: \"bg-grey-900 tc-white\" }}\n    />\n  );\n}\n\nexport const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }} \n      classNames={{ option: \"w30\" }}\n      inlineLayout\n      wide\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt='' />,\n          title: 'Dog',\n        },\n        FISH:{\n          icon: () => <img src={images.brokenAquarium} alt='' />,\n          title: 'Fish',\n        },\n        OTHER:{\n          icon: () => <img src={images.brokenGlass} alt='' />,\n          title: 'Other',\n        }\n      }} \n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={{ option: \"w30\" }}\n      inlineLayout\n    />\n  );\n}\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description:\n        'Object that contains the possible options for rendering in the input.',\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    fieldLegend: {\n      description:\n        'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    wide: {\n      description:\n        'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false,\n    },\n    bordered: {\n      control: 'boolean',\n      description:\n        'Property that defines if checkbox should show the border around each label',\n    },\n    inlineLayout: {\n      description:\n        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n    },\n  },\n  args: {\n    options: {\n      CAT: {\n        title: 'Cat',\n        description: 'At least 1',\n      },\n      DOG: {\n        title: 'Dog',\n        description: 'At least 2',\n      },\n      NONE: {\n        title: 'None',\n        description: 'No pets',\n      },\n    },\n    fieldLegend: 'Owned pets',\n    wide: false,\n    bordered: true,\n    inlineLayout: false,\n    classNames: {\n      container: '',\n      label: '',\n      option: '',\n    },\n    value: [],\n    className: '',\n  },\n};\n\nexport const CheckboxStory = ({\n  onChange,\n  options,\n  wide,\n  bordered,\n  classNames,\n  inlineLayout,\n  fieldLegend,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      wide={wide}\n      options={options}\n      onChange={handleOnChange}\n      value={checkedValues}\n      bordered={bordered}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n      fieldLegend={fieldLegend}\n    />\n  );\n};\n\nexport const CheckboxWithCustomWrapperStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }}\n      classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}\n    />\n  );\n};\n\nexport const CheckboxWithCustomOptionStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }}\n      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n    />\n  );\n};\n\nexport const CheckboxWithCustomLabelStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }}\n      classNames={{ label: 'bg-grey-900 tc-white' }}\n    />\n  );\n};\n\nexport const CheckboxWithInlineLayout = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }}\n      classNames={{ option: 'w30' }}\n      inlineLayout\n      wide\n    />\n  );\n};\n\nexport const CheckboxWithCustomLabel = ({\n  onChange,\n  wide,\n  classNames,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt=\"\" />,\n          title: 'Dog',\n        },\n        FISH: {\n          icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n          title: 'Fish',\n        },\n        OTHER: {\n          icon: () => <img src={images.brokenGlass} alt=\"\" />,\n          title: 'Other',\n        },\n      }}\n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={{ option: 'w30' }}\n      inlineLayout\n    />\n  );\n};\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/index.js

@@ -21,7 +21,7 @@ var Input = React__default.forwardRef(function (_a, ref) {
                             : styles['input--no-placeholder'], (_c = {},
                             _c[styles['input--with-prefix']] = prefix,
                             _c[styles['input--with-inside-label']] = labelInsideInput,
-                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
+                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? error : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
 });
 
 export { Input };

package/dist/esm/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string | boolean;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n  labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      labelInsideInput = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && !labelInsideInput && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              (!label || labelInsideInput) && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              {\n                [styles['input--with-prefix']]: prefix, \n                [styles['input--with-inside-label']]: labelInsideInput\n              }\n            )}\n            placeholder={label || labelInsideInput ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {(!label || labelInsideInput) && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {labelInsideInput ? label : placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,IACd,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string | boolean;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n  labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      labelInsideInput = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && !labelInsideInput && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              (!label || labelInsideInput) && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              {\n                [styles['input--with-prefix']]: prefix, \n                [styles['input--with-inside-label']]: labelInsideInput\n              }\n            )}\n            placeholder={label || labelInsideInput ? placeholder : ' '}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-errormessage={error ? error : undefined}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {(!label || labelInsideInput) && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {labelInsideInput ? label : placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,uBACF,KAAK,GAAG,KAAK,GAAG,SAAS,IACxC,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}