@helsenorge/designsystem-react 14.7.3 → 15.0.0-beta.0

package/lib/FormLayout.js

@@ -1,17 +1,20 @@
-import { i as FormSize, n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId, FormSize } from "./constants.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormLayout/styles.module.scss";
-let FormLayoutColumns = /* @__PURE__ */ function(FormLayoutColumns$1) {
-	FormLayoutColumns$1["one"] = "one";
-	FormLayoutColumns$1["two"] = "two";
-	FormLayoutColumns$1["three"] = "three";
-	FormLayoutColumns$1["four"] = "four";
-	FormLayoutColumns$1["five"] = "five";
-	return FormLayoutColumns$1;
+//#region src/components/FormLayout/constants.ts
+var FormLayoutColumns = /* @__PURE__ */ function(FormLayoutColumns) {
+	FormLayoutColumns["one"] = "one";
+	FormLayoutColumns["two"] = "two";
+	FormLayoutColumns["three"] = "three";
+	FormLayoutColumns["four"] = "four";
+	FormLayoutColumns["five"] = "five";
+	return FormLayoutColumns;
 }({});
-const FormLayout = (props) => {
+//#endregion
+//#region src/components/FormLayout/FormLayout.tsx
+var FormLayout = (props) => {
 	const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;
 	const cssVariable = { "--min-col-width": `${colMinWidth}px` };
 	const formLayoutContainerClasses = classNames(formGroupStyles["form-layout-container"], { [formGroupStyles["form-layout-container--large"]]: size === FormSize.large }, className);
@@ -36,7 +39,10 @@ const FormLayout = (props) => {
 	});
 };
 FormLayout.displayName = "FormLayout";
-var FormLayout_default$1 = FormLayout;
-export { FormLayout as n, FormLayoutColumns as r, FormLayout_default$1 as t };
+//#endregion
+//#region src/components/FormLayout/index.ts
+var FormLayout_default = FormLayout;
+//#endregion
+export { FormLayout as n, FormLayoutColumns as r, FormLayout_default as t };
 
 //# sourceMappingURL=FormLayout.js.map

package/lib/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","names":["FormLayout: React.FC<FormLayoutProps>"],"sources":["../src/components/FormLayout/constants.ts","../src/components/FormLayout/FormLayout.tsx","../src/components/FormLayout/index.ts"],"sourcesContent":["export enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormLayoutColumns } from './constants';\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n  /** Ref passed to the root div */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n};\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n","import FormLayout from './FormLayout';\nexport { FormLayoutColumns } from './constants';\nexport * from './FormLayout';\nexport default FormLayout;\n"],"mappings":";;;;;AAAA,IAAY,oBAAA,yBAAA,qBAAL;AACL,qBAAA,SAAA;AACA,qBAAA,SAAA;AACA,qBAAA,WAAA;AACA,qBAAA,UAAA;AACA,qBAAA,UAAA;;;ACuBF,MAAaA,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,KAAK;CAC7D,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB,GACG,gBAAgB,kCAAkC,SAAS,SAAS,OACtE,EACD,UACD;CACD,MAAM,yBAAyB,WAAW,gBAAgB,sBAAsB;GAC7E,gBAAgB,4BAA4B,YAAY,kBAAkB;GAC1E,gBAAgB,8BAA8B,YAAY,kBAAkB;GAC5E,gBAAgB,6BAA6B,YAAY,kBAAkB;GAC3E,gBAAgB,6BAA6B,YAAY,kBAAkB;EAC7E,CAAC;AAEF,QACE,oBAAC,OAAA;EACC,eAAa,MAAM;EACnB,oBAAkB,YAAY;EAC9B,OAAO;EACP,WAAW;EACN;YAEJ,MAAM,SAAS,IAAI,MAAM,WAAW,OAAwB,UAAkB;AAC7E,UAAO,oBAAC,OAAA;IAAI,WAAW;cAAyB,YAAY,UAAU,OAAO,MAAM,GAAG;KAAY;IAClG;GACE;;AAIV,WAAW,cAAc;AC1DzB,IAAA,uBD4De"}
+{"version":3,"file":"FormLayout.js","names":[],"sources":["../src/components/FormLayout/constants.ts","../src/components/FormLayout/FormLayout.tsx","../src/components/FormLayout/index.ts"],"sourcesContent":["export enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormLayoutColumns } from './constants';\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n  /** Ref passed to the root div */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.FormLayout}\n      style={cssVariable}\n      className={formLayoutContainerClasses}\n      ref={ref}\n    >\n      {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n      })}\n    </div>\n  );\n};\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n","import FormLayout from './FormLayout';\nexport { FormLayoutColumns } from './constants';\nexport * from './FormLayout';\nexport default FormLayout;\n"],"mappings":";;;;;;AAAA,IAAY,oBAAL,yBAAA,mBAAA;CACL,kBAAA,SAAM;CACN,kBAAA,SAAM;CACN,kBAAA,WAAQ;CACR,kBAAA,UAAO;CACP,kBAAA,UAAO;;KACR;;;ACsBD,IAAa,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,KAAK;CAC7D,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB,GACG,gBAAgB,kCAAkC,SAAS,SAAS,OACtE,EACD,UACD;CACD,MAAM,yBAAyB,WAAW,gBAAgB,sBAAsB;GAC7E,gBAAgB,4BAA4B,YAAY,kBAAkB;GAC1E,gBAAgB,8BAA8B,YAAY,kBAAkB;GAC5E,gBAAgB,6BAA6B,YAAY,kBAAkB;GAC3E,gBAAgB,6BAA6B,YAAY,kBAAkB;EAC7E,CAAC;CAEF,OACE,oBAAC,OAAD;EACE,eAAa,MAAM;EACnB,oBAAkB,YAAY;EAC9B,OAAO;EACP,WAAW;EACN;YAEJ,MAAM,SAAS,IAAI,MAAM,WAAW,OAAwB,UAAkB;GAC7E,OAAO,oBAAC,OAAD;IAAK,WAAW;cAAyB,YAAY,UAAU,OAAO,MAAM,GAAG;IAAY,CAAA;IAClG;EACE,CAAA;;AAIV,WAAW,cAAc;;;AC1DzB,IAAA,qBAAe"}

package/lib/HN.Designsystem.Dropdown.nb-NO.js

@@ -1,5 +1,6 @@
 var HN_Designsystem_Dropdown_en_GB_default = { closeText: "Close" };
 var HN_Designsystem_Dropdown_nb_NO_default = { closeText: "Lukk" };
+//#endregion
 export { HN_Designsystem_Dropdown_en_GB_default as n, HN_Designsystem_Dropdown_nb_NO_default as t };
 
 //# sourceMappingURL=HN.Designsystem.Dropdown.nb-NO.js.map

package/lib/HelpDetails.js

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import React, { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpDetails/styles.module.scss";
+//#region src/components/HelpDetails/HelpDetails.tsx
 var BUBBLE_WIDTH_OFFSET = 26;
 var BUBBLE_Y_OFFSET = 1;
 var HelpDetails = (props) => {
@@ -49,7 +50,7 @@ var HelpDetails = (props) => {
 	});
 };
 HelpDetails.displayName = "HelpDetails";
-var HelpDetails_default = HelpDetails;
-export { HelpDetails_default as t };
+//#endregion
+export { HelpDetails as t };
 
 //# sourceMappingURL=HelpDetails.js.map

