@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/Tabs/Tabs.js

@@ -1,19 +1,88 @@
-import t, { useState as T } from "react";
-import f from "./Tab.js";
-import u from "./TabList/TabList.js";
-import p from "./TabPanel/TabPanel.js";
-import C from "../Tabs/styles.module.scss";
-const y = ({ children: s, testId: m, color: n = "white", type: r = "normal", activeTab: l }) => {
-  const i = l !== void 0, [b, c] = T(0), d = (o) => {
-    i || c(o);
-  }, e = i ? l : b;
-  return /* @__PURE__ */ t.createElement("div", { className: C.tabs, "data-testid": m }, /* @__PURE__ */ t.createElement(u, { onTabListClick: (o) => d(o), selectedTab: e, color: n, type: r }, s), /* @__PURE__ */ t.createElement(p, { color: n, type: r, isFirst: e == 0 }, t.Children.toArray(s)[e]));
-}, a = y;
-a.displayName = "Tabs";
-a.Tab = f;
-a.Tab.displayName = "Tabs.Tab";
-const x = a;
+import r, { useState as c, useRef as v, useEffect as x } from "react";
+import y from "classnames";
+import O from "./Tab.js";
+import W from "./TabList/TabList.js";
+import Z from "./TabPanel/TabPanel.js";
+import { ZIndex as $ } from "../../constants.js";
+import { useSticky as j } from "../../hooks/useSticky.js";
+import { isMobileUA as q } from "../../utils/mobile.js";
+import l from "../Tabs/styles.module.scss";
+const B = 75, G = ({ activeTab: L, children: m, className: A, color: f = "white", sticky: C = !0, testId: M, type: u = "normal" }) => {
+  const w = L !== void 0, [N, g] = c(0), [d, k] = c(0), [p, D] = c(0), [I, a] = c(0), [P, h] = c(null), X = q(), n = v(null), s = v(null), S = v(null), T = (t, o) => {
+    w || (g(t), t > o ? (a(0), _()) : t < o && (a(0), U()));
+  }, U = () => {
+    X && h("right");
+  }, _ = () => {
+    X && h("left");
+  }, z = () => {
+    h(null);
+  }, e = w ? L : N;
+  x(() => {
+    const t = (i) => {
+      k(i.touches[0].clientX);
+    }, o = (i) => {
+      D(i.touches[0].clientX);
+      const b = i.touches[0].clientX - d;
+      e === 0 && b > 0 || e === r.Children.count(m) - 1 && b < 0 ? a(0) : a(b);
+    }, R = () => {
+      Math.abs(p - d) >= B && (p > d ? T(Math.max(0, e - 1), e) : T(Math.min(r.Children.count(m) - 1, e + 1), e)), a(0);
+    };
+    return n.current && (n.current.addEventListener("touchstart", t), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", R)), () => {
+      n.current && (n.current.removeEventListener("touchstart", t), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", R));
+    };
+  }, [d, p, e]), x(() => {
+    const t = () => {
+      z();
+    };
+    return s.current && s.current.addEventListener("animationend", t), () => {
+      s.current && s.current.removeEventListener("animationend", t);
+    };
+  }, []);
+  const { isOutsideWindow: F } = j(S, n);
+  return /* @__PURE__ */ r.createElement("div", { className: A, "data-testid": M }, /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      ref: S,
+      className: y(l["tab-list-wrapper"], {
+        [l["tab-list-wrapper--sticky"]]: C && F
+      }),
+      style: { zIndex: $.TabsSticky }
+    },
+    /* @__PURE__ */ r.createElement(
+      W,
+      {
+        onTabListClick: (t) => T(t, e),
+        selectedTab: e,
+        color: f,
+        type: u
+      },
+      m
+    ),
+    /* @__PURE__ */ r.createElement(
+      "div",
+      {
+        className: y(l["panel-wrapper"], l[`panel-wrapper--${f}`], {
+          [l["panel-wrapper--framed"]]: u == "framed"
+        })
+      }
+    )
+  ), /* @__PURE__ */ r.createElement("div", { ref: n, style: { marginTop: u == "framed" ? "-40px" : "" } }, /* @__PURE__ */ r.createElement(
+    Z,
+    {
+      ref: s,
+      color: f,
+      type: u,
+      isFirst: e == 0,
+      translateX: I,
+      animate: P
+    },
+    r.Children.toArray(m)[e]
+  )));
+}, E = G;
+E.displayName = "Tabs";
+E.Tab = O;
+E.Tab.displayName = "Tabs.Tab";
 export {
-  x as default
+  E as default
 };
 //# sourceMappingURL=Tabs.js.map

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nexport type { TabProps } from './Tab';\n\nimport styles from './styles.module.scss';\n\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\n\nexport type TabsType = 'normal' | 'framed';\n\nexport interface TabsProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({ children, testId, color = 'white', type = 'normal', activeTab }) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={styles.tabs} data-testid={testId}>\n      <TabList onTabListClick={(index: number) => onValueChange(index)} selectedTab={activeTabIndex} color={color} type={type}>\n        {children}\n      </TabList>\n      <TabPanel color={color} type={type} isFirst={activeTabIndex == 0}>\n        {React.Children.toArray(children)[activeTabIndex]}\n      </TabPanel>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["TabsRoot","children","testId","color","type","activeTab","isControlled","uncontrolledValue","setUncontrolledValue","useState","onValueChange","newValue","activeTabIndex","React","styles","TabList","index","TabPanel","Tabs","Tab","Tabs$1"],"mappings":";;;;;AAyBA,MAAMA,IAAgC,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,WAAAC,QAAgB;AAC3G,QAAMC,IAAeD,MAAc,QAC7B,CAACE,GAAmBC,CAAoB,IAAIC,EAAS,CAAC,GAEtDC,IAAgB,CAACC,MAA2B;AAChD,IAAKL,KACHE,EAAqBG,CAAQ;AAAA,EAC/B,GAGIC,IAAiBN,IAAeD,IAAYE;AAElD,SACGM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,eAAaZ,EAAA,GACvCW,gBAAAA,EAAA,cAAAE,GAAA,EAAQ,gBAAgB,CAACC,MAAkBN,EAAcM,CAAK,GAAG,aAAaJ,GAAgB,OAAAT,GAAc,MAAAC,EAAA,GAC1GH,CACH,GACAY,gBAAAA,EAAA,cAACI,GAAS,EAAA,OAAAd,GAAc,MAAAC,GAAY,SAASQ,KAAkB,EAC5D,GAAAC,EAAM,SAAS,QAAQZ,CAAQ,EAAEW,CAAc,CAClD,CACF;AAEJ,GAKMM,IAAOlB;AACbkB,EAAK,cAAc;AACnBA,EAAK,MAAMC;AACXD,EAAK,IAAI,cAAc;AAEvB,MAAAE,IAAeF;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { ZIndex } from '../../constants';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsType = 'normal' | 'framed';\n\nexport interface TabsProps {\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({ activeTab, children, className, color = 'white', sticky = true, testId, type = 'normal' }) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  const { isOutsideWindow } = useSticky(tabListRef, tabsRef);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky && isOutsideWindow,\n        })}\n        style={{ zIndex: ZIndex.TabsSticky }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          type={type}\n        >\n          {children}\n        </TabList>\n        <div\n          className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`], {\n            [styles['panel-wrapper--framed']]: type == 'framed',\n          })}\n        ></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: type == 'framed' ? '-40px' : '' }}>\n        <TabPanel\n          ref={tabPanelRef}\n          color={color}\n          type={type}\n          isFirst={activeTabIndex == 0}\n          translateX={translateX}\n          animate={panelAnimation}\n        >\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","sticky","testId","type","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","isOutsideWindow","useSticky","classNames","styles","ZIndex","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/components/Tabs/styles.module.scss

