@helsenorge/designsystem-react 14.9.2 → 15.0.0-beta.1

package/lib/FilterOverviewSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewSearch.js","names":["FilterOverviewSearch: React.FC<FilterOverviewSearchProps>"],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;AAeA,IAAMA,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;AAE3D,QACE,oBAAC,OAAA;EAAI,WAAW,WAAG,OAAO,2BAA2B,iBAAiB;EAAE,eAAa;YACnF,oBAAC,sBAAA,EAAa,GAAI,mBAAA,CAAqB;GACnC;;ACnBV,IAAA,iCDuBe"}
+{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,iBAAiB;EAAE,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,mBAAqB,CAAA;EACnC,CAAA;;;;ACnBV,IAAA,+BAAe"}

package/lib/FilterResultCountAndSortWrapper.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterResultCountAndSortWrapper/styles.module.scss";
+//#region src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx
 var FilterResultCountAndSortWrapper = (props) => {
 	const { resultCount, sortComponent } = props;
 	return /* @__PURE__ */ jsxs("div", {
@@ -13,7 +14,10 @@ var FilterResultCountAndSortWrapper = (props) => {
 		})]
 	});
 };
-var FilterResultCountAndSortWrapper_default$1 = FilterResultCountAndSortWrapper;
-export { FilterResultCountAndSortWrapper_default$1 as t };
+//#endregion
+//#region src/components/Filter/FilterResultCountAndSortWrapper/index.ts
+var FilterResultCountAndSortWrapper_default = FilterResultCountAndSortWrapper;
+//#endregion
+export { FilterResultCountAndSortWrapper_default as t };
 
 //# sourceMappingURL=FilterResultCountAndSortWrapper.js.map

package/lib/FilterResultCountAndSortWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":["FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper>"],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n  /** Result count content area */\n  resultCount?: React.ReactNode;\n  /** FilterSort content area */\n  sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n  const { resultCount, sortComponent } = props;\n\n  return (\n    <div className={styles['filter-result-count-and-sort-wrapper']}>\n      <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n      <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n    </div>\n  );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;AASA,IAAMA,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;AAEvC,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,QAAA;GAAK,WAAW,OAAO;aAAiD;IAAmB,EAC5F,oBAAC,QAAA;GAAK,WAAW,OAAO;aAAgD;IAAqB,CAAA;GACzF;;ACdV,IAAA,4CDkBe"}
+{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n  /** Result count content area */\n  resultCount?: React.ReactNode;\n  /** FilterSort content area */\n  sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n  const { resultCount, sortComponent } = props;\n\n  return (\n    <div className={styles['filter-result-count-and-sort-wrapper']}>\n      <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n      <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n    </div>\n  );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAiD;GAAmB,CAAA,EAC5F,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAgD;GAAqB,CAAA,CACzF;;;;;ACdV,IAAA,0CAAe"}

package/lib/FilterSearch.js

@@ -1,16 +1,17 @@
-import { a as IconSize, s as LanguageLocales } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs } from "./refs.js";
+import { IconSize, LanguageLocales } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { mergeRefs } from "./utils/refs.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as useLanguage } from "./useLanguage.js";
-import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
-import { t as X_default } from "./X.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import X from "./components/Icons/X.js";
 import { t as getResources } from "./resourceHelper.js";
-import { t as Search_default } from "./Search.js";
+import Search from "./components/Icons/Search.js";
 import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterSearch/styles.module.scss";
+//#region src/components/Filter/FilterSearch/FilterSearch.tsx
 var FilterSearch = (props) => {
 	const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, ...inputProps } = props;
 	const inputRef = useRef(null);
