@helsenorge/designsystem-react 10.1.0 → 10.2.0

package/components/PromoPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\nexport interface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,iBAAgD,CAAS,UAAA;AAC7D,MAAI,MAAM,eAAe;AAChB,WAAA,MAAM,aAAa,MAAM,eAAe,EAAE,UAAU,MAAM,UAAU;AAAA,EAAA;AAGzE,MAAA,MAAM,mBAAmB,UAAU;AAEnC,WAAA,oBAAC,YAAO,MAAM,UAAU,SAAS,MAAM,aACpC,gBAAM,SACT,CAAA;AAAA,EAAA;AAGJ,SACG,oBAAA,KAAA,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM,QAAQ,SAAS,MAAM,aACvD,UAAA,MAAM,UACT;AAEJ;AAEA,MAAM,aAAwC,CAAS,UAAA;AACrD,QAAM,EAAE,WAAW,SAAS,IAAI,SAAyB;AAEzD,QAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;AAE5E,QAAM,aAAa,cAAc;AAEjC,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,IACP,OAAO,eAAe,KAAK,EAAE;AAAA,IAC7B,CAAC,MAAM,gBAAgB,OAAO,6BAA6B;AAAA,EAC7D;AAEA,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,eAAe,MAAM;AAAA,MACrB;AAAA,MACA,aAAa,MAAM;AAAA,MAElB,UAAA,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EACxB;AAGF,QAAM,oBAAoB,MAAc;AAClC,QAAA,cAAc,WAAW,IAAI;AACxB,aAAA;AAAA,IAAA;AAGF,WAAA;AAAA,EAAA,GACN;AAGD,SAAA,qBAAC,OAAI,EAAA,WAAW,mBAAmB,eAAa,MAAM,QAAQ,oBAAkB,YAAY,YAAY,KAAK,UAC1G,UAAA;AAAA,IAAA,MAAM,gBACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB,MAAM;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,WAAW,OAAO;AAAA,MAAA;AAAA,IACpB;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,OAAO,qBACpB,UAAA;AAAA,MAAA,MAAM,SACJ,oBAAA,OAAA,EAAM,YAAY,iBAAiB,YAAY,UAC7C,UACH,eAAA,CAAA;AAAA,MAED,CAAC,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAAA,GACzC;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,SAAS,MAAM,WAAW,WAAW,eAAe;AAAA,QACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;AAAA,QAC9D;AAAA,QACA,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\nexport interface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,iBAAgD,CAAS,UAAA;AAC7D,MAAI,MAAM,eAAe;AAChB,WAAAA,eAAM,aAAa,MAAM,eAAe,EAAE,UAAU,MAAM,UAAU;AAAA,EAAA;AAGzE,MAAA,MAAM,mBAAmB,UAAU;AAEnC,WAAA,oBAAC,YAAO,MAAM,UAAU,SAAS,MAAM,aACpC,gBAAM,SACT,CAAA;AAAA,EAAA;AAGJ,SACG,oBAAA,KAAA,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM,QAAQ,SAAS,MAAM,aACvD,UAAA,MAAM,UACT;AAEJ;AAEA,MAAM,aAAwC,CAAS,UAAA;AACrD,QAAM,EAAE,WAAW,SAAS,IAAI,SAAyB;AAEzD,QAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;AAE5E,QAAM,aAAa,cAAc;AAEjC,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,IACP,OAAO,eAAe,KAAK,EAAE;AAAA,IAC7B,CAAC,MAAM,gBAAgB,OAAO,6BAA6B;AAAA,EAC7D;AAEA,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,eAAe,MAAM;AAAA,MACrB;AAAA,MACA,aAAa,MAAM;AAAA,MAElB,UAAA,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EACxB;AAGF,QAAM,oBAAoB,MAAc;AAClC,QAAA,cAAc,WAAW,IAAI;AACxB,aAAA;AAAA,IAAA;AAGF,WAAA;AAAA,EAAA,GACN;AAGD,SAAA,qBAAC,OAAI,EAAA,WAAW,mBAAmB,eAAa,MAAM,QAAQ,oBAAkB,YAAY,YAAY,KAAK,UAC1G,UAAA;AAAA,IAAA,MAAM,gBACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB,MAAM;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,WAAW,OAAO;AAAA,MAAA;AAAA,IACpB;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,OAAO,qBACpB,UAAA;AAAA,MAAA,MAAM,SACJ,oBAAA,OAAA,EAAM,YAAY,iBAAiB,YAAY,UAC7C,UACH,eAAA,CAAA;AAAA,MAED,CAAC,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAAA,GACzC;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,SAAS,MAAM,WAAW,WAAW,eAAe;AAAA,QACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;AAAA,QAC9D;AAAA,QACA,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}

package/components/Tabs/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef } from "react";
+import React__default, { useState, useRef } from "react";
 import classNames from "classnames";
-import { a as Tab, T as TabList } from "../../TabList.js";
+import { T as TabList, a as Tab } from "../../TabList.js";
 import { T as TabPanel } from "../../TabPanel.js";
 import designsystemlayout from "../../scss/layout.module.scss";
 import styles from "./styles.module.scss";
@@ -61,7 +61,7 @@ const TabsRoot = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React.Children.toArray(children)[activeTabIndex] }) })
+    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React__default.Children.toArray(children)[activeTabIndex] }) })
   ] });
 };
 const Tabs = TabsRoot;

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"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';\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  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\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  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\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        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\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}>\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":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,QACD,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;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;"}
+{"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';\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  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\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  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\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        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\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}>\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":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,QACD,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;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,UAAMA,eAAA,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/TagList/index.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default 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 })) });
+  return /* @__PURE__ */ jsx("ul", { className: styles["tag-list"], "data-testid": testId, "data-analyticsid": AnalyticsId.TagList, children: React__default.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: styles["tag-list__item"], children: child })) });
 };
 export {
   TagList as default

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":[],"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;"}
+{"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":["React"],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AAEnE,SAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAAA,eAAM,SAAS,IAAI,UAAU,CAC5B,UAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,gBAAgB,GAAI,UAAM,MAAA,CAAA,CACjD,EACH,CAAA;AAEJ;"}

package/components/Tile/index.js

@@ -1,12 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default 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 Title = React__default.forwardRef((props, ref) => {
   const { compact, children, className, htmlMarkup = "span", highlighted } = props;
   const titleClasses = classNames(
     tileStyles["tile__title"],
@@ -20,7 +20,7 @@ const Title = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(CustomTag, { className: titleClasses, ref, children });
 });
 Title.displayName = "Title";
-const Tile = React.forwardRef((props, ref) => {
+const Tile = React__default.forwardRef((props, ref) => {
   const {
     children,
     icon,
@@ -65,8 +65,8 @@ const Tile = React.forwardRef((props, ref) => {
       onClick,
       children: [
         /* @__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 })
+          React__default.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? "white" : "black" }),
+          React__default.cloneElement(title, { highlighted, compact })
         ] }),
         !compact && !mobile && /* @__PURE__ */ jsx("p", { className: tileStyles.tile__description, children: description }),
         children && /* @__PURE__ */ jsx("div", { className: tileStyles.tile__children, children })

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 { 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;"}
+{"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":["React"],"mappings":";;;;;;;;AA+CA,MAAM,QAAQA,eAAM,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,OAAOA,eAAM,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,UAAAA,eAAM,aAAa,MAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,SAAS,QAAQ,WAAW,OAAO,cAAc,UAAU,SAAS;AAAA,UAC/HA,eAAM,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;"}