npm - @helsenorge/designsystem-react - Versions diffs - 14.0.0-beta.2 → 14.0.0-beta.4 - Mend

@helsenorge/designsystem-react 14.0.0-beta.2 → 14.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1133) hide show

package/lib/AnchorLink.js CHANGED Viewed

@@ -4,14 +4,14 @@ import { t as getColor } from "./color.js";
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as ArrowUpRight_default } from "./ArrowUpRight.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import AnchorLinkStyles from "./components/AnchorLink/styles.module.scss";
 var AnchorLink = (props) => {
 	const { asChild, id, href, children, className, target = "_self", htmlMarkup = "a", onClick, testId, ref } = props;
 	const external = target === "_blank";
 	const { refObject, isHovered } = usePseudoClasses(ref);
-	const anchorClasses = cn(AnchorLinkStyles.anchorlink, className);
+	const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);
 	const commonProps = {
 		id,
 		["data-testid"]: testId,

package/lib/AnchorLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorLink.js","names":["AnchorLink: React.FC<AnchorLinkProps>"],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' \| '_blank' \| '_parent';\n\nexport type AnchorLinkTags = 'a' \| 'button';\n\nexport type AnchorLinkOnClickEvent =\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.FormEvent<unknown>\n \| React.KeyboardEvent<HTMLUListElement>\n \| null;\n\nexport interface AnchorLinkProps {\n /** When true, onclick and keyboard events will be passed to the child. /\n asChild?: boolean;\n /* Sets the content of the <a> tag /\n children: React.ReactNode;\n /* URL to link to /\n href?: string;\n /* Gives a unique id to the anchor-link :) /\n id?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link /\n target?: AnchorLinkTargets;\n /* HTML markup for anchor link. Default: a /\n htmlMarkup?: AnchorLinkTags;\n /* Function that is called when clicked /\n onClick?: (e?: AnchorLinkOnClickEvent) => void;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref that is passed to the component /\n ref?: React.Ref<HTMLAnchorElement \| HTMLButtonElement \| null>;\n}\n\nconst AnchorLink: React.FC<AnchorLinkProps> = props => {\n const { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId, ref } = props;\n const external = target === '_blank';\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement \| HTMLAnchorElement>(\n ref as React.RefObject<HTMLButtonElement \| HTMLAnchorElement>\n );\n const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n const commonProps = {\n id,\n ['data-testid']: testId,\n ['data-analyticsid']: AnalyticsId.AnchorLink,\n onClick,\n };\n\n const renderContent = (): React.ReactElement => (\n <>\n {children}\n {external && (\n <Icon\n className={AnchorLinkStyles.anchorlink__icon}\n svgIcon={ArrowUpRight}\n color={getColor('blueberry', 600)}\n hoverColor={getColor('blueberry', 700)}\n size={IconSize.XSmall}\n isHovered={isHovered}\n />\n )}\n </>\n );\n\n if (asChild) {\n return (\n <AsChildSlot content={<span className={anchorClasses} />} className={AnchorLinkStyles['anchorlink-wrapper']} elementRef={refObject}>\n {children}\n </AsChildSlot>\n );\n }\n\n if (htmlMarkup === 'a') {\n return (\n <a\n href={href}\n target={target}\n className={anchorClasses}\n rel={external ? 'noopener noreferrer' : undefined}\n ref={refObject as React.RefObject<HTMLAnchorElement>}\n {...commonProps}\n >\n {renderContent()}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n className={AnchorLinkStyles['anchorlink-wrapper']}\n ref={refObject as React.RefObject<HTMLButtonElement>}\n {...commonProps}\n >\n <span className={anchorClasses}>{renderContent()}</span>\n </button>\n );\n};\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;AA4CA,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,QAAQ,QAAQ;CAC7G,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,IACD;CACD,MAAM,gBAAgB,~~GAAW~~,iBAAiB,YAAY,UAAU;CAExE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;EACD;CAED,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAA;EACC,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,IAAI;EACjC,YAAY,SAAS,aAAa,IAAI;EACtC,MAAM,SAAS;EACJ;GACX,CAAA,EAAA,CAEH;AAGL,KAAI,QACF,QACE,oBAAC,qBAAA;EAAY,SAAS,oBAAC,QAAA,EAAK,WAAW,eAAA,CAAiB;EAAE,WAAW,iBAAiB;EAAuB,YAAY;EACtH;GACW;AAIlB,KAAI,eAAe,IACjB,QACE,oBAAC,KAAA;EACO;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,eAAe;GACd;AAIR,QACE,oBAAC,UAAA;EACC,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAA;GAAK,WAAW;aAAgB,eAAe;IAAQ;GACjD;;ACxGb,IAAA,uBD4Ge"}
1	+ {"version":3,"file":"AnchorLink.js","names":["AnchorLink: React.FC<AnchorLinkProps>"],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' \| '_blank' \| '_parent';\n\nexport type AnchorLinkTags = 'a' \| 'button';\n\nexport type AnchorLinkOnClickEvent =\n \| React.MouseEvent<HTMLElement, MouseEvent>\n \| React.FormEvent<unknown>\n \| React.KeyboardEvent<HTMLUListElement>\n \| null;\n\nexport interface AnchorLinkProps {\n /** When true, onclick and keyboard events will be passed to the child. /\n asChild?: boolean;\n /* Sets the content of the <a> tag /\n children: React.ReactNode;\n /* URL to link to /\n href?: string;\n /* Gives a unique id to the anchor-link :) /\n id?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link /\n target?: AnchorLinkTargets;\n /* HTML markup for anchor link. Default: a /\n htmlMarkup?: AnchorLinkTags;\n /* Function that is called when clicked /\n onClick?: (e?: AnchorLinkOnClickEvent) => void;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref that is passed to the component /\n ref?: React.Ref<HTMLAnchorElement \| HTMLButtonElement \| null>;\n}\n\nconst AnchorLink: React.FC<AnchorLinkProps> = props => {\n const { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId, ref } = props;\n const external = target === '_blank';\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement \| HTMLAnchorElement>(\n ref as React.RefObject<HTMLButtonElement \| HTMLAnchorElement>\n );\n const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n const commonProps = {\n id,\n ['data-testid']: testId,\n ['data-analyticsid']: AnalyticsId.AnchorLink,\n onClick,\n };\n\n const renderContent = (): React.ReactElement => (\n <>\n {children}\n {external && (\n <Icon\n className={AnchorLinkStyles.anchorlink__icon}\n svgIcon={ArrowUpRight}\n color={getColor('blueberry', 600)}\n hoverColor={getColor('blueberry', 700)}\n size={IconSize.XSmall}\n isHovered={isHovered}\n />\n )}\n </>\n );\n\n if (asChild) {\n return (\n <AsChildSlot content={<span className={anchorClasses} />} className={AnchorLinkStyles['anchorlink-wrapper']} elementRef={refObject}>\n {children}\n </AsChildSlot>\n );\n }\n\n if (htmlMarkup === 'a') {\n return (\n <a\n href={href}\n target={target}\n className={anchorClasses}\n rel={external ? 'noopener noreferrer' : undefined}\n ref={refObject as React.RefObject<HTMLAnchorElement>}\n {...commonProps}\n >\n {renderContent()}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n className={AnchorLinkStyles['anchorlink-wrapper']}\n ref={refObject as React.RefObject<HTMLButtonElement>}\n {...commonProps}\n >\n <span className={anchorClasses}>{renderContent()}</span>\n </button>\n );\n};\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;AA4CA,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,QAAQ,QAAQ;CAC7G,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,IACD;CACD,MAAM,gBAAgB,WAAW,iBAAiB,YAAY,UAAU;CAExE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;EACD;CAED,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAA;EACC,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,IAAI;EACjC,YAAY,SAAS,aAAa,IAAI;EACtC,MAAM,SAAS;EACJ;GACX,CAAA,EAAA,CAEH;AAGL,KAAI,QACF,QACE,oBAAC,qBAAA;EAAY,SAAS,oBAAC,QAAA,EAAK,WAAW,eAAA,CAAiB;EAAE,WAAW,iBAAiB;EAAuB,YAAY;EACtH;GACW;AAIlB,KAAI,eAAe,IACjB,QACE,oBAAC,KAAA;EACO;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,eAAe;GACd;AAIR,QACE,oBAAC,UAAA;EACC,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAA;GAAK,WAAW;aAAgB,eAAe;IAAQ;GACjD;;ACxGb,IAAA,uBD4Ge"}

package/lib/Avatar.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { a as IconSize, n as AnalyticsId } from "./constants2.js";
 import { t as palette } from "./palette.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as Check_default } from "./Check.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Avatar/styles.module.scss";
 let AvatarSize = /* @__PURE__ */ function(AvatarSize$1) {
@@ -14,7 +14,7 @@ var Avatar = (props) => {
 	const { children, className = "", selected = false, color = "blueberry", variant = "square", size = AvatarSize.small, testId, ref } = props;
 	const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(styles.avatar, selected && styles["avatar--selected"], color === "black" && styles["avatar--black"], variant === "circle" && styles["avatar--circle"], size === AvatarSize.xsmall && styles["avatar--xsmall"], size === AvatarSize.small && styles["avatar--small"], className),
+		className: classNames(styles.avatar, selected && styles["avatar--selected"], color === "black" && styles["avatar--black"], variant === "circle" && styles["avatar--circle"], size === AvatarSize.xsmall && styles["avatar--xsmall"], size === AvatarSize.small && styles["avatar--small"], className),
 		ref,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Avatar,

package/lib/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","names":["Avatar: React.FC<AvatarProps>"],"sources":["../src/components/Avatar/constants.ts","../src/components/Avatar/Avatar.tsx","../src/components/Avatar/index.ts"],"sourcesContent":["export enum AvatarSize {\n xsmall = 'xsmall',\n small = 'small',\n}\n","import cn from 'classnames';\n\nimport { AvatarSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport interface AvatarProps {\n /** Name to display in the avatar. Will be truncated to the first two characters. /\n children: string;\n /* Displays a check icon to indicated the selected state. /\n selected?: boolean;\n /* Sets blue or black color on avatar. /\n color?: 'blueberry' \| 'black';\n /* Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 /\n variant?: 'square' \| 'circle';\n /* Avatar size. Default: small /\n size?: keyof typeof AvatarSize;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\nexport type AvatarType = typeof Avatar;\nconst Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {\n const {\n children,\n className = '',\n selected = false,\n color = 'blueberry',\n variant = 'square',\n size = AvatarSize.small,\n testId,\n ref,\n } = props;\n const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n return (\n <span\n className={cn(\n styles.avatar,\n selected && styles['avatar--selected'],\n color === 'black' && styles['avatar--black'],\n variant === 'circle' && styles['avatar--circle'],\n size === AvatarSize.xsmall && styles['avatar--xsmall'],\n size === AvatarSize.small && styles['avatar--small'],\n className\n )}\n ref={ref}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Avatar}\n >\n {selected ? (\n <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n ) : (\n truncatedName\n )}\n </span>\n );\n};\n\nexport default Avatar;\n","import Avatar from './Avatar';\nexport { AvatarSize } from './constants';\nexport from './Avatar';\nexport default Avatar;\n"],"mappings":";;;;;;;AAAA,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,WAAA;;;AC2BF,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EACJ,UACA,YAAY,IACZ,WAAW,OACX,QAAQ,aACR,UAAU,UACV,OAAO,WAAW,OAClB,QACA,QACE;CACJ,MAAM,gBAAgB,SAAS,OAAO,EAAE,CAAC,mBAAmB,GAAG,SAAS,UAAU,GAAG,EAAE;AACvF,QACE,oBAAC,QAAA;EACC,WAAW,~~GACT~~,OAAO,QACP,YAAY,OAAO,qBACnB,UAAU,WAAW,OAAO,kBAC5B,YAAY,YAAY,OAAO,mBAC/B,SAAS,WAAW,UAAU,OAAO,mBACrC,SAAS,WAAW,SAAS,OAAO,kBACpC,UACD;EACI;EACL,eAAa;EACb,oBAAkB,YAAY;YAE7B,WACC,oBAAC,cAAA;GAAK,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ;IAAgB,GAEpH;GAEG;;AC1DX,IAAA,mBD8De"}
1	+ {"version":3,"file":"Avatar.js","names":["Avatar: React.FC<AvatarProps>"],"sources":["../src/components/Avatar/constants.ts","../src/components/Avatar/Avatar.tsx","../src/components/Avatar/index.ts"],"sourcesContent":["export enum AvatarSize {\n xsmall = 'xsmall',\n small = 'small',\n}\n","import cn from 'classnames';\n\nimport { AvatarSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport interface AvatarProps {\n /** Name to display in the avatar. Will be truncated to the first two characters. /\n children: string;\n /* Displays a check icon to indicated the selected state. /\n selected?: boolean;\n /* Sets blue or black color on avatar. /\n color?: 'blueberry' \| 'black';\n /* Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 /\n variant?: 'square' \| 'circle';\n /* Avatar size. Default: small /\n size?: keyof typeof AvatarSize;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\nexport type AvatarType = typeof Avatar;\nconst Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {\n const {\n children,\n className = '',\n selected = false,\n color = 'blueberry',\n variant = 'square',\n size = AvatarSize.small,\n testId,\n ref,\n } = props;\n const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n return (\n <span\n className={cn(\n styles.avatar,\n selected && styles['avatar--selected'],\n color === 'black' && styles['avatar--black'],\n variant === 'circle' && styles['avatar--circle'],\n size === AvatarSize.xsmall && styles['avatar--xsmall'],\n size === AvatarSize.small && styles['avatar--small'],\n className\n )}\n ref={ref}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Avatar}\n >\n {selected ? (\n <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n ) : (\n truncatedName\n )}\n </span>\n );\n};\n\nexport default Avatar;\n","import Avatar from './Avatar';\nexport { AvatarSize } from './constants';\nexport from './Avatar';\nexport default Avatar;\n"],"mappings":";;;;;;;AAAA,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,WAAA;;;AC2BF,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EACJ,UACA,YAAY,IACZ,WAAW,OACX,QAAQ,aACR,UAAU,UACV,OAAO,WAAW,OAClB,QACA,QACE;CACJ,MAAM,gBAAgB,SAAS,OAAO,EAAE,CAAC,mBAAmB,GAAG,SAAS,UAAU,GAAG,EAAE;AACvF,QACE,oBAAC,QAAA;EACC,WAAW,WACT,OAAO,QACP,YAAY,OAAO,qBACnB,UAAU,WAAW,OAAO,kBAC5B,YAAY,YAAY,OAAO,mBAC/B,SAAS,WAAW,UAAU,OAAO,mBACrC,SAAS,WAAW,SAAS,OAAO,kBACpC,UACD;EACI;EACL,eAAa;EACb,oBAAkB,YAAY;YAE7B,WACC,oBAAC,cAAA;GAAK,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ;IAAgB,GAEpH;GAEG;;AC1DX,IAAA,mBD8De"}

package/lib/BabyMobileMedium.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils3.js";
+import { t as ViewBoxSize } from "./utils4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BabyMobileMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {

package/lib/Badge.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { a as IconSize, n as AnalyticsId } from "./constants2.js";
 import { t as NotificationBadge_default } from "./NotificationBadge.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import badgeStyles from "./components/Badge/styles.module.scss";
 var Badge = (props) => {
 	const { children, className = "", color = "blueberry", testId, type = "string", notificationVariant = "info", ref } = props;
-	const badgeClasses = cn(badgeStyles.badge, {
+	const badgeClasses = classNames(badgeStyles.badge, {
 		[badgeStyles["badge--blueberry"]]: color === "blueberry",
 		[badgeStyles["badge--cherry"]]: color === "cherry",
 		[badgeStyles["badge--neutral"]]: color === "neutral"

package/lib/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","names":["Badge: React.FC<BadgeProps>"],"sources":["../src/components/Badge/Badge.tsx","../src/components/Badge/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { BadgeNotificationVariant } from './NotificationBadge';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport NotificationBadge from './NotificationBadge';\nimport { AnalyticsId, IconSize } from '../../constants';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' \| 'cherry' \| 'neutral'>;\nexport type BadgeChildren = string \| number;\nexport type BadgeVariant = 'string' \| 'notification';\n\nexport interface BadgeProps {\n /** Sets the content of the badge. /\n children?: BadgeChildren;\n /* Adds custom classes to the element. /\n className?: string;\n /* Changes the badge background color. /\n color?: BadgeColors;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Changes the type of the badge. Default: string /\n type?: BadgeVariant;\n /* Type of notification badge. Only works if type is 'notification'. /\n notificationVariant?: BadgeNotificationVariant;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport type BadgeType = typeof Badge;\nconst Badge: React.FC<BadgeProps> = (props: BadgeProps) => {\n const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info', ref } = props;\n const badgeClasses = classNames(\n badgeStyles.badge,\n {\n [badgeStyles['badge--blueberry']]: color === 'blueberry',\n [badgeStyles['badge--cherry']]: color === 'cherry',\n [badgeStyles['badge--neutral']]: color === 'neutral',\n },\n className\n );\n\n if (type === 'notification' && notificationVariant !== undefined) {\n return (\n <NotificationBadge\n variant={notificationVariant}\n size={IconSize.XSmall}\n className={className}\n testId={testId}\n data-analyticsid={AnalyticsId.Badge}\n />\n );\n }\n\n return (\n <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n {children}\n </span>\n );\n};\n\nexport default Badge;\n","import Badge from './Badge';\nexport from './Badge';\nexport default Badge;\n"],"mappings":";;;;;AAgCA,IAAMA,SAA+B,UAAsB;CACzD,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,QAAQ,QAAQ;CACtH,MAAM,eAAe,~~GACnB~~,YAAY,OACZ;GACG,YAAY,sBAAsB,UAAU;GAC5C,YAAY,mBAAmB,UAAU;GACzC,YAAY,oBAAoB,UAAU;EAC5C,EACD,UACD;AAED,KAAI,SAAS,kBAAkB,wBAAwB,KAAA,EACrD,QACE,oBAAC,2BAAA;EACC,SAAS;EACT,MAAM,SAAS;EACJ;EACH;EACR,oBAAkB,YAAY;GAC9B;AAIN,QACE,oBAAC,QAAA;EAAK,WAAW;EAAmB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EACzF;GACI;;ACzDX,IAAA,kBD6De"}
1	+ {"version":3,"file":"Badge.js","names":["Badge: React.FC<BadgeProps>"],"sources":["../src/components/Badge/Badge.tsx","../src/components/Badge/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { BadgeNotificationVariant } from './NotificationBadge';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport NotificationBadge from './NotificationBadge';\nimport { AnalyticsId, IconSize } from '../../constants';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' \| 'cherry' \| 'neutral'>;\nexport type BadgeChildren = string \| number;\nexport type BadgeVariant = 'string' \| 'notification';\n\nexport interface BadgeProps {\n /** Sets the content of the badge. /\n children?: BadgeChildren;\n /* Adds custom classes to the element. /\n className?: string;\n /* Changes the badge background color. /\n color?: BadgeColors;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Changes the type of the badge. Default: string /\n type?: BadgeVariant;\n /* Type of notification badge. Only works if type is 'notification'. /\n notificationVariant?: BadgeNotificationVariant;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport type BadgeType = typeof Badge;\nconst Badge: React.FC<BadgeProps> = (props: BadgeProps) => {\n const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info', ref } = props;\n const badgeClasses = classNames(\n badgeStyles.badge,\n {\n [badgeStyles['badge--blueberry']]: color === 'blueberry',\n [badgeStyles['badge--cherry']]: color === 'cherry',\n [badgeStyles['badge--neutral']]: color === 'neutral',\n },\n className\n );\n\n if (type === 'notification' && notificationVariant !== undefined) {\n return (\n <NotificationBadge\n variant={notificationVariant}\n size={IconSize.XSmall}\n className={className}\n testId={testId}\n data-analyticsid={AnalyticsId.Badge}\n />\n );\n }\n\n return (\n <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n {children}\n </span>\n );\n};\n\nexport default Badge;\n","import Badge from './Badge';\nexport from './Badge';\nexport default Badge;\n"],"mappings":";;;;;AAgCA,IAAMA,SAA+B,UAAsB;CACzD,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,QAAQ,QAAQ;CACtH,MAAM,eAAe,WACnB,YAAY,OACZ;GACG,YAAY,sBAAsB,UAAU;GAC5C,YAAY,mBAAmB,UAAU;GACzC,YAAY,oBAAoB,UAAU;EAC5C,EACD,UACD;AAED,KAAI,SAAS,kBAAkB,wBAAwB,KAAA,EACrD,QACE,oBAAC,2BAAA;EACC,SAAS;EACT,MAAM,SAAS;EACJ;EACH;EACR,oBAAkB,YAAY;GAC9B;AAIN,QACE,oBAAC,QAAA;EAAK,WAAW;EAAmB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EACzF;GACI;;ACzDX,IAAA,kBD6De"}

package/lib/Button.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { t as Icon_default } from "./Icon.js";
 import { t as useIcons } from "./useIcons.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as ArrowRight_default } from "./ArrowRight.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import buttonStyles from "./components/Button/styles.module.scss";
@@ -41,8 +41,8 @@ var Button = (props) => {
 	const large = size === "large" && !destructive && !borderlessVariant;
 	const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
 	const rest = { ...restProps };
-	const buttonWrapperClasses = cn(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
-	const buttonClasses = cn(buttonStyles.button, {
+	const buttonWrapperClasses = classNames(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
+	const buttonClasses = classNames(buttonStyles.button, {
 		[buttonStyles["button--destructive"]]: destructive,
 		[buttonStyles["button--normal"]]: !large,
 		[buttonStyles["button--large"]]: large,
@@ -55,11 +55,11 @@ var Button = (props) => {
 		[buttonStyles["button--arrow"]]: hasArrow,
 		[buttonStyles["button--on-dark"]]: onDark
 	}, className);
-	const buttonTextClasses = cn(buttonStyles["button__text"], {
+	const buttonTextClasses = classNames(buttonStyles["button__text"], {
 		[buttonStyles["button__text--ellipsis"]]: ellipsis,
 		[buttonStyles["button__text--centered"]]: fluid && textPosition === "centered"
 	}, textClassName);
-	const diagonalClasses = cn(buttonStyles["diagonal"], { [buttonStyles["diagonal--on-dark"]]: onDark });
+	const diagonalClasses = classNames(buttonStyles["diagonal"], { [buttonStyles["diagonal--on-dark"]]: onDark });
 	useEffect(() => {
 		checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());
 	}, []);
@@ -86,7 +86,7 @@ var Button = (props) => {
 		children: [
 			renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
 			renderButtonContent(),
-			hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default }), getLargeIconSize(large, isMobile), cn(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
+			hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default }), getLargeIconSize(large, isMobile), classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
 			hasUURightArrow && /* @__PURE__ */ jsx("span", {
 				style: { color: iconColor },
 				className: buttonStyles["button__right-unicode-arrow"],

package/lib/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":["Button: React.FC<ButtonProps>"],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' \| 'destructive';\nexport type ButtonVariant = 'fill' \| 'outline' \| 'borderless';\nexport type ButtonSize = 'medium' \| 'large';\nexport type ButtonOnColor = 'onlight' \| 'ondark';\nexport type ButtonTags = 'button' \| 'a';\nexport type ButtonArrows = 'icon' \| 'accessibility-character';\nexport type ButtonTextPosition = 'left' \| 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' \| 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n /** Sets the aria-label of the button, use when the button only includes an icon /\n ariaLabel?: string;\n /* Gives a unique id to the button /\n id?: string;\n /* Sets the content of the button. /\n children: React.ReactNode;\n /* Adds custom classes to the wrapper element. /\n wrapperClassName?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Enables an arrow icon to the right inside the button (Not available in borderless variant) /\n arrow?: ButtonArrows;\n /* Changes the intent of the button. Mostly changes the color profile. /\n concept?: ButtonConcept;\n /* Disables text wrapping and enables ellipsis. /\n ellipsis?: boolean;\n /* Makes the button scale to full width of its parent element. /\n fluid?: boolean;\n /* Changes the underlying element of the button. /\n htmlMarkup?: ButtonTags;\n /* Changes the button colors for different backgrounds. /\n onColor?: ButtonOnColor;\n /* Function that is called when the Button loses focus /\n onBlur?: () => void;\n /* Function that is called when clicked /\n onClick?: (\n e?: React.MouseEvent<HTMLElement, MouseEvent> \| React.FormEvent<unknown> \| React.KeyboardEvent<HTMLUListElement> \| null\n ) => void;\n /* Changes the button colors for different backgrounds. (Large not available in borderless variant) /\n size?: ButtonSize;\n /* Changes the visual representation of the button. /\n variant?: ButtonVariant;\n /* Specifies the focus order relative to the other buttons or controls on the page /\n tabIndex?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Adds custom classes to the text /\n textClassName?: string;\n /* Sets the position of the text in the button - only applies when button is fluid /\n textPosition?: ButtonTextPosition;\n /* Button type. Default: button /\n type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n /* Ref that is passed to the component /\n ref?: React.RefObject<HTMLButtonElement \| HTMLAnchorElement \| null>;\n}\n\nconst getIconColor = (\n fill: boolean,\n borderless: boolean,\n disabled: boolean,\n concept: ButtonConcept,\n ondark: boolean,\n mobile: boolean\n): string => {\n if (mobile && disabled) {\n return !ondark \|\| fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n }\n if (disabled) {\n return !ondark \|\| fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n }\n if ((fill && !ondark) \|\| (!fill && ondark)) {\n return 'white';\n }\n\n return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n if (mobile && large) return IconSize.Small;\n if (large) return IconSize.Medium;\n return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string \| undefined, devEnv: boolean): void => {\n if (devEnv && onlyIcon && (ariaLabel === undefined \|\| ariaLabel === '')) {\n throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n const {\n ariaLabel,\n id,\n children,\n wrapperClassName,\n className,\n arrow,\n concept = 'normal',\n disabled = false,\n ellipsis = false,\n fluid = false,\n htmlMarkup = 'button',\n onColor = 'onlight',\n onBlur,\n onClick,\n size = 'medium',\n variant = 'fill',\n href,\n tabIndex,\n testId,\n target,\n type = 'button',\n textClassName,\n textPosition = 'left',\n ref,\n ...restProps\n } = props;\n const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement \| HTMLAnchorElement \| null>(ref);\n const buttonContentRef = useRef<HTMLDivElement>(null);\n const onlyIcon = !!(leftIcon \|\| rightIcon) && !restChildren;\n const bothIcons = leftIcon && (rightIcon \|\| arrow) && !onlyIcon;\n const onDark = onColor === 'ondark';\n const isMobile = useIsMobileBreakpoint();\n const destructive = concept === 'destructive' && !disabled;\n const outlineVariant = variant === 'outline';\n const borderlessVariant = variant === 'borderless';\n const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n const hasArrow = arrow === 'icon' && !borderlessVariant;\n const large = size === 'large' && !destructive && !borderlessVariant;\n const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n const rest = { ...restProps };\n\n const buttonWrapperClasses = classNames(\n buttonStyles['button-wrapper'],\n { [buttonStyles['button-wrapper--fluid']]: fluid \|\| ellipsis },\n wrapperClassName\n );\n const buttonClasses = classNames(\n buttonStyles.button,\n {\n [buttonStyles['button--destructive']]: destructive,\n [buttonStyles['button--normal']]: !large,\n [buttonStyles['button--large']]: large,\n [buttonStyles['button--outline']]: outlineVariant,\n [buttonStyles['button--borderless']]: borderlessVariant,\n [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n [buttonStyles['button--both-icons']]: bothIcons,\n [buttonStyles['button--only-icon']]: onlyIcon,\n [buttonStyles['button--arrow']]: hasArrow,\n [buttonStyles['button--on-dark']]: onDark,\n },\n className\n );\n const buttonTextClasses = classNames(\n buttonStyles['button__text'],\n {\n [buttonStyles['button__text--ellipsis']]: ellipsis,\n [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n },\n textClassName\n );\n const diagonalClasses = classNames(buttonStyles['diagonal'], {\n [buttonStyles['diagonal--on-dark']]: onDark,\n });\n\n useEffect(() => {\n checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n }, []);\n\n const renderIcon = (iconElement: BaseIconElement \| null, iconSize: number, iconClassName?: string): BaseIconElement \| null => {\n return iconElement\n ? React.cloneElement(iconElement, {\n size: iconSize,\n color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n className: iconClassName,\n })\n : null;\n };\n\n const renderButtonContent = (): React.ReactNode => {\n return (\n <span className={buttonTextClasses} ref={buttonContentRef}>\n {disabled && borderlessVariant && (\n <span className={diagonalClasses}>\n <span className={buttonStyles['diagonal__line']} />\n </span>\n )}\n <span>{onlyIcon ? ariaLabel : restChildren}</span>\n </span>\n );\n };\n\n const renderbuttonContentWrapper = (): React.ReactNode => (\n <span className={buttonClasses}>\n {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n {renderButtonContent()}\n {hasArrow\n ? renderIcon(\n <Icon svgIcon={ArrowRight} />,\n getLargeIconSize(large, isMobile),\n classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n )\n : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles['button__right-icon'])}\n {hasUURightArrow && (\n <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n {' →'}\n </span>\n )}\n </span>\n );\n\n return (\n <>\n {htmlMarkup === 'button' && (\n <button\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n disabled={disabled}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n ref={refObject as React.RefObject<HTMLButtonElement>}\n tabIndex={tabIndex}\n type={type}\n {...rest}\n >\n {renderbuttonContentWrapper()}\n </button>\n )}\n {htmlMarkup === 'a' && (\n <a\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n ref={refObject as React.RefObject<HTMLAnchorElement>}\n tabIndex={tabIndex}\n {...restProps}\n >\n {renderbuttonContentWrapper()}\n </a>\n )}\n </>\n );\n};\n\nexport default Button;\n","import Button from './Button';\nexport from './Button';\nexport default Button;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.js","names":["Button: React.FC<ButtonProps>"],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' \| 'destructive';\nexport type ButtonVariant = 'fill' \| 'outline' \| 'borderless';\nexport type ButtonSize = 'medium' \| 'large';\nexport type ButtonOnColor = 'onlight' \| 'ondark';\nexport type ButtonTags = 'button' \| 'a';\nexport type ButtonArrows = 'icon' \| 'accessibility-character';\nexport type ButtonTextPosition = 'left' \| 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' \| 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n /** Sets the aria-label of the button, use when the button only includes an icon /\n ariaLabel?: string;\n /* Gives a unique id to the button /\n id?: string;\n /* Sets the content of the button. /\n children: React.ReactNode;\n /* Adds custom classes to the wrapper element. /\n wrapperClassName?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Enables an arrow icon to the right inside the button (Not available in borderless variant) /\n arrow?: ButtonArrows;\n /* Changes the intent of the button. Mostly changes the color profile. /\n concept?: ButtonConcept;\n /* Disables text wrapping and enables ellipsis. /\n ellipsis?: boolean;\n /* Makes the button scale to full width of its parent element. /\n fluid?: boolean;\n /* Changes the underlying element of the button. /\n htmlMarkup?: ButtonTags;\n /* Changes the button colors for different backgrounds. /\n onColor?: ButtonOnColor;\n /* Function that is called when the Button loses focus /\n onBlur?: () => void;\n /* Function that is called when clicked /\n onClick?: (\n e?: React.MouseEvent<HTMLElement, MouseEvent> \| React.FormEvent<unknown> \| React.KeyboardEvent<HTMLUListElement> \| null\n ) => void;\n /* Changes the button colors for different backgrounds. (Large not available in borderless variant) /\n size?: ButtonSize;\n /* Changes the visual representation of the button. /\n variant?: ButtonVariant;\n /* Specifies the focus order relative to the other buttons or controls on the page /\n tabIndex?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Adds custom classes to the text /\n textClassName?: string;\n /* Sets the position of the text in the button - only applies when button is fluid /\n textPosition?: ButtonTextPosition;\n /* Button type. Default: button /\n type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n /* Ref that is passed to the component /\n ref?: React.RefObject<HTMLButtonElement \| HTMLAnchorElement \| null>;\n}\n\nconst getIconColor = (\n fill: boolean,\n borderless: boolean,\n disabled: boolean,\n concept: ButtonConcept,\n ondark: boolean,\n mobile: boolean\n): string => {\n if (mobile && disabled) {\n return !ondark \|\| fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n }\n if (disabled) {\n return !ondark \|\| fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n }\n if ((fill && !ondark) \|\| (!fill && ondark)) {\n return 'white';\n }\n\n return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n if (mobile && large) return IconSize.Small;\n if (large) return IconSize.Medium;\n return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string \| undefined, devEnv: boolean): void => {\n if (devEnv && onlyIcon && (ariaLabel === undefined \|\| ariaLabel === '')) {\n throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n const {\n ariaLabel,\n id,\n children,\n wrapperClassName,\n className,\n arrow,\n concept = 'normal',\n disabled = false,\n ellipsis = false,\n fluid = false,\n htmlMarkup = 'button',\n onColor = 'onlight',\n onBlur,\n onClick,\n size = 'medium',\n variant = 'fill',\n href,\n tabIndex,\n testId,\n target,\n type = 'button',\n textClassName,\n textPosition = 'left',\n ref,\n ...restProps\n } = props;\n const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement \| HTMLAnchorElement \| null>(ref);\n const buttonContentRef = useRef<HTMLDivElement>(null);\n const onlyIcon = !!(leftIcon \|\| rightIcon) && !restChildren;\n const bothIcons = leftIcon && (rightIcon \|\| arrow) && !onlyIcon;\n const onDark = onColor === 'ondark';\n const isMobile = useIsMobileBreakpoint();\n const destructive = concept === 'destructive' && !disabled;\n const outlineVariant = variant === 'outline';\n const borderlessVariant = variant === 'borderless';\n const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n const hasArrow = arrow === 'icon' && !borderlessVariant;\n const large = size === 'large' && !destructive && !borderlessVariant;\n const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n const rest = { ...restProps };\n\n const buttonWrapperClasses = classNames(\n buttonStyles['button-wrapper'],\n { [buttonStyles['button-wrapper--fluid']]: fluid \|\| ellipsis },\n wrapperClassName\n );\n const buttonClasses = classNames(\n buttonStyles.button,\n {\n [buttonStyles['button--destructive']]: destructive,\n [buttonStyles['button--normal']]: !large,\n [buttonStyles['button--large']]: large,\n [buttonStyles['button--outline']]: outlineVariant,\n [buttonStyles['button--borderless']]: borderlessVariant,\n [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n [buttonStyles['button--both-icons']]: bothIcons,\n [buttonStyles['button--only-icon']]: onlyIcon,\n [buttonStyles['button--arrow']]: hasArrow,\n [buttonStyles['button--on-dark']]: onDark,\n },\n className\n );\n const buttonTextClasses = classNames(\n buttonStyles['button__text'],\n {\n [buttonStyles['button__text--ellipsis']]: ellipsis,\n [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n },\n textClassName\n );\n const diagonalClasses = classNames(buttonStyles['diagonal'], {\n [buttonStyles['diagonal--on-dark']]: onDark,\n });\n\n useEffect(() => {\n checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n }, []);\n\n const renderIcon = (iconElement: BaseIconElement \| null, iconSize: number, iconClassName?: string): BaseIconElement \| null => {\n return iconElement\n ? React.cloneElement(iconElement, {\n size: iconSize,\n color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n className: iconClassName,\n })\n : null;\n };\n\n const renderButtonContent = (): React.ReactNode => {\n return (\n <span className={buttonTextClasses} ref={buttonContentRef}>\n {disabled && borderlessVariant && (\n <span className={diagonalClasses}>\n <span className={buttonStyles['diagonal__line']} />\n </span>\n )}\n <span>{onlyIcon ? ariaLabel : restChildren}</span>\n </span>\n );\n };\n\n const renderbuttonContentWrapper = (): React.ReactNode => (\n <span className={buttonClasses}>\n {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n {renderButtonContent()}\n {hasArrow\n ? renderIcon(\n <Icon svgIcon={ArrowRight} />,\n getLargeIconSize(large, isMobile),\n classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n )\n : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles['button__right-icon'])}\n {hasUURightArrow && (\n <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n {' →'}\n </span>\n )}\n </span>\n );\n\n return (\n <>\n {htmlMarkup === 'button' && (\n <button\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n disabled={disabled}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n ref={refObject as React.RefObject<HTMLButtonElement>}\n tabIndex={tabIndex}\n type={type}\n {...rest}\n >\n {renderbuttonContentWrapper()}\n </button>\n )}\n {htmlMarkup === 'a' && (\n <a\n id={id}\n onBlur={onBlur}\n onClick={onClick}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Button}\n className={buttonWrapperClasses}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n ref={refObject as React.RefObject<HTMLAnchorElement>}\n tabIndex={tabIndex}\n {...restProps}\n >\n {renderbuttonContentWrapper()}\n </a>\n )}\n </>\n );\n};\n\nexport default Button;\n","import Button from './Button';\nexport from './Button';\nexport default Button;\n"],"mappings":"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"}

package/lib/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,17 @@
+## 14.0.0-beta.4 (2026-02-10)
+### Bug Fixes
+*  constants og utils fra komponenter skal eksporteres ([ae3e5af](https://github.com/helsenorge/designsystem/commit/ae3e5af25436b79b7b52cef5f78668742cecb356)), closes [#368469](https://github.com/helsenorge/designsystem/issues/368469) [#368806](https://github.com/helsenorge/designsystem/issues/368806)
+## 14.0.0-beta.3 (2026-02-10)
+### Features
+* **formgroup:**  ref prop renamet til errormessageref ([0f33ed5](https://github.com/helsenorge/designsystem/commit/0f33ed5ea14a64beb8c78f1e0aac8f8a94e2e53c)), closes [#368993](https://github.com/helsenorge/designsystem/issues/368993)
+### Bug Fixes
+*  komponent dts filer havnet i feil path ([31fb3ec](https://github.com/helsenorge/designsystem/commit/31fb3ec3ffd5c93e098d82d8fd1801d84aec26d6)), closes [#368469](https://github.com/helsenorge/designsystem/issues/368469)
 ## 14.0.0-beta.2 (2026-02-09)
 ## 14.0.0-beta.1 (2026-02-09)
 ## 14.0.0-beta.0 (2026-02-09)

package/lib/Checkbox.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { t as useIdWithFallback } from "./useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import checkboxStyles from "./components/Checkbox/styles.module.scss";
@@ -25,8 +25,8 @@ const Checkbox = (props) => {
 	const large = size === FormSize.large;
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
-	const checkboxWrapperClasses = cn(checkboxStyles["checkbox-wrapper"], { [checkboxStyles["checkbox-wrapper--large"]]: large });
-	const checkboxLabelClasses = cn(checkboxStyles["checkbox-label"], {
+	const checkboxWrapperClasses = classNames(checkboxStyles["checkbox-wrapper"], { [checkboxStyles["checkbox-wrapper--large"]]: large });
+	const checkboxLabelClasses = classNames(checkboxStyles["checkbox-label"], {
 		[checkboxStyles["checkbox-label--disabled"]]: disabled,
 		[checkboxStyles["checkbox-label--on-dark"]]: onDark,
 		[checkboxStyles["checkbox-label--large"]]: large,
@@ -38,8 +38,8 @@ const Checkbox = (props) => {
 		[checkboxStyles["checkbox-label__large--on-invalid"]]: large && onInvalid,
 		[checkboxStyles["checkbox-label__large--disabled"]]: large && disabled
 	});
-	const checkboxClasses = cn(checkboxStyles.checkbox, className);
-	const checkboxIconWrapperClasses = cn(checkboxStyles["checkbox__icon-wrapper"], {
+	const checkboxClasses = classNames(checkboxStyles.checkbox, className);
+	const checkboxIconWrapperClasses = classNames(checkboxStyles["checkbox__icon-wrapper"], {
 		[checkboxStyles["checkbox__icon-wrapper--on-white"]]: onWhite,
 		[checkboxStyles["checkbox__icon-wrapper--on-grey"]]: onGrey,
 		[checkboxStyles["checkbox__icon-wrapper--on-invalid"]]: onInvalid,
@@ -57,7 +57,7 @@ const Checkbox = (props) => {
 		[checkboxStyles["checkbox__icon-wrapper__large--checked--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox__icon-wrapper__large--checked--disabled"]]: disabled && large && isChecked
 	});
-	const labelTextClasses = cn(checkboxStyles["checkbox-label__text"], {
+	const labelTextClasses = classNames(checkboxStyles["checkbox-label__text"], {
 		[checkboxStyles["checkbox-label__text__large--checked"]]: large && isChecked,
 		[checkboxStyles["checkbox-label__text__large--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox-label__text--on-dark"]]: onDark,

package/lib/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["Checkbox: React.FC<CheckboxProps>"],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' \| 'name' \| 'value' \| 'disabled' \| 'checked' \| 'required' \| 'onChange'\n > {\n /** Adds custom classes to the element. /\n className?: string;\n /* The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant /\n label: React.ReactNode;\n /* input id of the checkbox /\n inputId?: string;\n /* Changes the visuals of the checkbox /\n onColor?: keyof typeof FormOnColor;\n /* Changes the visuals of the checkbox /\n size?: keyof typeof FormSize;\n /* Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref that is passed to the component */\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n className,\n checked = false,\n disabled,\n label,\n inputId = uuid(),\n onColor = FormOnColor.onwhite,\n name = inputId,\n size,\n errorText,\n error = !!errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n value = getLabelText(label),\n testId,\n required,\n onChange,\n ref,\n } = props;\n const [isChecked, setIsChecked] = useState(checked);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onWhite = onColor === FormOnColor.onwhite;\n const onGrey = onColor === FormOnColor.ongrey;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const onInvalid = error \|\| onColor === FormOnColor.oninvalid;\n const onDark = onColor === FormOnColor.ondark;\n const large = size === FormSize.large;\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n [checkboxStyles['checkbox-wrapper--large']]: large,\n });\n const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n [checkboxStyles['checkbox-label--disabled']]: disabled,\n [checkboxStyles['checkbox-label--on-dark']]: onDark,\n [checkboxStyles['checkbox-label--large']]: large,\n [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n });\n const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n });\n const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n });\n\n let iconColor = getColor('white');\n if (onDark \|\| (large && isChecked)) iconColor = getColor('blueberry', 900);\n if (onInvalid && large && isChecked) iconColor = getColor('white');\n if (disabled) iconColor = getColor('neutral', 700);\n\n useEffect(() => {\n setIsChecked(checked);\n }, [checked]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n if (onChange) {\n onChange(e);\n }\n\n setIsChecked(!isChecked);\n };\n\n const getLabelContent = (): React.ReactNode => {\n return (\n <>\n <input\n id={inputId}\n name={name}\n className={checkboxClasses}\n type=\"checkbox\"\n checked={isChecked}\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-invalid={error}\n required={required}\n onChange={onChangeHandler}\n />\n <span className={checkboxIconWrapperClasses}>\n {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n </span>\n </>\n );\n };\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n onColor as FormOnColor,\n checkboxLabelClasses,\n labelTextClasses,\n checkboxStyles['checkbox-sublabel-wrapper'],\n large\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AAiDA,MAAaA,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,UACA,QACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,QAAQ;CACnD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAE9C,MAAM,yBAAyB,GAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,OAC9C,CAAC;CACF,MAAM,uBAAuB,GAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;EAC/D,CAAC;CACF,MAAM,kBAAkB,GAAW,eAAe,UAAU,UAAU;CACtE,MAAM,6BAA6B,GAAW,eAAe,2BAA2B;GACrF,eAAe,sCAAsC;GACrD,eAAe,qCAAqC;GACpD,eAAe,wCAAwC;GACvD,eAAe,sCAAsC;GACrD,eAAe,8CAA8C,CAAC,SAAS;GACvE,eAAe,8CAA8C,CAAC,SAAS,aAAa;GACpF,eAAe,8CAA8C,CAAC,SAAS,aAAa;GACpF,eAAe,4CAA4C,SAAS;GACpE,eAAe,4CAA4C,SAAS;GACpE,eAAe,qCAAqC;GACpD,eAAe,0CAA0C;GACzD,eAAe,qCAAqC;GACpD,eAAe,4CAA4C,SAAS,aAAa;GACjF,eAAe,6CAA6C,YAAY,SAAS;GACjF,eAAe,qDAAqD,SAAS,aAAa;GAC1F,eAAe,sDAAsD,YAAY,SAAS;EAC5F,CAAC;CACF,MAAM,mBAAmB,GAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;EACrD,CAAC;CAEF,IAAI,YAAY,SAAS,QAAQ;AACjC,KAAI,UAAW,SAAS,UAAY,aAAY,SAAS,aAAa,IAAI;AAC1E,KAAI,aAAa,SAAS,UAAW,aAAY,SAAS,QAAQ;AAClE,KAAI,SAAU,aAAY,SAAS,WAAW,IAAI;AAElD,iBAAgB;AACd,eAAa,QAAQ;IACpB,CAAC,QAAQ,CAAC;CAEb,MAAM,mBAAmB,MAAiD;AACxE,MAAI,SACF,UAAS,EAAE;AAGb,eAAa,CAAC,UAAU;;CAG1B,MAAM,wBAAyC;AAC7C,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAA;GACC,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACL,SAAS;GACC;GACH;GACP,KAAK;GACL,oBAAkB,mBAAmB,OAAO,YAAY;GACxD,gBAAc;GACJ;GACV,UAAU;IACV,EACF,oBAAC,QAAA;GAAK,WAAW;aACd,aAAa,oBAAC,cAAA;IAAK,OAAO;IAAW,WAAW,eAAe;IAAmB,SAAS;IAAO,MAAM,SAAS;KAAU;IACvH,CAAA,EAAA,CACN;;AAIP,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;aAC1E,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,sBACA,kBACA,eAAe,8BACf,MACD;IACG;GACO;;AAInB,IAAA,mBAAe"}
1	+ {"version":3,"file":"Checkbox.js","names":["Checkbox: React.FC<CheckboxProps>"],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' \| 'name' \| 'value' \| 'disabled' \| 'checked' \| 'required' \| 'onChange'\n > {\n /** Adds custom classes to the element. /\n className?: string;\n /* The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant /\n label: React.ReactNode;\n /* input id of the checkbox /\n inputId?: string;\n /* Changes the visuals of the checkbox /\n onColor?: keyof typeof FormOnColor;\n /* Changes the visuals of the checkbox /\n size?: keyof typeof FormSize;\n /* Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref that is passed to the component */\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n className,\n checked = false,\n disabled,\n label,\n inputId = uuid(),\n onColor = FormOnColor.onwhite,\n name = inputId,\n size,\n errorText,\n error = !!errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n value = getLabelText(label),\n testId,\n required,\n onChange,\n ref,\n } = props;\n const [isChecked, setIsChecked] = useState(checked);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onWhite = onColor === FormOnColor.onwhite;\n const onGrey = onColor === FormOnColor.ongrey;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const onInvalid = error \|\| onColor === FormOnColor.oninvalid;\n const onDark = onColor === FormOnColor.ondark;\n const large = size === FormSize.large;\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n [checkboxStyles['checkbox-wrapper--large']]: large,\n });\n const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n [checkboxStyles['checkbox-label--disabled']]: disabled,\n [checkboxStyles['checkbox-label--on-dark']]: onDark,\n [checkboxStyles['checkbox-label--large']]: large,\n [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n });\n const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n });\n const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n });\n\n let iconColor = getColor('white');\n if (onDark \|\| (large && isChecked)) iconColor = getColor('blueberry', 900);\n if (onInvalid && large && isChecked) iconColor = getColor('white');\n if (disabled) iconColor = getColor('neutral', 700);\n\n useEffect(() => {\n setIsChecked(checked);\n }, [checked]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n if (onChange) {\n onChange(e);\n }\n\n setIsChecked(!isChecked);\n };\n\n const getLabelContent = (): React.ReactNode => {\n return (\n <>\n <input\n id={inputId}\n name={name}\n className={checkboxClasses}\n type=\"checkbox\"\n checked={isChecked}\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-invalid={error}\n required={required}\n onChange={onChangeHandler}\n />\n <span className={checkboxIconWrapperClasses}>\n {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n </span>\n </>\n );\n };\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n onColor as FormOnColor,\n checkboxLabelClasses,\n labelTextClasses,\n checkboxStyles['checkbox-sublabel-wrapper'],\n large\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nexport default Checkbox;\n"],"mappings":"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"}

package/lib/ChildMedium.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ViewBoxSize } from "./utils3.js";
+import { t as ViewBoxSize } from "./utils4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ChildMedium = ({ color, svgProperties, title }) => {
 	const palette = (() => {

package/lib/Close.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { n as mergeRefs } from "./refs.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as X_default } from "./X.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Close/styles.module.scss";
 var Close = (props) => {
@@ -15,7 +15,7 @@ var Close = (props) => {
 	if (color === "black") iconColor = "black";
 	else if (color === "plum") iconColor = "var(--core-color-plum-700)";
 	else iconColor = "var(--color-action-graphics-onlight)";
-	const closeClasses = cn(styles.close, { [styles["close--small"]]: small }, className);
+	const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
 	return /* @__PURE__ */ jsx("button", {
 		ref: mergeRefs([ref, refObject]),
 		"data-testid": testId,
@@ -25,7 +25,7 @@ var Close = (props) => {
 		onClick,
 		type: "button",
 		children: /* @__PURE__ */ jsx("span", {
-			className: cn(styles["close__inner-container"], {
+			className: classNames(styles["close__inner-container"], {
 				[styles["close__inner-container--small"]]: small,
 				[styles["close__inner-container--plum"]]: color == "plum"
 			}),

package/lib/Close.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Close.js","names":["Close: React.FC<CloseProps>"],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n /** Keeps the icon small for all screen sizes /\n small?: boolean;\n /* Function is called when user clicks the button /\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Sets the aria-label of the button /\n ariaLabel?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Gives color to the svg /\n color?: 'blueberry' \| 'black' \| 'plum';\n /* Ref that is passed to the component /\n ref?: React.Ref<HTMLButtonElement \| null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n const { refObject, isHovered } = usePseudoClasses();\n\n const iconSize = useIsMobileBreakpoint() \|\| small ? 38 : 48;\n\n let iconColor;\n if (color === 'black') {\n iconColor = 'black';\n } else if (color === 'plum') {\n iconColor = 'var(--core-color-plum-700)';\n } else {\n iconColor = 'var(--color-action-graphics-onlight)';\n }\n\n const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n return (\n <button\n ref={mergeRefs([ref, refObject])}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Close}\n className={closeClasses}\n aria-label={ariaLabel}\n onClick={onClick}\n type=\"button\"\n >\n <span\n className={classNames(styles['close__inner-container'], {\n [styles['close__inner-container--small']]: small,\n [styles['close__inner-container--plum']]: color == 'plum',\n })}\n >\n <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n </span>\n </button>\n );\n};\n\nexport default Close;\n","import Close from './Close';\nexport from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;AA4BA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,kBAAkB;CAEnD,MAAM,WAAW,uBAAuB,IAAI,QAAQ,KAAK;CAEzD,IAAI;AACJ,KAAI,UAAU,QACZ,aAAY;UACH,UAAU,OACnB,aAAY;KAEZ,aAAY;CAGd,MAAM,eAAe,~~GAAW~~,OAAO,OAAO,GAAG,OAAO,kBAAkB,OAAO,EAAE,UAAU;AAE7F,QACE,oBAAC,UAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAChC,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAA;GACC,WAAW,~~GAAW~~,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;IACpD,CAAC;aAEF,oBAAC,cAAA;IAAK,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;KAAa;IACvE;GACA;;AC7Db,IAAA,kBDiEe"}
1	+ {"version":3,"file":"Close.js","names":["Close: React.FC<CloseProps>"],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n /** Keeps the icon small for all screen sizes /\n small?: boolean;\n /* Function is called when user clicks the button /\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Sets the aria-label of the button /\n ariaLabel?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Gives color to the svg /\n color?: 'blueberry' \| 'black' \| 'plum';\n /* Ref that is passed to the component /\n ref?: React.Ref<HTMLButtonElement \| null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n const { refObject, isHovered } = usePseudoClasses();\n\n const iconSize = useIsMobileBreakpoint() \|\| small ? 38 : 48;\n\n let iconColor;\n if (color === 'black') {\n iconColor = 'black';\n } else if (color === 'plum') {\n iconColor = 'var(--core-color-plum-700)';\n } else {\n iconColor = 'var(--color-action-graphics-onlight)';\n }\n\n const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n return (\n <button\n ref={mergeRefs([ref, refObject])}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Close}\n className={closeClasses}\n aria-label={ariaLabel}\n onClick={onClick}\n type=\"button\"\n >\n <span\n className={classNames(styles['close__inner-container'], {\n [styles['close__inner-container--small']]: small,\n [styles['close__inner-container--plum']]: color == 'plum',\n })}\n >\n <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n </span>\n </button>\n );\n};\n\nexport default Close;\n","import Close from './Close';\nexport from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;AA4BA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,kBAAkB;CAEnD,MAAM,WAAW,uBAAuB,IAAI,QAAQ,KAAK;CAEzD,IAAI;AACJ,KAAI,UAAU,QACZ,aAAY;UACH,UAAU,OACnB,aAAY;KAEZ,aAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,OAAO,EAAE,UAAU;AAE7F,QACE,oBAAC,UAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAChC,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAA;GACC,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;IACpD,CAAC;aAEF,oBAAC,cAAA;IAAK,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;KAAa;IACvE;GACA;;AC7Db,IAAA,kBDiEe"}

package/lib/DictionaryTrigger.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/DictionaryTrigger/styles.module.scss";
 var DictionaryTrigger = (props) => {
 	const { children, selected = false, className, testId, ref, ...rest } = props;
-	const triggerClasses = cn(styles.dictionarytrigger, className);
+	const triggerClasses = classNames(styles.dictionarytrigger, className);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-testid": testId,

package/lib/DictionaryTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DictionaryTrigger.js","names":["DictionaryTrigger: React.FC<DictionaryTriggerProps>"],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'onFocus' \| 'onBlur'> {\n /*\n Sets the content of the trigger.\n /\n children: React.ReactNode;\n /\n Indicates that the trigger is in use.\n /\n selected?: boolean;\n /\n Classname will be applied to the button element.\n /\n className?: string;\n /\n Sets the data-testid attribute.\n /\n testId?: string;\n /\n ref that is passed to the component\n /\n ref?: React.Ref<HTMLButtonElement \| null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n const { children, selected = false, className, testId, ref, ...rest } = props;\n const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n return (\n <button\n type=\"button\"\n data-testid={testId}\n data-analyticsid={AnalyticsId.DictionaryTrigger}\n className={triggerClasses}\n aria-expanded={selected}\n ref={ref}\n {...rest}\n >\n {children}\n </button>\n );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;AA6BA,IAAMA,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,~~GAAW~~,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;;AAIb,kBAAkB,cAAc;AC9ChC,IAAA,8BDgDe"}
1	+ {"version":3,"file":"DictionaryTrigger.js","names":["DictionaryTrigger: React.FC<DictionaryTriggerProps>"],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'onFocus' \| 'onBlur'> {\n /*\n Sets the content of the trigger.\n /\n children: React.ReactNode;\n /\n Indicates that the trigger is in use.\n /\n selected?: boolean;\n /\n Classname will be applied to the button element.\n /\n className?: string;\n /\n Sets the data-testid attribute.\n /\n testId?: string;\n /\n ref that is passed to the component\n /\n ref?: React.Ref<HTMLButtonElement \| null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n const { children, selected = false, className, testId, ref, ...rest } = props;\n const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n return (\n <button\n type=\"button\"\n data-testid={testId}\n data-analyticsid={AnalyticsId.DictionaryTrigger}\n className={triggerClasses}\n aria-expanded={selected}\n ref={ref}\n {...rest}\n >\n {children}\n </button>\n );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;AA6BA,IAAMA,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;;AAIb,kBAAkB,cAAc;AC9ChC,IAAA,8BDgDe"}

package/lib/Drawer.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { t as Close_default } from "./Close.js";
 import { t as useReturnFocusOnUnmount } from "./useReturnFocusOnUnmount.js";
 import { n as enableBodyScroll, t as disableBodyScroll } from "./scroll.js";
 import { t as Title_default } from "./Title2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, useAnimate, usePresence } from "motion/react";
@@ -60,7 +60,7 @@ var InnerDrawer = (props) => {
 		...resources
 	};
 	const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
-	const headerStyling = cn(styles.drawer__header, headerClasses, { [styles["drawer__header--no-close-button"]]: noCloseButton });
+	const headerStyling = classNames(styles.drawer__header, headerClasses, { [styles["drawer__header--no-close-button"]]: noCloseButton });
 	const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
 	useFocusTrap_default(containerRef, true);
 	useReturnFocusOnUnmount(containerRef);
@@ -147,7 +147,7 @@ var InnerDrawer = (props) => {
 			ref: overlayRef,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ jsxs("div", {
-			className: cn(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
+			className: classNames(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
 			ref: containerRef,
 			role: "dialog",
 			"aria-modal": "true",
@@ -172,7 +172,7 @@ var InnerDrawer = (props) => {
 						})]
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: cn(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
+						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
 						style: {
 							opacity: !topContentVisible && contentIsScrollable ? 1 : 0,
 							top: headerHeight
@@ -197,7 +197,7 @@ var InnerDrawer = (props) => {
 						]
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: cn(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
+						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
 						style: {
 							opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,
 							bottom: hasFooterContent ? footerHeight : 0

package/lib/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' \| 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n /** Opens and closes the drawer /\n isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n /* Sets the aria-label of the drawer /\n ariaLabel?: string;\n /* Sets the aria-labelledby of the drawer /\n ariaLabelledBy?: string;\n /* Sets the style of the Drawer Close button. Meant for use by HelpDrawer /\n closeColor?: 'blueberry' \| 'plum';\n /* Direction of the drawer on desktop. Default: left /\n desktopDirection?: DesktopDirections;\n /* Sets the style of the Drawer header /\n headerClasses?: string;\n /* Title to display in the header of the drawer /\n title: string;\n /* id of the drawer title /\n titleId?: string;\n /* Changes the underlying element of the title. Default: h3 /\n titleHtmlMarkup?: TitleTags;\n /* Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers /\n onRequestClose?: () => void;\n /* Optional footer content that can be rendered instead of default CTA(s) /\n footerContent?: React.ReactNode;\n /* Main content of the drawer /\n children?: React.ReactNode;\n /* Hides the close button /\n noCloseButton?: boolean;\n /* Primary CTA callback /\n onPrimaryAction?: () => void;\n /* Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n primaryActionText?: string;\n /* Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n secondaryActionText?: string;\n /* Secondary CTA callback /\n onSecondaryAction?: () => void;\n /* Customize the z-index of the drawer /\n zIndex?: number;\n /* Resources for component /\n resources?: Partial<HNDesignsystemDrawer>;\n /* Sets mobile styling and animation from outer level Drawer /\n isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n const { isOpen, ...rest } = props;\n const isMobile = useIsMobileBreakpoint();\n\n return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n const {\n ariaLabel,\n ariaLabelledBy,\n children,\n closeColor = 'blueberry',\n desktopDirection = 'left',\n footerContent,\n headerClasses,\n noCloseButton = false,\n onPrimaryAction,\n onRequestClose,\n onSecondaryAction,\n primaryActionText,\n secondaryActionText,\n title,\n titleHtmlMarkup = 'h3',\n titleId = uuid(),\n zIndex = ZIndex.OverlayScreen,\n resources,\n isMobile,\n } = props;\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n const overlayRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n // topContent and bottomContent are used to detect scroll position for shadow effects\n const topContent = useRef<HTMLDivElement>(null);\n const bottomContent = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n const [scope, animate] = useAnimate();\n const [isPresent, safeToRemove] = usePresence();\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const [footerHeight, setFooterHeight] = React.useState(0);\n const topContentVisible = useIsVisible(topContent);\n const bottomContentVisible = useIsVisible(bottomContent, 0);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDrawer = {\n ...defaultResources,\n ...resources,\n };\n\n const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n const headerStyling = classNames(styles.drawer__header, headerClasses, {\n [styles['drawer__header--no-close-button']]: noCloseButton,\n });\n const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) \|\| onPrimaryAction \|\| onSecondaryAction;\n\n useFocusTrap(containerRef, true);\n useReturnFocusOnUnmount(containerRef);\n useOutsideEvent(containerRef, () => {\n if (onRequestClose) onRequestClose();\n });\n useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n useEffect(() => {\n containerRef.current?.focus();\n disableBodyScroll();\n\n return (): void => {\n enableBodyScroll();\n };\n }, []);\n\n // Measure header and footer heights\n useEffect(() => {\n const updateHeights = (): void => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight);\n }\n if (footerRef.current) {\n setFooterHeight(footerRef.current.offsetHeight);\n }\n };\n\n updateHeights();\n\n // Update heights when content changes\n const resizeObserver = new ResizeObserver(updateHeights);\n if (headerRef.current) {\n resizeObserver.observe(headerRef.current);\n }\n if (footerRef.current) {\n resizeObserver.observe(footerRef.current);\n }\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }, [hasFooterContent]);\n\n // Open animation.\n useEffect(() => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n if (!isPresent) {\n closeDrawer();\n return;\n }\n\n if (isMobile) {\n animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n } else {\n animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n }\n\n animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n }, [isPresent]);\n\n // Close animasjon, vi kaller `onClose()` til slutt\n const closeDrawer = (): void => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n if (isMobile) {\n animate(\n containerRef.current,\n { y: '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n } else {\n animate(\n containerRef.current,\n { x: desktopDirection === 'left' ? '-100%' : '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n }\n };\n\n const handleCTA = (callback?: () => void): void => {\n if (callback) {\n callback();\n }\n };\n\n return (\n <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n <div\n className={classNames(styles.drawer__container, {\n [styles['drawer__container--right']]: desktopDirection === 'right',\n })}\n ref={containerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n {...ariaLabelAttributes}\n >\n <div className={styles.drawer__container__inner}>\n <div className={headerStyling} ref={headerRef}>\n <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n {title}\n </Title>\n {!noCloseButton && onRequestClose != undefined && (\n <Close\n ariaLabel={mergedResources.ariaLabelCloseBtn}\n color={closeColor}\n onClick={onRequestClose}\n className={styles['drawer__header__close-button']}\n />\n )}\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n style={{\n opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n top: headerHeight,\n }}\n />\n <div\n className={styles.drawer__content}\n tabIndex={contentIsScrollable ? 0 : undefined}\n role={contentIsScrollable ? 'region' : undefined}\n {...(contentIsScrollable ? ariaLabelAttributes : {})}\n ref={contentRef}\n >\n <div ref={topContent} />\n <div className={styles['drawer__content__children']}>{children}</div>\n <div ref={bottomContent} style={{ height: '1px' }} />\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n style={{\n opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n bottom: hasFooterContent ? footerHeight : 0,\n }}\n />\n </div>\n {hasFooterContent && (\n <div className={styles.drawer__footer} ref={footerRef}>\n {footerContent ? (\n footerContent\n ) : (\n <>\n {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n {onSecondaryAction && (\n <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n {secondaryActionText}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' \| 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n /** Opens and closes the drawer /\n isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n /* Sets the aria-label of the drawer /\n ariaLabel?: string;\n /* Sets the aria-labelledby of the drawer /\n ariaLabelledBy?: string;\n /* Sets the style of the Drawer Close button. Meant for use by HelpDrawer /\n closeColor?: 'blueberry' \| 'plum';\n /* Direction of the drawer on desktop. Default: left /\n desktopDirection?: DesktopDirections;\n /* Sets the style of the Drawer header /\n headerClasses?: string;\n /* Title to display in the header of the drawer /\n title: string;\n /* id of the drawer title /\n titleId?: string;\n /* Changes the underlying element of the title. Default: h3 /\n titleHtmlMarkup?: TitleTags;\n /* Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers /\n onRequestClose?: () => void;\n /* Optional footer content that can be rendered instead of default CTA(s) /\n footerContent?: React.ReactNode;\n /* Main content of the drawer /\n children?: React.ReactNode;\n /* Hides the close button /\n noCloseButton?: boolean;\n /* Primary CTA callback /\n onPrimaryAction?: () => void;\n /* Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n primaryActionText?: string;\n /* Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) /\n secondaryActionText?: string;\n /* Secondary CTA callback /\n onSecondaryAction?: () => void;\n /* Customize the z-index of the drawer /\n zIndex?: number;\n /* Resources for component /\n resources?: Partial<HNDesignsystemDrawer>;\n /* Sets mobile styling and animation from outer level Drawer /\n isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n const { isOpen, ...rest } = props;\n const isMobile = useIsMobileBreakpoint();\n\n return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n const {\n ariaLabel,\n ariaLabelledBy,\n children,\n closeColor = 'blueberry',\n desktopDirection = 'left',\n footerContent,\n headerClasses,\n noCloseButton = false,\n onPrimaryAction,\n onRequestClose,\n onSecondaryAction,\n primaryActionText,\n secondaryActionText,\n title,\n titleHtmlMarkup = 'h3',\n titleId = uuid(),\n zIndex = ZIndex.OverlayScreen,\n resources,\n isMobile,\n } = props;\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n const overlayRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n // topContent and bottomContent are used to detect scroll position for shadow effects\n const topContent = useRef<HTMLDivElement>(null);\n const bottomContent = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n const [scope, animate] = useAnimate();\n const [isPresent, safeToRemove] = usePresence();\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const [footerHeight, setFooterHeight] = React.useState(0);\n const topContentVisible = useIsVisible(topContent);\n const bottomContentVisible = useIsVisible(bottomContent, 0);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDrawer = {\n ...defaultResources,\n ...resources,\n };\n\n const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n const headerStyling = classNames(styles.drawer__header, headerClasses, {\n [styles['drawer__header--no-close-button']]: noCloseButton,\n });\n const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) \|\| onPrimaryAction \|\| onSecondaryAction;\n\n useFocusTrap(containerRef, true);\n useReturnFocusOnUnmount(containerRef);\n useOutsideEvent(containerRef, () => {\n if (onRequestClose) onRequestClose();\n });\n useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n useEffect(() => {\n containerRef.current?.focus();\n disableBodyScroll();\n\n return (): void => {\n enableBodyScroll();\n };\n }, []);\n\n // Measure header and footer heights\n useEffect(() => {\n const updateHeights = (): void => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current.offsetHeight);\n }\n if (footerRef.current) {\n setFooterHeight(footerRef.current.offsetHeight);\n }\n };\n\n updateHeights();\n\n // Update heights when content changes\n const resizeObserver = new ResizeObserver(updateHeights);\n if (headerRef.current) {\n resizeObserver.observe(headerRef.current);\n }\n if (footerRef.current) {\n resizeObserver.observe(footerRef.current);\n }\n\n return (): void => {\n resizeObserver.disconnect();\n };\n }, [hasFooterContent]);\n\n // Open animation.\n useEffect(() => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n if (!isPresent) {\n closeDrawer();\n return;\n }\n\n if (isMobile) {\n animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n } else {\n animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n }\n\n animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n }, [isPresent]);\n\n // Close animasjon, vi kaller `onClose()` til slutt\n const closeDrawer = (): void => {\n if (!overlayRef.current \|\| !containerRef.current) return;\n\n animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n if (isMobile) {\n animate(\n containerRef.current,\n { y: '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n } else {\n animate(\n containerRef.current,\n { x: desktopDirection === 'left' ? '-100%' : '100%' },\n {\n duration: 0.3,\n ease: 'easeInOut',\n onComplete: () => {\n if (safeToRemove) safeToRemove();\n },\n }\n );\n }\n };\n\n const handleCTA = (callback?: () => void): void => {\n if (callback) {\n callback();\n }\n };\n\n return (\n <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n <div\n className={classNames(styles.drawer__container, {\n [styles['drawer__container--right']]: desktopDirection === 'right',\n })}\n ref={containerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n {...ariaLabelAttributes}\n >\n <div className={styles.drawer__container__inner}>\n <div className={headerStyling} ref={headerRef}>\n <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n {title}\n </Title>\n {!noCloseButton && onRequestClose != undefined && (\n <Close\n ariaLabel={mergedResources.ariaLabelCloseBtn}\n color={closeColor}\n onClick={onRequestClose}\n className={styles['drawer__header__close-button']}\n />\n )}\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n style={{\n opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n top: headerHeight,\n }}\n />\n <div\n className={styles.drawer__content}\n tabIndex={contentIsScrollable ? 0 : undefined}\n role={contentIsScrollable ? 'region' : undefined}\n {...(contentIsScrollable ? ariaLabelAttributes : {})}\n ref={contentRef}\n >\n <div ref={topContent} />\n <div className={styles['drawer__content__children']}>{children}</div>\n <div ref={bottomContent} style={{ height: '1px' }} />\n </div>\n <div\n className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n style={{\n opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n bottom: hasFooterContent ? footerHeight : 0,\n }}\n />\n </div>\n {hasFooterContent && (\n <div className={styles.drawer__footer} ref={footerRef}>\n {footerContent ? (\n footerContent\n ) : (\n <>\n {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n {onSecondaryAction && (\n <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n {secondaryActionText}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}