@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/components/Tabs/TabList/TabList.js

@@ -1,28 +0,0 @@
-import t, { useRef as l } from "react";
-import b from "classnames";
-import R from "./TabItem.js";
-import { useRovingFocus as C } from "../../../hooks/useRovingFocus.js";
-import { isComponent as T } from "../../../utils/component.js";
-import d from "../Tab.js";
-import i from "../../Tabs/TabList/styles.module.scss";
-const g = (m) => {
-  const { selectedTab: n, onTabListClick: r, children: o, color: p = "white", type: f = "normal" } = m, s = l(null), a = l(t.Children.map(o, () => t.createRef()));
-  C(r, a, s, !0);
-  const c = b(i["tab-list"], i[`tab-list--${f}`]);
-  return /* @__PURE__ */ t.createElement("ul", { className: c, ref: s, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(o, (e, u) => T(e, d) ? /* @__PURE__ */ t.createElement(
-    R,
-    {
-      tabRefs: a,
-      key: e.props.title,
-      index: u,
-      selectedTab: n,
-      onTabListClick: r,
-      tabProps: e.props,
-      color: p
-    }
-  ) : null));
-};
-export {
-  g as default
-};
-//# sourceMappingURL=TabList.js.map

package/components/Tabs/TabList/TabList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent<TabProps>(child, Tab)) {\n          return (\n            <TabItem\n              tabRefs={tabRefs}\n              key={child.props.title}\n              index={index}\n              selectedTab={selectedTab}\n              onTabListClick={onTabListClick}\n              tabProps={child.props}\n              color={color}\n            />\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","child","index","isComponent","Tab","TabItem"],"mappings":";;;;;;;AAmBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC;AAEjF,yCACG,MAAG,EAAA,WAAWM,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACW,GAAOC,MAChCC,EAAsBF,GAAOG,CAAG,IAEhCR,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAAAV;AAAA,MACA,KAAKM,EAAM,MAAM;AAAA,MACjB,OAAAC;AAAA,MACA,aAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,UAAUY,EAAM;AAAA,MAChB,OAAAV;AAAA,IAAA;AAAA,EAAA,IAIC,IACR,CACH;AAEJ;"}

package/components/Tabs/TabPanel/TabPanel.js

@@ -1,17 +0,0 @@
-import s, { forwardRef as y } from "react";
-import l from "classnames";
-import a from "../../Tabs/TabPanel/styles.module.scss";
-const h = y((n, r) => {
-  const { children: o, animate: t, color: m = "white", type: i = "normal", isFirst: c = !1, translateX: e, style: f } = n, p = l(a["tab-panel"], a[`tab-panel--${m}`], a[`tab-panel--${i}`], {
-    [a["tab-panel--first"]]: c
-  }), b = l({
-    [a["tab-panel--animate-left"]]: t === "left",
-    [a["tab-panel--animate-right"]]: t === "right"
-  }), d = e != 0 ? { transform: `translateX(${e}px)` } : {};
-  return /* @__PURE__ */ s.createElement("div", { ref: r, className: p, style: f }, /* @__PURE__ */ s.createElement("div", { className: b, style: d }, o));
-});
-h.displayName = "TabPanel";
-export {
-  h as default
-};
-//# sourceMappingURL=TabPanel.js.map

package/components/Tabs/TabPanel/TabPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n  translateX?: number;\n  style?: React.CSSProperties;\n  animate: 'left' | 'right' | null;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, animate, color = 'white', type = 'normal', isFirst = false, translateX, style } = props;\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  const contentClasses = classNames({\n    [styles['tab-panel--animate-left']]: animate === 'left',\n    [styles['tab-panel--animate-right']]: animate === 'right',\n  });\n  const transformStyle: React.CSSProperties = translateX != 0 ? { transform: `translateX(${translateX}px)` } : {};\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div className={contentClasses} style={transformStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","props","ref","children","animate","color","type","isFirst","translateX","style","tabPanelClasses","classNames","styles","contentClasses","transformStyle","React"],"mappings":";;;AAkBA,MAAMA,IAAWC,EAA0C,CAACC,GAAOC,MAAQ;AACnE,QAAA,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,IAAO,YAAAC,GAAY,OAAAC,EAAA,IAAUR,GAC9FS,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcP,CAAK,EAAE,GAAGO,EAAO,cAAcN,CAAI,EAAE,GAAG;AAAA,IACnH,CAACM,EAAO,kBAAkB,CAAC,GAAGL;AAAA,EAAA,CAC/B,GACKM,IAAiBF,EAAW;AAAA,IAChC,CAACC,EAAO,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IACjD,CAACQ,EAAO,0BAA0B,CAAC,GAAGR,MAAY;AAAA,EAAA,CACnD,GACKU,IAAsCN,KAAc,IAAI,EAAE,WAAW,cAAcA,CAAU,MAAM,IAAI;AAE7G,SACGO,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAb,GAAU,WAAWQ,GAAiB,OAAAD,KACxCM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWF,GAAgB,OAAOC,EAAA,GACpCX,CACH,CACF;AAEJ,CAAC;AAEDJ,EAAS,cAAc;"}

package/components/Tabs/Tabs.js

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

package/components/Tabs/Tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { 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","classNames","styles","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/components/Tag/Tag.js

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

package/components/Tag/Tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { 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","React","AnalyticsId","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,SAAAK,gBAAAA,EAAA,cAAC,UAAK,WAAWH,GAAY,eAAaD,GAAQ,oBAAkBK,EAAY,IAC7E,GAAAP,MACE,OAAOA,KAAY,2CACjBQ,GAAS,EAAA,UAAUR,GAAS,MAAMS,EAAS,SAAS,OAAOC,EAAQ,GAAGX,CAAK,KAAK,GAAG,WAAWM,EAAO,UAAA,CAAW,IAEhHC,gBAAAA,EAAA,cAAAK,GAAA,EAAK,SAAAX,GAAkB,MAAMS,EAAS,SAAS,OAAOC,EAAQ,GAAGX,CAAK,KAAK,GAAG,WAAWM,EAAO,UAAW,CAAA,IAE/GR,CACH;AAEJ;"}

package/components/TagList/TagList.js

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

package/components/TagList/TagList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  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","React","styles","AnalyticsId","child"],"mappings":";;;AAYA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtDC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAAH,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH;"}

package/components/Textarea/Textarea.js

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

package/components/Textarea/Textarea.js.map

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

package/components/Tile/Tile.js

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

package/components/Tile/Tile.js.map

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

package/components/Title/Title.js

@@ -1,25 +0,0 @@
-import a from "react";
-import u from "classnames";
-import { AnalyticsId as y } from "../../constants.js";
-import t from "../Title/styles.module.scss";
-const $ = a.forwardRef(function(r, o) {
-  const { id: m, children: n, className: s, htmlMarkup: c = "h1", appearance: e = "title1", margin: i = 0, testId: p } = r, d = u(
-    t.title,
-    {
-      [t["title--feature"]]: e === "titleFeature",
-      [t["title--title1"]]: e === "title1",
-      [t["title--title2"]]: e === "title2",
-      [t["title--title3"]]: e === "title3",
-      [t["title--title4"]]: e === "title4",
-      [t["title--title5"]]: e === "title5"
-    },
-    s
-  ), f = c, g = T(i) ? { marginTop: `${i.marginTop}rem`, marginBottom: `${i.marginBottom}rem` } : { marginTop: `${i}rem`, marginBottom: `${i}rem` };
-  return /* @__PURE__ */ a.createElement(f, { id: m, className: d, style: g, ref: o, "data-testid": p, "data-analyticsid": y.Title }, n);
-}), T = (l) => Object.prototype.hasOwnProperty.call(l, "marginTop") && Object.prototype.hasOwnProperty.call(l, "marginBottom");
-export {
-  $ as Title,
-  $ as default,
-  T as instanceOfTitleMargin
-};
-//# sourceMappingURL=Title.js.map

package/components/Title/Title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["Title","React","props","ref","id","children","className","htmlMarkup","appearance","margin","testId","titleClasses","classNames","titleStyles","CustomTag","inlineStyle","instanceOfTitleMargin","AnalyticsId"],"mappings":";;;;AA2BO,MAAMA,IAAQC,EAAM,WAAW,SAA2BC,GAAmBC,GAA6C;AACzH,QAAA,EAAE,IAAAC,GAAI,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,MAAM,YAAAC,IAAa,UAAU,QAAAC,IAAS,GAAG,QAAAC,EAAA,IAAWR,GAC5FS,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,gBAAgB,CAAC,GAAGL,MAAe;AAAA,MAChD,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,IACjD;AAAA,IACAF;AAAA,EAAA,GAEIQ,IAAYP,GAEZQ,IAAcC,EAAsBP,CAAM,IAC5C,EAAE,WAAW,GAAGA,EAAO,SAAS,OAAO,cAAc,GAAGA,EAAO,YAAY,MAC3E,IAAA,EAAE,WAAW,GAAGA,CAAM,OAAO,cAAc,GAAGA,CAAM,MAAM;AAE9D,SACGR,gBAAAA,EAAA,cAAAa,GAAA,EAAU,IAAAV,GAAQ,WAAWO,GAAc,OAAOI,GAAa,KAAAZ,GAAU,eAAaO,GAAQ,oBAAkBO,EAAY,SAC1HZ,CACH;AAEJ,CAAC,GAOYW,IAAwB,CAACP,MAC7B,OAAO,UAAU,eAAe,KAAKA,GAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAKA,GAAQ,cAAc;"}

package/components/Toggle/Toggle.js

@@ -1,92 +0,0 @@
-import t, { useState as x, useEffect as h } from "react";
-import n from "classnames";
-import { AnalyticsId as M } from "../../constants.js";
-import { usePseudoClasses as U } from "../../hooks/usePseudoClasses.js";
-import { useUuid as i } from "../../hooks/useUuid.js";
-import e from "../Toggle/styles.module.scss";
-/* empty css                                     */
-import { useAnimate as q } from "../../node_modules/framer-motion/dist/es/animation/hooks/use-animate.js";
-var z = /* @__PURE__ */ ((r) => (r.left = "left", r.right = "right", r))(z || {}), G = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.onneutral = "onneutral", r.onblueberry = "onblueberry", r))(G || {});
-const P = ({
-  checked: r = !1,
-  label: p,
-  onChange: u,
-  onColor: f = "onwhite",
-  subLabel: d,
-  togglePosition: l = "left",
-  testId: A
-}) => {
-  const [o, v] = x(r), [s, b] = x(!1), [C, g] = q(), S = i(), w = i(), _ = i(), N = i(), E = i(), { refObject: O, isHovered: L, isActive: m } = U(C), c = L && !s, y = f === "onwhite";
-  h(() => {
-    if (s) {
-      const a = setTimeout(() => b(!1), 300);
-      return () => clearTimeout(a);
-    }
-  }, [s]), h(() => {
-    v(r);
-  }, [r]), h(() => {
-    g("#" + w, { background: T() }, { duration: 0.2, ease: "easeInOut" }), g(
-      "#" + _,
-      { background: o ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)" },
-      { duration: 0.2, ease: "easeInOut" }
-    ), g("#" + _, { x: c ? 9 : o ? 18 : 0 }, { duration: 0.2, ease: "easeInOut" }), g("svg", { opacity: o ? 1 : 0 }, { duration: 0.2, ease: "easeInOut" });
-  }, [o, c, m]);
-  const T = () => o && m ? "var(--core-color-blueberry-800)" : o ? c ? "var(--color-action-graphics-onlight-hover)" : "var(--color-action-graphics-onlight)" : y && m ? "var(--core-color-neutral-400)" : y ? c ? "var(--core-color-neutral-200)" : "var(--core-color-neutral-50)" : m ? "var(--core-color-neutral-200)" : c ? "var(--core-color-neutral-50)" : "var(--core-color-white)", j = (a) => {
-    v(a.target.checked), b(!0), u == null || u(a);
-  }, B = n(e["toggle-container"]), D = n(e["toggle-container__row"], {
-    [e["toggle-container__row--right"]]: l === "right"
-    /* right */
-  }), F = n(e["toggle-container__sublabel"], {
-    [e["toggle-container__sublabel--toggle-right"]]: l === "right"
-    /* right */
-  }), H = n(e["toggle-container__toggle"], {
-    [e["toggle-container__toggle--ignore-hover"]]: s,
-    [e["toggle-container__toggle--on-white"]]: f === "onwhite"
-    /* onwhite */
-  }), R = n(e["toggle-container__toggle__dot"], {
-    [e["toggle-container__toggle__dot--ignore-hover"]]: s
-  }), I = () => /* @__PURE__ */ t.createElement("label", { ref: O, className: e["toggle-container__toggle-group"] }, /* @__PURE__ */ t.createElement(
-    "input",
-    {
-      id: S,
-      type: "checkbox",
-      checked: o,
-      onChange: j,
-      className: e["toggle-container__input"],
-      "aria-label": p.map((a) => a.text).join(" "),
-      "aria-describedby": d ? E : void 0
-    }
-  ), /* @__PURE__ */ t.createElement("span", { id: w, className: H, "aria-hidden": "true" }, /* @__PURE__ */ t.createElement("span", { id: _, className: R, "aria-hidden": "true" }, /* @__PURE__ */ t.createElement(
-    "svg",
-    {
-      width: "17",
-      height: "13",
-      viewBox: "0 0 17 13",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: e["toggle-container__toggle__dot__icon"]
-    },
-    /* @__PURE__ */ t.createElement("path", { d: "M15 2L6.80839 10.548L2 5.53145", fill: "none", strokeWidth: "3" })
-  )))), k = () => /* @__PURE__ */ t.createElement(
-    "span",
-    {
-      id: N,
-      className: n(e["toggle-container__label"], {
-        [e["toggle-container__label--toggle-right"]]: l === "right"
-        /* right */
-      })
-    },
-    p.map((a) => {
-      const W = n({
-        [e["toggle-container__label__text--semibold"]]: a.type === "semibold"
-      });
-      return /* @__PURE__ */ t.createElement("span", { key: N + a.text, className: W }, a.text);
-    })
-  );
-  return /* @__PURE__ */ t.createElement("div", { className: B, "data-testid": A, "data-analyticsid": M.Toggle }, /* @__PURE__ */ t.createElement("div", { className: D }, l === "left" && /* @__PURE__ */ t.createElement(t.Fragment, null, I(), k()), l === "right" && /* @__PURE__ */ t.createElement(t.Fragment, null, k(), I())), d && /* @__PURE__ */ t.createElement("div", { id: E, className: F }, d));
-};
-export {
-  G as ToggleOnColor,
-  z as TogglePosition,
-  P as default
-};
-//# sourceMappingURL=Toggle.js.map

package/components/Toggle/Toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'framer-motion';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container']);\n\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\n        id={inputId}\n        type=\"checkbox\"\n        checked={checkedState}\n        onChange={handleChange}\n        className={styles['toggle-container__input']}\n        aria-label={label.map(l => l.text).join(' ')}\n        aria-describedby={subLabel ? subLabelId : undefined}\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\n        {label.map(labelText => {\n          const labelClassNames = classNames({\n            [styles['toggle-container__label__text--semibold']]: labelText.type === 'semibold',\n          });\n\n          return (\n            <span key={labelId + labelText.text} className={labelClassNames}>\n              {labelText.text}\n            </span>\n          );\n        })}\n      </span>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\n        {togglePosition === TogglePosition.left && (\n          <>\n            {renderToggle()}\n            {renderLabelText()}\n          </>\n        )}\n        {togglePosition === TogglePosition.right && (\n          <>\n            {renderLabelText()}\n            {renderToggle()}\n          </>\n        )}\n      </div>\n      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor","Toggle","checked","label","onChange","onColor","subLabel","togglePosition","testId","checkedState","setCheckedState","useState","showToggleAnimation","setShowToggleAnimation","scope","animate","useAnimate","inputId","useUuid","toggleId","toggleDotId","labelId","subLabelId","refObject","isHovered","isActive","usePseudoClasses","showHoveredStyling","isOnWhite","useEffect","timer","getBackgroundColor","handleChange","event","toggleContainerClassNames","classNames","styles","toggleRowClassNames","subLabelClassNames","toggleClassNames","toggleDotClassNames","renderToggle","React","l","renderLabelText","labelText","labelClassNames","AnalyticsId"],"mappings":"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"}