@@ -57,7 +58,7 @@ var FilterSearch = (props) => {
 				ref: clearButtonRef,
 				className: classNames(styles["filter-search__clear-button"], clearButtonProps?.className),
 				children: /* @__PURE__ */ jsx(Icon_default, {
-					svgIcon: X_default,
+					svgIcon: X,
 					size: IconSize.XXSmall,
 					isHovered: !isMobile && isClearButtonHovered
 				})
@@ -72,7 +73,7 @@ var FilterSearch = (props) => {
 				children: /* @__PURE__ */ jsx("div", {
 					className: classNames(styles["filter-search__search-button--inner"]),
 					children: /* @__PURE__ */ jsx(Icon_default, {
-						svgIcon: Search_default,
+						svgIcon: Search,
 						size: isMobile ? IconSize.XXSmall : IconSize.XSmall,
 						isHovered: !inputProps.disabled && isButtonHovered
 					})
@@ -81,7 +82,7 @@ var FilterSearch = (props) => {
 		]
 	});
 };
-var FilterSearch_default = FilterSearch;
-export { FilterSearch_default as t };
+//#endregion
+export { FilterSearch as t };
 
 //# sourceMappingURL=FilterSearch.js.map

package/lib/FilterSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSearch.js","names":["FilterSearch: React.FC<FilterSearchProps>"],"sources":["../src/components/Filter/FilterSearch/FilterSearch.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../../utils/refs';\nimport Icon from '../../Icon';\nimport Search from '../../Icons/Search';\nimport X from '../../Icons/X';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {\n  /** Adds custom classes to the component */\n  className?: string;\n  /** The value given by the user in the input field */\n  value: string | undefined;\n  /** onChange handler for the input field */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Props for the search button */\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Props for the clear button */\n  clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst FilterSearch: React.FC<FilterSearchProps> = props => {\n  const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, ...inputProps } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputWrapperRef = useRef<HTMLLabelElement>(null);\n  const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isButtonHovered } = usePseudoClasses(buttonRef);\n  const clearButtonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isClearButtonHovered } = usePseudoClasses(clearButtonRef);\n\n  const isMobile = useIsMobileBreakpoint();\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const inputHasValue = !!value;\n\n  return (\n    <div className={classNames(styles['filter-search__wrapper'], className)}>\n      <label className={styles['filter-search__input-wrapper']} ref={inputWrapperRef}>\n        <span className={styles['filter-search__input__label']}>{inputProps['aria-label'] ?? mergedResources.searchPlaceholder}</span>\n        <input\n          {...inputProps}\n          ref={mergeRefs([inputRef, ref])}\n          value={value}\n          onChange={onChange}\n          className={classNames(styles['filter-search__input'], {\n            [styles['filter-search__input--hovered']]: isWrapperHovered,\n          })}\n          placeholder={mergedResources.searchPlaceholder}\n        />\n      </label>\n      {inputHasValue && (\n        <button\n          type=\"button\"\n          aria-label={mergedResources.searchClearButtonAriaLabel}\n          disabled={inputProps.disabled}\n          {...clearButtonProps}\n          onClick={e => {\n            clearButtonProps?.onClick?.(e);\n            inputRef.current?.focus();\n          }}\n          ref={clearButtonRef}\n          className={classNames(styles['filter-search__clear-button'], clearButtonProps?.className)}\n        >\n          <Icon svgIcon={X} size={IconSize.XXSmall} isHovered={!isMobile && isClearButtonHovered} />\n        </button>\n      )}\n      <button\n        type={'button'}\n        aria-label={mergedResources.searchButtonAriaLabel}\n        disabled={inputProps.disabled}\n        {...buttonProps}\n        ref={buttonRef}\n        className={classNames(styles['filter-search__search-button'], buttonProps?.className)}\n      >\n        <div className={classNames(styles['filter-search__search-button--inner'])}>\n          <Icon svgIcon={Search} size={isMobile ? IconSize.XXSmall : IconSize.XSmall} isHovered={!inputProps.disabled && isButtonHovered} />\n        </div>\n      </button>\n    </div>\n  );\n};\n\nexport default FilterSearch;\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,WAAW,OAAO,UAAU,WAAW,aAAa,kBAAkB,KAAK,GAAG,eAAe;CAErG,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,kBAAkB,OAAyB,KAAK;CACtD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,gBAAgB;CACzE,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,UAAU;CAClE,MAAM,iBAAiB,OAA0B,KAAK;CACtD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,eAAe;CAE5E,MAAM,WAAW,uBAAuB;CAExC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,gBAAgB,CAAC,CAAC;AAExB,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,OAAO,2BAA2B,UAAU;;GACrE,qBAAC,SAAA;IAAM,WAAW,OAAO;IAAiC,KAAK;eAC7D,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAiC,WAAW,iBAAiB,gBAAgB;MAAyB,EAC9H,oBAAC,SAAA;KACC,GAAI;KACJ,KAAK,UAAU,CAAC,UAAU,IAAI,CAAC;KACxB;KACG;KACV,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,kBAC5C,CAAC;KACF,aAAa,gBAAgB;MAC7B,CAAA;KACI;GACP,iBACC,oBAAC,UAAA;IACC,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;AACZ,uBAAkB,UAAU,EAAE;AAC9B,cAAS,SAAS,OAAO;;IAE3B,KAAK;IACL,WAAW,WAAW,OAAO,gCAAgC,kBAAkB,UAAU;cAEzF,oBAAC,cAAA;KAAK,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;MAAwB;KACnF;GAEX,oBAAC,UAAA;IACC,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,WAAW,OAAO,iCAAiC,aAAa,UAAU;cAErF,oBAAC,OAAA;KAAI,WAAW,WAAW,OAAO,uCAAuC;eACvE,oBAAC,cAAA;MAAK,SAAS;MAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAQ,WAAW,CAAC,WAAW,YAAY;OAAmB;MAC9H;KACC;;GACL;;AAIV,IAAA,uBAAe"}
+{"version":3,"file":"FilterSearch.js","names":[],"sources":["../src/components/Filter/FilterSearch/FilterSearch.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../../utils/refs';\nimport Icon from '../../Icon';\nimport Search from '../../Icons/Search';\nimport X from '../../Icons/X';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {\n  /** Adds custom classes to the component */\n  className?: string;\n  /** The value given by the user in the input field */\n  value: string | undefined;\n  /** onChange handler for the input field */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Props for the search button */\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Props for the clear button */\n  clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst FilterSearch: React.FC<FilterSearchProps> = props => {\n  const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, ...inputProps } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputWrapperRef = useRef<HTMLLabelElement>(null);\n  const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isButtonHovered } = usePseudoClasses(buttonRef);\n  const clearButtonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered: isClearButtonHovered } = usePseudoClasses(clearButtonRef);\n\n  const isMobile = useIsMobileBreakpoint();\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const inputHasValue = !!value;\n\n  return (\n    <div className={classNames(styles['filter-search__wrapper'], className)}>\n      <label className={styles['filter-search__input-wrapper']} ref={inputWrapperRef}>\n        <span className={styles['filter-search__input__label']}>{inputProps['aria-label'] ?? mergedResources.searchPlaceholder}</span>\n        <input\n          {...inputProps}\n          ref={mergeRefs([inputRef, ref])}\n          value={value}\n          onChange={onChange}\n          className={classNames(styles['filter-search__input'], {\n            [styles['filter-search__input--hovered']]: isWrapperHovered,\n          })}\n          placeholder={mergedResources.searchPlaceholder}\n        />\n      </label>\n      {inputHasValue && (\n        <button\n          type=\"button\"\n          aria-label={mergedResources.searchClearButtonAriaLabel}\n          disabled={inputProps.disabled}\n          {...clearButtonProps}\n          onClick={e => {\n            clearButtonProps?.onClick?.(e);\n            inputRef.current?.focus();\n          }}\n          ref={clearButtonRef}\n          className={classNames(styles['filter-search__clear-button'], clearButtonProps?.className)}\n        >\n          <Icon svgIcon={X} size={IconSize.XXSmall} isHovered={!isMobile && isClearButtonHovered} />\n        </button>\n      )}\n      <button\n        type={'button'}\n        aria-label={mergedResources.searchButtonAriaLabel}\n        disabled={inputProps.disabled}\n        {...buttonProps}\n        ref={buttonRef}\n        className={classNames(styles['filter-search__search-button'], buttonProps?.className)}\n      >\n        <div className={classNames(styles['filter-search__search-button--inner'])}>\n          <Icon svgIcon={Search} size={isMobile ? IconSize.XXSmall : IconSize.XSmall} isHovered={!inputProps.disabled && isButtonHovered} />\n        </div>\n      </button>\n    </div>\n  );\n};\n\nexport default FilterSearch;\n"],"mappings":";;;;;;;;;;;;;;AAmCA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,WAAW,OAAO,UAAU,WAAW,aAAa,kBAAkB,KAAK,GAAG,eAAe;CAErG,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,kBAAkB,OAAyB,KAAK;CACtD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,gBAAgB;CACzE,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,UAAU;CAClE,MAAM,iBAAiB,OAA0B,KAAK;CACtD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,eAAe;CAE5E,MAAM,WAAW,uBAAuB;CAExC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,2BAA2B,UAAU;YAAvE;GACE,qBAAC,SAAD;IAAO,WAAW,OAAO;IAAiC,KAAK;cAA/D,CACE,oBAAC,QAAD;KAAM,WAAW,OAAO;eAAiC,WAAW,iBAAiB,gBAAgB;KAAyB,CAAA,EAC9H,oBAAC,SAAD;KACE,GAAI;KACJ,KAAK,UAAU,CAAC,UAAU,IAAI,CAAC;KACxB;KACG;KACV,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,kBAC5C,CAAC;KACF,aAAa,gBAAgB;KAC7B,CAAA,CACI;;GACP,iBACC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;KACZ,kBAAkB,UAAU,EAAE;KAC9B,SAAS,SAAS,OAAO;;IAE3B,KAAK;IACL,WAAW,WAAW,OAAO,gCAAgC,kBAAkB,UAAU;cAEzF,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;KAAwB,CAAA;IACnF,CAAA;GAEX,oBAAC,UAAD;IACE,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,WAAW,OAAO,iCAAiC,aAAa,UAAU;cAErF,oBAAC,OAAD;KAAK,WAAW,WAAW,OAAO,uCAAuC;eACvE,oBAAC,cAAD;MAAM,SAAS;MAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAQ,WAAW,CAAC,WAAW,YAAY;MAAmB,CAAA;KAC9H,CAAA;IACC,CAAA;GACL"}

package/lib/FilterSort.js

@@ -1,10 +1,11 @@
-import { s as LanguageLocales } from "./constants2.js";
-import { n as useLanguage } from "./useLanguage.js";
-import { t as Label_default } from "./Label.js";
+import { LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import Label_default from "./components/Label/index.js";
 import { t as getResources } from "./resourceHelper.js";
 import { t as Select_default } from "./Select.js";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterSort/styles.module.scss";
+//#region src/components/Filter/FilterSort/FilterSort.tsx
 var FilterSort = (props) => {
 	const { children, resources } = props;
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
@@ -24,7 +25,10 @@ var FilterSort = (props) => {
 		children
 	});
 };
-var FilterSort_default$1 = FilterSort;
-export { FilterSort_default$1 as t };
+//#endregion
+//#region src/components/Filter/FilterSort/index.ts
+var FilterSort_default = FilterSort;
+//#endregion
+export { FilterSort_default as t };
 
 //# sourceMappingURL=FilterSort.js.map

package/lib/FilterSort.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSort.js","names":["FilterSort: React.FC<FilterSortProps>"],"sources":["../src/components/Filter/FilterSort/FilterSort.tsx","../src/components/Filter/FilterSort/index.ts"],"sourcesContent":["import type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport Label from '../../Label';\nimport Select, { type SelectProps } from '../../Select';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSortProps extends SelectProps {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterSort: React.FC<FilterSortProps> = props => {\n  const { children, resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <Select\n      {...props}\n      label={<Label labelTexts={[{ text: `${mergedResources.sortLabel}:`, type: 'subdued' }]} />}\n      labelClassName={styles['select__label']}\n      className={styles['select']}\n      wrapperClassName={styles['select__wrapper']}\n    >\n      {children}\n    </Select>\n  );\n};\n\nexport default FilterSort;\n","import FilterSort from './FilterSort';\nexport * from './FilterSort';\nexport default FilterSort;\n"],"mappings":";;;;;;;AAeA,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,oBAAC,gBAAA;EACC,GAAI;EACJ,OAAO,oBAAC,eAAA,EAAM,YAAY,CAAC;GAAE,MAAM,GAAG,gBAAgB,UAAU;GAAI,MAAM;GAAW,CAAC,EAAA,CAAI;EAC1F,gBAAgB,OAAO;EACvB,WAAW,OAAO;EAClB,kBAAkB,OAAO;EAExB;GACM;;ACjCb,IAAA,uBDqCe"}
+{"version":3,"file":"FilterSort.js","names":[],"sources":["../src/components/Filter/FilterSort/FilterSort.tsx","../src/components/Filter/FilterSort/index.ts"],"sourcesContent":["import type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport Label from '../../Label';\nimport Select, { type SelectProps } from '../../Select';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSortProps extends SelectProps {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterSort: React.FC<FilterSortProps> = props => {\n  const { children, resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <Select\n      {...props}\n      label={<Label labelTexts={[{ text: `${mergedResources.sortLabel}:`, type: 'subdued' }]} />}\n      labelClassName={styles['select__label']}\n      className={styles['select']}\n      wrapperClassName={styles['select__wrapper']}\n    >\n      {children}\n    </Select>\n  );\n};\n\nexport default FilterSort;\n","import FilterSort from './FilterSort';\nexport * from './FilterSort';\nexport default FilterSort;\n"],"mappings":";;;;;;;;AAeA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,OAAO,oBAAC,eAAD,EAAO,YAAY,CAAC;GAAE,MAAM,GAAG,gBAAgB,UAAU;GAAI,MAAM;GAAW,CAAC,EAAI,CAAA;EAC1F,gBAAgB,OAAO;EACvB,WAAW,OAAO;EAClB,kBAAkB,OAAO;EAExB;EACM,CAAA;;;;ACjCb,IAAA,qBAAe"}

package/lib/FilterStateWrapper.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterStateWrapper/styles.module.scss";
+//#region src/components/Filter/FilterStateWrapper/FilterStateWrapper.tsx
 var FilterStateWrapper = ({ children, testId }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: styles["filter-state-wrapper"],
@@ -7,7 +8,10 @@ var FilterStateWrapper = ({ children, testId }) => {
 		children
 	});
 };
-var FilterStateWrapper_default$1 = FilterStateWrapper;
-export { FilterStateWrapper_default$1 as t };
+//#endregion
+//#region src/components/Filter/FilterStateWrapper/index.ts
+var FilterStateWrapper_default = FilterStateWrapper;
+//#endregion
+export { FilterStateWrapper_default as t };
 
 //# sourceMappingURL=FilterStateWrapper.js.map

package/lib/FilterStateWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterStateWrapper.js","names":["FilterStateWrapper: React.FC<FilterStateWrapperProps>"],"sources":["../src/components/Filter/FilterStateWrapper/FilterStateWrapper.tsx","../src/components/Filter/FilterStateWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterStateWrapperProps {\n  /** Content to be rendered inside the wrapper */\n  children: React.ReactNode;\n  /** test id that is placed on the wrapper */\n  testId?: string;\n}\n\nconst FilterStateWrapper: React.FC<FilterStateWrapperProps> = ({ children, testId }) => {\n  return (\n    <div className={styles['filter-state-wrapper']} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default FilterStateWrapper;\n","import FilterStateWrapper from './FilterStateWrapper';\nexport * from './FilterStateWrapper';\nexport default FilterStateWrapper;\n"],"mappings":";;AAWA,IAAMA,sBAAyD,EAAE,UAAU,aAAa;AACtF,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;EAAyB,eAAa;EAC1D;GACG;;ACbV,IAAA,+BDiBe"}
+{"version":3,"file":"FilterStateWrapper.js","names":[],"sources":["../src/components/Filter/FilterStateWrapper/FilterStateWrapper.tsx","../src/components/Filter/FilterStateWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterStateWrapperProps {\n  /** Content to be rendered inside the wrapper */\n  children: React.ReactNode;\n  /** test id that is placed on the wrapper */\n  testId?: string;\n}\n\nconst FilterStateWrapper: React.FC<FilterStateWrapperProps> = ({ children, testId }) => {\n  return (\n    <div className={styles['filter-state-wrapper']} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default FilterStateWrapper;\n","import FilterStateWrapper from './FilterStateWrapper';\nexport * from './FilterStateWrapper';\nexport default FilterStateWrapper;\n"],"mappings":";;;AAWA,IAAM,sBAAyD,EAAE,UAAU,aAAa;CACtF,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAyB,eAAa;EAC1D;EACG,CAAA;;;;ACbV,IAAA,6BAAe"}

package/lib/FormFieldTag.js

@@ -1,5 +1,5 @@
-import { n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
-import { n as useLanguage } from "./useLanguage.js";
+import { AnalyticsId, LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/FormFieldTag/styles.module.scss";
@@ -39,7 +39,9 @@ var HN_Designsystem_FormFieldTag_se_NO_default = {
 	requiredCheckboxList: "Vállje ovtta dahje máŋga",
 	requiredSingleCheckbox: "Ferte válljejuvvot"
 };
-const getResources = (language) => {
+//#endregion
+//#region src/components/FormFieldTag/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_FormFieldTag_en_GB_default;
 		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_FormFieldTag_nn_NO_default;
@@ -48,6 +50,8 @@ const getResources = (language) => {
 		default: return HN_Designsystem_FormFieldTag_nb_NO_default;
 	}
 };
+//#endregion
+//#region src/components/FormFieldTag/FormFieldTag.tsx
 var FormFieldTag = (props) => {
 	const { id, level, resources, testId } = props;
 	const isOptional = level === "optional" || level === "all-optional";
@@ -73,7 +77,10 @@ var FormFieldTag = (props) => {
 		children: textMap[level]
 	});
 };
-var FormFieldTag_default$1 = FormFieldTag;
-export { FormFieldTag_default$1 as t };
+//#endregion
+//#region src/components/FormFieldTag/index.ts
+var FormFieldTag_default = FormFieldTag;
+//#endregion
+export { FormFieldTag_default as t };
 
 //# sourceMappingURL=FormFieldTag.js.map

package/lib/FormFieldTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTag.js","names":["FormFieldTag: React.FC<FormFieldTagProps>","mergedResources: HNDesignsystemFormFieldTag"],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n  \"allRequired\": \"All fields must be filled out\",\n  \"requiredField\": \"Required\",\n  \"optional\": \"Optional\",\n  \"allOptional\": \"All fields are optional\",\n  \"requiredRadiobuttonList\": \"Select one\",\n  \"requiredCheckboxList\": \"Select one or more\",\n  \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n  \"allRequired\": \"Alle felt må fylles ut\",\n  \"requiredField\": \"Må fylles ut\",\n  \"optional\": \"Valgfritt\",\n  \"allOptional\": \"Alle felt er valgfrie\",\n  \"requiredRadiobuttonList\": \"Velg én\",\n  \"requiredCheckboxList\": \"Velg én eller flere\",\n  \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n  \"allRequired\": \"Alle felt må fyllast ut\",\n  \"requiredField\": \"Må fyllast ut\",\n  \"optional\": \"Valfritt\",\n  \"allOptional\": \"Alle felt er valfrie\",\n  \"requiredRadiobuttonList\": \"Vel éin\",\n  \"requiredCheckboxList\": \"Vel éin eller fleire\",\n  \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n  \"allRequired\": \"Buot sajiid ferte deavdit\",\n  \"requiredField\": \"Ferte devdojuvvot\",\n  \"optional\": \"Válljenláhkái\",\n  \"allOptional\": \"Buot sajit eat válljenláhkái\",\n  \"requiredRadiobuttonList\": \"Vállje ovtta\",\n  \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n  \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFormFieldTag>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,MAAa,gBAAgB,aAA0D;AACrF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB,kBACnB,QAAO;EACT,KAAK,gBAAgB,cACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACYb,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA8C;EAClD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;AAED,QACE,oBAAC,QAAA;EACK;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;GACJ;;AC1DX,IAAA,yBD8De"}
+{"version":3,"file":"FormFieldTag.js","names":[],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n  \"allRequired\": \"All fields must be filled out\",\n  \"requiredField\": \"Required\",\n  \"optional\": \"Optional\",\n  \"allOptional\": \"All fields are optional\",\n  \"requiredRadiobuttonList\": \"Select one\",\n  \"requiredCheckboxList\": \"Select one or more\",\n  \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n  \"allRequired\": \"Alle felt må fylles ut\",\n  \"requiredField\": \"Må fylles ut\",\n  \"optional\": \"Valgfritt\",\n  \"allOptional\": \"Alle felt er valgfrie\",\n  \"requiredRadiobuttonList\": \"Velg én\",\n  \"requiredCheckboxList\": \"Velg én eller flere\",\n  \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n  \"allRequired\": \"Alle felt må fyllast ut\",\n  \"requiredField\": \"Må fyllast ut\",\n  \"optional\": \"Valfritt\",\n  \"allOptional\": \"Alle felt er valfrie\",\n  \"requiredRadiobuttonList\": \"Vel éin\",\n  \"requiredCheckboxList\": \"Vel éin eller fleire\",\n  \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n  \"allRequired\": \"Buot sajiid ferte deavdit\",\n  \"requiredField\": \"Ferte devdojuvvot\",\n  \"optional\": \"Válljenláhkái\",\n  \"allOptional\": \"Buot sajit eat válljenláhkái\",\n  \"requiredRadiobuttonList\": \"Vállje ovtta\",\n  \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n  \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFormFieldTag>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAA0D;CACrF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;ACYb,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAA8C;EAClD,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;CAED,OACE,oBAAC,QAAD;EACM;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;EACJ,CAAA;;;;AC1DX,IAAA,uBAAe"}

package/lib/FormGroup.js

@@ -1,21 +1,22 @@
-import { i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
-import { t as isComponent } from "./component.js";
-import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { AnalyticsId, FormOnColor, FormSize } from "./constants.js";
+import { isComponent } from "./utils/component.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { t as FormFieldTag_default } from "./FormFieldTag.js";
-import { n as Checkbox_default } from "./Checkbox.js";
-import { t as Title_default } from "./Title2.js";
+import { t as Checkbox } from "./Checkbox.js";
+import Title_default from "./components/Title/index.js";
 import { t as Select_default } from "./Select.js";
 import { t as FormLayout_default } from "./FormLayout.js";
-import { t as Input_default } from "./Input.js";
-import { r as RadioButton_default, t as getRadioLabelClasses } from "./utils3.js";
+import { t as Input } from "./Input.js";
+import { n as RadioButton, t as getRadioLabelClasses } from "./utils3.js";
 import { t as Slider_default } from "./Slider.js";
 import { t as Textarea_default } from "./Textarea.js";
 import classNames from "classnames";
 import React, { useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormGroup/styles.module.scss";
-const FormGroup = (props) => {
+//#region src/components/FormGroup/FormGroup.tsx
+var FormGroup = (props) => {
 	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, legendId, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
 	const [checkedRadioId, setCheckedRadioId] = useState();
 	const radioGroupId = useId();
@@ -39,14 +40,14 @@ const FormGroup = (props) => {
 			renderError: false,
 			errorTextId
 		});
-		else if (isComponent(child, Checkbox_default)) return React.cloneElement(child, {
+		else if (isComponent(child, Checkbox)) return React.cloneElement(child, {
 			name: name ?? child.props.name,
 			onColor,
 			size,
 			error: !!error,
 			errorTextId
 		});
-		else if (isComponent(child, RadioButton_default)) {
+		else if (isComponent(child, RadioButton)) {
 			const radioId = typeof child.props.inputId === "undefined" ? radioGroupId + index : child.props.inputId;
 			return React.cloneElement(child, {
 				inputId: radioId,
@@ -61,7 +62,7 @@ const FormGroup = (props) => {
 				errorTextId,
 				labelClassNames: getRadioLabelClasses(radioId, onColor, isLarge, checkedRadioId)
 			});
-		} else if (isComponent(child, Input_default)) return React.cloneElement(child, {
+		} else if (isComponent(child, Input)) return React.cloneElement(child, {
 			name: name ?? child.props.name,
 			onColor,
 			size,
@@ -131,7 +132,7 @@ const FormGroup = (props) => {
 	});
 };
 FormGroup.displayName = "FormGroup";
-var FormGroup_default = FormGroup;
-export { FormGroup_default as n, FormGroup as t };
+//#endregion
+export { FormGroup as t };
 
 //# sourceMappingURL=FormGroup.js.map

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":["FormGroup: React.FC<FormGroupProps>"],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport { getRadioLabelClasses } from '../RadioButton/utils';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport { getRadioLabelClasses } from '../RadioButton/utils';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

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