@popsure/dirty-swan 0.66.16 → 0.66.18

package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n  title: ReactNode;\n  price?: ReactNode;\n  icon?: ReactNode;\n  imageComponent?: (args: any) => JSX.Element;\n  buttonCaption?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  href: string;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n  onClick?: () => void;\n};\n\nexport const CTACell = ({\n  title,\n  price,\n  icon,\n  grey,\n  narrow,\n  href,\n  buttonCaption,\n  imageComponent,\n  className,\n  dataCy,\n  dataTestId,\n  onClick,\n}: CTACellProps) => {\n  const renderedIcon = (\n    <IconRenderer icon={icon} imageComponent={imageComponent} />\n  );\n\n  return (\n    <div\n      className={classNames(className, \"ta-left\")}\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <div className=\"d-flex ai-center gap8\">\n        {renderedIcon}\n        <p className=\"p-h3\">\n          {title}\n          {price && <span className=\"tc-purple-600\"> {price}</span>}\n        </p>\n      </div>\n\n      <Button\n        {...onClick ? { onClick } : {\n          as: 'a',\n          href: href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        }}\n        className={classNames('mt16 w100', styles.button, {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n      >\n        {buttonCaption}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAsBO,IAAM,OAAO,GAAG,UAAC,EAaT,EAAA;;AAZb,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,YAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA;AAEP,IAAA,IAAM,YAAY,IAChBA,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC7D;IAED,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,SAAA,EAClC,MAAM,iBACF,UAAU,EAAA,QAAA,EAAA,CAEvBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACnC,YAAY,EACbA,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAChB,KAAK,EACL,KAAK,IAAIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,KAAK,CAAA,EAAA,CAAQ,CAAA,EAAA,CACvD,CAAA,EAAA,CACA,EAEND,IAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,OAAO,GAAG,EAAE,OAAO,EAAA,OAAA,EAAE,GAAG;AAC1B,gBAAA,EAAE,EAAE,GAAG;AACP,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,GAAG,EAAE,qBAAqB;aAC3B,EAAA,EACD,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA;wBAC9C,gBAAgB,EAAE,CAAC,IAAI;AACvB,wBAAA,uBAAuB,EAAE;;AACzB,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,oBAAA,EAAA,EAAA,EAAA,QAAA,EAED,aAAa,EAAA,CAAA,CACP,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n  title: ReactNode;\n  price?: ReactNode;\n  icon?: ReactNode;\n  imageComponent?: (args: any) => JSX.Element;\n  buttonCaption?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  centered?: boolean;\n  href: string;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n  onClick?: () => void;\n};\n\nexport const CTACell = ({\n  title,\n  price,\n  icon,\n  grey,\n  narrow,\n  centered,\n  href,\n  buttonCaption,\n  imageComponent,\n  className,\n  dataCy,\n  dataTestId,\n  onClick,\n}: CTACellProps) => {\n  const renderedIcon = (\n    <IconRenderer icon={icon} imageComponent={imageComponent} />\n  );\n\n  return (\n    <div\n      className={classNames(className, 'ta-left', {\n        'd-flex fd-column ai-center': centered,\n      })}\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <div className=\"d-flex ai-center gap8\">\n        {renderedIcon}\n        <p className=\"p-h3\">\n          {title}\n          {price && <span className=\"tc-purple-600\"> {price}</span>}\n        </p>\n      </div>\n\n      <Button\n        {...onClick ? { onClick } : {\n          as: 'a',\n          href: href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        }}\n        className={classNames('mt16 w100', styles.button, {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n      >\n        {buttonCaption}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAuBO,IAAM,OAAO,GAAG,UAAC,EAcT,EAAA;;AAbb,IAAA,IAAA,KAAK,WAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,cAAA,EACR,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,YAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA;AAEP,IAAA,IAAM,YAAY,IAChBA,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC7D;IAED,QACEC,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,EAAE;AAC1C,YAAA,4BAA4B,EAAE,QAAQ;SACvC,CAAC,EAAA,SAAA,EACO,MAAM,EAAA,aAAA,EACF,UAAU,aAEvBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACnC,YAAY,EACbA,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,MAAM,aAChB,KAAK,EACL,KAAK,IAAIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,kBAAG,KAAK,CAAA,EAAA,CAAQ,IACvD,CAAA,EAAA,CACA,EAEND,IAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,OAAO,GAAG,EAAE,OAAO,SAAA,EAAE,GAAG;AAC1B,gBAAA,EAAE,EAAE,GAAG;AACP,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,GAAG,EAAE,qBAAqB;aAC3B,EAAA,EACD,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA;wBAC9C,gBAAgB,EAAE,CAAC,IAAI;AACvB,wBAAA,uBAAuB,EAAE;;AACzB,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,oBAAA,EAAA,EAAA,EAAA,QAAA,EAED,aAAa,EAAA,CAAA,CACP,CAAA,EAAA,CACL;AAEV;;;;"}

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

@@ -25,8 +25,8 @@ import '../../../button/index.js';
 import '../../../cards/card/index.js';
 import '../../../icon/icons/ChevronRight.js';
 
-var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
-var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","headerCell":"TableCell-module_headerCell__aVTIn","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
+var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
+var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z);
 
 var TableCell = React__default.memo(function (_a) {
@@ -49,13 +49,14 @@ var TableCell = React__default.memo(function (_a) {
             },
             _b[styles.headerCell] = isHeader,
             _b[styles.thNavigation] = isNavigation,
+            _b[styles.navigationTitle] = isNavigation && isTopLeftCell,
             _b[styles.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b[styles.fixedCard] = cellProps.type === 'CARD',
             _b[styles.selectedColumnTop] = selectedColumnPosition === 'top',
             _b[styles.selectedColumnBottom] = selectedColumnPosition === 'bottom',
             _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
                     ? 'TITLE'
-                    : (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && jsx(CTACell, __assign({}, cellProps)), cellProps.type === 'BUTTON' && jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsx(CardCell, __assign({}, cellProps))] })));
+                    : (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && (jsx(CTACell, __assign({}, cellProps, { centered: isNavigation }))), cellProps.type === 'BUTTON' && jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsx(CardCell, __assign({}, cellProps))] })));
 });
 
 export { TableCell };