@@ -1,3 +1,39 @@
-.tabs {
-  background-color: transparent;
+@use 'sass:map';
+@import '../../scss/supernova/styles/colors';
+@import '../../scss/breakpoints';
+
+.tab-list-wrapper {
+  position: relative;
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+  }
+}
+
+.panel-wrapper {
+  $panel-wrapper: &;
+  $colors: 'blueberry', 'neutral', 'white';
+
+  border-top: 1px solid var(--color-action-border-onlight-focus);
+  position: relative;
+  width: 100%;
+
+  &--framed {
+    border-radius: 0;
+    height: 50px;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      border-radius: 0 0.5rem 0 0;
+      border-right: 1px solid var(--color-action-border-onlight-focus);
+      border-left: 1px solid var(--color-action-border-onlight-focus);
+    }
+  }
+
+  @each $color in $colors {
+    &--#{$color} {
+      background: linear-gradient(var(--color-base-background-#{$color}), #0000);
+      pointer-events: none;
+    }
+  }
 }

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

@@ -1,5 +1,11 @@
 export type Styles = {
-  tabs: string;
+  'panel-wrapper': string;
+  'panel-wrapper--blueberry': string;
+  'panel-wrapper--framed': string;
+  'panel-wrapper--neutral': string;
+  'panel-wrapper--white': string;
+  'tab-list-wrapper': string;
+  'tab-list-wrapper--sticky': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Tag/Tag.js

@@ -6,7 +6,7 @@ import { palette as g } from "../../theme/palette.js";
 import { Icon as v } from "../Icon/Icon.js";
 import h from "../Icons/Undo.js";
 import X from "../Icons/X.js";
-import b from "../LazyIcon/LazyIcon.js";
+import { LazyIcon as b } from "../LazyIcon/LazyIcon.js";
 import t from "../Tag/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 _ = (e) => {
@@ -33,12 +33,12 @@ const _ = (e) => {
       isHovered: d
     }
   ));
