@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/components/Tabs/index.js

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

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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 { 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';\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  /** 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  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  sticky = true,\n  testId,\n  type = 'normal',\n  touchBehaviour = 'swipe',\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  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={className} 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          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","touchBehaviour","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","jsxs","classNames","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/components/Tag/index.js

@@ -1,8 +1,25 @@
-import r from "./Tag.js";
-import { TagSize as e, TagVariant as f } from "./Tag.js";
+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"
+    /* 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
+  ] });
+};
 export {
-  e as TagSize,
-  f as TagVariant,
-  r as default
+  I as TagSize,
+  y as TagVariant,
+  b as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"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;"}

package/components/TagList/index.js

@@ -1,5 +1,9 @@
-import a from "./TagList.js";
+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 })) });
 export {
-  a as default
+  n as default
 };
 //# sourceMappingURL=index.js.map

package/components/TagList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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;"}

package/components/Textarea/index.js

@@ -1,4 +1,4 @@
-import e from "./Textarea.js";
+import { T as e } from "../../Textarea.js";
 export {
   e as default
 };

package/components/Tile/index.js

@@ -1,6 +1,73 @@
-import { Tile as o } from "./Tile.js";
+import { jsx as p, jsxs as g } from "react/jsx-runtime";
+import s from "react";
+import h from "classnames";
+import { AnalyticsId as k, IconSize as I } from "../../constants.js";
+import { useHover as b } from "../../hooks/useHover.js";
+import { mergeRefs as j } from "../../utils/refs.js";
+import e from "./styles.module.scss";
+const _ = s.forwardRef((a, r) => {
+  const { children: i, className: o, htmlMarkup: c = "span", highlighted: m, compact: t } = a, n = h(
+    e.tile__title,
+    {
+      [e["tile__title--highlighted"]]: m,
+      [e["tile__title--compact"]]: t
+    },
+    o
+  );
+  return /* @__PURE__ */ p(c, { className: n, ref: r, children: i });
+});
+_.displayName = "Title";
+const N = s.forwardRef((a, r) => {
+  const {
+    children: i,
+    icon: o,
+    title: c,
+    className: m = "",
+    description: t,
+    fixed: n = !1,
+    highlighted: l = !1,
+    testId: T,
+    target: f,
+    rel: u,
+    href: C,
+    onClick: v
+  } = a, { hoverRef: w, isHovered: x } = b(), d = !t, y = h(
+    e.tile,
+    {
+      [e["tile--fixed"]]: n,
+      [e["tile--compact"]]: d,
+      [e["tile--highlighted"]]: l
+    },
+    m
+  ), R = h(e["title-wrapper"], {
+    [e["title-wrapper--compact"]]: d
+  });
+  return /* @__PURE__ */ g(
+    "a",
+    {
+      ref: j([r, w]),
+      href: C,
+      target: f,
+      rel: f === "_blank" ? "noopener noreferrer" : u,
+      className: y,
+      "data-testid": T,
+      "data-analyticsid": k.Tile,
+      onClick: v,
+      children: [
+        /* @__PURE__ */ g("div", { className: R, children: [
+          s.cloneElement(o, { size: I.Medium, isHovered: x, color: l ? "white" : "black" }),
+          s.cloneElement(c, { highlighted: l, compact: d })
+        ] }),
+        t && /* @__PURE__ */ p("p", { className: e.tile__description, children: t }),
+        i && /* @__PURE__ */ p("div", { className: e.tile__children, children: i })
+      ]
+    }
+  );
+});
+N.displayName = "Tile";
+N.Title = _;
 export {
-  o as Tile,
-  o as default
+  N as Tile,
+  N 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":["../../../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","jsx","Tile","icon","title","description","fixed","testId","target","rel","href","onClick","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","jsxs","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;AAIF,SACG,gBAAAO,EAHeN,GAGf,EAAU,WAAWG,GAAc,KAAAN,GACjC,UAAAC,EACH,CAAA;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,SAAA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC1B,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAF;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWM;AAAA,MACX,eAAaR;AAAA,MACb,oBAAkBY,EAAY;AAAA,MAC9B,SAAAR;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAM,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAM1B,EAAA,aAAaa,GAAM,EAAE,MAAMiB,EAAS,QAAQ,WAAAP,GAAW,OAAOjB,IAAc,UAAU,QAAA,CAAS;AAAA,UACrGN,EAAM,aAAac,GAAO,EAAE,aAAAR,GAA0B,SAAAC,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACCQ,KAAgB,gBAAAJ,EAAA,KAAA,EAAE,WAAWD,EAAW,mBAAoB,UAAYK,GAAA;AAAA,QACxEZ,KAAa,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAP,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDS,EAAK,cAAc;AACnBA,EAAK,QAAQb;"}

package/components/Title/index.js

@@ -1,8 +1,8 @@
-import { Title as e } from "./Title.js";
-import { instanceOfTitleMargin as o } from "./Title.js";
+import { T as a } from "../../Title.js";
+import { i as r } from "../../Title.js";
 export {
-  e as Title,
-  e as default,
-  o as instanceOfTitleMargin
+  a as Title,
+  a as default,
+  r as instanceOfTitleMargin
 };
 //# sourceMappingURL=index.js.map