@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/Tabs/index.js

@@ -1,84 +1,57 @@
-import { jsxs as A, jsx as d } from "react/jsx-runtime";
-import b, { useState as i, useRef as v, useEffect as N } from "react";
-import w from "classnames";
-import { a as J, T as K } from "../../TabList.js";
-import { T as O } from "../../TabPanel.js";
-import Q from "../../scss/layout.module.scss";
-import { isMobileUA as V } from "../../utils/mobile.js";
-import m from "./styles.module.scss";
-const W = 75, Y = ({
-  activeTab: L,
-  children: c,
-  className: S,
-  color: l = "white",
-  containerBreakout: g = !0,
-  onColor: M = "onwhite",
-  sticky: k = !0,
-  testId: D,
-  touchBehaviour: X = "none"
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import classNames from "classnames";
+import { a as Tab, T as TabList } from "../../TabList.js";
+import { T as TabPanel } from "../../TabPanel.js";
+import designsystemlayout from "../../scss/layout.module.scss";
+import styles from "./styles.module.scss";
+const TabsRoot = ({
+  activeTab,
+  children,
+  className,
+  color = "white",
+  containerBreakout = true,
+  onColor = "onwhite",
+  sticky = true,
+  testId
 }) => {
-  const y = L !== void 0, [P, U] = i(0), [u, j] = i(0), [h, F] = i(0), [I, s] = i(0), [$, f] = i(null), C = V(), n = v(null), r = v(null), q = v(null);
-  let R = "onwhite";
-  l === "white" && (R = M);
-  const p = (e, o) => {
-    y || (U(e), e > o ? (s(0), G()) : e < o && (s(0), z()));
-  }, z = () => {
-    C && f("right");
-  }, G = () => {
-    C && f("left");
-  }, H = () => {
-    f(null);
-  }, t = y ? L : P;
-  return N(() => {
-    const e = (a) => {
-      j(a.touches[0].clientX);
-    }, o = (a) => {
-      F(a.touches[0].clientX);
-      const T = a.touches[0].clientX - u;
-      t === 0 && T > 0 || t === b.Children.count(c) - 1 && T < 0 ? s(0) : s(T);
-    }, x = () => {
-      Math.abs(h - u) >= W && (h > u ? p(Math.max(0, t - 1), t) : p(Math.min(b.Children.count(c) - 1, t + 1), t)), s(0);
-    };
-    return X === "swipe" && n.current && (n.current.addEventListener("touchstart", e), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", x)), () => {
-      n.current && (n.current.removeEventListener("touchstart", e), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", x));
-    };
-  }, [X, u, h, t]), N(() => {
-    const e = () => {
-      H();
-    };
-    return r.current && r.current.addEventListener("animationend", e), () => {
-      r.current && r.current.removeEventListener("animationend", e);
-    };
-  }, []), /* @__PURE__ */ A("div", { className: w(S, g && Q["container-breakout"]), "data-testid": D, children: [
-    /* @__PURE__ */ A(
+  const isControlled = activeTab !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState(0);
+  const tabsRef = useRef(null);
+  const tabPanelRef = useRef(null);
+  const tabListRef = useRef(null);
+  let onColorUsed = "onwhite";
+  if (color === "white") {
+    onColorUsed = onColor;
+  }
+  const onValueChange = (newValue) => {
+    if (!isControlled) {
+      setUncontrolledValue(newValue);
+    }
+  };
+  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(className, containerBreakout && designsystemlayout["container-breakout"]), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: q,
-        className: w(m["tab-list-wrapper"], {
-          [m["tab-list-wrapper--sticky"]]: k
+        ref: tabListRef,
+        className: classNames(styles["tab-list-wrapper"], {
+          [styles["tab-list-wrapper--sticky"]]: sticky
         }),
         children: [
-          /* @__PURE__ */ d(
-            K,
-            {
-              onTabListClick: (e) => p(e, t),
-              selectedTab: t,
-              color: l,
-              onColor: R,
-              children: c
-            }
-          ),
-          /* @__PURE__ */ d("div", { className: w(m["panel-wrapper"], m[`panel-wrapper--${l}`]) })
+          /* @__PURE__ */ jsx(TabList, { onTabListClick: (index) => onValueChange(index), selectedTab: activeTabIndex, color, onColor: onColorUsed, children }),
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["panel-wrapper"], styles[`panel-wrapper--${color}`]) })
         ]
       }
     ),
-    /* @__PURE__ */ d("div", { ref: n, style: { marginTop: "-50px" }, children: /* @__PURE__ */ d(O, { ref: r, color: l, isFirst: t == 0, translateX: I, animate: $, children: b.Children.toArray(c)[t] }) })
+    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React.Children.toArray(children)[activeTabIndex] }) })
   ] });