-}, C = (e) => {
+}, j = (e) => {
   const { children: s, size: c = "medium", color: a = "blueberry", svgIcon: r, variant: o = "normal", action: m, onClick: l, testId: i } = e, d = p(t.tag, t[`tag--${c}`], t[`tag--${a}`], t[`tag--${o}`], {
     [t["tag--has-icon"]]: r
   });
   return m && l ? /* @__PURE__ */ n.createElement(_, { size: c, color: a, variant: o, action: m, onClick: l, testId: i }, s) : /* @__PURE__ */ n.createElement("span", { className: d, "data-testid": i, "data-analyticsid": f.Tag }, r && (typeof r == "string" ? /* @__PURE__ */ n.createElement(b, { iconName: r, size: u.XXSmall, color: g[`${a}800`], className: t.tag__icon }) : /* @__PURE__ */ n.createElement(v, { svgIcon: r, size: u.XXSmall, color: g[`${a}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\nexport interface 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    action === 'undo' && 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,IACrBG,MAAW,UAAUQ,EAAO,QAAQR,CAAM,EAAE;AAAA,IAC5CQ,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;"}
+{"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\nexport interface 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    action === 'undo' && 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"],"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,IACrBG,MAAW,UAAUQ,EAAO,QAAQR,CAAM,EAAE;AAAA,IAC5CQ,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;"}

package/components/TagList/TagList.js

@@ -1,7 +1,7 @@
 import t from "react";
 import { AnalyticsId as l } from "../../constants.js";
 import a from "../TagList/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))), d = m;
+const d = ({ 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)));
 export {
   d as default
 };

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\nexport interface 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;"}
+{"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\nexport interface 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"],"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;"}

package/components/Textarea/Textarea.js

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

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 { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\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\nexport interface 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  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: 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    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\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  const errorTextUuid = useUuid(errorTextId);\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 || !!error || 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} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\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={getAriaDescribedBy(props, errorTextUuid)}\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","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","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 { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\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\nexport interface 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  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: 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    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\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  const errorTextUuid = useUuid(errorTextId);\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 || !!error || 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} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\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={getAriaDescribedBy(props, errorTextUuid)}\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","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/components/Tile/Tile.js

@@ -4,7 +4,7 @@ import { AnalyticsId as C, IconSize as R } from "../../constants.js";
 import { useHover as k } from "../../hooks/useHover.js";
 import { mergeRefs as x } from "../../utils/refs.js";
 import e from "../Tile/styles.module.scss";
-const _ = t.forwardRef((s, r) => {
+const h = t.forwardRef((s, r) => {
   const { children: a, className: c, htmlMarkup: o = "span", highlighted: m, compact: l } = s, n = p(
     e.tile__title,
     {
@@ -15,8 +15,8 @@ const _ = t.forwardRef((s, r) => {
   ), i = o;
   return /* @__PURE__ */ t.createElement(i, { className: n, ref: r }, a);
 });
-_.displayName = "Title";
-const f = t.forwardRef((s, r) => {
+h.displayName = "Title";
+const _ = t.forwardRef((s, r) => {
   const {
     children: a,
     icon: c,
@@ -26,10 +26,10 @@ const f = t.forwardRef((s, r) => {
     fixed: n = !1,
     highlighted: i = !1,
     testId: g,
-    target: h,
+    target: f,
     rel: N,
-    href: T,
-    onClick: u
+    href: u,
+    onClick: T
   } = s, { hoverRef: E, isHovered: v } = k(), d = !l, w = p(
     e.tile,
     {
@@ -45,24 +45,23 @@ const f = t.forwardRef((s, r) => {
     "a",
     {
       ref: x([r, E]),
-      href: T,
-      target: h,
-      rel: h === "_blank" ? "noopener noreferrer" : N,
+      href: u,
+      target: f,
+      rel: f === "_blank" ? "noopener noreferrer" : N,
       className: w,
       "data-testid": g,
       "data-analyticsid": C.Tile,
-      onClick: u
+      onClick: T
     },
     /* @__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 = _;
-const A = f;
+_.displayName = "Tile";
+_.Title = h;
 export {
-  f as Tile,
-  A as default
+  _ as Tile,
+  _ 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  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;"}
+{"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"],"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;"}

package/components/Tile/index.js

@@ -1,7 +1,6 @@
-import o from "./Tile.js";
-import { Tile as f } from "./Tile.js";
+import { Tile as o } from "./Tile.js";
 export {
-  f as Tile,
+  o as Tile,
   o as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

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