@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/components/Tabs/Tab.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+export interface TabProps {
+    /** Sets the tab panel content */
+    children?: React.ReactNode;
+    /** Optional icon on the tab */
+    icon?: SvgIcon | IconName;
+    /** Called when tab is selected */
+    onTabClick?: (index: number) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Title on the tab */
+    title?: string;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/lib/components/Tabs/TabList/TabChevron.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface TabChevronProps {
+    direction: 'left' | 'right';
+    onClick: () => void;
+    backgroundColor?: string;
+    ariaLabel?: string;
+}
+declare const TabChevron: React.FC<TabChevronProps>;
+export default TabChevron;

package/lib/components/Tabs/TabList/TabItem.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { TabProps } from '../Tab';
+import { TabsColors } from '../Tabs';
+interface TabItemProps {
+    tabProps: TabProps;
+    index: number;
+    color: TabsColors;
+    selectedTab: number;
+    tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;
+    tabListVisible: boolean;
+    onTabListClick: (index: number) => void;
+}
+declare const TabItem: React.FC<TabItemProps>;
+export default TabItem;

package/lib/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TabsColors, TabsOnColor } from '../Tabs';
+interface TabListProps {
+    children: React.ReactNode;
+    onTabListClick: (index: number) => void;
+    selectedTab: number;
+    color: TabsColors;
+    onColor: TabsOnColor;
+    ariaLabelRightButton?: string;
+    ariaLabelLeftButton?: string;
+}
+declare const TabList: React.FC<TabListProps>;
+export default TabList;

package/lib/components/Tabs/TabList/index.d.ts

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

package/lib/components/Tabs/TabList/index.js

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

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

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