package/lib/HelpDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpDetails.js","names":["HelpDetails: React.FC<HelpDetailsProps>"],"sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement | null>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\nconst HelpDetails: React.FC<HelpDetailsProps> = props => {\n  const { children, controllerRef, testId, ref } = props;\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n          setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n};\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"mappings":";;;;;AAOA,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAYxB,IAAMA,eAA0C,UAAS;CACvD,MAAM,EAAE,UAAU,eAAe,QAAQ,QAAQ;CACjD,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,KAAK;CAC/E,MAAM,CAAC,mBAAmB,wBAAwB,UAAkB;CAEpE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,kBAAkB;GACzB,iBAAiB,MAAM,EAAE,SAAS,UAAU,CAAC;GAC7C,KAAK,EACH,MAAM,EAAE,SAAS;AAEf,sBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,EAAE;IAGhE,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;AAGjD,yBAFkB,SAAS,IACE,mBAAmB,gBAClB;MAEjC,CAAC;GACH;EACD,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,SAC3B;EACF,CAAC;CAEF,MAAM,qBAAqB,WACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,4BACzD;CACD,MAAM,iBAAiB,WAAW,gBAAgB,OAAO,mCAAmC,OAAO,qCAAqC;AAExI,QACE,qBAAC,OAAA;EACC,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,GAAW;aAE7F,oBAAC,OAAA;GAAI,OAAO;GAAgB,KAAK,KAAK;aACnC,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAA;IACC,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;KACb;IAEA,EACN,oBAAC,OAAA;GAAI,WAAW;GAAiB;IAAe,CAAA;GAC5C;;AAIV,YAAY,cAAc;AAE1B,IAAA,sBAAe"}
+{"version":3,"file":"HelpDetails.js","names":[],"sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement | null>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\nconst HelpDetails: React.FC<HelpDetailsProps> = props => {\n  const { children, controllerRef, testId, ref } = props;\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n          setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n};\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"mappings":";;;;;;AAOA,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAYxB,IAAM,eAA0C,UAAS;CACvD,MAAM,EAAE,UAAU,eAAe,QAAQ,QAAQ;CACjD,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,KAAK;CAC/E,MAAM,CAAC,mBAAmB,wBAAwB,UAAkB;CAEpE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,kBAAkB;GACzB,iBAAiB,MAAM,EAAE,SAAS,UAAU,CAAC;GAC7C,KAAK,EACH,MAAM,EAAE,SAAS;IAEf,kBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,EAAE;IAGhE,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;IAGjD,qBAFkB,SAAS,IACE,mBAAmB,gBAClB;MAEjC,CAAC;GACH;EACD,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,SAC3B;EACF,CAAC;CAEF,MAAM,qBAAqB,WACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,4BACzD;CACD,MAAM,iBAAiB,WAAW,gBAAgB,OAAO,mCAAmC,OAAO,qCAAqC;CAExI,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,GAAW;YAJ/F,CAME,oBAAC,OAAD;GAAK,OAAO;GAAgB,KAAK,KAAK;aACnC,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAD;IACE,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;IACb,CAAA;GAEA,CAAA,EACN,oBAAC,OAAD;GAAK,WAAW;GAAiB;GAAe,CAAA,CAC5C;;;AAIV,YAAY,cAAc"}

package/lib/HelpTriggerIcon.js

@@ -1,12 +1,13 @@
-import { n as AnalyticsId } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
-import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
-import { n as getAriaLabelAttributes } from "./accessibility.js";
+import { AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
 import classNames from "classnames";
 import { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerIcon/styles.module.scss";
+//#region src/components/HelpTriggerIcon/HelpSign.tsx
 var HelpSign = ({ color, weight, size }) => {
 	const isMobile = useIsMobileBreakpoint();
 	const uniqueId = useId();
@@ -132,21 +133,22 @@ var HelpSign = ({ color, weight, size }) => {
 		children: paths
 	});
 };
-var HelpSign_default = HelpSign;
+//#endregion
+//#region src/components/HelpTriggerIcon/HelpTriggerIcon.tsx
 var getIconColor = (hover, weight) => {
 	if (weight === "normal") return hover ? "var(--color-help-graphics-verydark)" : "var(--color-help-graphics-normal)";
 };
 var HelpTriggerIcon = (props) => {
 	return /* @__PURE__ */ jsx(HelpTriggerIconInternal, { ...props });
 };
-const HelpTriggerIconInternal = (props) => {
+var HelpTriggerIconInternal = (props) => {
 	const { ariaLabel, ariaLabelledById, className, htmlMarkup = "button", isHovered = false, size = "medium", testId, weight = "normal", ref, ...buttonRest } = props;
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledById
 	});
 	const { refObject, isHovered: interalIsHovered } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
-	const helpIcon = /* @__PURE__ */ jsx(HelpSign_default, {
+	const helpIcon = /* @__PURE__ */ jsx(HelpSign, {
 		color: getIconColor(interalIsHovered || isHovered, weight),
 		size,
 		weight
@@ -175,7 +177,10 @@ const HelpTriggerIconInternal = (props) => {
 };
 HelpTriggerIcon.displayName = "HelpTriggerIcon";
 HelpTriggerIconInternal.displayName = "HelpTriggerIconInternal";
-var HelpTriggerIcon_default$1 = HelpTriggerIcon;
-export { HelpTriggerIconInternal as n, HelpTriggerIcon_default$1 as t };
+//#endregion
+//#region src/components/HelpTriggerIcon/index.ts
+var HelpTriggerIcon_default = HelpTriggerIcon;
+//#endregion
+export { HelpTriggerIconInternal as n, HelpTriggerIcon_default as t };
 
 //# sourceMappingURL=HelpTriggerIcon.js.map

package/lib/HelpTriggerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>","HelpTriggerIcon: React.FC<HelpTriggerIconProps>","HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import { useId } from 'react';\n\nimport type { HelpTriggerWeights, HelpTriggerIconSizes } from '../HelpTriggerIcon';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n  size?: HelpTriggerIconSizes;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight, size }: HelpSignProps): React.ReactElement => {\n  const isMobile = useIsMobileBreakpoint();\n  const uniqueId = useId();\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const maskIdMobile = `${uniqueId}-mask-mobile`;\n\n  const normalSizeNormalWeight = (\n    <>\n      <defs>\n        <clipPath id={uniqueId} clipPathUnits=\"userSpaceOnUse\">\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n          />\n        </clipPath>\n      </defs>\n      <path\n        d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n        fill={color}\n        clipPath={`url(#${uniqueId})`}\n      />\n      <path\n        d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n        fill={color}\n      />\n      <path\n        d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n        fill={color}\n      />\n    </>\n  );\n  const normalSizeStrongWeight = (\n    <>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n      />\n      <path\n        d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n        fill=\"white\"\n      />\n    </>\n  );\n\n  const xlSizeNormalWeight = (\n    <>\n      <mask id={maskIdNormal} fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M16.0006 0C7.1783 0 0 7.17704 0 15.9994C0 24.8217 7.1783 32 16.0006 32C24.823 32 32 24.8217 32 15.9994C32 7.17704 24.823 0 16.0006 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M16.0006 0V-2.5C5.79784 -2.5 -2.5 5.79607 -2.5 15.9994H0H2.5C2.5 8.55801 8.55876 2.5 16.0006 2.5V0ZM0 15.9994H-2.5C-2.5 26.2024 5.79759 34.5 16.0006 34.5V32V29.5C8.55901 29.5 2.5 23.441 2.5 15.9994H0ZM16.0006 32V34.5C26.2039 34.5 34.5 26.2022 34.5 15.9994H32H29.5C29.5 23.4412 23.442 29.5 16.0006 29.5V32ZM32 15.9994H34.5C34.5 5.79633 26.2037 -2.5 16.0006 -2.5V0V2.5C23.4422 2.5 29.5 8.55775 29.5 15.9994H32Z\"\n        fill={color}\n        mask={`url(#${maskIdNormal})`}\n      />\n      <path\n        d=\"M17.4163 22.5791C17.346 21.8763 16.7971 21.2926 16.1229 21.2178L15.9768 21.21C15.1652 21.21 14.527 21.9087 14.527 22.7314L14.5345 22.8838C14.6074 23.6343 15.2122 24.2295 15.9768 24.2295L16.1229 24.2217C16.8485 24.1441 17.4235 23.499 17.4238 22.7314L17.4163 22.5791ZM20.8 12.2422C20.7999 9.96839 19.0841 7.77051 15.8775 7.77051C12.6128 7.77074 11.0003 10.2117 11 12.4473L11.0084 12.7139C11.0234 12.9568 11.06 13.1939 11.1143 13.4111L13.4088 13.5801C13.3619 13.3918 13.3316 13.1536 13.3179 12.9258L13.3095 12.6514C13.3097 11.9825 13.5283 11.3114 13.9632 10.8047C14.4018 10.2939 15.0496 9.96302 15.8775 9.96289L16.1763 9.97559C16.8509 10.0367 17.3678 10.3057 17.7272 10.6973L17.8714 10.8721C18.1839 11.2942 18.3369 11.8198 18.3369 12.3564L18.3331 12.5059C18.2951 13.2469 17.9677 13.8808 17.272 14.4082L17.273 14.4092L17.2692 14.4131C17.266 14.4157 17.26 14.4194 17.2533 14.4248C17.2399 14.4357 17.22 14.4522 17.1943 14.4736C17.1425 14.5169 17.0672 14.5812 16.9761 14.6631C16.7936 14.8271 16.5476 15.0619 16.2933 15.3438C15.8449 15.8409 15.4379 16.4338 15.2351 16.9404L15.1611 17.1523C15.0753 17.4427 15.035 17.615 15.014 17.793C14.9926 17.9752 14.9906 18.1713 14.9906 18.5146V19.2705H17.036C17.0332 18.9144 17.0171 18.8806 17.0782 18.4756L17.1081 18.3047C17.1447 18.1284 17.1994 17.9383 17.2702 17.7568C17.3585 17.5304 17.4807 17.301 17.6401 17.1289C17.6424 17.1254 17.6454 17.1217 17.6485 17.1172C17.6585 17.1027 17.6727 17.0824 17.6916 17.0576C17.7294 17.0082 17.7859 16.9393 17.8649 16.8545C18.0232 16.6846 18.2716 16.451 18.6413 16.1826C18.9712 15.9431 19.517 15.3982 19.9787 14.6826C20.4117 14.0113 20.7551 13.215 20.7963 12.4043L20.8 12.2422Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  const xlSizeOnMobileNormalWeight = (\n    <>\n      <mask id={maskIdMobile} fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12.0005 0C5.38373 0 0 5.38278 0 11.9995C0 18.6163 5.38373 24 12.0005 24C18.6172 24 24 18.6163 24 11.9995C24 5.38278 18.6172 0 12.0005 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M12.0005 0V-2.2C4.16892 -2.2 -2.2 4.16753 -2.2 11.9995H0H2.2C2.2 6.59803 6.59853 2.2 12.0005 2.2V0ZM0 11.9995H-2.2C-2.2 19.8313 4.1687 26.2 12.0005 26.2V24V21.8C6.59875 21.8 2.2 17.4012 2.2 11.9995H0ZM12.0005 24V26.2C19.8325 26.2 26.2 19.8311 26.2 11.9995H24H21.8C21.8 17.4015 17.402 21.8 12.0005 21.8V24ZM24 11.9995H26.2C26.2 4.16775 19.8322 -2.2 12.0005 -2.2V0V2.2C17.4022 2.2 21.8 6.59781 21.8 11.9995H24Z\"\n        fill={color}\n        mask={`url(#${maskIdMobile})`}\n      />\n      <path\n        d=\"M11.9229 5.28027C14.5275 5.28027 15.96 7.00613 15.96 8.82168C15.9599 10.2243 14.7509 11.5413 14.1916 11.9307C13.6323 12.3201 13.451 12.5998 13.451 12.5998C13.2342 12.8105 13.0943 13.2232 13.0467 13.5256C12.9982 13.8341 13.0174 13.8161 13.0174 14.1596V14.2803H11.0416V13.5256C11.0416 13.0154 11.0469 12.8918 11.1834 12.4486C11.322 11.9989 11.7025 11.4537 12.1115 11.0189C12.5205 10.5842 12.9014 10.2971 12.9014 10.2971C13.4382 9.90771 13.6584 9.44814 13.6584 8.90723C13.6584 8.48881 13.5167 8.08818 13.2342 7.79277C12.953 7.49879 12.5222 7.29941 11.9229 7.29941C10.7307 7.2996 10.1019 8.20752 10.1018 9.12871C10.1018 9.38096 10.137 9.68958 10.1979 9.85879L10.26 10.0322L8.13535 9.88223L8.05098 9.87637L8.02871 9.79551C7.95745 9.54366 7.9209 9.25834 7.9209 8.9752C7.92117 7.20416 9.25715 5.28045 11.9229 5.28027Z\"\n        fill={color}\n      />\n      <path\n        d=\"M12.0002 15.3596C12.7231 15.3596 13.3197 15.9718 13.3197 16.6885C13.3195 17.407 12.7229 17.9997 12.0002 17.9998C11.2583 17.9998 10.6797 17.407 10.6795 16.6885C10.6795 15.9717 11.2581 15.3596 12.0002 15.3596Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  function getPaths(): React.ReactNode {\n    if (size === 'xlarge') {\n      if (weight === 'normal') {\n        return isMobile ? xlSizeOnMobileNormalWeight : xlSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    } else {\n      if (weight === 'normal') {\n        return normalSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    }\n    return null;\n  }\n  const paths = getPaths();\n\n  function getSizesAndViewbox(): { widthAndHeight: number; viewBox: string } {\n    if (size === 'xlarge') {\n      if (isMobile) {\n        return { widthAndHeight: 24, viewBox: '0 0 24 24' };\n      }\n      return { widthAndHeight: 32, viewBox: '0 0 32 32' };\n    }\n    return { widthAndHeight: 20, viewBox: '0 0 20 20' };\n  }\n  const { widthAndHeight, viewBox } = getSizesAndViewbox();\n\n  return (\n    <svg\n      fill=\"none\"\n      width={widthAndHeight}\n      height={widthAndHeight}\n      overflow=\"visible\"\n      role={'presentation'}\n      viewBox={viewBox}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon: React.FC<HelpTriggerIconProps> = props => {\n  return <HelpTriggerIconInternal {...props} />;\n};\n\nexport const HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    className,\n    htmlMarkup = 'button',\n    isHovered = false,\n    size = 'medium',\n    testId,\n    weight = 'normal',\n    ref,\n    ...buttonRest\n  } = props;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} size={size} weight={weight} />;\n  const isButton = htmlMarkup === 'button';\n  const iconClasses = classNames(\n    styles['help-trigger-icon'],\n    {\n      [styles['help-trigger-icon--strong']]: weight === 'strong',\n      [styles['help-trigger-icon--is-button']]: isButton,\n    },\n    styles[`help-trigger-icon--${size}`],\n    className\n  );\n\n  if (isButton) {\n    return (\n      <button\n        {...ariaLabelAttributes}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerIcon}\n        className={iconClasses}\n        ref={mergeRefs([refObject, ref])}\n        {...buttonRest}\n      >\n        {helpIcon}\n      </button>\n    );\n  }\n\n  return (\n    <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n      {helpIcon}\n    </span>\n  );\n};\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":"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"}
+{"version":3,"file":"HelpTriggerIcon.js","names":[],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import { useId } from 'react';\n\nimport type { HelpTriggerWeights, HelpTriggerIconSizes } from '../HelpTriggerIcon';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n  size?: HelpTriggerIconSizes;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight, size }: HelpSignProps): React.ReactElement => {\n  const isMobile = useIsMobileBreakpoint();\n  const uniqueId = useId();\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const maskIdMobile = `${uniqueId}-mask-mobile`;\n\n  const normalSizeNormalWeight = (\n    <>\n      <defs>\n        <clipPath id={uniqueId} clipPathUnits=\"userSpaceOnUse\">\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n          />\n        </clipPath>\n      </defs>\n      <path\n        d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n        fill={color}\n        clipPath={`url(#${uniqueId})`}\n      />\n      <path\n        d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n        fill={color}\n      />\n      <path\n        d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n        fill={color}\n      />\n    </>\n  );\n  const normalSizeStrongWeight = (\n    <>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n      />\n      <path\n        d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n        fill=\"white\"\n      />\n    </>\n  );\n\n  const xlSizeNormalWeight = (\n    <>\n      <mask id={maskIdNormal} fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M16.0006 0C7.1783 0 0 7.17704 0 15.9994C0 24.8217 7.1783 32 16.0006 32C24.823 32 32 24.8217 32 15.9994C32 7.17704 24.823 0 16.0006 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M16.0006 0V-2.5C5.79784 -2.5 -2.5 5.79607 -2.5 15.9994H0H2.5C2.5 8.55801 8.55876 2.5 16.0006 2.5V0ZM0 15.9994H-2.5C-2.5 26.2024 5.79759 34.5 16.0006 34.5V32V29.5C8.55901 29.5 2.5 23.441 2.5 15.9994H0ZM16.0006 32V34.5C26.2039 34.5 34.5 26.2022 34.5 15.9994H32H29.5C29.5 23.4412 23.442 29.5 16.0006 29.5V32ZM32 15.9994H34.5C34.5 5.79633 26.2037 -2.5 16.0006 -2.5V0V2.5C23.4422 2.5 29.5 8.55775 29.5 15.9994H32Z\"\n        fill={color}\n        mask={`url(#${maskIdNormal})`}\n      />\n      <path\n        d=\"M17.4163 22.5791C17.346 21.8763 16.7971 21.2926 16.1229 21.2178L15.9768 21.21C15.1652 21.21 14.527 21.9087 14.527 22.7314L14.5345 22.8838C14.6074 23.6343 15.2122 24.2295 15.9768 24.2295L16.1229 24.2217C16.8485 24.1441 17.4235 23.499 17.4238 22.7314L17.4163 22.5791ZM20.8 12.2422C20.7999 9.96839 19.0841 7.77051 15.8775 7.77051C12.6128 7.77074 11.0003 10.2117 11 12.4473L11.0084 12.7139C11.0234 12.9568 11.06 13.1939 11.1143 13.4111L13.4088 13.5801C13.3619 13.3918 13.3316 13.1536 13.3179 12.9258L13.3095 12.6514C13.3097 11.9825 13.5283 11.3114 13.9632 10.8047C14.4018 10.2939 15.0496 9.96302 15.8775 9.96289L16.1763 9.97559C16.8509 10.0367 17.3678 10.3057 17.7272 10.6973L17.8714 10.8721C18.1839 11.2942 18.3369 11.8198 18.3369 12.3564L18.3331 12.5059C18.2951 13.2469 17.9677 13.8808 17.272 14.4082L17.273 14.4092L17.2692 14.4131C17.266 14.4157 17.26 14.4194 17.2533 14.4248C17.2399 14.4357 17.22 14.4522 17.1943 14.4736C17.1425 14.5169 17.0672 14.5812 16.9761 14.6631C16.7936 14.8271 16.5476 15.0619 16.2933 15.3438C15.8449 15.8409 15.4379 16.4338 15.2351 16.9404L15.1611 17.1523C15.0753 17.4427 15.035 17.615 15.014 17.793C14.9926 17.9752 14.9906 18.1713 14.9906 18.5146V19.2705H17.036C17.0332 18.9144 17.0171 18.8806 17.0782 18.4756L17.1081 18.3047C17.1447 18.1284 17.1994 17.9383 17.2702 17.7568C17.3585 17.5304 17.4807 17.301 17.6401 17.1289C17.6424 17.1254 17.6454 17.1217 17.6485 17.1172C17.6585 17.1027 17.6727 17.0824 17.6916 17.0576C17.7294 17.0082 17.7859 16.9393 17.8649 16.8545C18.0232 16.6846 18.2716 16.451 18.6413 16.1826C18.9712 15.9431 19.517 15.3982 19.9787 14.6826C20.4117 14.0113 20.7551 13.215 20.7963 12.4043L20.8 12.2422Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  const xlSizeOnMobileNormalWeight = (\n    <>\n      <mask id={maskIdMobile} fill=\"white\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M12.0005 0C5.38373 0 0 5.38278 0 11.9995C0 18.6163 5.38373 24 12.0005 24C18.6172 24 24 18.6163 24 11.9995C24 5.38278 18.6172 0 12.0005 0Z\"\n        />\n      </mask>\n      <path\n        d=\"M12.0005 0V-2.2C4.16892 -2.2 -2.2 4.16753 -2.2 11.9995H0H2.2C2.2 6.59803 6.59853 2.2 12.0005 2.2V0ZM0 11.9995H-2.2C-2.2 19.8313 4.1687 26.2 12.0005 26.2V24V21.8C6.59875 21.8 2.2 17.4012 2.2 11.9995H0ZM12.0005 24V26.2C19.8325 26.2 26.2 19.8311 26.2 11.9995H24H21.8C21.8 17.4015 17.402 21.8 12.0005 21.8V24ZM24 11.9995H26.2C26.2 4.16775 19.8322 -2.2 12.0005 -2.2V0V2.2C17.4022 2.2 21.8 6.59781 21.8 11.9995H24Z\"\n        fill={color}\n        mask={`url(#${maskIdMobile})`}\n      />\n      <path\n        d=\"M11.9229 5.28027C14.5275 5.28027 15.96 7.00613 15.96 8.82168C15.9599 10.2243 14.7509 11.5413 14.1916 11.9307C13.6323 12.3201 13.451 12.5998 13.451 12.5998C13.2342 12.8105 13.0943 13.2232 13.0467 13.5256C12.9982 13.8341 13.0174 13.8161 13.0174 14.1596V14.2803H11.0416V13.5256C11.0416 13.0154 11.0469 12.8918 11.1834 12.4486C11.322 11.9989 11.7025 11.4537 12.1115 11.0189C12.5205 10.5842 12.9014 10.2971 12.9014 10.2971C13.4382 9.90771 13.6584 9.44814 13.6584 8.90723C13.6584 8.48881 13.5167 8.08818 13.2342 7.79277C12.953 7.49879 12.5222 7.29941 11.9229 7.29941C10.7307 7.2996 10.1019 8.20752 10.1018 9.12871C10.1018 9.38096 10.137 9.68958 10.1979 9.85879L10.26 10.0322L8.13535 9.88223L8.05098 9.87637L8.02871 9.79551C7.95745 9.54366 7.9209 9.25834 7.9209 8.9752C7.92117 7.20416 9.25715 5.28045 11.9229 5.28027Z\"\n        fill={color}\n      />\n      <path\n        d=\"M12.0002 15.3596C12.7231 15.3596 13.3197 15.9718 13.3197 16.6885C13.3195 17.407 12.7229 17.9997 12.0002 17.9998C11.2583 17.9998 10.6797 17.407 10.6795 16.6885C10.6795 15.9717 11.2581 15.3596 12.0002 15.3596Z\"\n        fill={color}\n      />\n    </>\n  );\n\n  function getPaths(): React.ReactNode {\n    if (size === 'xlarge') {\n      if (weight === 'normal') {\n        return isMobile ? xlSizeOnMobileNormalWeight : xlSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    } else {\n      if (weight === 'normal') {\n        return normalSizeNormalWeight;\n      } else if (weight === 'strong') {\n        return normalSizeStrongWeight;\n      }\n    }\n    return null;\n  }\n  const paths = getPaths();\n\n  function getSizesAndViewbox(): { widthAndHeight: number; viewBox: string } {\n    if (size === 'xlarge') {\n      if (isMobile) {\n        return { widthAndHeight: 24, viewBox: '0 0 24 24' };\n      }\n      return { widthAndHeight: 32, viewBox: '0 0 32 32' };\n    }\n    return { widthAndHeight: 20, viewBox: '0 0 20 20' };\n  }\n  const { widthAndHeight, viewBox } = getSizesAndViewbox();\n\n  return (\n    <svg\n      fill=\"none\"\n      width={widthAndHeight}\n      height={widthAndHeight}\n      overflow=\"visible\"\n      role={'presentation'}\n      viewBox={viewBox}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon: React.FC<HelpTriggerIconProps> = props => {\n  return <HelpTriggerIconInternal {...props} />;\n};\n\nexport const HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    className,\n    htmlMarkup = 'button',\n    isHovered = false,\n    size = 'medium',\n    testId,\n    weight = 'normal',\n    ref,\n    ...buttonRest\n  } = props;\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n  const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} size={size} weight={weight} />;\n  const isButton = htmlMarkup === 'button';\n  const iconClasses = classNames(\n    styles['help-trigger-icon'],\n    {\n      [styles['help-trigger-icon--strong']]: weight === 'strong',\n      [styles['help-trigger-icon--is-button']]: isButton,\n    },\n    styles[`help-trigger-icon--${size}`],\n    className\n  );\n\n  if (isButton) {\n    return (\n      <button\n        {...ariaLabelAttributes}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerIcon}\n        className={iconClasses}\n        ref={mergeRefs([refObject, ref])}\n        {...buttonRest}\n      >\n        {helpIcon}\n      </button>\n    );\n  }\n\n  return (\n    <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n      {helpIcon}\n    </span>\n  );\n};\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":"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"}

package/lib/HelpTriggerStandalone.js

@@ -1,12 +1,13 @@
-import { n as AnalyticsId } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
-import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
-import { n as getAriaLabelAttributes } from "./accessibility.js";
+import { AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
 import { n as HelpTriggerIconInternal } from "./HelpTriggerIcon.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerStandalone/styles.module.scss";
+//#region src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx
 var HelpTriggerStandalone = (props) => {
 	const { ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ref, ...rest } = props;
 	const isMobile = useIsMobileBreakpoint();
@@ -37,7 +38,10 @@ var HelpTriggerStandalone = (props) => {
 	});
 };
 HelpTriggerStandalone.displayName = "HelpTriggerStandalone";
-var HelpTriggerStandalone_default$1 = HelpTriggerStandalone;
-export { HelpTriggerStandalone_default$1 as t };
+//#endregion
+//#region src/components/HelpTriggerStandalone/index.ts
+var HelpTriggerStandalone_default = HelpTriggerStandalone;
+//#endregion
+export { HelpTriggerStandalone_default as t };
 
 //# sourceMappingURL=HelpTriggerStandalone.js.map

package/lib/HelpTriggerStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerStandalone.js","names":["HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps>"],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps> = props => {\n  const { ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ref, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n      className={helpTriggerStandaloneStyles}\n      ref={mergeRefs([refObject, ref])}\n      {...ariaLabelAttributes}\n      {...rest}\n    >\n      <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n      <span className={styles['help-trigger-standalone__children']}>{children}</span>\n    </button>\n  );\n};\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;AA2CA,IAAMA,yBAA8D,UAAS;CAC3E,MAAM,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,KAAK,GAAG,SAAS;CACtG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,mBAAmB,IAAI,GAAG,MAAM,KAAK;AAE1G,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;;AAIb,sBAAsB,cAAc;ACjEpC,IAAA,kCDmEe"}
+{"version":3,"file":"HelpTriggerStandalone.js","names":[],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst HelpTriggerStandalone: React.FC<HelpTriggerStandaloneProps> = props => {\n  const { ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ref, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n  const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n      className={helpTriggerStandaloneStyles}\n      ref={mergeRefs([refObject, ref])}\n      {...ariaLabelAttributes}\n      {...rest}\n    >\n      <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n      <span className={styles['help-trigger-standalone__children']}>{children}</span>\n    </button>\n  );\n};\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;;AA2CA,IAAM,yBAA8D,UAAS;CAC3E,MAAM,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,KAAK,GAAG,SAAS;CACtG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CAE1G,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;YARN,CAUE,oBAAC,yBAAD;GAAiC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;GAAa,CAAA,EAC1H,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAuC;GAAgB,CAAA,CACxE;;;AAIb,sBAAsB,cAAc;;;ACjEpC,IAAA,gCAAe"}

package/lib/HighlightPanel.js

@@ -1,11 +1,12 @@
-import { a as IconSize, n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId, IconSize } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
-import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
-import { t as Title_default } from "./Title2.js";
+import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
+import Title_default from "./components/Title/index.js";
 import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HighlightPanel/styles.module.scss";
+//#region src/components/HighlightPanel/HighlightPanel.tsx
 var HighlightPanel = (props) => {
 	const { children, color = "white", testId, svgIcon, htmlMarkup = "div", className, variant = "normal", title, titleHtmlMarkup = "h2" } = props;
 	const breakpoint = useBreakpoint();
@@ -70,7 +71,10 @@ var HighlightPanel = (props) => {
 		children: renderContent()
 	});
 };
-var HighlightPanel_default$1 = HighlightPanel;
-export { HighlightPanel_default$1 as t };
+//#endregion
+//#region src/components/HighlightPanel/index.ts
+var HighlightPanel_default = HighlightPanel;
+//#endregion
+export { HighlightPanel_default as t };
 
 //# sourceMappingURL=HighlightPanel.js.map

package/lib/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","names":["HighlightPanel: React.FC<HighlightPanelProps>"],"sources":["../src/components/HighlightPanel/HighlightPanel.tsx","../src/components/HighlightPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport type HighlightPanelVariants = 'normal' | 'compact';\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Uses the compact styling if set to compact */\n  variant?: HighlightPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    variant = 'normal',\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles.highlightpanel,\n    styles[`highlightpanel--${color}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    className,\n    { [styles['highlightpanel--compact']]: variant === 'compact' }\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance={variant === 'compact' ? 'title6' : 'title4'}>\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      if (variant === 'compact') {\n        return (\n          <>\n            <div className={classNames(styles.highlightpanel__icon, styles['highlightpanel__icon--compact'])}>\n              {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            </div>\n            <div className={(styles.highlightpanel__content, styles['highlightpanel__content--compact'])}>\n              {title && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n              <div className={styles['highlightpanel__content__children--compact']}>{children}</div>\n            </div>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={containerClassName} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n      {renderContent()}\n    </CustomTag>\n  );\n};\n\nexport default HighlightPanel;\n","import HighlightPanel from './HighlightPanel';\nexport * from './HighlightPanel';\nexport default HighlightPanel;\n"],"mappings":";;;;;;;;AA6CA,IAAMA,kBAAgD,UAAS;CAC7D,MAAM,EACJ,UACA,QAAQ,SACR,QACA,SACA,aAAa,OACb,WACA,UAAU,UACV,OACA,kBAAkB,SAChB;CACJ,MAAM,aAAa,eAAe;CAElC,MAAM,qBAAqB,WACzB,OAAO,gBACP,OAAO,mBAAmB,UAC1B,WAAW,OAAO,6BAClB,WACA,GAAG,OAAO,6BAA6B,YAAY,WAAW,CAC/D;CAED,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAA;GAAM,QAAO;GAAU,YAAY;GAAiB,YAAY,YAAY,YAAY,WAAW;aACjG;IACK;AAGV,MAAI,SAAS;GACX,MAAM,WAAW,SAAS;AAE1B,OAAI,YAAY,UACd,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,iCAAiC;cAC7F,OAAO,YAAY,WAAW,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM;MAAY,GAAG,oBAAC,cAAA;KAAc;KAAS,MAAM;MAAY;KACvH,EACN,qBAAC,OAAA;IAAI,YAAY,OAAO,yBAAyB,OAAO;eACrD,SAAS,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,EACvF,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAgD;MAAe,CAAA;KAClF,CAAA,EAAA,CACL;AAIP,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,OAAO,YAAY,WAAW,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM;MAAY,GAAG,oBAAC,cAAA;KAAc;KAAS,MAAM;MAAY,EAC1H,SAAS,aAAa,WAAW,MAAM,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,CAAA;KACjH,EACN,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,SAAS,cAAc,WAAW,MAAM,oBAAC,OAAA;KAAI,WAAW,OAAO;eAAmC;MAAmB,EACrH,SAAA;KACG,CAAA,EAAA,CACL;;AAIP,SACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA,EAAA,UAAK,cAAA,CAAmB;IACrB,EAEP,SAAA,EAAA,CACA;;AAMP,QACE,oBAHgB,YAGf;EAAU,WAAW;EAAoB,eAAa;EAAQ,oBAAkB,YAAY;YAC1F,eAAe;GACN;;ACxHhB,IAAA,2BD4He"}
+{"version":3,"file":"HighlightPanel.js","names":[],"sources":["../src/components/HighlightPanel/HighlightPanel.tsx","../src/components/HighlightPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport type HighlightPanelVariants = 'normal' | 'compact';\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Uses the compact styling if set to compact */\n  variant?: HighlightPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    variant = 'normal',\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles.highlightpanel,\n    styles[`highlightpanel--${color}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    className,\n    { [styles['highlightpanel--compact']]: variant === 'compact' }\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance={variant === 'compact' ? 'title6' : 'title4'}>\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = IconSize.Small;\n\n      if (variant === 'compact') {\n        return (\n          <>\n            <div className={classNames(styles.highlightpanel__icon, styles['highlightpanel__icon--compact'])}>\n              {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            </div>\n            <div className={(styles.highlightpanel__content, styles['highlightpanel__content--compact'])}>\n              {title && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n              <div className={styles['highlightpanel__content__children--compact']}>{children}</div>\n            </div>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && breakpoint < Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && breakpoint >= Breakpoint.md && <div className={styles['highlightpanel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={containerClassName} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n      {renderContent()}\n    </CustomTag>\n  );\n};\n\nexport default HighlightPanel;\n","import HighlightPanel from './HighlightPanel';\nexport * from './HighlightPanel';\nexport default HighlightPanel;\n"],"mappings":";;;;;;;;;AA6CA,IAAM,kBAAgD,UAAS;CAC7D,MAAM,EACJ,UACA,QAAQ,SACR,QACA,SACA,aAAa,OACb,WACA,UAAU,UACV,OACA,kBAAkB,SAChB;CACJ,MAAM,aAAa,eAAe;CAElC,MAAM,qBAAqB,WACzB,OAAO,gBACP,OAAO,mBAAmB,UAC1B,WAAW,OAAO,6BAClB,WACA,GAAG,OAAO,6BAA6B,YAAY,WAAW,CAC/D;CAED,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAiB,YAAY,YAAY,YAAY,WAAW;aACjG;GACK,CAAA;EAGV,IAAI,SAAS;GACX,MAAM,WAAW,SAAS;GAE1B,IAAI,YAAY,WACd,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,sBAAsB,OAAO,iCAAiC;cAC7F,OAAO,YAAY,WAAW,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM;KAAY,CAAA,GAAG,oBAAC,cAAD;KAAe;KAAS,MAAM;KAAY,CAAA;IACvH,CAAA,EACN,qBAAC,OAAD;IAAK,YAAY,OAAO,yBAAyB,OAAO;cAAxD,CACG,SAAS,oBAAC,OAAD;KAAK,WAAW,OAAO;eAAmC;KAAmB,CAAA,EACvF,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAgD;KAAe,CAAA,CAClF;MACL,EAAA,CAAA;GAIP,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,OAAO,YAAY,WAAW,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM;KAAY,CAAA,GAAG,oBAAC,cAAD;KAAe;KAAS,MAAM;KAAY,CAAA,EAC1H,SAAS,aAAa,WAAW,MAAM,oBAAC,OAAD;KAAK,WAAW,OAAO;eAAmC;KAAmB,CAAA,CACjH;OACN,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,SAAS,cAAc,WAAW,MAAM,oBAAC,OAAD;KAAK,WAAW,OAAO;eAAmC;KAAmB,CAAA,EACrH,SACG;MACL,EAAA,CAAA;;EAIP,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,OAAD;GAAK,WAAW,OAAO;aACrB,oBAAC,OAAD,EAAA,UAAM,cAAmB,CAAA;GACrB,CAAA,EAEP,SACA,EAAA,CAAA;;CAMP,OACE,oBAAC,YAAD;EAAW,WAAW;EAAoB,eAAa;EAAQ,oBAAkB,YAAY;YAC1F,eAAe;EACN,CAAA;;;;ACxHhB,IAAA,yBAAe"}

package/lib/Highlighter.js

@@ -1,16 +1,17 @@
-import { n as uuid_default } from "./uuid.js";
-import { t as isComponent } from "./component.js";
+import { t as uuid } from "./uuid.js";
+import { isComponent } from "./utils/component.js";
 import { r as DuolistGroup } from "./Duolist.js";
 import React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import styles from "./components/Highlighter/styles.module.scss";
-const Highlighter = ({ children, searchText }) => {
+//#region src/components/Highlighter/Highlighter.tsx
+var Highlighter = ({ children, searchText }) => {
 	if (!searchText) return /* @__PURE__ */ jsx(Fragment, { children });
 	const highlightRegex = new RegExp(`(${searchText})`, "i");
 	const replaceWithMarkTag = (text) => {
 		return text.split(highlightRegex).map((part) => {
 			if (highlightRegex.test(part)) {
-				const id = uuid_default();
+				const id = uuid();
 				return /* @__PURE__ */ jsx("mark", {
 					className: styles.highlight,
 					children: part
@@ -39,7 +40,10 @@ const Highlighter = ({ children, searchText }) => {
 	};
 	return /* @__PURE__ */ jsx(Fragment, { children: React.Children.map(children, recursivelyHighlight) });
 };
-var Highlighter_default$1 = Highlighter;
-export { Highlighter as n, Highlighter_default$1 as t };
+//#endregion
+//#region src/components/Highlighter/index.ts
+var Highlighter_default = Highlighter;
+//#endregion
+export { Highlighter as n, Highlighter_default as t };
 
 //# sourceMappingURL=Highlighter.js.map

package/lib/Highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.js","names":[],"sources":["../src/components/Highlighter/Highlighter.tsx","../src/components/Highlighter/index.ts"],"sourcesContent":["import React from 'react';\n\nimport type { DuolistGroupProps } from '../Duolist';\n\nimport { isComponent } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport { DuolistGroup } from '../Duolist';\n\nimport styles from './styles.module.scss';\n\nexport interface HighlightProps {\n  children?: React.ReactNode;\n  searchText?: string;\n}\n\nexport const Highlighter = ({ children, searchText }: HighlightProps): React.ReactElement | null => {\n  if (!searchText) {\n    return <>{children}</>;\n  }\n\n  const highlightRegex = new RegExp(`(${searchText})`, 'i');\n\n  const replaceWithMarkTag = (text: string): (string | React.JSX.Element)[] => {\n    return text.split(highlightRegex).map(part => {\n      if (highlightRegex.test(part)) {\n        const id = uuid();\n        return (\n          <mark key={id} className={styles.highlight}>\n            {part}\n          </mark>\n        );\n      }\n      return part;\n    });\n  };\n\n  const recursivelyHighlight = (node: React.ReactNode): React.ReactNode => {\n    if (typeof node === 'string') {\n      return replaceWithMarkTag(node);\n    }\n\n    if (React.isValidElement(node)) {\n      const element = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const { children: nodeChildren, ...props } = element.props;\n\n      // Handle DuoList specifically\n      if (isComponent<DuolistGroupProps>(node, DuolistGroup)) {\n        const term = replaceWithMarkTag(node.props.term as string);\n        const description = replaceWithMarkTag(node.props.description as string);\n        return React.cloneElement(node, {\n          term,\n          description,\n        });\n      }\n\n      if (!nodeChildren) {\n        return node;\n      }\n\n      const highlightedChildren = React.Children.toArray(nodeChildren).map(child => recursivelyHighlight(child));\n      return React.cloneElement(node, props, highlightedChildren);\n    }\n\n    return node;\n  };\n\n  return <>{React.Children.map(children, recursivelyHighlight)}</>;\n};\n\nexport default Highlighter;\n","import Highlighter from './Highlighter';\nexport * from './Highlighter';\nexport default Highlighter;\n"],"mappings":";;;;;;AAeA,MAAa,eAAe,EAAE,UAAU,iBAA4D;AAClG,KAAI,CAAC,WACH,QAAO,oBAAA,UAAA,EAAG,UAAA,CAAY;CAGxB,MAAM,iBAAiB,IAAI,OAAO,IAAI,WAAW,IAAI,IAAI;CAEzD,MAAM,sBAAsB,SAAiD;AAC3E,SAAO,KAAK,MAAM,eAAe,CAAC,KAAI,SAAQ;AAC5C,OAAI,eAAe,KAAK,KAAK,EAAE;IAC7B,MAAM,KAAK,cAAM;AACjB,WACE,oBAAC,QAAA;KAAc,WAAW,OAAO;eAC9B;OADQ,GAEJ;;AAGX,UAAO;IACP;;CAGJ,MAAM,wBAAwB,SAA2C;AACvE,MAAI,OAAO,SAAS,SAClB,QAAO,mBAAmB,KAAK;AAGjC,MAAI,MAAM,eAAe,KAAK,EAAE;GAE9B,MAAM,EAAE,UAAU,cAAc,GAAG,UADnB,KACqC;AAGrD,OAAI,YAA+B,MAAM,aAAa,EAAE;IACtD,MAAM,OAAO,mBAAmB,KAAK,MAAM,KAAe;IAC1D,MAAM,cAAc,mBAAmB,KAAK,MAAM,YAAsB;AACxE,WAAO,MAAM,aAAa,MAAM;KAC9B;KACA;KACD,CAAC;;AAGJ,OAAI,CAAC,aACH,QAAO;GAGT,MAAM,sBAAsB,MAAM,SAAS,QAAQ,aAAa,CAAC,KAAI,UAAS,qBAAqB,MAAM,CAAC;AAC1G,UAAO,MAAM,aAAa,MAAM,OAAO,oBAAoB;;AAG7D,SAAO;;AAGT,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,SAAS,IAAI,UAAU,qBAAqB,EAAA,CAAI;;AChElE,IAAA,wBDmEe"}
+{"version":3,"file":"Highlighter.js","names":[],"sources":["../src/components/Highlighter/Highlighter.tsx","../src/components/Highlighter/index.ts"],"sourcesContent":["import React from 'react';\n\nimport type { DuolistGroupProps } from '../Duolist';\n\nimport { isComponent } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport { DuolistGroup } from '../Duolist';\n\nimport styles from './styles.module.scss';\n\nexport interface HighlightProps {\n  children?: React.ReactNode;\n  searchText?: string;\n}\n\nexport const Highlighter = ({ children, searchText }: HighlightProps): React.ReactElement | null => {\n  if (!searchText) {\n    return <>{children}</>;\n  }\n\n  const highlightRegex = new RegExp(`(${searchText})`, 'i');\n\n  const replaceWithMarkTag = (text: string): (string | React.JSX.Element)[] => {\n    return text.split(highlightRegex).map(part => {\n      if (highlightRegex.test(part)) {\n        const id = uuid();\n        return (\n          <mark key={id} className={styles.highlight}>\n            {part}\n          </mark>\n        );\n      }\n      return part;\n    });\n  };\n\n  const recursivelyHighlight = (node: React.ReactNode): React.ReactNode => {\n    if (typeof node === 'string') {\n      return replaceWithMarkTag(node);\n    }\n\n    if (React.isValidElement(node)) {\n      const element = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const { children: nodeChildren, ...props } = element.props;\n\n      // Handle DuoList specifically\n      if (isComponent<DuolistGroupProps>(node, DuolistGroup)) {\n        const term = replaceWithMarkTag(node.props.term as string);\n        const description = replaceWithMarkTag(node.props.description as string);\n        return React.cloneElement(node, {\n          term,\n          description,\n        });\n      }\n\n      if (!nodeChildren) {\n        return node;\n      }\n\n      const highlightedChildren = React.Children.toArray(nodeChildren).map(child => recursivelyHighlight(child));\n      return React.cloneElement(node, props, highlightedChildren);\n    }\n\n    return node;\n  };\n\n  return <>{React.Children.map(children, recursivelyHighlight)}</>;\n};\n\nexport default Highlighter;\n","import Highlighter from './Highlighter';\nexport * from './Highlighter';\nexport default Highlighter;\n"],"mappings":";;;;;;;AAeA,IAAa,eAAe,EAAE,UAAU,iBAA4D;CAClG,IAAI,CAAC,YACH,OAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAGxB,MAAM,iBAAiB,IAAI,OAAO,IAAI,WAAW,IAAI,IAAI;CAEzD,MAAM,sBAAsB,SAAiD;EAC3E,OAAO,KAAK,MAAM,eAAe,CAAC,KAAI,SAAQ;GAC5C,IAAI,eAAe,KAAK,KAAK,EAAE;IAC7B,MAAM,KAAK,MAAM;IACjB,OACE,oBAAC,QAAD;KAAe,WAAW,OAAO;eAC9B;KACI,EAFI,GAEJ;;GAGX,OAAO;IACP;;CAGJ,MAAM,wBAAwB,SAA2C;EACvE,IAAI,OAAO,SAAS,UAClB,OAAO,mBAAmB,KAAK;EAGjC,IAAI,MAAM,eAAe,KAAK,EAAE;GAE9B,MAAM,EAAE,UAAU,cAAc,GAAG,UAAU,KAAQ;GAGrD,IAAI,YAA+B,MAAM,aAAa,EAAE;IACtD,MAAM,OAAO,mBAAmB,KAAK,MAAM,KAAe;IAC1D,MAAM,cAAc,mBAAmB,KAAK,MAAM,YAAsB;IACxE,OAAO,MAAM,aAAa,MAAM;KAC9B;KACA;KACD,CAAC;;GAGJ,IAAI,CAAC,cACH,OAAO;GAGT,MAAM,sBAAsB,MAAM,SAAS,QAAQ,aAAa,CAAC,KAAI,UAAS,qBAAqB,MAAM,CAAC;GAC1G,OAAO,MAAM,aAAa,MAAM,OAAO,oBAAoB;;EAG7D,OAAO;;CAGT,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,SAAS,IAAI,UAAU,qBAAqB,EAAI,CAAA;;;;AChElE,IAAA,sBAAe"}

package/lib/HorizontalScroll.js

@@ -1,12 +1,13 @@
-import { t as useIsVisible } from "./useIsVisible.js";
-import { t as useSize } from "./useSize.js";
-import { t as useStopPropagation } from "./usestopPropagation.js";
+import { useIsVisible } from "./hooks/useIsVisible.js";
+import { useSize } from "./hooks/useSize.js";
+import { useStopPropagation } from "./hooks/usestopPropagation.js";
 import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HorizontalScroll/styles.module.scss";
+//#region src/components/HorizontalScroll/HorizontalScroll.tsx
 var ROOT_MARGIN_OFFSET = "3px";
-const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
+var HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
 	const viewportRef = useRef(null);
 	const leftRef = useRef(null);
 	const rightRef = useRef(null);
@@ -42,7 +43,10 @@ const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
 		})
 	});
 };
-var HorizontalScroll_default$1 = HorizontalScroll;
-export { HorizontalScroll as n, HorizontalScroll_default$1 as t };
+//#endregion
+//#region src/components/HorizontalScroll/index.ts
+var HorizontalScroll_default = HorizontalScroll;
+//#endregion
+export { HorizontalScroll as n, HorizontalScroll_default as t };
 
 //# sourceMappingURL=HorizontalScroll.js.map

package/lib/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes>"],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;AAaA,IAAM,qBAAqB;AAY3B,MAAaA,oBAA2E,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACpH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACtH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,YAAY,IAAI,EAAE;CAE/D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,wCAAwC;CACtI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;AAErD,oBAAmB,aAAa,CAAC,cAAc,YAAY,CAAC;AAE5D,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;EAAkB,eAAa;YAGpD,qBAAC,OAAA;GACC,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;;IAEJ,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,wCAC1B,EAAA,CACD;IACF,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,wCAC3B,EAAA,CACD;IACF,oBAAC,OAAA,EAAI,KAAK,SAAA,CAAW;IACpB;IACD,oBAAC,OAAA,EAAI,KAAK,UAAA,CAAY;;IAClB;GACF;;AClEV,IAAA,6BDsEe"}
+{"version":3,"file":"HorizontalScroll.js","names":[],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;;AAaA,IAAM,qBAAqB;AAY3B,IAAa,oBAA2E,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACpH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACtH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,YAAY,IAAI,EAAE;CAE/D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,wCAAwC;CACtI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;CAErD,mBAAmB,aAAa,CAAC,cAAc,YAAY,CAAC;CAE5D,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAkB,eAAa;YAGpD,qBAAC,OAAD;GACE,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;aALN;IAOE,oBAAC,OAAD,EACE,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,wCAC1B,EACD,CAAA;IACF,oBAAC,OAAD,EACE,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,wCAC3B,EACD,CAAA;IACF,oBAAC,OAAD,EAAK,KAAK,SAAW,CAAA;IACpB;IACD,oBAAC,OAAD,EAAK,KAAK,UAAY,CAAA;IAClB;;EACF,CAAA;;;;AClEV,IAAA,2BAAe"}

package/lib/Icon.js

@@ -1,8 +1,9 @@
-import { a as IconSize, n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId, IconSize } from "./constants.js";
 import classNames from "classnames";
 import React, { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-const Icon = (props) => {
+//#region src/components/Icon/Icon.tsx
+var Icon = (props) => {
 	const { svgIcon, ariaLabel, className = "", size = IconSize.Small, color = "black", hoverColor = color || "black", isHovered = false, onColor, testId, ref, ...other } = props;
 	const svgRaw = React.createElement(svgIcon, {
 		size,
@@ -37,7 +38,10 @@ const Icon = (props) => {
 	});
 };
 Icon.displayName = "Icon";
+//#endregion
+//#region src/components/Icon/index.ts
 var Icon_default = Icon;
+//#endregion
 export { Icon as n, Icon_default as t };
 
 //# sourceMappingURL=Icon.js.map

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon: React.FC<IconProps>"],"sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\nimport type { StatusDotOnColor } from '../StatusDot';\n\nimport { AnalyticsId, IconSize } from '../../constants';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<SVGSVGElement>;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\nexport interface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const Icon: React.FC<IconProps> = props => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ref,\n    ...other\n  } = props;\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useId();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n","export * from './Icon';\nexport * from './utils';\nexport { IconSize } from '../../constants';\n\nimport { Icon } from './Icon';\nexport default Icon;\n"],"mappings":";;;;AAsDA,MAAaA,QAA4B,UAAS;CAChD,MAAM,EACJ,SACA,WACA,YAAY,IACZ,OAAO,SAAS,OAChB,QAAQ,SACR,aAAa,SAAS,SACtB,YAAY,OACZ,SACA,QACA,KACA,GAAG,UACD;CACJ,MAAM,SAAS,MAAM,cAAc,SAAS;EAC1C;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,YAAY,aAAa;AAE1C,QACE,qBAAC,OAAA;EACC,eAAa;EACb,oBAAkB,YAAY;EACzB;EACL,WAAW,WAAW,mBAAmB,UAAU;EACnD,MAAM,YAAY,QAAQ;EAC1B,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW;EACX,eAAa,YAAY,KAAA,IAAY;EACrC,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACP,GAAI;aAEH,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB,EACpD,OAAA;GACG;;AAIV,KAAK,cAAc;AChGnB,IAAA,eAAe"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\nimport type { StatusDotOnColor } from '../StatusDot';\n\nimport { AnalyticsId, IconSize } from '../../constants';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<SVGSVGElement>;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\nexport interface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const Icon: React.FC<IconProps> = props => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ref,\n    ...other\n  } = props;\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useId();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n","export * from './Icon';\nexport * from './utils';\nexport { IconSize } from '../../constants';\n\nimport { Icon } from './Icon';\nexport default Icon;\n"],"mappings":";;;;;AAsDA,IAAa,QAA4B,UAAS;CAChD,MAAM,EACJ,SACA,WACA,YAAY,IACZ,OAAO,SAAS,OAChB,QAAQ,SACR,aAAa,SAAS,SACtB,YAAY,OACZ,SACA,QACA,KACA,GAAG,UACD;CACJ,MAAM,SAAS,MAAM,cAAc,SAAS;EAC1C;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,YAAY,aAAa;CAE1C,OACE,qBAAC,OAAD;EACE,eAAa;EACb,oBAAkB,YAAY;EACzB;EACL,WAAW,WAAW,mBAAmB,UAAU;EACnD,MAAM,YAAY,QAAQ;EAC1B,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW;EACX,eAAa,YAAY,KAAA,IAAY;EACrC,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACP,GAAI;YAfN,CAiBG,aAAa,oBAAC,SAAD;GAAO,IAAI;aAAU;GAAkB,CAAA,EACpD,OACG;;;AAIV,KAAK,cAAc;;;AChGnB,IAAA,eAAe"}

package/lib/Illustration.js

@@ -1,8 +1,9 @@
-import { n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId } from "./constants.js";
 import { n as getIllustration, t as ViewBoxSize } from "./utils4.js";
 import React, { useId } from "react";
 import { jsx } from "react/jsx-runtime";
-const Illustration = (props) => {
+//#region src/components/Illustration/Illustration.tsx
+var Illustration = (props) => {
 	const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId, ref, ...other } = props;
 	const titleId = useId();
 	const viewBox = getIllustration({
@@ -40,7 +41,10 @@ const Illustration = (props) => {
 	});
 };
 Illustration.displayName = "Illustration";
-var Illustration_default$1 = Illustration;
-export { Illustration as n, Illustration_default$1 as t };
+//#endregion
+//#region src/components/Illustration/index.ts
+var Illustration_default = Illustration;
+//#endregion
+export { Illustration as n, Illustration_default as t };
 
 //# sourceMappingURL=Illustration.js.map

package/lib/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","names":["Illustration: React.FC<IllustrationProps>"],"sources":["../src/components/Illustration/Illustration.tsx","../src/components/Illustration/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport { getIllustration, ViewBoxSize } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n  /** Ref passed to the component */\n  ref?: React.Ref<SVGSVGElement | null>;\n}\n\nexport const Illustration: React.FC<IllustrationProps> = props => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ref, ...other } = props;\n\n  const titleId = useId();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n};\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n","import Illustration from './Illustration';\nexport * from './Illustration';\nexport * from './utils';\nexport default Illustration;\n"],"mappings":";;;;AAsCA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,QAAQ,KAAK,GAAG,UAAU;CAE1G,MAAM,UAAU,OAAO;CACvB,MAAM,UAAU,gBAAgB;EAAE;EAAM,QAAQ,YAAY;EAAQ,OAAO,YAAY;EAAO,CAAC;CAE/F,MAAM,gBAAgB;EACpB,eAAe;EACf,oBAAoB,YAAY;EAChC;EACA;EACA,MAAM,YAAY,QAAQ;EAC1B,mBAAmB,YAAY,UAAU,KAAA;EACzC,WAAW;EACX,eAAe,YAAY,KAAA,IAAY;EACvC;EACA,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,GAAG;EACJ;AASD,QAPmB,MAAM,cAAc,cAAc;EACnD;EACA;EACe;EACf,OAAO,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB;EAC5D,CAAC;;AAKJ,aAAa,cAAc;ACpE3B,IAAA,yBDsEe"}
+{"version":3,"file":"Illustration.js","names":[],"sources":["../src/components/Illustration/Illustration.tsx","../src/components/Illustration/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport { getIllustration, ViewBoxSize } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n  /** Ref passed to the component */\n  ref?: React.Ref<SVGSVGElement | null>;\n}\n\nexport const Illustration: React.FC<IllustrationProps> = props => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ref, ...other } = props;\n\n  const titleId = useId();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n};\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n","import Illustration from './Illustration';\nexport * from './Illustration';\nexport * from './utils';\nexport default Illustration;\n"],"mappings":";;;;;AAsCA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,QAAQ,KAAK,GAAG,UAAU;CAE1G,MAAM,UAAU,OAAO;CACvB,MAAM,UAAU,gBAAgB;EAAE;EAAM,QAAQ,YAAY;EAAQ,OAAO,YAAY;EAAO,CAAC;CAE/F,MAAM,gBAAgB;EACpB,eAAe;EACf,oBAAoB,YAAY;EAChC;EACA;EACA,MAAM,YAAY,QAAQ;EAC1B,mBAAmB,YAAY,UAAU,KAAA;EACzC,WAAW;EACX,eAAe,YAAY,KAAA,IAAY;EACvC;EACA,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,GAAG;EACJ;CASD,OAPmB,MAAM,cAAc,cAAc;EACnD;EACA;EACe;EACf,OAAO,aAAa,oBAAC,SAAD;GAAO,IAAI;aAAU;GAAkB,CAAA;EAC5D,CAEM;;AAGT,aAAa,cAAc;;;ACpE3B,IAAA,uBAAe"}