-}, E = Y;
-E.displayName = "Tabs";
-E.Tab = J;
-E.Tab.displayName = "Tabs.Tab";
+};
+const Tabs = TabsRoot;
+Tabs.displayName = "Tabs";
+Tabs.Tab = Tab;
+Tabs.Tab.displayName = "Tabs.Tab";
 export {
-  E as default
+  Tabs as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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 designsystemlayout from '../../scss/layout.module.scss';\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 TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\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  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  touchBehaviour = 'none',\n}) => {\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  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\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 (touchBehaviour === 'swipe' && 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  }, [touchBehaviour, 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  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0} translateX={translateX} animate={panelAnimation}>\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","containerBreakout","onColor","sticky","testId","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onColorUsed","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","designsystemlayout","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\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  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\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={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList onTabListClick={(index: number) => onValueChange(index)} selectedTab={activeTabIndex} color={color} onColor={onColorUsed}>\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\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":[],"mappings":";;;;;;;AAqCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QAED,UAAA;AAAA,UAAA,oBAAC,SAAQ,EAAA,gBAAgB,CAAC,UAAkB,cAAc,KAAK,GAAG,aAAa,gBAAgB,OAAc,SAAS,aACnH,SACH,CAAA;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';

package/components/Tag/index.d.ts

@@ -1,3 +1,3 @@
-import Tag from './Tag';
+import { default as Tag } from './Tag';
 export * from './Tag';
 export default Tag;

package/components/Tag/index.js

@@ -1,25 +1,36 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import g from "classnames";
-import { AnalyticsId as f, IconSize as t } from "../../constants.js";
-import { palette as m } from "../../theme/palette.js";
-import { I as u } from "../../Icon.js";
-import { L as h } from "../../LazyIcon.js";
-import o from "./styles.module.scss";
-var I = /* @__PURE__ */ ((a) => (a.medium = "medium", a.large = "large", a))(I || {}), y = /* @__PURE__ */ ((a) => (a.normal = "normal", a.oncolor = "oncolor", a.emphasised = "emphasised", a))(y || {});
-const b = (a) => {
-  const { children: i, size: l = "medium", color: e = "blueberry", svgIcon: s, variant: c = "normal", testId: n } = a, d = g(o.tag, o[`tag--${l}`], o[`tag--${e}`], {
-    [o["tag--has-icon"]]: s,
-    [o["tag--emphasised"]]: c == "emphasised"
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { palette } from "../../theme/palette.js";
+import { I as Icon } from "../../Icon.js";
+import { L as LazyIcon } from "../../LazyIcon.js";
+import styles from "./styles.module.scss";
+var TagSize = /* @__PURE__ */ ((TagSize2) => {
+  TagSize2["medium"] = "medium";
+  TagSize2["large"] = "large";
+  return TagSize2;
+})(TagSize || {});
+var TagVariant = /* @__PURE__ */ ((TagVariant2) => {
+  TagVariant2["normal"] = "normal";
+  TagVariant2["oncolor"] = "oncolor";
+  TagVariant2["emphasised"] = "emphasised";
+  return TagVariant2;
+})(TagVariant || {});
+const Tag = (props) => {
+  const { children, size = "medium", color = "blueberry", svgIcon, variant = "normal", testId } = props;
+  const tagClasses = classNames(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {
+    [styles["tag--has-icon"]]: svgIcon,
+    [styles["tag--emphasised"]]: variant == "emphasised"
     /* emphasised */
   });
-  return /* @__PURE__ */ p("span", { className: d, "data-testid": n, "data-analyticsid": f.Tag, children: [
-    s && (typeof s == "string" ? /* @__PURE__ */ r(h, { iconName: s, size: t.XXSmall, color: m[`${e}800`], className: o.tag__icon }) : /* @__PURE__ */ r(u, { svgIcon: s, size: t.XXSmall, color: m[`${e}800`], className: o.tag__icon })),
-    i
+  return /* @__PURE__ */ jsxs("span", { className: tagClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.Tag, children: [
+    svgIcon && (typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: svgIcon, size: IconSize.XXSmall, color: palette[`${color}800`], className: styles.tag__icon }) : /* @__PURE__ */ jsx(Icon, { svgIcon, size: IconSize.XXSmall, color: palette[`${color}800`], className: styles.tag__icon })),
+    children
   ] });
 };
 export {
-  I as TagSize,
-  y as TagVariant,
-  b as default
+  TagSize,
+  TagVariant,
+  Tag as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\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 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: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\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","TagVariant","Tag","props","children","size","color","svgIcon","variant","testId","tagClasses","cn","styles","jsxs","AnalyticsId","jsx","LazyIcon","IconSize","palette","Icon"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AAuBZ,MAAMC,IAA0B,CAASC,MAAA;AACjC,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAC,GAAS,SAAAC,IAAU,UAAU,QAAAC,EAAA,IAAWN,GAEhGO,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQP,CAAI,EAAE,GAAGO,EAAO,QAAQN,CAAK,EAAE,GAAG;AAAA,IACjF,CAACM,EAAO,eAAe,CAAC,GAAGL;AAAA,IAC3B,CAACK,EAAO,iBAAiB,CAAC,GAAGJ,KAAW;AAAA;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAK,EAAC,UAAK,WAAWH,GAAY,eAAaD,GAAQ,oBAAkBK,EAAY,KAC7E,UAAA;AAAA,IAAAP,MACE,OAAOA,KAAY,WAClB,gBAAAQ,EAACC,KAAS,UAAUT,GAAS,MAAMU,EAAS,SAAS,OAAOC,EAAQ,GAAGZ,CAAK,KAAK,GAAG,WAAWM,EAAO,UAAW,CAAA,IAEjH,gBAAAG,EAACI,GAAK,EAAA,SAAAZ,GAAkB,MAAMU,EAAS,SAAS,OAAOC,EAAQ,GAAGZ,CAAK,KAAK,GAAG,WAAWM,EAAO,UAAW,CAAA;AAAA,IAE/GR;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\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 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: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\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","TagVariant","cn"],"mappings":";;;;;;;AAYY,IAAA,4BAAAA,aAAL;AACLA,WAAA,QAAS,IAAA;AACTA,WAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAKA,IAAA,+BAAAC,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,SAAU,IAAA;AACVA,cAAA,YAAa,IAAA;AAHHA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAuBZ,MAAM,MAA0B,CAAS,UAAA;AACjC,QAAA,EAAE,UAAU,OAAO,UAAgB,QAAQ,aAAa,SAAS,UAAU,UAAU,OAAW,IAAA;AAEtG,QAAM,aAAaC,WAAG,OAAO,KAAK,OAAO,QAAQ,IAAI,EAAE,GAAG,OAAO,QAAQ,KAAK,EAAE,GAAG;AAAA,IACjF,CAAC,OAAO,eAAe,CAAC,GAAG;AAAA,IAC3B,CAAC,OAAO,iBAAiB,CAAC,GAAG,WAAW;AAAA;AAAA,EAAA,CACzC;AAGC,SAAA,qBAAC,UAAK,WAAW,YAAY,eAAa,QAAQ,oBAAkB,YAAY,KAC7E,UAAA;AAAA,IAAA,YACE,OAAO,YAAY,WAClB,oBAAC,YAAS,UAAU,SAAS,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAW,CAAA,IAEjH,oBAAC,MAAK,EAAA,SAAkB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAW,CAAA;AAAA,IAE/G;AAAA,EAAA,GACH;AAEJ;"}

package/components/TagList/TagList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface TagListPropsProps {
     children?: React.ReactNode;
     /** Sets the data-testid attribute on the expander button. */

package/components/TagList/index.d.ts

@@ -1,3 +1,3 @@
-import TagList from './TagList';
+import { default as TagList } from './TagList';
 export * from './TagList';
 export default TagList;

package/components/TagList/index.js

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

package/components/TagList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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  children?: React.ReactNode;\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","jsx","styles","AnalyticsId","React","child"],"mappings":";;;;AAYA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtD,gBAAAC,EAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,SACnF,UAAAC,EAAM,SAAS,IAAIL,GAAU,CAC5BM,MAAA,gBAAAJ,EAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,GAAI,UAAMG,EAAA,CAAA,CACjD,EACH,CAAA;"}
+{"version":3,"file":"index.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  children?: React.ReactNode;\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":[],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AAEnE,SAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAA,MAAM,SAAS,IAAI,UAAU,CAC5B,UAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,gBAAgB,GAAI,UAAM,MAAA,CAAA,CACjD,EACH,CAAA;AAEJ;"}

package/components/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormOnColor } from '../../constants';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 export interface TextareaProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange' | 'value'> {

package/components/Textarea/index.d.ts

@@ -1,3 +1,3 @@
-import Textarea from './Textarea';
+import { default as Textarea } from './Textarea';
 export * from './Textarea';
 export default Textarea;

package/components/Textarea/index.js

@@ -1,5 +1,5 @@
-import { T as e } from "../../Textarea.js";
+import { T as Textarea } from "../../Textarea.js";
 export {
-  e as default
+  Textarea as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tile/Tile.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { TitleTags } from './../Title/Title';
 export type TileVariants = 'normal' | 'compact';
 interface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {

package/components/Tile/index.d.ts

@@ -1,3 +1,3 @@
-import Tile from './Tile';
+import { default as Tile } from './Tile';
 export * from './Tile';
 export default Tile;

package/components/Tile/index.js

@@ -1,74 +1,83 @@
-import { jsx as p, jsxs as N } from "react/jsx-runtime";
-import l from "react";
-import d from "classnames";
-import { AnalyticsId as S, IconSize as u } from "../../constants.js";
-import { useBreakpoint as j, Breakpoint as z } from "../../hooks/useBreakpoint.js";
-import { useHover as B } from "../../hooks/useHover.js";
-import { mergeRefs as E } from "../../utils/refs.js";
-import e from "./styles.module.scss";
-const T = l.forwardRef((r, s) => {
-  const { children: t, className: a, htmlMarkup: o = "span", highlighted: c } = r, n = d(
-    e.tile__title,
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { mergeRefs } from "../../utils/refs.js";
+import tileStyles from "./styles.module.scss";
+const Title = React.forwardRef((props, ref) => {
+  const { compact, children, className, htmlMarkup = "span", highlighted } = props;
+  const titleClasses = classNames(
+    tileStyles["tile__title"],
     {
-      [e["tile__title--highlighted"]]: c
+      [tileStyles["tile__title--highlighted"]]: highlighted,
+      [tileStyles["tile__title--compact"]]: compact
     },
-    a
+    className
   );
-  return /* @__PURE__ */ p(o, { className: n, ref: s, children: t });
+  const CustomTag = htmlMarkup;
+  return /* @__PURE__ */ jsx(CustomTag, { className: titleClasses, ref, children });
 });
-T.displayName = "Title";
-const _ = l.forwardRef((r, s) => {
+Title.displayName = "Title";
+const Tile = React.forwardRef((props, ref) => {
   const {
-    children: t,
-    icon: a,
-    title: o,
-    className: c = "",
-    description: n,
-    fixed: f = !1,
-    highlighted: m = !1,
-    testId: k,
-    target: h,
-    rel: v,
-    variant: C = "normal",
-    href: b,
-    onClick: w
-  } = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, i = C === "compact", R = d(
-    e.tile,
+    children,
+    icon,
+    title,
+    className = "",
+    description,
+    fixed = false,
+    highlighted = false,
+    testId,
+    target,
+    rel,
+    variant = "normal",
+    href,
+    onClick
+  } = props;
+  const { hoverRef, isHovered } = useHover();
+  const breakpoint = useBreakpoint();
+  const mobile = breakpoint < Breakpoint.md;
+  const compact = variant === "compact";
+  const tileClasses = classNames(
+    tileStyles.tile,
     {
-      [e["tile--fixed"]]: f,
-      [e["tile--compact"]]: i,
-      [e["tile--highlighted"]]: m
+      [tileStyles["tile--fixed"]]: fixed,
+      [tileStyles["tile--compact"]]: compact,
+      [tileStyles["tile--highlighted"]]: highlighted
     },
-    c
-  ), I = d(e["title-wrapper"], {
-    [e["title-wrapper--compact"]]: i
+    className
+  );
+  const tileTitleWrapperClasses = classNames(tileStyles["title-wrapper"], {
+    [tileStyles["title-wrapper--compact"]]: compact
   });
-  return /* @__PURE__ */ N(
+  return /* @__PURE__ */ jsxs(
     "a",
     {
-      ref: E([s, x]),
-      href: b,
-      target: h,
-      rel: h === "_blank" ? "noopener noreferrer" : v,
-      className: R,
-      "data-testid": k,
-      "data-analyticsid": S.Tile,
-      onClick: w,
+      ref: mergeRefs([ref, hoverRef]),
+      href,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : rel,
+      className: tileClasses,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Tile,
+      onClick,
       children: [
-        /* @__PURE__ */ N("div", { className: I, children: [
-          l.cloneElement(a, { size: g ? u.Small : u.Medium, isHovered: y, color: m ? "white" : "black" }),
-          l.cloneElement(o, { highlighted: m, compact: i })
+        /* @__PURE__ */ jsxs("div", { className: tileTitleWrapperClasses, children: [
+          React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? "white" : "black" }),
+          React.cloneElement(title, { highlighted, compact })
         ] }),
-        !i && !g && /* @__PURE__ */ p("p", { className: e.tile__description, children: n }),
-        t && /* @__PURE__ */ p("div", { className: e.tile__children, children: t })
+        !compact && !mobile && /* @__PURE__ */ jsx("p", { className: tileStyles.tile__description, children: description }),
+        children && /* @__PURE__ */ jsx("div", { className: tileStyles.tile__children, children })
       ]
     }
   );
 });
-_.displayName = "Tile";
-_.Title = T;
+Tile.displayName = "Tile";
+Tile.Title = Title;
 export {
-  _ as Tile,
-  _ as default
+  Tile,
+  Tile as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\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 visual variant of the component */\n  variant?: TileVariants;\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 } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\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    variant = 'normal',\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\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: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <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","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","variant","href","onClick","hoverRef","isHovered","useHover","mobile","useBreakpoint","Breakpoint","compact","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;;AA+CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,EAAgB,IAAAL,GAC5DM,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGH;AAAA,IAC5C;AAAA,IACAF;AAAA,EAAA;AAIF,SACG,gBAAAM,EAHeL,GAGf,EAAU,WAAWE,GAAc,KAAAL,GACjC,UAAAC,EACH,CAAA;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMY,IAAOX,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,MAAAS;AAAA,IACA,OAAAC;AAAA,IACA,WAAAT,IAAY;AAAA,IACZ,aAAAU;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAT,IAAc;AAAA,IACd,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAApB,GACE,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IADaC,MACSC,EAAW,IACjCC,IAAUT,MAAY,WACtBU,IAAcrB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGmB;AAAA,MAC/B,CAACnB,EAAW,mBAAmB,CAAC,GAAGH;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEI0B,IAA0BtB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGmB;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC9B,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAH;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWW;AAAA,MACX,eAAab;AAAA,MACb,oBAAkBiB,EAAY;AAAA,MAC9B,SAAAZ;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAA9B,EAAM,aAAaY,GAAM,EAAE,MAAMa,IAASS,EAAS,QAAQA,EAAS,QAAQ,WAAAX,GAAW,OAAOjB,IAAc,UAAU,SAAS;AAAA,UAC/HN,EAAM,aAAaa,GAAO,EAAE,aAAAP,GAA0B,SAAAsB,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAACA,KAAW,CAACH,uBAAW,KAAE,EAAA,WAAWhB,EAAW,mBAAoB,UAAYK,EAAA,CAAA;AAAA,QAChFX,KAAa,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAN,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDQ,EAAK,cAAc;AACnBA,EAAK,QAAQZ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\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 visual variant of the component */\n  variant?: TileVariants;\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 { compact, children, className, htmlMarkup = 'span', highlighted } = 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    variant = 'normal',\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\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: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <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":[],"mappings":";;;;;;;;AA+CA,MAAM,QAAQ,MAAM,WAA+C,CAAC,OAAO,QAAQ;AACjF,QAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAC3E,QAAM,eAAe;AAAA,IACnB,WAAW,aAAa;AAAA,IACxB;AAAA,MACE,CAAC,WAAW,0BAA0B,CAAC,GAAG;AAAA,MAC1C,CAAC,WAAW,sBAAsB,CAAC,GAAG;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAElB,SACG,oBAAA,WAAA,EAAU,WAAW,cAAc,KACjC,UACH;AAEJ,CAAC;AAED,MAAM,cAAc;AAEb,MAAM,OAAO,MAAM,WAAyC,CAAC,OAAO,QAAQ;AAC3E,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,EAAE,UAAU,UAAU,IAAI,SAA4B;AAC5D,QAAM,aAAa,cAAc;AAC3B,QAAA,SAAS,aAAa,WAAW;AACvC,QAAM,UAAU,YAAY;AAC5B,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,MACE,CAAC,WAAW,aAAa,CAAC,GAAG;AAAA,MAC7B,CAAC,WAAW,eAAe,CAAC,GAAG;AAAA,MAC/B,CAAC,WAAW,mBAAmB,CAAC,GAAG;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AACA,QAAM,0BAA0B,WAAW,WAAW,eAAe,GAAG;AAAA,IACtE,CAAC,WAAW,wBAAwB,CAAC,GAAG;AAAA,EAAA,CACzC;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,KAAK,WAAW,WAAW,wBAAwB;AAAA,MACnD,WAAW;AAAA,MACX,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MAEA,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,yBACb,UAAA;AAAA,UAAA,MAAM,aAAa,MAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,SAAS,QAAQ,WAAW,OAAO,cAAc,UAAU,SAAS;AAAA,UAC/H,MAAM,aAAa,OAAO,EAAE,aAA0B,QAAkB,CAAA;AAAA,QAAA,GAC3E;AAAA,QACC,CAAC,WAAW,CAAC,8BAAW,KAAE,EAAA,WAAW,WAAW,mBAAoB,UAAY,YAAA,CAAA;AAAA,QAChF,YAAa,oBAAA,OAAA,EAAI,WAAW,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpE;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,QAAQ;"}

package/components/Tile/styles.module.scss

@@ -6,24 +6,6 @@
 @import '../../scss/screen-reader';
 @import '../../scss/supernova/styles/colors';
 
-@mixin tile-title {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  font-size: $font-size-sm;
-  text-align: left;
-  line-height: 1.74rem;
-  font-weight: 400;
-  margin: getSpacer(3xs) 0 0 getSpacer(2xs);
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-weight: 600;
-    font-size: $font-size-md;
-    line-height: 1.625rem;
-    margin-top: getSpacer(s);
-  }
-}
-
 .tile {
   // Referanse for grandparent selection i underklassene lenger nede
   $tile: &;
@@ -93,7 +75,31 @@
   }
 
   &__title {
-    @include tile-title;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    font-size: $font-size-sm;
+    text-align: center;
+    line-height: 1.74rem;
+    font-weight: 400;
+    margin: getSpacer(3xs) 0 0;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      text-align: left;
+      font-weight: 600;
+      font-size: $font-size-md;
+      line-height: 1.625rem;
+      margin: getSpacer(s) 0 0 getSpacer(2xs);
+    }
+
+    &--compact {
+      margin: 0 0 0 getSpacer(3xs);
+      text-align: left;
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
+        margin-left: getSpacer(2xs);
+      }
+    }
   }
 
   #{$tile}:focus-visible & {
@@ -107,11 +113,11 @@
   &__description {
     font-size: 1.125rem;
     line-height: 1.75rem;
-    margin: 0 0 0 0.5rem;
+    margin: getSpacer(2xs) 0 0 getSpacer(2xs);
   }
 
   &__children {
-    margin: 1rem 0 0 0.5rem;
+    margin: getSpacer(s) 0 0 getSpacer(2xs);
   }
 }
 
@@ -119,7 +125,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-bottom: 0.5rem;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     align-items: start;
@@ -132,7 +137,7 @@
   &--compact {
     flex-direction: row;
     align-items: center;
-    padding-right: 1rem;
+    padding-right: getSpacer(s);
     padding-bottom: 0;
 
     svg {

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

@@ -3,6 +3,7 @@ export type Styles = {
   tile__children: string;
   tile__description: string;
   tile__title: string;
+  'tile__title--compact': string;
   'tile__title--highlighted': string;
   'tile--compact': string;
   'tile--fixed': string;