package/lib/components/Tabs/TabPanel/TabPanel.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TabsColors } from '../Tabs';
+interface TabPanelProps {
+    children?: React.ReactNode;
+    color?: TabsColors;
+    isFirst?: boolean;
+    style?: React.CSSProperties;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

package/lib/components/Tabs/TabPanel/index.d.ts

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

package/lib/components/Tabs/TabPanel/index.js

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

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

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

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { default as Tab } from './Tab';
+import { HNDesignsystemTabs } from '../../resources/Resources';
+import { PaletteNames } from '../../theme/palette';
+export type { TabProps } from './Tab';
+export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
+export type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';
+export interface TabsProps {
+    children?: React.ReactNode;
+    /** Controlled state for Tabs component */
+    activeTab?: number;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the color of the tabs. Default: white */
+    color?: TabsColors;
+    /** Sets wether the component should use the container-breakout class. Default: true */
+    containerBreakout?: boolean;
+    /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */
+    onColor?: TabsOnColor;
+    /** Whether the tab list should be sticky */
+    sticky?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** @deprecated Sets aria label on the "scroll to the right" button in TabList */
+    ariaLabelRightButton?: string;
+    /** @deprecated Sets aria label on the "scroll to the left" button in TabList */
+    ariaLabelLeftButton?: string;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemTabs>;
+    /** Overrides the default z-index of the tabs header */
+    zIndex?: number;
+}
+export declare const TabsRoot: React.FC<TabsProps>;
+type TabsComponent = typeof TabsRoot & {
+    Tab: typeof Tab;
+};
+declare const Tabs: TabsComponent;
+export default Tabs;

package/lib/components/Tabs/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Tabs/index.d.ts

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

package/lib/components/Tabs/index.js

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useState, useRef } from "react";
+import classNames from "classnames";
+import { LanguageLocales } from "../../constants.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 { useLanguage } from "../../utils/language.js";
+import styles from "./styles.module.scss";
+const ariaLabelRightButton$1 = "Scroll right";
+const ariaLabelLeftButton$1 = "Scroll left";
+const enGB = {
+  ariaLabelRightButton: ariaLabelRightButton$1,
+  ariaLabelLeftButton: ariaLabelLeftButton$1
+};
+const ariaLabelRightButton = "Scroll til høyre";
+const ariaLabelLeftButton = "Scroll til venstre";
+const nbNO = {
+  ariaLabelRightButton,
+  ariaLabelLeftButton
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+const TabsRoot = ({
+  activeTab,
+  children,
+  className,
+  color = "white",
+  containerBreakout = true,
+  onColor = "onwhite",
+  sticky = true,
+  testId,
+  ariaLabelRightButton: ariaLabelRightButton2,
+  ariaLabelLeftButton: ariaLabelLeftButton2,
+  resources,
+  zIndex
+}) => {
+  const isControlled = activeTab !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState(0);
+  const tabsRef = useRef(null);
+  const tabPanelRef = useRef(null);
+  const tabListRef = useRef(null);
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    ariaLabelRightButton: ariaLabelRightButton2 || (resources == null ? void 0 : resources.ariaLabelRightButton) || defaultResources.ariaLabelRightButton,
+    ariaLabelLeftButton: ariaLabelLeftButton2 || (resources == null ? void 0 : resources.ariaLabelLeftButton) || defaultResources.ariaLabelLeftButton
+  };
+  let onColorUsed = "onwhite";
+  if (color === "white") {
+    onColorUsed = onColor;
+  }
+  const onValueChange = (newValue) => {
+    if (!isControlled) {
+      setUncontrolledValue(newValue);
+    }
+  };
+  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(className, containerBreakout && designsystemlayout["container-breakout"]), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tabListRef,
+        className: classNames(styles["tab-list-wrapper"], {
+          [styles["tab-list-wrapper--sticky"]]: sticky
+        }),
+        style: {
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            TabList,
+            {
+              onTabListClick: (index) => onValueChange(index),
+              selectedTab: activeTabIndex,
+              color,
+              onColor: onColorUsed,
+              ariaLabelLeftButton: mergedResources.ariaLabelLeftButton,
+              ariaLabelRightButton: mergedResources.ariaLabelRightButton,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["panel-wrapper"], styles[`panel-wrapper--${color}`]) })
+        ]
+      }
+    ),
+    /* @__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;
+TabsRoot.displayName = "Tabs";
+Tabs.displayName = "Tabs";
+Tabs.Tab = Tab;
+Tabs.Tab.displayName = "Tabs.Tab";
+export {
+  TabsRoot,
+  Tabs as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\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  /** @deprecated Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** @deprecated Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const 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  resources,\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  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelRightButton: ariaLabelRightButton || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,\n    ariaLabelLeftButton: ariaLabelLeftButton || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton,\n  };\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={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.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;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["ariaLabelRightButton","ariaLabelLeftButton","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,eAAe,CAAC,aAAkD;AAC7E,UAAQ,UAAA;AAAA,IACN,KAAK,gBAAgB;AACnB,aAAO;AAAA,IACT,KAAK,gBAAgB;AAAA,IACrB;AACE,aAAO;AAAA,EAAA;AAEb;ACiCO,MAAM,WAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA,sBAAAA;AAAA,EACA,qBAAAC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,EAAE,SAAA,IAAa,YAA6B,gBAAgB,SAAS;AAC3E,QAAM,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAAsC;AAAA,IAC1C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,sBAAsBD,0BAAwB,uCAAW,yBAAwB,iBAAiB;AAAA,IAClG,qBAAqBC,yBAAuB,uCAAW,wBAAuB,iBAAiB;AAAA,EAAA;AAGjG,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACrB,kBAAc;AAAA,EAChB;AAEA,QAAM,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,iBAAiB,eAAe,YAAY;AAElD,SACE,qBAAC,OAAA,EAAI,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,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT,qBAAqB,gBAAgB;AAAA,cACrC,sBAAsB,gBAAgB;AAAA,cAErC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1F,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAA,EAAS,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAAC,eAAM,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAAA,CAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/lib/components/Tabs/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemTabs } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemTabs;

package/lib/components/Tag/Tag.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+export declare enum TagSize {
+    medium = "medium",
+    large = "large"
+}
+export declare enum TagVariant {
+    normal = "normal",
+    oncolor = "oncolor",
+    emphasised = "emphasised"
+}
+export type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
+export interface TagProps {
+    /** Sets the text of the tag */
+    children: string;
+    /** Sets the size of the tag. Default: medium */
+    size?: keyof typeof TagSize;
+    /** Sets the background of the tag. Default: blueberry */
+    color?: TagColors;
+    /** Adds an icon to the tag. */
+    svgIcon?: SvgIcon | IconName;
+    variant?: keyof typeof TagVariant;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/lib/components/Tag/Tag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Tag/index.d.ts

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

