@helsenorge/designsystem-react 6.0.0-beta.9 → 6.0.0

package/components/Table/TableHeadCell/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","tableHeadCellDefaultClass","classNames","tableStyles","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","React","TableHeadCell$1"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBC,MAAAC,IAAgB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAOC,EAAS,aAAuC;AACtI,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGP,GAAW;AAAA,IACvF,CAACO,EAAY,2BAA2B,CAAC,GAAGJ,MAASC,EAAS;AAAA,EAAA,CAC/D;AAED,MAAI,CAACN;AACH,2CACG,MAAG,EAAA,OAAM,OAAM,WAAWO,KACxBJ,CACH;AAIJ,QAAMO,IAAkBF;AAAA,IACtBD;AAAA,IACAE,EAAY,4BAA4B;AAAA,IACxC,EAAE,CAACA,EAAY,0BAA0B,CAAC,GAAGL,EAAQ;AAAA,IACrDF;AAAA,EAAA,GAGIS,IAAiB,MACrBP,qCACG,OAAI,EAAA,WAAWK,EAAY,oCAAoC,EAAA,mCAC7DG,GAAK,EAAA,SAASR,KAAW,QAAoBS,IAAYC,GAAS,MAAMC,EAAS,SAAS,CAC7F,GAGEC,IAAmB,MAAyC;AAChE,YAAQZ,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA;AAIA,SAAA,gBAAAa,EAAA,cAAC,MAAG,EAAA,OAAM,OAAM,WAAWP,GAAiB,aAAWM,EAAiB,EAAA,GACrE,gBAAAC,EAAA,cAAA,UAAA,EAAO,MAAK,UAAS,SAAAhB,GAAkB,WAAWQ,EAAY,oBAAoB,GAAG,gBAAcL,IAAU,CAAC,CAACA,IAAU,OACvH,GAAAO,EAAA,GACAR,CACH,CACF;AAEJ,GAEAe,IAAenB;"}
+{"version":3,"file":"TableHeadCell.js","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","tableHeadCellDefaultClass","classNames","tableStyles","React","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBC,MAAAC,IAAgB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAOC,EAAS,aAAuC;AACtI,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGP,GAAW;AAAA,IACvF,CAACO,EAAY,2BAA2B,CAAC,GAAGJ,MAASC,EAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAACN,KAAY,CAACG;AACT,WAAAO,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACP;AACH,2CACG,MAAG,EAAA,OAAM,OAAM,WAAWO,KACxBJ,CACH;AAIJ,QAAMQ,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGP,CAAS,GAE5GU,IAAiB,MACrBR,qCACG,OAAI,EAAA,WAAWK,EAAY,oCAAoC,EAAA,mCAC7DI,GAAK,EAAA,SAAST,KAAW,QAAoBU,IAAYC,GAAS,MAAMC,EAAS,SAAS,CAC7F,GAGEC,IAAmB,MAAyC;AAChE,YAAQb,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA;AAIA,SAAAM,gBAAAA,EAAA,cAAC,MAAG,EAAA,OAAM,OAAM,WAAWC,GAAiB,aAAWM,EAAiB,EAAA,GACrEP,gBAAAA,EAAA,cAAA,UAAA,EAAO,MAAK,UAAS,SAAAT,GAAkB,WAAWQ,EAAY,oBAAoB,GAAG,gBAAcL,IAAU,CAAC,CAACA,IAAU,OACvH,GAAAQ,EAAA,GACAT,CACH,CACF;AAEJ,GAEAe,IAAenB;"}

package/components/Table/TableRow/TableRow.js

@@ -1,9 +1,9 @@
 import e from "react";
-import f from "classnames";
+import i from "classnames";
 import t from "../styles.module.scss";
 import { ModeType as w } from "../Table.js";