package/dist/esm/components/table/components/TableCell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n  isHeader?: boolean;\n  isFirstCellInRow?: boolean;\n  isTopLeftCell?: boolean;\n  isNavigation?: boolean;\n  isSelectedColumn?: boolean;\n  selectedColumnPosition?: 'top' | 'bottom' | 'middle';\n  imageComponent?: (args: any) => JSX.Element;\n  isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n  ({\n    isFirstCellInRow = false,\n    isHeader = false,\n    isNavigation = false,\n    isSelectedColumn = false,\n    selectedColumnPosition,\n    isTopLeftCell = false,\n    colSpan = 0,\n    isBelowDesktop,\n    ...cellProps\n  }: TableCellProps) => {\n    // prettier-ignore\n    const Tag = isNavigation\n    ? 'div'\n    : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n    // prettier-ignore\n    const thScope = isHeader\n    ? 'col'\n    : isFirstCellInRow ? 'row' : undefined;\n\n    const scope = {\n      scope: thScope,\n    };\n\n    return (\n      <Tag\n        {...scope}\n        className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {\n          'ta-left': isFirstCellInRow,\n          [styles.headerCell]: isHeader,\n          [styles.thNavigation]: isNavigation,\n          [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n          [styles.fixedCard]: cellProps.type === 'CARD',\n          [styles.selectedColumnTop]: selectedColumnPosition === 'top',\n          [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',\n        })}\n        colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n      >\n        {!cellProps.type && (\n          <BaseCell\n            {...cellProps}\n            fontVariant={\n              isTopLeftCell\n                ? 'TITLE'\n                : cellProps.fontVariant ?? 'NORMAL'\n            }\n          />\n        )}\n        {cellProps.type === 'CTA' && <CTACell {...cellProps} />}\n        {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n        {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n      </Tag>\n    );\n  }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAM,SAAS,GAAGA,cAAK,CAAC,IAAI,CAC1B,UAAC,EAUgB,EAAA;;;IATf,IAAA,EAAA,GAAA,EAAA,CAAA,gBAAwB,EAAxB,gBAAgB,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACxB,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAChB,EAAA,GAAA,EAAA,CAAA,YAAoB,EAApB,YAAY,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACpB,EAAA,GAAA,EAAA,CAAA,gBAAwB,EAAxB,gBAAgB,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACxB,sBAAsB,GAAA,EAAA,CAAA,sBAAA,EACtB,EAAA,GAAA,EAAA,CAAA,aAAqB,EAArB,aAAa,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACrB,EAAA,GAAA,EAAA,CAAA,OAAW,EAAX,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACX,cAAc,oBAAA,EACX,SAAS,GAAA,MAAA,CAAA,EAAA,EATb,CAAA,kBAAA,EAAA,UAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,wBAAA,EAAA,eAAA,EAAA,SAAA,EAAA,gBAAA,CAUA,CADa;;IAGZ,IAAM,GAAG,GAAG;AACZ,UAAE;AACF,UAAE,QAAQ,IAAI,gBAAgB,GAAG,IAAI,GAAG,IAAI;;IAG5C,IAAM,OAAO,GAAG;AAChB,UAAE;UACA,gBAAgB,GAAG,KAAK,GAAG,SAAS;AAEtC,IAAA,IAAM,KAAK,GAAG;AACZ,QAAA,KAAK,EAAE,OAAO;KACf;IAED,QACEC,KAAC,GAAG,EAAA,QAAA,CAAA,EAAA,EACE,KAAK,EAAA,EACT,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAG,cAAc,GAAG,UAAU,EAAE,MAAM,CAAC,EAAE,GAAA,EAAA,GAAA;AAC7E,gBAAA,SAAS,EAAE;;AACX,YAAA,EAAA,CAAC,MAAM,CAAC,UAAU,CAAA,GAAG,QAAQ;AAC7B,YAAA,EAAA,CAAC,MAAM,CAAC,YAAY,CAAA,GAAG,YAAY;YACnC,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,gBAAgB,IAAI,OAAO,GAAG,CAAC;YACnD,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,SAAS,CAAC,IAAI,KAAK,MAAM;AAC7C,YAAA,EAAA,CAAC,MAAM,CAAC,iBAAiB,CAAA,GAAG,sBAAsB,KAAK,KAAK;AAC5D,YAAA,EAAA,CAAC,MAAM,CAAC,oBAAoB,CAAA,GAAG,sBAAsB,KAAK,QAAQ;AAClE,YAAA,EAAA,EAAA,EACF,OAAO,EAAE,cAAc,IAAI,SAAS,CAAC,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,OAAO,EAAA,QAAA,EAAA,CAEjE,CAAC,SAAS,CAAC,IAAI,KACdC,GAAA,CAAC,QAAQ,EAAA,QAAA,CAAA,EAAA,EACH,SAAS,EAAA,EACb,WAAW,EACT;AACE,sBAAE;sBACA,MAAA,SAAS,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ,IAEvC,CACH,EACA,SAAS,CAAC,IAAI,KAAK,KAAK,IAAIA,IAAC,OAAO,EAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAA,CAAI,EACtD,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAIA,GAAA,CAAC,UAAU,EAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAA,CAAI,EAC5D,SAAS,CAAC,IAAI,KAAK,MAAM,IAAIA,GAAA,CAAC,QAAQ,eAAK,SAAS,CAAA,CAAI,CAAA,EAAA,CAAA,CACrD;AAEV,CAAC;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n  isHeader?: boolean;\n  isFirstCellInRow?: boolean;\n  isTopLeftCell?: boolean;\n  isNavigation?: boolean;\n  isSelectedColumn?: boolean;\n  selectedColumnPosition?: 'top' | 'bottom' | 'middle';\n  imageComponent?: (args: any) => JSX.Element;\n  isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n  ({\n    isFirstCellInRow = false,\n    isHeader = false,\n    isNavigation = false,\n    isSelectedColumn = false,\n    selectedColumnPosition,\n    isTopLeftCell = false,\n    colSpan = 0,\n    isBelowDesktop,\n    ...cellProps\n  }: TableCellProps) => {\n    // prettier-ignore\n    const Tag = isNavigation\n    ? 'div'\n    : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n    // prettier-ignore\n    const thScope = isHeader\n    ? 'col'\n    : isFirstCellInRow ? 'row' : undefined;\n\n    const scope = {\n      scope: thScope,\n    };\n\n    return (\n      <Tag\n        {...scope}\n        className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {\n          'ta-left': isFirstCellInRow,\n          [styles.headerCell]: isHeader,\n          [styles.thNavigation]: isNavigation,\n          [styles.navigationTitle]: isNavigation && isTopLeftCell,\n          [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n          [styles.fixedCard]: cellProps.type === 'CARD',\n          [styles.selectedColumnTop]: selectedColumnPosition === 'top',\n          [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',\n        })}\n        colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n      >\n        {!cellProps.type && (\n          <BaseCell\n            {...cellProps}\n            fontVariant={\n              isTopLeftCell\n                ? 'TITLE'\n                : cellProps.fontVariant ?? 'NORMAL'\n            }\n          />\n        )}\n        {cellProps.type === 'CTA' && (\n          <CTACell {...cellProps} centered={isNavigation} />\n        )}\n        {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n        {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n      </Tag>\n    );\n  }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { s as styleInject } from '../../../../style-inject.es-tgCJW-Cu.js';
 import { c as classNames } from '../../../../index-DLQEsiym.js';
 import '../../../../_commonjsHelpers-BFTU3MAI.js';
 
-var css_248z = ".Collapsible-module_collapsible__2wWKs {\n  transition: max-height 0.3s ease-in-out;\n  overflow-y: clip;\n}";
+var css_248z = ".Collapsible-module_collapsible__2wWKs {\n  display: flow-root;\n  transition: max-height 0.3s ease-in-out;\n  overflow-y: clip;\n}";
 var styles = {"collapsible":"Collapsible-module_collapsible__2wWKs"};
 styleInject(css_248z);
 

package/dist/esm/{index-BWJpOVlt.js → index-D41W71Hh.js}

@@ -8,7 +8,7 @@ import _7 from './components/icon/icons/7.js';
 import _8 from './components/icon/icons/8.js';
 import Cancer from './components/icon/icons/Cancer.js';
 import AccidentCar from './components/icon/icons/AccidentCar.js';
-import Activity from './components/icon/icons/Activity.js';
+import ActivityIcon from './components/icon/icons/Activity.js';
 import Adhd from './components/icon/icons/Adhd.js';
 import AdviceRecommendation from './components/icon/icons/AdviceRecommendation.js';
 import AlertCircleIcon from './components/icon/icons/AlertCircle.js';
@@ -127,10 +127,10 @@ import Database from './components/icon/icons/Database.js';
 import DeathFuneral from './components/icon/icons/DeathFuneral.js';
 import Delete from './components/icon/icons/Delete.js';
 import DentalPlusIcon from './components/icon/icons/DentalPlus.js';
-import DentalToothTeeth from './components/icon/icons/DentalToothTeeth.js';
+import DentalToothTeethIcon from './components/icon/icons/DentalToothTeeth.js';
 import DentalTreatmentTooth from './components/icon/icons/DentalTreatmentTooth.js';
 import DependentsFamilyAdd from './components/icon/icons/DependentsFamilyAdd.js';
-import DependentsFamily from './components/icon/icons/DependentsFamily.js';
+import DependentsFamilyIcon from './components/icon/icons/DependentsFamily.js';
 import Diabetes from './components/icon/icons/Diabetes.js';
 import Disc from './components/icon/icons/Disc.js';
 import DoctorStethoscope from './components/icon/icons/DoctorStethoscope.js';
@@ -175,7 +175,7 @@ import GitCommit from './components/icon/icons/GitCommit.js';
 import GitMerge from './components/icon/icons/GitMerge.js';
 import GitPullRequest from './components/icon/icons/GitPullRequest.js';
 import Glass from './components/icon/icons/Glass.js';
-import GlobeNetworkEarth from './components/icon/icons/GlobeNetworkEarth.js';
+import GlobeNetworkEarthIcon from './components/icon/icons/GlobeNetworkEarth.js';
 import Hallesche from './components/icon/icons/Hallesche.js';
 import HandsMassageTherapeutic from './components/icon/icons/HandsMassageTherapeutic.js';
 import HardDrive from './components/icon/icons/HardDrive.js';
@@ -187,7 +187,7 @@ import HeartPlus from './components/icon/icons/HeartPlus.js';
 import HeartIcon from './components/icon/icons/Heart.js';
 import Hexagon from './components/icon/icons/Hexagon.js';
 import Home from './components/icon/icons/Home.js';
-import HospitalBuilding from './components/icon/icons/HospitalBuilding.js';
+import HospitalBuildingIcon from './components/icon/icons/HospitalBuilding.js';
 import Id from './components/icon/icons/Id.js';
 import ImagePicture from './components/icon/icons/ImagePicture.js';
 import Inbox from './components/icon/icons/Inbox.js';
@@ -394,7 +394,7 @@ import ZoomOut from './components/icon/icons/ZoomOut.js';
 var icons = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	AccidentCarIcon: AccidentCar,
-	ActivityIcon: Activity,
+	ActivityIcon: ActivityIcon,
 	AdhdIcon: Adhd,
 	AdviceRecommendationIcon: AdviceRecommendation,
 	AlertCircleIcon: AlertCircleIcon,
@@ -514,10 +514,10 @@ var icons = /*#__PURE__*/Object.freeze({
 	DeathFuneralIcon: DeathFuneral,
 	DeleteIcon: Delete,
 	DentalPlusIcon: DentalPlusIcon,
-	DentalToothTeethIcon: DentalToothTeeth,
+	DentalToothTeethIcon: DentalToothTeethIcon,
 	DentalTreatmentToothIcon: DentalTreatmentTooth,
 	DependentsFamilyAddIcon: DependentsFamilyAdd,
-	DependentsFamilyIcon: DependentsFamily,
+	DependentsFamilyIcon: DependentsFamilyIcon,
 	DiabetesIcon: Diabetes,
 	DiscIcon: Disc,
 	DoctorIcon: Doctor,
@@ -562,7 +562,7 @@ var icons = /*#__PURE__*/Object.freeze({
 	GitMergeIcon: GitMerge,
 	GitPullRequestIcon: GitPullRequest,
 	GlassIcon: Glass,
-	GlobeNetworkEarthIcon: GlobeNetworkEarth,
+	GlobeNetworkEarthIcon: GlobeNetworkEarthIcon,
 	HallescheIcon: Hallesche,
 	HandsMassageTherapeuticIcon: HandsMassageTherapeutic,
 	HardDriveIcon: HardDrive,
@@ -574,7 +574,7 @@ var icons = /*#__PURE__*/Object.freeze({
 	HeartPlusIcon: HeartPlus,
 	HexagonIcon: Hexagon,
 	HomeIcon: Home,
-	HospitalBuildingIcon: HospitalBuilding,
+	HospitalBuildingIcon: HospitalBuildingIcon,
 	IdIcon: Id,
 	ImagePictureIcon: ImagePicture,
 	InboxIcon: Inbox,
@@ -788,4 +788,4 @@ var icons = /*#__PURE__*/Object.freeze({
 });
 
 export { icons as i };
-//# sourceMappingURL=index-BWJpOVlt.js.map
+//# sourceMappingURL=index-D41W71Hh.js.map

package/dist/esm/{index-BWJpOVlt.js.map → index-D41W71Hh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-BWJpOVlt.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index-D41W71Hh.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/lib/components/comparisonTable/index.stories.d.ts

@@ -176,5 +176,9 @@ export declare const ComparisonTableStory: {
     render: ({ data, headers, collapsibleSections, scrollOnOpen, scrollTopOffset, hideDetails, classNameOverrides, hideDetailsCaption, showDetailsCaption, hideScrollBars, hideScrollBarsMobile, cellWidth, firstColumnWidth, stickyHeaderTopOffset, growContent, }: ComparisonTableProps<Data>) => JSX.Element;
     name: string;
 };
+export declare const PrivateHealthQuoteWidget: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const HeaderType: () => JSX.Element;
 export default story;

package/dist/esm/lib/components/table/Table.stories.d.ts

@@ -83,5 +83,17 @@ export declare const SinglePlanQuoteTable: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const SinglePlanQuoteWebsite: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TwoPlanQuoteWebsite: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ThreePlanQuoteWebsite: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const TableDataType: () => JSX.Element;
 export default story;

package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.d.ts

@@ -7,10 +7,11 @@ export type CTACellProps = {
     buttonCaption?: ReactNode;
     grey?: boolean;
     narrow?: boolean;
+    centered?: boolean;
     href: string;
     className?: string;
     dataTestId?: string;
     dataCy?: string;
     onClick?: () => void;
 };
-export declare const CTACell: ({ title, price, icon, grey, narrow, href, buttonCaption, imageComponent, className, dataCy, dataTestId, onClick, }: CTACellProps) => JSX.Element;
+export declare const CTACell: ({ title, price, icon, grey, narrow, centered, href, buttonCaption, imageComponent, className, dataCy, dataTestId, onClick, }: CTACellProps) => JSX.Element;

package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.stories.d.ts

@@ -1,7 +1,7 @@
 import { CTACell } from './CTACell';
 declare const story: {
     title: string;
-    component: ({ title, price, icon, grey, narrow, href, buttonCaption, imageComponent, className, dataCy, dataTestId, onClick, }: import("./CTACell").CTACellProps) => JSX.Element;
+    component: ({ title, price, icon, grey, narrow, centered, href, buttonCaption, imageComponent, className, dataCy, dataTestId, onClick, }: import("./CTACell").CTACellProps) => JSX.Element;
     argTypes: {};
     args: {
         title: string;

package/package.json

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

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss

@@ -1,4 +1,5 @@
 @use '../../../../scss/public/colors' as colors;
+@use '../../../../scss/public/grid' as *;
 
 .container {
   width: var(--growContent, min-content);
@@ -21,17 +22,28 @@
 
 .headerButton {
   border: none;
-  background: colors.$ds-orange-50;
+  border-bottom: 1px solid colors.$ds-neutral-300;
+  background: white;
+  color: colors.$ds-neutral-900;
   column-gap: 16px;
   cursor: pointer;
   font-family: inherit;
   outline: none;
+  padding: 24px 0;
   position: relative;
   text-align: inherit;
-  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
+  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
+
+  @include p-size-tablet {
+    padding: 24px;
+  }
 
   &:hover {
-    background: colors.$ds-orange-100;
+    color: colors.$ds-neutral-700;
+
+    :global(.p-h3) {
+      color: colors.$ds-neutral-700;
+    }
   }
 }
 

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx

@@ -80,7 +80,7 @@ export const AccordionItem = ({
       >
         <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>
           {typeof label === 'string' ? (
-            <h4 className="p-h4">{label}</h4>
+            <h4 className="p-h3">{label}</h4>
           ) : (
             <>{label}</>
           )}

package/src/lib/components/comparisonTable/components/Row/index.tsx

@@ -20,6 +20,7 @@ const Row = <T extends { id: number }>(props: RowProps<T>) => {
       key={rowId}
       className={classNames('d-flex w-100', {
         [styles.header]: isRowHeader,
+        [styles.row]: !isRowHeader,
       })}
     >
       <h4
@@ -47,7 +48,7 @@ const Row = <T extends { id: number }>(props: RowProps<T>) => {
 
           return (
             <div
-              className={classNames('ta-center', styles.cell, cellClassName)}
+              className={classNames('ta-left', styles.cell, cellClassName)}
               key={`${rowId}-${item.id}`}
             >
               {

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -3,9 +3,28 @@
 
 $cell-min-width: var(--cellWidth, 211px); // 195 + 16px
 
+.row {
+  border-bottom: 1px solid $ds-neutral-300;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
 .header {
   position: relative;
 
+  .cell {
+    align-items: flex-start;
+    justify-content: center;
+    text-align: center;
+
+    @include p-size-tablet {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+
   & > div {
     width: var(--tableWidth);
     max-width: 100vw;
@@ -24,7 +43,7 @@ $cell-min-width: var(--cellWidth, 211px); // 195 + 16px
 
 .cell {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
   scroll-snap-align: end;
@@ -84,8 +103,6 @@ h4.cell {
 
   display: none;
 
-  line-height: 38px;
-
   @include p-size-tablet {
     display: flex;
   }
@@ -102,13 +119,11 @@ h4.cell {
   width: 50vw;
 
   @include p-size-tablet {
-    border-right: 1px solid $ds-neutral-50;
     flex: 1 0 288px;
   }
 }
 
 h4.addon {
-  border-right: none;
   max-width: calc(100vw - 64px);
   width: 100%;