package/lib/components/Tag/index.js

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

package/lib/components/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\n  });\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagVariant","cn"],"mappings":";;;;;;;AAYO,IAAK,4BAAAA,aAAL;AACLA,WAAA,QAAA,IAAS;AACTA,WAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAKL,IAAK,+BAAAC,gBAAL;AACLA,cAAA,QAAA,IAAS;AACTA,cAAA,SAAA,IAAU;AACVA,cAAA,YAAA,IAAa;AAHH,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAuBZ,MAAM,MAA0B,CAAA,UAAS;AACvC,QAAM,EAAE,UAAU,OAAO,UAAgB,QAAQ,aAAa,SAAS,UAAU,UAAU,OAAA,IAAW;AAEtG,QAAM,aAAaC,WAAG,OAAO,KAAK,OAAO,QAAQ,IAAI,EAAE,GAAG,OAAO,QAAQ,KAAK,EAAE,GAAG;AAAA,IACjF,CAAC,OAAO,eAAe,CAAC,GAAG;AAAA,IAC3B,CAAC,OAAO,iBAAiB,CAAC,GAAG,WAAW;AAAA;AAAA,EAAA,CACzC;AAED,SACE,qBAAC,UAAK,WAAW,YAAY,eAAa,QAAQ,oBAAkB,YAAY,KAC7E,UAAA;AAAA,IAAA,YACE,OAAO,YAAY,WAClB,oBAAC,YAAS,UAAU,SAAS,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAA,CAAW,IAEjH,oBAAC,MAAA,EAAK,SAAkB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAA,CAAW;AAAA,IAE/G;AAAA,EAAA,GACH;AAEJ;"}

package/lib/components/TagList/TagList.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface TagListPropsProps {
+    children?: React.ReactNode;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const TagList: React.FC<TagListPropsProps>;
+export default TagList;

package/lib/components/TagList/TagList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/TagList/index.d.ts

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

package/lib/components/TagList/index.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+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__default.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: styles["tag-list__item"], children: child })) });
+};
+export {
+  TagList as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/TagList/index.js.map

@@ -0,0 +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":["React"],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AACrE,SACE,oBAAC,MAAA,EAAG,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAC5B,oBAAC,MAAA,EAAG,WAAW,OAAO,gBAAgB,GAAI,UAAA,MAAA,CAAM,CACjD,EAAA,CACH;AAEJ;"}

package/lib/components/Textarea/Textarea.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { FormOnColor } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+export interface TextareaProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange' | 'value'> {
+    /** max character limit in textarea  */
+    maxCharacters?: number;
+    /** The text is displayed in the end of the text-counter */
+    maxText?: string;
+    /** Width of textarea in characters (approximate) */
+    width?: number;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** If true, the component will have a bottom margin. */
+    marginBottom?: boolean;
+    /** If true, the component will be transparent. */
+    transparent?: boolean;
+    /** Changes the visuals of the textarea */
+    onColor?: keyof typeof FormOnColor;
+    /** Label of the input */
+    label?: React.ReactNode;
+    /** id of the textarea */
+    textareaId?: string;
+    /** max rows */
+    maxRows?: number;
+    /** min rows */
+    minRows?: number;
+    /** auto-grows until maxRows */
+    grow?: boolean;
+    /** Activates Error style for the input */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/lib/components/Textarea/Textarea.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Textarea/index.d.ts

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

package/lib/components/Textarea/index.js

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

package/lib/components/Textarea/index.js.map

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

package/lib/components/Tile/Tile.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { TitleTags } from './../Title/Title';
+export type TileVariants = 'normal' | 'compact';
+interface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {
+    children?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /**	Sets the icon to be displayed inside the tile. */
+    icon: React.ReactElement;
+    /**	Sets the title to be displayed inside the tile. */
+    title: React.ReactElement;
+    /** Toggles the highlighted style of the tile. */
+    highlighted?: boolean;
+    /** Sets the description to be displayed inside the tile. */
+    description?: string;
+    /** Sets a fixed max and min width for the tile. */
+    fixed?: boolean;
+    /** Sets the visual variant of the component */
+    variant?: TileVariants;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+interface TileTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    htmlMarkup?: TitleTags;
+    highlighted?: boolean;
+    compact?: boolean;
+}
+export interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {
+    Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+}
+export declare const Tile: TileCompound;
+export default Tile;