-import E from "../TableExpanderCell/TableExpanderCellMobile.js";
-const R = ({
+import _ from "../TableExpanderCell/TableExpanderCellMobile.js";
+const E = ({
   rowKey: s,
   hideDetailsText: n,
   showDetailsText: b,
@@ -14,7 +14,7 @@ const R = ({
   children: c,
   mode: r = w.normal
 }) => {
-  const i = f(
+  const f = i(
     t["table-row"],
     {
       [t["table__row--expandable"]]: a,
@@ -22,8 +22,8 @@ const R = ({
     },
     p
   );
-  return /* @__PURE__ */ e.createElement("tr", { className: i, onClick: o, key: s }, e.Children.map(c, (m) => e.isValidElement(m) && e.cloneElement(m, { mode: r })), a && /* @__PURE__ */ e.createElement(
-    E,
+  return /* @__PURE__ */ e.createElement("tr", { className: f, onClick: o, key: s }, e.Children.map(c, (m) => e.isValidElement(m) && e.cloneElement(m, { mode: r })), a && /* @__PURE__ */ e.createElement(
+    _,
     {
       expanded: l,
       onClick: o,
@@ -32,9 +32,9 @@ const R = ({
       mode: r
     }
   ));
-}, x = R;
+}, x = E;
 export {
-  R as TableRow,
+  E as TableRow,
   x as default
 };
 //# sourceMappingURL=TableRow.js.map

package/components/Table/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","mode","ModeType","tableRowClass","classNames","tableStyles","React","child","TableExpanderCellMobile","TableRow$1"],"mappings":";;;;;AA6BO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGT;AAAA,MACzC,CAACS,EAAY,sBAAsB,CAAC,GAAGR;AAAA,IACzC;AAAA,IACAE;AAAA,EAAA;AAIA,SAAA,gBAAAO,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAe,SAAAL,GAAkB,KAAKL,EAClD,GAAAa,EAAM,SAAS,IAAIN,GAAU,CAAAO,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAN,EAAM,CAAA,CAAC,GAC7HL,KACC,gBAAAU,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAAX;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAJ;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAM;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ,GAEAQ,IAAejB;"}
+{"version":3,"file":"TableRow.js","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","mode","ModeType","tableRowClass","classNames","tableStyles","React","child","TableExpanderCellMobile","TableRow$1"],"mappings":";;;;;AA6BO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGT;AAAA,MACzC,CAACS,EAAY,sBAAsB,CAAC,GAAGR;AAAA,IACzC;AAAA,IACAE;AAAA,EAAA;AAIA,SAAAO,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAe,SAAAL,GAAkB,KAAKL,EAClD,GAAAa,EAAM,SAAS,IAAIN,GAAU,CAAAO,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAN,EAAM,CAAA,CAAC,GAC7HL,KACCU,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAAX;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAJ;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAM;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ,GAEAQ,IAAejB;"}

package/components/Table/styles.module.scss

@@ -43,12 +43,6 @@ table .table-body .table-row {
     max-width: 100%;
   }
 
-  .table__head-cell:focus {
-    outline: none;
-    background-color: $blueberry800;
-    text-decoration: underline;
-  }
-
   .table__cell {
     position: relative;
     padding: 0.75rem 0 0.75rem 40%;
@@ -212,12 +206,6 @@ table .table-body .table-row {
     outline-offset: -3px;
   }
 
-  &--sorted {
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.3125rem;
-  }
-
   @media (min-width: map.get($grid-breakpoints, lg)) {
     padding: 1rem;
     height: 5.5rem;

package/components/Table/styles.module.scss.d.ts

@@ -21,7 +21,6 @@ export type Styles = {
   'table__head-cell': string;
   'table__head-cell--compact': string;
   'table__head-cell--sortable': string;
-  'table__head-cell--sorted': string;
   'table__head-cell-sort-icon-wrapper': string;
   'table__row--expandable': string;
   'table__row--expandable--selected': string;

package/components/Tag/Tag.js

@@ -9,8 +9,8 @@ import X from "../Icons/X.js";
 import b from "../LazyIcon/LazyIcon.js";
 import t from "./styles.module.scss";
 var z = /* @__PURE__ */ ((e) => (e.medium = "medium", e.large = "large", e))(z || {}), E = /* @__PURE__ */ ((e) => (e.remove = "remove", e.undo = "undo", e))(E || {}), N = /* @__PURE__ */ ((e) => (e.normal = "normal", e.oncolor = "oncolor", e.emphasised = "emphasised", e))(N || {});
-const C = (e) => {
-  const { children: s, size: c, color: o, variant: a, action: r, onClick: m, testId: i } = e, { hoverRef: l, isHovered: d } = I(), $ = p(
+const _ = (e) => {
+  const { children: s, size: c, color: o, variant: a, action: r, onClick: m, testId: l } = e, { hoverRef: i, isHovered: d } = I(), $ = p(
     t.tag,
     t[`tag--${c}`],
     t[`tag--${r}`],
@@ -24,7 +24,7 @@ const C = (e) => {
         return h;
     }
   };
-  return /* @__PURE__ */ n.createElement("button", { className: $, onClick: m, ref: l, type: "button", "data-testid": i, "data-analyticsid": f.Tag }, s, /* @__PURE__ */ n.createElement(
+  return /* @__PURE__ */ n.createElement("button", { className: $, onClick: m, ref: i, type: "button", "data-testid": l, "data-analyticsid": f.Tag }, s, /* @__PURE__ */ n.createElement(
     v,
     {
       svgIcon: y(),
@@ -33,12 +33,12 @@ const C = (e) => {
       isHovered: d
     }
   ));
-}, _ = (e) => {
-  const { children: s, size: c = "medium", color: o = "blueberry", svgIcon: a, variant: r = "normal", action: m, onClick: i, testId: l } = e, d = p(t.tag, t[`tag--${c}`], t[`tag--${o}`], t[`tag--${r}`], {
+}, C = (e) => {
+  const { children: s, size: c = "medium", color: o = "blueberry", svgIcon: a, variant: r = "normal", action: m, onClick: l, testId: i } = e, d = p(t.tag, t[`tag--${c}`], t[`tag--${o}`], t[`tag--${r}`], {
     [t["tag--has-icon"]]: a
   });
-  return m && i ? /* @__PURE__ */ n.createElement(C, { size: c, color: o, variant: r, action: m, onClick: i, testId: l }, s) : /* @__PURE__ */ n.createElement("span", { className: d, "data-testid": l, "data-analyticsid": f.Tag }, a && (typeof a == "string" ? /* @__PURE__ */ n.createElement(b, { iconName: a, size: g.XXSmall, color: u[`${o}800`], className: t.tag__icon }) : /* @__PURE__ */ n.createElement(v, { svgIcon: a, size: g.XXSmall, color: u[`${o}800`], className: t.tag__icon })), s);
-}, j = _;
+  return m && l ? /* @__PURE__ */ n.createElement(_, { size: c, color: o, variant: r, action: m, onClick: l, testId: i }, s) : /* @__PURE__ */ n.createElement("span", { className: d, "data-testid": i, "data-analyticsid": f.Tag }, a && (typeof a == "string" ? /* @__PURE__ */ n.createElement(b, { iconName: a, size: g.XXSmall, color: u[`${o}800`], className: t.tag__icon }) : /* @__PURE__ */ n.createElement(v, { svgIcon: a, size: g.XXSmall, color: u[`${o}800`], className: t.tag__icon })), s);
+}, j = C;
 export {
   E as TagAction,
   z as TagSize,

package/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\ninterface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon","LazyIcon","Tag$1"],"mappings":";;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AA6BZ,MAAMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAW,IAAAP,GAE9D,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAaC;AAAAA,IACjBC,EAAO;AAAA,IACPA,EAAO,QAAQX,CAAI,EAAE;AAAA,IACrBW,EAAO,QAAQR,CAAM,EAAE;AAAA,IACvBQ,EAAO,iBAAiB;AAAA,IACxBR,MAAW,YAAY,CAACQ,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,CAAC;AAAA,EAAA,GAGtEU,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAAU;AAAA,IACX;AAAA,EAAA;AAGF,SACG,gBAAAC,EAAA,cAAA,UAAA,EAAO,WAAWL,GAAY,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBU,EAAY,OAC9HhB,GACD,gBAAAe,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASJ,EAAc;AAAA,MACvB,MAAMK,EAAS;AAAA,MACf,OAAOC,EAAQ,GAAGf,MAAW,SAAS,cAAcF,CAAK,KAAK;AAAA,MAC9D,WAAAM;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ,GAEMY,IAA0B,CAASrB,MAAA;AACvC,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAmB,GAAS,SAAAlB,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEjHW,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQX,CAAI,EAAE,GAAGW,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,GAAG;AAAA,IAC5G,CAACS,EAAO,eAAe,CAAC,GAAGS;AAAA,EAAA,CAC5B;AAED,SAAIjB,KAAUC,IAEV,gBAAAU,EAAA,cAACjB,KAAU,MAAAG,GAAY,OAAAC,GAAc,SAAAC,GAAkB,QAAAC,GAAgB,SAAAC,GAAkB,QAAAC,KACtFN,CACH,IAKF,gBAAAe,EAAA,cAAC,UAAK,WAAWL,GAAY,eAAaJ,GAAQ,oBAAkBU,EAAY,IAC7E,GAAAK,MACE,OAAOA,KAAY,2CACjBC,GAAS,EAAA,UAAUD,GAAS,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAA,CAAW,IAEhH,gBAAAG,EAAA,cAAAE,GAAA,EAAK,SAAAI,GAAkB,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAW,CAAA,IAE/GZ,CACH;AAEJ,GAEAuB,IAAeH;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\ninterface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon","LazyIcon","Tag$1"],"mappings":";;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AA6BZ,MAAMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAW,IAAAP,GAE9D,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAaC;AAAAA,IACjBC,EAAO;AAAA,IACPA,EAAO,QAAQX,CAAI,EAAE;AAAA,IACrBW,EAAO,QAAQR,CAAM,EAAE;AAAA,IACvBQ,EAAO,iBAAiB;AAAA,IACxBR,MAAW,YAAY,CAACQ,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,CAAC;AAAA,EAAA,GAGtEU,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAAU;AAAA,IACX;AAAA,EAAA;AAGF,SACGC,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAWL,GAAY,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBU,EAAY,OAC9HhB,GACDe,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASJ,EAAc;AAAA,MACvB,MAAMK,EAAS;AAAA,MACf,OAAOC,EAAQ,GAAGf,MAAW,SAAS,cAAcF,CAAK,KAAK;AAAA,MAC9D,WAAAM;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ,GAEMY,IAA0B,CAASrB,MAAA;AACvC,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAmB,GAAS,SAAAlB,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEjHW,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQX,CAAI,EAAE,GAAGW,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,GAAG;AAAA,IAC5G,CAACS,EAAO,eAAe,CAAC,GAAGS;AAAA,EAAA,CAC5B;AAED,SAAIjB,KAAUC,IAEVU,gBAAAA,EAAA,cAACjB,KAAU,MAAAG,GAAY,OAAAC,GAAc,SAAAC,GAAkB,QAAAC,GAAgB,SAAAC,GAAkB,QAAAC,KACtFN,CACH,IAKFe,gBAAAA,EAAA,cAAC,UAAK,WAAWL,GAAY,eAAaJ,GAAQ,oBAAkBU,EAAY,IAC7E,GAAAK,MACE,OAAOA,KAAY,2CACjBC,GAAS,EAAA,UAAUD,GAAS,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAA,CAAW,IAEhHG,gBAAAA,EAAA,cAAAE,GAAA,EAAK,SAAAI,GAAkB,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAW,CAAA,IAE/GZ,CACH;AAEJ,GAEAuB,IAAeH;"}

package/components/TagList/TagList.js

@@ -1,8 +1,8 @@
 import t from "react";
 import { AnalyticsId as l } from "../../constants.js";
 import a from "./styles.module.scss";
-const m = ({ children: e, testId: s }) => /* @__PURE__ */ t.createElement("ul", { className: a["tag-list"], "data-testid": s, "data-analyticsid": l.TagList }, t.Children.map(e, (i) => /* @__PURE__ */ t.createElement("li", { className: a["tag-list__item"] }, i))), n = m;
+const m = ({ children: e, testId: s }) => /* @__PURE__ */ t.createElement("ul", { className: a["tag-list"], "data-testid": s, "data-analyticsid": l.TagList }, t.Children.map(e, (i) => /* @__PURE__ */ t.createElement("li", { className: a["tag-list__item"] }, i))), d = m;
 export {
-  n as default
+  d as default
 };
 //# sourceMappingURL=TagList.js.map

package/components/TagList/TagList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface TagListPropsProps {\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child","TagList$1"],"mappings":";;;AAWA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtD,gBAAAC,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAA,gBAAAH,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH,GAIJC,IAAeP;"}
+{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface TagListPropsProps {\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child","TagList$1"],"mappings":";;;AAWA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtDC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAAH,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH,GAIJC,IAAeP;"}

package/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAA2C,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAQpF,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC5C,kBAAkB,GAClB,WAAW,GACX,UAAU,GACV,MAAM,GACN,cAAc,GACd,aAAa,GACb,UAAU,GACV,UAAU,GACV,cAAc,GACd,UAAU,CACb;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,QAAA,MAAM,QAAQ,2FAwIZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAA2C,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAQpF,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC5C,kBAAkB,GAClB,WAAW,GACX,UAAU,GACV,MAAM,GACN,cAAc,GACd,aAAa,GACb,UAAU,GACV,UAAU,GACV,cAAc,GACd,UAAU,CACb;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,QAAA,MAAM,QAAQ,2FA4IZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/components/Textarea/Textarea.js

@@ -1,100 +1,104 @@
-import o, { useState as I, useRef as U, useEffect as Y } from "react";
-import x from "classnames";
-import { FormMode as d, AnalyticsId as Z, AVERAGE_CHARACTER_WIDTH_PX as ee } from "../../constants.js";
+import o, { useState as A, useRef as Y, useEffect as N } from "react";
+import h from "classnames";
+import { FormMode as m, AnalyticsId as Z, AVERAGE_CHARACTER_WIDTH_PX as ee } from "../../constants.js";
 import { uuid as te } from "../../utils/uuid.js";
 import re from "../ErrorWrapper/ErrorWrapper.js";
 import { renderLabel as ae } from "../Label/Label.js";
 import ne from "../MaxCharacters/MaxCharacters.js";
 import t from "./styles.module.scss";
 const oe = (a) => {
-  const m = "2rem", n = "16px", u = "4px";
-  return `calc(${a * ee}px + ${m} + ${n} + ${u})`;
-}, A = o.forwardRef((a, m) => {
+  const u = "2rem", n = "16px", p = "4px";
+  return `calc(${a * ee}px + ${u} + ${n} + ${p})`;
+}, $ = o.forwardRef((a, u) => {
   const {
     maxCharacters: n,
-    maxText: u,
-    width: h,
-    testId: N,
-    defaultValue: f,
-    marginBottom: $,
-    transparent: B,
-    mode: i = d.onwhite,
-    label: M,
+    maxText: p,
+    width: f,
+    testId: B,
+    defaultValue: s,
+    marginBottom: M,
+    transparent: k,
+    mode: i = m.onwhite,
+    label: L,
     textareaId: b = te(),
     minRows: g = 3,
-    maxRows: s = 10,
+    maxRows: c = 10,
     grow: w,
     errorText: C,
-    autoFocus: k,
+    autoFocus: S,
     disabled: E,
-    name: L,
+    name: D,
     autoComplete: y,
-    placeholder: S,
-    readOnly: D,
-    required: F,
+    placeholder: F,
+    readOnly: V,
+    required: q,
     onChange: R,
-    ...V
-  } = a, [q, T] = I(g), [v, z] = I(f || ""), c = U(null), W = (e) => {
-    const l = e.rows;
+    ...z
+  } = a, [G, T] = A(g), [v, W] = A(s || ""), l = Y(null);
+  N(() => {
+    W(s || "");
+  }, [s]);
+  const _ = (e) => {
+    const d = e.rows;
     e.rows = g;
     const r = Math.floor((e.scrollHeight - 16) / 28);
-    r === l && (e.rows = r), r >= s && (e.rows = s, e.scrollTop = e.scrollHeight), r < s ? T(r) : T(s);
-  }, G = i === d.ondark, O = i === d.onblueberry, P = !!n && v.toString().length > n, H = i === d.oninvalid || !!C || P, X = x(t.textarea, {
-    [t["textarea--gutterBottom"]]: $
-  }), j = x(t["input-container"], {
-    [t["input-container--transparent"]]: B,
-    [t["input-container--on-blueberry"]]: O,
-    [t["input-container--on-dark"]]: G,
+    r === d && (e.rows = r), r >= c && (e.rows = c, e.scrollTop = e.scrollHeight), r < c ? T(r) : T(c);
+  }, O = i === m.ondark, P = i === m.onblueberry, X = !!n && v.toString().length > n, H = i === m.oninvalid || !!C || X, j = h(t.textarea, {
+    [t["textarea--gutterBottom"]]: M
+  }), J = h(t["input-container"], {
+    [t["input-container--transparent"]]: k,
+    [t["input-container--on-blueberry"]]: P,
+    [t["input-container--on-dark"]]: O,
     [t["input-container--invalid"]]: H,
     [t["input-container--disabled"]]: a.disabled
-  }), J = x(t["input-container__input"], {
+  }), K = h(t["input-container__input"], {
     [t["input-container__input--disabled"]]: a.disabled
   });
-  Y(() => {
-    var e, p, l;
-    if (w && ((e = c.current) != null && e.children) && ((p = c.current) != null && p.children[0])) {
-      const r = (l = c.current) == null ? void 0 : l.children[0];
-      W(r);
+  N(() => {
+    var e, x, d;
+    if (w && ((e = l.current) != null && e.children) && ((x = l.current) != null && x.children[0])) {
+      const r = (d = l.current) == null ? void 0 : d.children[0];
+      _(r);
     }
   }, []);
-  const K = (e) => {
-    w && W(e.target), z(e.target.value);
-  }, Q = (e) => {
-    R && R(e), K(e);
-  }, _ = h ? oe(h) : void 0;
-  return /* @__PURE__ */ o.createElement(re, { errorText: C }, /* @__PURE__ */ o.createElement("div", { "data-testid": N, "data-analyticsid": Z.Textarea, className: X }, ae(M, b, i, E), /* @__PURE__ */ o.createElement("div", { className: j, ref: c, style: { maxWidth: _ } }, /* @__PURE__ */ o.createElement(
+  const Q = (e) => {
+    w && _(e.target), W(e.target.value);
+  }, U = (e) => {
+    R && R(e), Q(e);
+  }, I = f ? oe(f) : void 0;
+  return /* @__PURE__ */ o.createElement(re, { errorText: C }, /* @__PURE__ */ o.createElement("div", { "data-testid": B, "data-analyticsid": Z.Textarea, className: j }, ae(L, b, i, E), /* @__PURE__ */ o.createElement("div", { className: J, ref: l, style: { maxWidth: I } }, /* @__PURE__ */ o.createElement(
     "textarea",
     {
-      rows: q,
-      defaultValue: f,
+      rows: G,
+      defaultValue: s,
       id: b,
-      className: J,
-      ref: m,
+      className: K,
+      ref: u,
       "aria-describedby": a["aria-describedby"] ?? void 0,
       "aria-invalid": !!H,
-      autoFocus: k,
+      autoFocus: S,
       disabled: E,
-      name: L,
+      name: D,
       autoComplete: y || void 0,
-      placeholder: S,
-      readOnly: D,
-      required: F,
-      onChange: Q,
-      ...V
+      placeholder: F,
+      readOnly: V,
+      required: q,
+      onChange: U,
+      ...z
     }
   )), n && /* @__PURE__ */ o.createElement(
     ne,
     {
       maxCharacters: n,
       length: v.toString().length,
-      maxText: u,
+      maxText: p,
       mode: i,
-      maxWidth: _
+      maxWidth: I
     }
   )));
 });
-A.displayName = "Textarea";
-const xe = A;
+$.displayName = "Textarea";
+const xe = $;
 export {
   xe as default
 };

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/components/Tile/Tile.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TitleTags } from './../Title/Title';
 interface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {
+    children?: React.ReactNode;
     /** Adds custom classes to the element. */
     className?: string;
     /**	Sets the icon to be displayed inside the tile. */

package/components/Tile/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;IACpH,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAuBD,eAAO,MAAM,IAAI,cAmCC,CAAC;AAKnB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAuBD,eAAO,MAAM,IAAI,cAiDC,CAAC;AAKnB,eAAe,IAAI,CAAC"}

package/components/Tile/Tile.js

@@ -1,54 +1,68 @@
 import t from "react";
-import d from "classnames";
+import p from "classnames";
 import { AnalyticsId as C, IconSize as R } from "../../constants.js";
 import { useHover as k } from "../../hooks/useHover.js";
-import { mergeRefs as v } from "../../utils/refs.js";
+import { mergeRefs as x } from "../../utils/refs.js";
 import e from "./styles.module.scss";
-const g = t.forwardRef((a, s) => {
-  const { children: r, className: o, htmlMarkup: c = "span", highlighted: l, compact: m } = a, i = d(
+const _ = t.forwardRef((s, r) => {
+  const { children: a, className: c, htmlMarkup: o = "span", highlighted: m, compact: l } = s, n = p(
     e.tile__title,
     {
-      [e["tile__title--highlighted"]]: l,
-      [e["tile__title--compact"]]: m
+      [e["tile__title--highlighted"]]: m,
+      [e["tile__title--compact"]]: l
     },
-    o
-  ), n = c;
-  return /* @__PURE__ */ t.createElement(n, { className: i, ref: s }, r);
+    c
+  ), i = o;
+  return /* @__PURE__ */ t.createElement(i, { className: n, ref: r }, a);
 });
-g.displayName = "Title";
-const f = t.forwardRef((a, s) => {
-  const { icon: r, title: o, className: c = "", description: l, fixed: m = !1, highlighted: i = !1, testId: n, target: h, rel: N, href: T, onClick: _ } = a, { hoverRef: u, isHovered: E } = k(), p = !l, w = d(
+_.displayName = "Title";
+const f = t.forwardRef((s, r) => {
+  const {
+    children: a,
+    icon: c,
+    title: o,
+    className: m = "",
+    description: l,
+    fixed: n = !1,
+    highlighted: i = !1,
+    testId: g,
+    target: h,
+    rel: N,
+    href: T,
+    onClick: u
+  } = s, { hoverRef: E, isHovered: v } = k(), d = !l, w = p(
     e.tile,
     {
-      [e["tile--fixed"]]: m,
-      [e["tile--compact"]]: p,
+      [e["tile--fixed"]]: n,
+      [e["tile--compact"]]: d,
       [e["tile--highlighted"]]: i
     },
-    c
-  ), y = d(e["title-wrapper"], {
-    [e["title-wrapper--compact"]]: p
+    m
+  ), y = p(e["title-wrapper"], {
+    [e["title-wrapper--compact"]]: d
   });
   return /* @__PURE__ */ t.createElement(
     "a",
     {
-      ref: v([s, u]),
+      ref: x([r, E]),
       href: T,
       target: h,
       rel: h === "_blank" ? "noopener noreferrer" : N,
       className: w,
-      "data-testid": n,
+      "data-testid": g,
       "data-analyticsid": C.Tile,
-      onClick: _
+      onClick: u
     },
-    /* @__PURE__ */ t.createElement("div", { className: y }, t.cloneElement(r, { size: R.Medium, isHovered: E, color: i ? "white" : "black" }), t.cloneElement(o, { highlighted: i, compact: p })),
-    l && /* @__PURE__ */ t.createElement("p", { className: e.tile__description }, l)
+    /* @__PURE__ */ t.createElement("div", { className: y }, t.cloneElement(c, { size: R.Medium, isHovered: v, color: i ? "white" : "black" }), t.cloneElement(o, { highlighted: i, compact: d })),
+    l && /* @__PURE__ */ t.createElement("p", { className: e.tile__description }, l),
+    a && /* @__PURE__ */ t.createElement("div", { className: e.tile__children }, a)
   );
 });
 f.displayName = "Tile";
-f.Title = g;
-const S = f;
+f.Title = _;
+const A = f;
 export {
   f as Tile,
-  S as default
+  A as default
 };
 //# sourceMappingURL=Tile.js.map

package/components/Tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted, compact } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const { icon, title, className = '', description, fixed = false, highlighted = false, testId, target, rel, href, onClick } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const compact = !description;\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {description && <p className={tileStyles.tile__description}>{description}</p>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","compact","titleClasses","classNames","tileStyles","CustomTag","Tile","icon","title","description","fixed","testId","target","rel","href","onClick","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","mergeRefs","AnalyticsId","IconSize","Tile$1"],"mappings":";;;;;;AAyCA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,GAAa,SAAAC,EAAY,IAAAN,GACrEO,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGJ;AAAA,MAC1C,CAACI,EAAW,sBAAsB,CAAC,GAAGH;AAAA,IACxC;AAAA,IACAH;AAAA,EAAA,GAEIO,IAAYN;AAElB,SACG,gBAAAL,EAAA,cAAAW,GAAA,EAAU,WAAWH,GAAc,KAAAN,KACjCC,CACH;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMa,IAAOZ,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,MAAAW,GAAM,OAAAC,GAAO,WAAAV,IAAY,IAAI,aAAAW,GAAa,OAAAC,IAAQ,IAAO,aAAAV,IAAc,IAAO,QAAAW,GAAQ,QAAAC,GAAQ,KAAAC,GAAK,MAAAC,GAAM,SAAAC,EAAY,IAAApB,GACvH,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GACtDjB,IAAU,CAACQ,GACXU,IAAchB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGH;AAAA,MAC/B,CAACG,EAAW,mBAAmB,CAAC,GAAGJ;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEIsB,IAA0BjB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGH;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAP,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK2B,EAAU,CAACzB,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAF;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWM;AAAA,MACX,eAAaR;AAAA,MACb,oBAAkBW,EAAY;AAAA,MAC9B,SAAAP;AAAA,IAAA;AAAA,IAEA,gBAAArB,EAAA,cAAC,OAAI,EAAA,WAAW0B,EACb,GAAA1B,EAAM,aAAaa,GAAM,EAAE,MAAMgB,EAAS,QAAQ,WAAAN,GAAW,OAAOjB,IAAc,UAAU,QAAQ,CAAC,GACrGN,EAAM,aAAac,GAAO,EAAE,aAAAR,GAA0B,SAAAC,EAAkB,CAAA,CAC3E;AAAA,IACCQ,KAAgB,gBAAAf,EAAA,cAAA,KAAA,EAAE,WAAWU,EAAW,qBAAoBK,CAAY;AAAA,EAAA;AAG/E,CAAC;AAEDH,EAAK,cAAc;AACnBA,EAAK,QAAQb;AAEb,MAAA+B,IAAelB;"}
+{"version":3,"file":"Tile.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted, compact } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const compact = !description;\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {description && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","compact","titleClasses","classNames","tileStyles","CustomTag","Tile","icon","title","description","fixed","testId","target","rel","href","onClick","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","mergeRefs","AnalyticsId","IconSize","Tile$1"],"mappings":";;;;;;AA0CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,GAAa,SAAAC,EAAY,IAAAN,GACrEO,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGJ;AAAA,MAC1C,CAACI,EAAW,sBAAsB,CAAC,GAAGH;AAAA,IACxC;AAAA,IACAH;AAAA,EAAA,GAEIO,IAAYN;AAElB,SACGL,gBAAAA,EAAA,cAAAW,GAAA,EAAU,WAAWH,GAAc,KAAAN,KACjCC,CACH;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMa,IAAOZ,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,MAAAU;AAAA,IACA,OAAAC;AAAA,IACA,WAAAV,IAAY;AAAA,IACZ,aAAAW;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAV,IAAc;AAAA,IACd,QAAAW;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAApB,GACE,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GACtDjB,IAAU,CAACQ,GACXU,IAAchB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGH;AAAA,MAC/B,CAACG,EAAW,mBAAmB,CAAC,GAAGJ;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEIsB,IAA0BjB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGH;AAAA,EAAA,CACzC;AAGC,SAAAP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK2B,EAAU,CAACzB,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAF;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWM;AAAA,MACX,eAAaR;AAAA,MACb,oBAAkBW,EAAY;AAAA,MAC9B,SAAAP;AAAA,IAAA;AAAA,IAEArB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAW0B,EACb,GAAA1B,EAAM,aAAaa,GAAM,EAAE,MAAMgB,EAAS,QAAQ,WAAAN,GAAW,OAAOjB,IAAc,UAAU,QAAQ,CAAC,GACrGN,EAAM,aAAac,GAAO,EAAE,aAAAR,GAA0B,SAAAC,EAAkB,CAAA,CAC3E;AAAA,IACCQ,KAAgBf,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAWU,EAAW,qBAAoBK,CAAY;AAAA,IACxEZ,KAAaH,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,EAAW,kBAAiBP,CAAS;AAAA,EAAA;AAGxE,CAAC;AAEDS,EAAK,cAAc;AACnBA,EAAK,QAAQb;AAEb,MAAA+B,IAAelB;"}

package/components/Tile/styles.module.scss

@@ -98,6 +98,10 @@
     line-height: 1.75rem;
     margin: 0 0 0 0.5rem;
   }
+
+  &__children {
+    margin: 1rem 0 0 0.5rem;
+  }
 }
 
 .title-wrapper {

package/components/Tile/styles.module.scss.d.ts

@@ -1,5 +1,6 @@
 export type Styles = {
   tile: string;
+  tile__children: string;
   tile__description: string;
   tile__title: string;
   'tile__title--compact': string;