@popsure/dirty-swan 0.54.26 → 0.55.0

package/dist/esm/{TableSection-3c13df54.js → TableSection-d7dbad68.js}

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

package/dist/esm/{TableSection-3c13df54.js.map → TableSection-d7dbad68.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TableSection-3c13df54.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};\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  switch (breakpoint) {\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\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  }\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\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n                  const titleFromColumnOrRow =\n                    getModalTitleFromColumnHeader(cellIndex) ||\n                    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: isFirstCellInRow\n                        ? titleFromRow\n                        : titleFromColumnOrRow,\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-d7dbad68.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};\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  switch (breakpoint) {\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\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  }\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\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n                  const titleFromColumnOrRow =\n                    getModalTitleFromColumnHeader(cellIndex) ||\n                    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: isFirstCellInRow\n                        ? titleFromRow\n                        : titleFromColumnOrRow,\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/button/index.js

@@ -14,9 +14,10 @@ var buttonTypeClassNameMap = {
     filledSuccess: 'p-btn--success',
     filledError: 'p-btn--danger',
 };
+var buttonDefaultAsType = 'button';
 var Button = require$$0__default.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? 'filledColor' : _c, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
-    return (jsx("button", __assign({ ref: ref, className: classNames(buttonTypeClassNameMap[variant], className, {
+    var _b = _a.as, ButtonTag = _b === void 0 ? buttonDefaultAsType : _b, className = _a.className, _c = _a.loading, loading = _c === void 0 ? false : _c, children = _a.children, _d = _a.variant, variant = _d === void 0 ? 'filledColor' : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["as", "className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
+    return (jsx(ButtonTag, __assign({ ref: ref, className: classNames(buttonTypeClassNameMap[variant], className, {
             'p-btn--loading': loading,
             'tc-transparent': loading,
             'p-btn--icon-only': hideLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/button/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactElement, ReactNode } from 'react';\n\ntype ButtonVariant =\n  | 'filledColor'\n  | 'filledGray'\n  | 'filledWhite'\n  | 'filledBlack'\n  | 'textColor'\n  | 'textWhite'\n  | 'outlineWhite'\n  | 'filledSuccess'\n  | 'filledError';\n\nconst buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {\n  filledColor: 'p-btn--primary',\n  filledGray: 'p-btn--secondary-grey',\n  filledWhite: 'p-btn--secondary-white',\n  filledBlack: 'p-btn--secondary-black',\n  textColor: 'p-btn--secondary',\n  textWhite: 'p-btn--secondary-inverted',\n  outlineWhite: 'p-btn--outline-white',\n  filledSuccess: 'p-btn--success',\n  filledError: 'p-btn--danger',\n};\n\ntype ButtonProps = {\n  children: ReactNode;\n  variant?: ButtonVariant;\n  leftIcon?: ReactElement;\n  rightIcon?: ReactElement;\n  loading?: boolean;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['button'], 'children'>;\n\nconst Button = React.forwardRef((\n  {\n    className,\n    loading = false,\n    children,\n    variant = 'filledColor',\n    leftIcon,\n    rightIcon,\n    hideLabel,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>\n) => (\n    <button\n      ref={ref}\n      className={classNames(\n        buttonTypeClassNameMap[variant], \n        className, {\n          'p-btn--loading': loading,\n          'tc-transparent': loading,\n          'p-btn--icon-only': hideLabel,\n        })}\n      data-testid=\"button\"\n      {...props}\n    >\n      {!loading && (leftIcon || rightIcon) ? (\n        <div className=\"d-flex jc-center ai-center\">\n          {leftIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'mr8': !hideLabel\n              })}\n            >\n              {React.cloneElement(leftIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n          \n          <div className={classNames({\n              'sr-only': hideLabel\n            })}\n          >\n            {children}\n          </div>\n\n          {rightIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'ml8': !hideLabel\n              })}\n            >\n              {React.cloneElement(rightIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n        </div>\n      ) : children}\n    </button>\n  )\n);\n\nexport { Button };\nexport type { ButtonProps, ButtonVariant };\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;AAcA,IAAM,sBAAsB,GAAqC;IAC/D,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,WAAW,EAAE,wBAAwB;IACrC,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,sBAAsB;IACpC,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,eAAe;CAC7B,CAAC;IAWI,MAAM,GAAGA,mBAAK,CAAC,UAAU,CAAC,UAC9B,EASc,EACd,GAA2C;IATzC,IAAA,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cARV,qFASC,CADS;IAGP,QACDC,yBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,sBAAsB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAE;YACT,gBAAgB,EAAE,OAAO;YACzB,gBAAgB,EAAE,OAAO;YACzB,kBAAkB,EAAE,SAAS;SAC9B,CAAC,iBACQ,QAAQ,IAChB,KAAK,cAER,CAAC,OAAO,KAAK,QAAQ,IAAI,SAAS,CAAC,IAClCC,cAAK,SAAS,EAAC,4BAA4B,aACxC,QAAQ,KACPD,cACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,YAEDD,mBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;wBAC5B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,EAEDC,aAAK,SAAS,EAAE,UAAU,CAAC;wBACvB,SAAS,EAAE,SAAS;qBACrB,CAAC,YAED,QAAQ,GACL,EAEL,SAAS,KACRA,cACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,YAEDD,mBAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,IACG,IACJ,QAAQ,IACL,EACV;CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/button/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactElement, ReactNode } from 'react';\n\ntype ButtonVariant =\n  | 'filledColor'\n  | 'filledGray'\n  | 'filledWhite'\n  | 'filledBlack'\n  | 'textColor'\n  | 'textWhite'\n  | 'outlineWhite'\n  | 'filledSuccess'\n  | 'filledError';\n\nconst buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {\n  filledColor: 'p-btn--primary',\n  filledGray: 'p-btn--secondary-grey',\n  filledWhite: 'p-btn--secondary-white',\n  filledBlack: 'p-btn--secondary-black',\n  textColor: 'p-btn--secondary',\n  textWhite: 'p-btn--secondary-inverted',\n  outlineWhite: 'p-btn--outline-white',\n  filledSuccess: 'p-btn--success',\n  filledError: 'p-btn--danger',\n};\n\ntype ButtonProps = {\n  as?: React.ElementType\n  children: ReactNode;\n  variant?: ButtonVariant;\n  leftIcon?: ReactElement;\n  rightIcon?: ReactElement;\n  loading?: boolean;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['button'], 'children'>;\n\nconst buttonDefaultAsType = 'button' as const;\ntype ButtonDefaultAsType = typeof buttonDefaultAsType;\n\ntype Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;\ntype IntrinsicElement<E> = E extends PolymorphicButton ? IntrinsicElement<E> : never;\n\ninterface PolymorphicButton {\n  <As = ButtonDefaultAsType>(props:\n  As extends React.ComponentType<infer P> ? Merge<P, ButtonProps & {\n      as?: As;\n  }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], ButtonProps & {\n      as?: As;\n  }> : never): React.ReactElement | null;\n}\n\nconst Button = React.forwardRef((\n  {\n    as: ButtonTag = buttonDefaultAsType,\n    className,\n    loading = false,\n    children,\n    variant = 'filledColor',\n    leftIcon,\n    rightIcon,\n    hideLabel,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>\n) => (\n    <ButtonTag\n      ref={ref}\n      className={classNames(\n        buttonTypeClassNameMap[variant], \n        className, {\n          'p-btn--loading': loading,\n          'tc-transparent': loading,\n          'p-btn--icon-only': hideLabel,\n        })}\n      data-testid=\"button\"\n      {...props}\n    >\n      {!loading && (leftIcon || rightIcon) ? (\n        <div className=\"d-flex jc-center ai-center\">\n          {leftIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'mr8': !hideLabel\n              })}\n            >\n              {React.cloneElement(leftIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n          \n          <div className={classNames({\n              'sr-only': hideLabel\n            })}\n          >\n            {children}\n          </div>\n\n          {rightIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'ml8': !hideLabel\n              })}\n            >\n              {React.cloneElement(rightIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n        </div>\n      ) : children}\n    </ButtonTag>\n  )\n) as PolymorphicButton;\n\nexport { Button };\nexport type { ButtonProps, ButtonVariant };\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;AAcA,IAAM,sBAAsB,GAAqC;IAC/D,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,WAAW,EAAE,wBAAwB;IACrC,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,sBAAsB;IACpC,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,eAAe;CAC7B,CAAC;AAYF,IAAM,mBAAmB,GAAG,QAAiB,CAAC;IAexC,MAAM,GAAGA,mBAAK,CAAC,UAAU,CAAC,UAC9B,EAUc,EACd,GAA2C;IAVzC,IAAA,UAAmC,EAA/B,SAAS,mBAAG,mBAAmB,KAAA,EACnC,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cATV,2FAUC,CADS;IAGP,QACDC,IAAC,SAAS,aACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,sBAAsB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAE;YACT,gBAAgB,EAAE,OAAO;YACzB,gBAAgB,EAAE,OAAO;YACzB,kBAAkB,EAAE,SAAS;SAC9B,CAAC,iBACQ,QAAQ,IAChB,KAAK,cAER,CAAC,OAAO,KAAK,QAAQ,IAAI,SAAS,CAAC,IAClCC,cAAK,SAAS,EAAC,4BAA4B,aACxC,QAAQ,KACPD,cACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,YAEDD,mBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;wBAC5B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,EAEDC,aAAK,SAAS,EAAE,UAAU,CAAC;wBACvB,SAAS,EAAE,SAAS;qBACrB,CAAC,YAED,QAAQ,GACL,EAEL,SAAS,KACRA,cACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,YAEDD,mBAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,GACG,CACR,IACG,IACJ,QAAQ,IACF,EACb;CAAA;;;;"}

package/dist/esm/components/button/index.stories.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from './index.js';
+import Info from '../icon/icons/Info.js';
 import PlusIcon from '../icon/icons/Plus.js';
 import SendIcon from '../icon/icons/Send.js';
 import '../../tslib.es6-a39f91fc.js';
@@ -12,6 +13,10 @@ var story = {
     title: 'JSX/Button',
     component: Button,
     argTypes: {
+        as: {
+            control: { type: 'text' },
+            description: 'Allow wrapper element type to be custom defined'
+        },
         children: {
             control: 'text',
             description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',
@@ -80,7 +85,11 @@ var ButtonDisabled = function (_a) {
     var children = _a.children, onClick = _a.onClick;
     return (jsx(Button, { disabled: true, onClick: onClick, children: children }));
 };
+var ButtonAsOtherComponents = function (_a) {
+    var children = _a.children; _a.as; var onClick = _a.onClick;
+    return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-grey-200', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Button, { as: "a", href: "https://feather-insurance.com", target: "_blank", children: children }), jsx("h3", { className: 'p-h3', children: "As a button:" }), jsx(Button, { as: "button", onClick: onClick, children: children }), jsx("h3", { className: 'p-h3', children: "As a h3:" }), jsx(Button, { as: "h3", children: children }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(Info, {}), "Inspect elements to see the different HTML tags being rendered."] })] }));
+};
 
 export default story;
-export { ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
+export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/button/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { Button, ButtonProps, ButtonVariant } from '.';\nimport { PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Button',\n  component: Button,\n  argTypes: {\n    children: {\n      control: 'text',\n      description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Button',\n    },\n    leftIcon: {\n      description: 'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    rightIcon: {\n      description: 'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    loading: {\n      description: 'Show button on a loading state.',\n    },\n    hideLabel: {\n      description: 'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n    },\n    className: {\n      type: 'text',\n      description: 'Class name for most top parent element',\n    },\n  },\n  args: {\n    children: 'Click me',\n    disabled: false,\n    variant: 'filledColor',\n    loading: false,\n    hideLabel: false,\n    className: 'wmn3',\n  },\n  parameters: {\n    design: {\n      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n      type: 'figma'\n    },\n  },\n};\n\nexport const ButtonStory = ({\n  className,\n  loading = false,\n  children,\n  variant,\n  hideLabel,\n  leftIcon,\n  rightIcon,\n  disabled,\n}: ButtonProps) => (\n  <div className='wmx6'>\n    <Button\n      className={className}\n      loading={loading}\n      variant={variant}\n      hideLabel={hideLabel}\n      leftIcon={leftIcon}\n      rightIcon={rightIcon}\n      disabled={disabled}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n  <div>\n    <h3 className='p-h3 mb24'>Filled variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[ \"filledColor\", \"filledGray\", \"filledWhite\", \"filledBlack\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Text variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-primary-500 px32 br8\" : \"\"}>\n          <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ? \"tc-white\" : ''}`}>\n            {variant}\n          </h4>\n\n          <Button onClick={onClick} variant={variant as ButtonVariant}>\n            {children}\n          </Button>\n        </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Outline variants</h3>\n    <div className='d-flex gap16 p24 bg-primary-500 br8'>\n      <div>\n        <h4 className='p-h4 mb16 tc-white'>\n          outlineWhite\n        </h4>\n\n        <Button onClick={onClick} variant={'outlineWhite'}>\n          {children}\n        </Button>\n      </div>\n    </div>\n    \n    <h3 className='p-h3 my24'>State variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"filledSuccess\", \"filledError\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n  </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n  <div>\n    <div className='p24 bg-white br8'>\n      <h3 className='p-h3 mb16'>On white</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-grey-200 br8'>\n      <h3 className='p-h3 mb16'>On grey</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-primary-500 br8'>\n      <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n      <div className='d-flex gap16'>\n        {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n  <div className='d-flex gap16'>\n    <Button leftIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n    <Button rightIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n  </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n  <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n  <Button loading onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n  <Button disabled onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { ElementType } from 'react';\nimport { Button, ButtonProps, ButtonVariant } from '.';\nimport { InfoIcon, PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Button',\n  component: Button,\n  argTypes: {\n    as: {\n      control: { type: 'text' },\n      description: 'Allow wrapper element type to be custom defined'\n    },\n    children: {\n      control: 'text',\n      description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Button',\n    },\n    leftIcon: {\n      description: 'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    rightIcon: {\n      description: 'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    loading: {\n      description: 'Show button on a loading state.',\n    },\n    hideLabel: {\n      description: 'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n    },\n    className: {\n      type: 'text',\n      description: 'Class name for most top parent element',\n    },\n  },\n  args: {\n    children: 'Click me',\n    disabled: false,\n    variant: 'filledColor',\n    loading: false,\n    hideLabel: false,\n    className: 'wmn3',\n  },\n  parameters: {\n    design: {\n      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n      type: 'figma'\n    },\n  },\n};\n\nexport const ButtonStory = ({\n  className,\n  loading = false,\n  children,\n  variant,\n  hideLabel,\n  leftIcon,\n  rightIcon,\n  disabled,\n}: ButtonProps) => (\n  <div className='wmx6'>\n    <Button\n      className={className}\n      loading={loading}\n      variant={variant}\n      hideLabel={hideLabel}\n      leftIcon={leftIcon}\n      rightIcon={rightIcon}\n      disabled={disabled}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n  <div>\n    <h3 className='p-h3 mb24'>Filled variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[ \"filledColor\", \"filledGray\", \"filledWhite\", \"filledBlack\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Text variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-primary-500 px32 br8\" : \"\"}>\n          <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ? \"tc-white\" : ''}`}>\n            {variant}\n          </h4>\n\n          <Button onClick={onClick} variant={variant as ButtonVariant}>\n            {children}\n          </Button>\n        </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Outline variants</h3>\n    <div className='d-flex gap16 p24 bg-primary-500 br8'>\n      <div>\n        <h4 className='p-h4 mb16 tc-white'>\n          outlineWhite\n        </h4>\n\n        <Button onClick={onClick} variant={'outlineWhite'}>\n          {children}\n        </Button>\n      </div>\n    </div>\n    \n    <h3 className='p-h3 my24'>State variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"filledSuccess\", \"filledError\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n  </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n  <div>\n    <div className='p24 bg-white br8'>\n      <h3 className='p-h3 mb16'>On white</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-grey-200 br8'>\n      <h3 className='p-h3 mb16'>On grey</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-primary-500 br8'>\n      <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n      <div className='d-flex gap16'>\n        {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n  <div className='d-flex gap16'>\n    <Button leftIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n    <Button rightIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n  </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n  <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n  <Button loading onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n  <Button disabled onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n    <h3 className='p-h3'>As an anchor:</h3>\n      <Button as=\"a\" href=\"https://feather-insurance.com\" target=\"_blank\">\n        {children}\n      </Button>\n\n  <h3 className='p-h3'>As a button:</h3>\n    <Button as=\"button\" onClick={onClick}>\n      {children}\n    </Button>\n\n  <h3 className='p-h3'>As a h3:</h3>\n    <Button as=\"h3\">\n      {children}\n    </Button>\n\n    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n      <InfoIcon />\n      Inspect elements to see the different HTML tags being rendered.\n    </p>\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}

package/dist/esm/components/cards/card/index.stories.js

@@ -114,7 +114,7 @@ var CardOverridesStyles = function (_a) {
                 title: 'tc-white'
             }, children: children }) }));
 };
-var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsxs(Card, { label: (jsx(Badge, { size: 'small', variant: 'success', children: "Active" })), title: (jsxs("div", { className: 'd-flex jc-between ai-center w100', children: ["Coverage overview", jsx(Button, { onClick: function () { }, variant: 'filledGray', children: "Full coverage details" })] })), children: [jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] }), jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] })] }) })); };
+var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: 'd-flex p24 bg-grey-200', children: jsxs(Card, { label: (jsx(Badge, { size: 'small', variant: 'success', children: "Active" })), title: (jsxs("div", { className: 'd-flex jc-between ai-center w100', children: ["Coverage overview", jsx(Button, { as: "a", href: "#", onClick: console.log, children: "Full covxerage details" })] })), children: [jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] }), jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }), density: 'compact' }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }), density: 'compact' })] })] }) })); };
 
 export default story;
 export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };

package/dist/esm/components/cards/card/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n  title: 'JSX/Cards/Card',\n  component: Card,\n  argTypes: {\n    as: {\n      control: 'text',\n      description: 'Allow wrapper element type to be custom defined'\n    },\n    density: {\n      description: 'Spacing around the card'\n    },\n    label: {\n      description: 'Content to be rendered as label'\n    },\n    title: {\n      description: 'Content to be rendered as title'\n    },\n    titleVariant: {\n      description: 'Variant that allows changing title sizing styles.'\n    },\n    description: {\n      description: 'Content to be rendered as description'\n    },\n    descriptionVariant: {\n      description: 'Variant that allows changing description sizing styles.'\n    },\n    icon: {\n      description: 'ReactNode to be rendered on the left side of the card',\n    },\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the card under the pre-defined props',\n    },\n    onClick: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n      description: 'On click action to be triggered on card click.',\n    },\n    dropShadow: {\n      description: 'Wether to display card with drop shadow styles or not.',\n    },\n    actionIcon: {\n      control: 'text',\n      description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n    },\n    showActionIcon: {\n      description: 'Property that always displays action icon even if no onClick is set.',\n    },\n    verticalAlignment: {\n      description: 'Vertical alignment of the card content',\n      control: { type: 'select' },\n    },\n  },\n  args: {\n    density: 'balanced',\n    description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n    descriptionVariant: 'large',\n    label: 'Label',\n    title: 'Honest, simple insurance',\n    titleVariant: 'large',\n    icon: 'ABC',\n    children: '',\n    classNames: {\n      wrapper: '',\n      label: '',\n      title: '',\n      description: '',\n      children: '',\n      icon: ''\n    },\n    dropShadow: true,\n    verticalAlignment: 'center',\n  }\n};\n\nexport const CardStory = ({ \n  as,\n  actionIcon,\n  showActionIcon,\n  children,\n  classNames,\n  density,\n  description,\n  descriptionVariant,\n  dropShadow,\n  icon,\n  label,\n  onClick,\n  title,\n  titleVariant,\n  verticalAlignment,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      as={as}\n      classNames={classNames}\n      description={description}\n      descriptionVariant={descriptionVariant}\n      density={density}\n      dropShadow={dropShadow}\n      icon={icon}\n      label={label}\n      title={title}\n      titleVariant={titleVariant}\n      onClick={onClick}\n      actionIcon={actionIcon}\n      showActionIcon={showActionIcon}\n      verticalAlignment={verticalAlignment}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n   \n    <h3 className='p-h3'>As an anchor:</h3>\n    <Card\n      as=\"a\"\n      href=\"https://feather-insurance.com\"\n      target=\"_blank\"\n      title=\"Card with an a tag\"\n      density='compact'\n    />\n\n    <h3 className='p-h3'>As a nav:</h3>\n    <Card\n      as=\"nav\"\n      title=\"Card with a nav tag\"\n      density='compact'\n    />\n\n    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n      <InfoIcon />\n      Inspect elements to see the different HTML tags being rendered.\n    </p>\n  </div>\n);\n\nexport const CardDensities = () => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n    <Card\n      title={'Card density: Compact'}\n      density='compact'\n    />\n    <Card\n      title={'Card density: Balanced'}\n      density='balanced'\n    />\n    <Card\n      title={'Card density: Spacious'}\n      density='spacious'\n    />\n  </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n  <div className='d-flex gap16 p24 bg-grey-200'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n    />\n    <Card\n      icon={<MehIcon size={24} noMargin />}\n      title={title}\n    />\n  </div>\n);\n\nexport const CardWithOnClickAction = ({ \n  children,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n      titleVariant={'medium'}\n      onClick={() => {}}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardOverridesStyles = ({ \n  children,\n  label,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      label={label}\n      title={title}\n      titleVariant={'medium'}\n      icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n      classNames={{ \n        wrapper: 'bg-grey-700',\n        label: 'tc-white',\n        title: 'tc-white'\n      }}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      label={(\n        <Badge size='small' variant='success'>\n          Active\n        </Badge>\n      )}\n      title={(\n        <div className='d-flex jc-between ai-center w100'>\n          Coverage overview\n\n          <Button\n            onClick={() => {}}\n            variant='filledGray'\n          >\n            Full coverage details\n          </Button>\n        </div>\n      )}\n    >\n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Lost keys\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<CheckIcon color={'primary-500'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Broken glass\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<XIcon color={'primary-500'} />}\n          density='compact'\n        />\n      </div>\n      \n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Damage to property\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<CheckIcon color={'primary-500'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Drones\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<XIcon color={'primary-500'} />}\n          density='compact'\n        />\n      </div>\n    </Card>\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\nimport { Link } from '../../link';\n\nconst story = {\n  title: 'JSX/Cards/Card',\n  component: Card,\n  argTypes: {\n    as: {\n      control: 'text',\n      description: 'Allow wrapper element type to be custom defined'\n    },\n    density: {\n      description: 'Spacing around the card'\n    },\n    label: {\n      description: 'Content to be rendered as label'\n    },\n    title: {\n      description: 'Content to be rendered as title'\n    },\n    titleVariant: {\n      description: 'Variant that allows changing title sizing styles.'\n    },\n    description: {\n      description: 'Content to be rendered as description'\n    },\n    descriptionVariant: {\n      description: 'Variant that allows changing description sizing styles.'\n    },\n    icon: {\n      description: 'ReactNode to be rendered on the left side of the card',\n    },\n    children: {\n      control: 'text',\n      description: 'Content that is displayed inside the card under the pre-defined props',\n    },\n    onClick: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n      description: 'On click action to be triggered on card click.',\n    },\n    dropShadow: {\n      description: 'Wether to display card with drop shadow styles or not.',\n    },\n    actionIcon: {\n      control: 'text',\n      description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n    },\n    showActionIcon: {\n      description: 'Property that always displays action icon even if no onClick is set.',\n    },\n    verticalAlignment: {\n      description: 'Vertical alignment of the card content',\n      control: { type: 'select' },\n    },\n  },\n  args: {\n    density: 'balanced',\n    description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n    descriptionVariant: 'large',\n    label: 'Label',\n    title: 'Honest, simple insurance',\n    titleVariant: 'large',\n    icon: 'ABC',\n    children: '',\n    classNames: {\n      wrapper: '',\n      label: '',\n      title: '',\n      description: '',\n      children: '',\n      icon: ''\n    },\n    dropShadow: true,\n    verticalAlignment: 'center',\n  }\n};\n\nexport const CardStory = ({ \n  as,\n  actionIcon,\n  showActionIcon,\n  children,\n  classNames,\n  density,\n  description,\n  descriptionVariant,\n  dropShadow,\n  icon,\n  label,\n  onClick,\n  title,\n  titleVariant,\n  verticalAlignment,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      as={as}\n      classNames={classNames}\n      description={description}\n      descriptionVariant={descriptionVariant}\n      density={density}\n      dropShadow={dropShadow}\n      icon={icon}\n      label={label}\n      title={title}\n      titleVariant={titleVariant}\n      onClick={onClick}\n      actionIcon={actionIcon}\n      showActionIcon={showActionIcon}\n      verticalAlignment={verticalAlignment}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n   \n    <h3 className='p-h3'>As an anchor:</h3>\n    <Card\n      as=\"a\"\n      href=\"https://feather-insurance.com\"\n      target=\"_blank\"\n      title=\"Card with an a tag\"\n      density='compact'\n    />\n\n    <h3 className='p-h3'>As a nav:</h3>\n    <Card\n      as=\"nav\"\n      title=\"Card with a nav tag\"\n      density='compact'\n    />\n\n    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n      <InfoIcon />\n      Inspect elements to see the different HTML tags being rendered.\n    </p>\n  </div>\n);\n\nexport const CardDensities = () => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n    <Card\n      title={'Card density: Compact'}\n      density='compact'\n    />\n    <Card\n      title={'Card density: Balanced'}\n      density='balanced'\n    />\n    <Card\n      title={'Card density: Spacious'}\n      density='spacious'\n    />\n  </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n  <div className='d-flex gap16 p24 bg-grey-200'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n    />\n    <Card\n      icon={<MehIcon size={24} noMargin />}\n      title={title}\n    />\n  </div>\n);\n\nexport const CardWithOnClickAction = ({ \n  children,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      icon={\n        <img\n          alt=\"\"\n          src={illustrations.aids}\n          width={24}\n        />\n      }\n      title={title}\n      titleVariant={'medium'}\n      onClick={() => {}}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardOverridesStyles = ({ \n  children,\n  label,\n  title,\n}: CardProps) => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      label={label}\n      title={title}\n      titleVariant={'medium'}\n      icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n      classNames={{ \n        wrapper: 'bg-grey-700',\n        label: 'tc-white',\n        title: 'tc-white'\n      }}\n    >\n      {children}\n    </Card>\n  </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n  <div className='d-flex p24 bg-grey-200'>\n    <Card\n      label={(\n        <Badge size='small' variant='success'>\n          Active\n        </Badge>\n      )}\n      title={(\n        <div className='d-flex jc-between ai-center w100'>\n          Coverage overview\n\n          <Button\n          as=\"a\"\n          href=\"#\"\n            onClick={console.log}\n          >\n            Full covxerage details\n          </Button>\n        </div>\n      )}\n    >\n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Lost keys\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<CheckIcon color={'primary-500'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Broken glass\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<XIcon color={'primary-500'} />}\n          density='compact'\n        />\n      </div>\n      \n      <div className='d-flex gap16 mt16'>\n        <Card\n          description=\"Damage to property\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<CheckIcon color={'primary-500'} />}\n          density='compact'\n        />\n        <Card\n          description=\"Drones\"\n          classNames={{ wrapper: 'bg-grey-300' }}\n          icon={<XIcon color={'primary-500'} />}\n          density='compact'\n        />\n      </div>\n    </Card>\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs","InfoIcon"],"mappings":"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"}

package/dist/esm/components/dateSelector/components/Calendar.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { C as Calendar } from '../../../Calendar-e75ea163.js';
+export { C as Calendar } from '../../../Calendar-3239814b.js';
 import '../../icon/icons/Calendar.js';
 import '../../button/index.js';
 import '../../../_commonjsHelpers-4730bd53.js';

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

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import { a as dayjs, C as Calendar } from '../../Calendar-e75ea163.js';
+import { a as dayjs, C as Calendar } from '../../Calendar-3239814b.js';
 import { c as commonjsGlobal } from '../../_commonjsHelpers-4730bd53.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import { Input } from '../input/index.js';

package/dist/esm/components/dateSelector/index.stories.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { DateSelector } from './index.js';
 import { c as commonjsGlobal } from '../../_commonjsHelpers-4730bd53.js';
-import { d as dayjs_min } from '../../Calendar-e75ea163.js';
+import { d as dayjs_min } from '../../Calendar-3239814b.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../style-inject.es-1f59c1d0.js';
 import '../input/index.js';

package/dist/esm/components/dateSelector/index.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../Calendar-e75ea163.js';
+import '../../Calendar-3239814b.js';
 import '../icon/icons/Calendar.js';
 import '../icon/IconWrapper/IconWrapper.js';
 import '../../index-6ea95111.js';

package/dist/esm/components/table/Table.js

@@ -7,7 +7,7 @@ import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-3c13df54.js';
+import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-d7dbad68.js';
 import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/Table.stories.js

@@ -33,7 +33,7 @@ import '../modal/genericModal/index.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
-import '../../TableSection-3c13df54.js';
+import '../../TableSection-d7dbad68.js';
 import './components/TableContents/TableContents.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/Table.test.js

@@ -33,7 +33,7 @@ import '../modal/genericModal/index.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
-import '../../TableSection-3c13df54.js';
+import '../../TableSection-d7dbad68.js';
 import './components/TableContents/TableContents.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/components/TableContents/TableContents.js

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-3c13df54.js';
+import { T as TableSection } from '../../../../TableSection-d7dbad68.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-3c13df54.js';
+import '../../../../TableSection-d7dbad68.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-3c13df54.js';
+export { T as TableSection } from '../../../../TableSection-d7dbad68.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-d03c10b6.js';
-import { T as TableSection } from '../../../../TableSection-3c13df54.js';
+import { T as TableSection } from '../../../../TableSection-d7dbad68.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

package/dist/esm/index.js

@@ -419,7 +419,7 @@ export { default as TableInfoButton } from './components/comparisonTable/compone
 import './tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import 'react';
-import './Calendar-e75ea163.js';
+import './Calendar-3239814b.js';
 import './_commonjsHelpers-4730bd53.js';
 import './style-inject.es-1f59c1d0.js';
 import './index-6ea95111.js';
@@ -445,7 +445,7 @@ import './components/table/components/TableCell/CTACell/CTACell.js';
 import './components/table/components/IconRenderer/IconRenderer.js';
 import './components/table/components/TableCell/CardCell/CardCell.js';
 import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
-import './TableSection-3c13df54.js';
+import './TableSection-d7dbad68.js';
 import './components/table/components/TableContents/TableContents.js';
 import './components/table/components/TableContents/Collapsible.js';
 import './useTableNavigation-f929fbc9.js';

package/dist/esm/lib/components/button/index.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react';
 type ButtonVariant = 'filledColor' | 'filledGray' | 'filledWhite' | 'filledBlack' | 'textColor' | 'textWhite' | 'outlineWhite' | 'filledSuccess' | 'filledError';
 type ButtonProps = {
+    as?: React.ElementType;
     children: ReactNode;
     variant?: ButtonVariant;
     leftIcon?: ReactElement;
@@ -8,13 +9,16 @@ type ButtonProps = {
     loading?: boolean;
     hideLabel?: boolean;
 } & Omit<JSX.IntrinsicElements['button'], 'children'>;
-declare const Button: React.ForwardRefExoticComponent<Pick<{
-    children: ReactNode;
-    variant?: ButtonVariant | undefined;
-    leftIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    rightIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    loading?: boolean | undefined;
-    hideLabel?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "color" | "name" | "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "loading" | "variant" | "leftIcon" | "rightIcon" | "hideLabel"> & React.RefAttributes<HTMLButtonElement>>;
+declare const buttonDefaultAsType: "button";
+type ButtonDefaultAsType = typeof buttonDefaultAsType;
+type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+interface PolymorphicButton {
+    <As = ButtonDefaultAsType>(props: As extends React.ComponentType<infer P> ? Merge<P, ButtonProps & {
+        as?: As;
+    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], ButtonProps & {
+        as?: As;
+    }> : never): React.ReactElement | null;
+}
+declare const Button: PolymorphicButton;
 export { Button };
 export type { ButtonProps, ButtonVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.54.26",
+  "version": "0.55.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/button/index.stories.tsx

@@ -1,10 +1,15 @@
+import { ElementType } from 'react';
 import { Button, ButtonProps, ButtonVariant } from '.';
-import { PlusIcon, SendIcon } from '../icon';
+import { InfoIcon, PlusIcon, SendIcon } from '../icon';
 
 const story = {
   title: 'JSX/Button',
   component: Button,
   argTypes: {
+    as: {
+      control: { type: 'text' },
+      description: 'Allow wrapper element type to be custom defined'
+    },
     children: {
       control: 'text',
       description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',
@@ -200,4 +205,28 @@ export const ButtonDisabled = ({ children, onClick }: ButtonProps) => (
   </Button>
 );
 
+export const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (
+  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+    <h3 className='p-h3'>As an anchor:</h3>
+      <Button as="a" href="https://feather-insurance.com" target="_blank">
+        {children}
+      </Button>
+
+  <h3 className='p-h3'>As a button:</h3>
+    <Button as="button" onClick={onClick}>
+      {children}
+    </Button>
+
+  <h3 className='p-h3'>As a h3:</h3>
+    <Button as="h3">
+      {children}
+    </Button>
+
+    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>
+      <InfoIcon />
+      Inspect elements to see the different HTML tags being rendered.
+    </p>
+  </div>
+);
+
 export default story;

package/src/lib/components/button/index.tsx

@@ -25,6 +25,7 @@ const buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {
 };
 
 type ButtonProps = {
+  as?: React.ElementType
   children: ReactNode;
   variant?: ButtonVariant;
   leftIcon?: ReactElement;
@@ -33,8 +34,24 @@ type ButtonProps = {
   hideLabel?: boolean;
 } & Omit<JSX.IntrinsicElements['button'], 'children'>;
 
+const buttonDefaultAsType = 'button' as const;
+type ButtonDefaultAsType = typeof buttonDefaultAsType;
+
+type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+type IntrinsicElement<E> = E extends PolymorphicButton ? IntrinsicElement<E> : never;
+
+interface PolymorphicButton {
+  <As = ButtonDefaultAsType>(props:
+  As extends React.ComponentType<infer P> ? Merge<P, ButtonProps & {
+      as?: As;
+  }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], ButtonProps & {
+      as?: As;
+  }> : never): React.ReactElement | null;
+}
+
 const Button = React.forwardRef((
   {
+    as: ButtonTag = buttonDefaultAsType,
     className,
     loading = false,
     children,
@@ -46,7 +63,7 @@ const Button = React.forwardRef((
   }: ButtonProps,
   ref?: React.ForwardedRef<HTMLButtonElement>
 ) => (
-    <button
+    <ButtonTag
       ref={ref}
       className={classNames(
         buttonTypeClassNameMap[variant], 
@@ -94,9 +111,9 @@ const Button = React.forwardRef((
           )}
         </div>
       ) : children}
-    </button>
+    </ButtonTag>
   )
-);
+) as PolymorphicButton;
 
 export { Button };
 export type { ButtonProps, ButtonVariant };

package/src/lib/components/cards/card/index.stories.tsx

@@ -3,6 +3,7 @@ import { illustrations } from '../../../util/images';
 import { Button } from '../../button';
 import { Badge } from '../../badge';
 import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';
+import { Link } from '../../link';
 
 const story = {
   title: 'JSX/Cards/Card',
@@ -241,10 +242,11 @@ export const CardsWithinCardsAndComplexLayout = () => (
           Coverage overview
 
           <Button
-            onClick={() => {}}
-            variant='filledGray'
+          as="a"
+          href="#"
+            onClick={console.log}
           >
-            Full coverage details
+            Full covxerage details
           </Button>
         </div>
       )}