package/lib/components/Tile/Tile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Tile/index.d.ts

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

package/lib/components/Tile/index.js

@@ -0,0 +1,83 @@
+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__default.forwardRef((props, ref) => {
+  const { compact, children, className, htmlMarkup = "span", highlighted } = props;
+  const titleClasses = classNames(
+    tileStyles["tile__title"],
+    {
+      [tileStyles["tile__title--highlighted"]]: highlighted,
+      [tileStyles["tile__title--compact"]]: compact
+    },
+    className
+  );
+  const CustomTag = htmlMarkup;
+  return /* @__PURE__ */ jsx(CustomTag, { className: titleClasses, ref, children });
+});
+Title.displayName = "Title";
+const Tile = React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    icon,
+    title,
+    className = "",
+    description,
+    fixed = false,
+    highlighted = false,
+    testId,
+    target,
+    rel,
+    variant = "normal",
+    href,
+    onClick
+  } = props;
+  const { hoverRef, isHovered } = useHover();
+  const breakpoint = useBreakpoint();
+  const mobile = breakpoint < Breakpoint.md;
+  const compact = variant === "compact";
+  const tileClasses = classNames(
+    tileStyles.tile,
+    {
+      [tileStyles["tile--fixed"]]: fixed,
+      [tileStyles["tile--compact"]]: compact,
+      [tileStyles["tile--highlighted"]]: highlighted
+    },
+    className
+  );
+  const tileTitleWrapperClasses = classNames(tileStyles["title-wrapper"], {
+    [tileStyles["title-wrapper--compact"]]: compact
+  });
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref: mergeRefs([ref, hoverRef]),
+      href,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : rel,
+      className: tileClasses,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Tile,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: tileTitleWrapperClasses, children: [
+          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 })
+      ]
+    }
+  );
+});
+Tile.displayName = "Tile";
+Tile.Title = Title;
+export {
+  Tile,
+  Tile as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Tile/index.js.map

@@ -0,0 +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":["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,IAAA;AAAA,IAExC;AAAA,EAAA;AAEF,QAAM,YAAY;AAElB,SACE,oBAAC,WAAA,EAAU,WAAW,cAAc,KACjC,UACH;AAEJ,CAAC;AAED,MAAM,cAAc;AAEb,MAAM,OAAOA,eAAM,WAAyC,CAAC,OAAO,QAAQ;AACjF,QAAM;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,UAAA,IAAc,SAAA;AAChC,QAAM,aAAa,cAAA;AACnB,QAAM,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,IAAA;AAAA,IAErC;AAAA,EAAA;AAEF,QAAM,0BAA0B,WAAW,WAAW,eAAe,GAAG;AAAA,IACtE,CAAC,WAAW,wBAAwB,CAAC,GAAG;AAAA,EAAA,CACzC;AAED,SACE;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,QAAA,qBAAC,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,SAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAAC,WAAW,CAAC,8BAAW,KAAA,EAAE,WAAW,WAAW,mBAAoB,UAAA,YAAA,CAAY;AAAA,QAChF,YAAY,oBAAC,OAAA,EAAI,WAAW,WAAW,gBAAiB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,QAAQ;"}

package/lib/components/Title/Title.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+export type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';
+export interface TitleProps {
+    children: React.ReactNode;
+    /** Gives a unique id to the title */
+    id?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds top and bottom margin in rem. */
+    margin?: number | TitleMargin;
+    /** Changes the underlying element of the title. */
+    htmlMarkup?: TitleTags;
+    /** Changes the appearance of the title. */
+    appearance?: TitleAppearances;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface TitleMargin {
+    marginTop: number;
+    marginBottom: number;
+}
+export declare const instanceOfTitleMargin: (margin: unknown) => margin is TitleMargin;
+export default Title;

package/lib/components/Title/Title.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Title/index.d.ts

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