npm - @helsenorge/designsystem-react - Versions diffs - 13.5.0 → 14.0.0-beta.0 - Mend

@helsenorge/designsystem-react 13.5.0 → 14.0.0-beta.0

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 (2561) hide show

package/lib/HelpTriggerIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import ~~React~~ ~~from 'react';\n\nimport~~ { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n color?: string;\n weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n const paths =\n weight === 'normal' ? (\n <>\n <defs>\n <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n />\n </clipPath>\n </defs>\n <path\n d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n fill={color}\n clipPath=\"url(#clipCircle)\"\n />\n <path\n d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n fill={color}\n />\n <path\n d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n fill={color}\n />\n </>\n ) : (\n <>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n />\n <path\n d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n fill=\"white\"\n />\n <path\n d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n fill=\"white\"\n />\n </>\n );\n\n return (\n <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n {paths}\n </svg>\n );\n};\n\nexport default HelpSign;\n","import ~~React from 'react';\n\nimport~~ classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' \| 'medium' \| 'large' \| 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' \| 'span';\n\nexport type HelpTriggerWeights = 'normal' \| 'strong';\n\nexport interface HelpTriggerIconProps\n extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'aria-haspopup' \| 'aria-controls' \| 'aria-expanded'> {\n /*\n Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n /\n ariaLabel?: string;\n /\n Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n /\n ariaLabelledById?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /\n Size of the Icon. Default: medium.\n /\n size?: HelpTriggerIconSizes;\n /* Sets the data-testid attribute. /\n testId?: string;\n /\n Sets the colors of the help trigger icon. Default: normal.\n /\n weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n /\n Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n /\n isHovered?: boolean;\n /\n Only use this if the parent wrapper is a Button!\n * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n /\n htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string \| undefined => {\n if (weight === 'normal') {\n return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n }\n};\n\nconst HelpTriggerIcon = React.~~forwardRef~~<~~HTMLButtonElement,~~ HelpTriggerIconProps>((props, ~~ref)~~ => {\n return <HelpTriggerIconInternal {...props} ~~ref={ref}~~ />;\n});\n\nexport const HelpTriggerIconInternal = React.~~forwardRef~~<~~HTMLButtonElement,~~ HelpTriggerIconInternalProps>(\n (\n ~~{\n~~ ariaLabel,\n ariaLabelledById,\n className,\n htmlMarkup = 'button',\n isHovered = false,\n size = 'medium',\n testId,\n weight = 'normal',\n ~~...buttonRest\n~~ },\n ~~ref~~\n ) => {\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(ref as ~~React.RefObject<HTMLButtonElement>~~);\n const helpIcon = <HelpSign color={getIconColor(interalIsHovered \|\| isHovered, weight)} weight={weight} />;\n const isButton = htmlMarkup === 'button';\n const iconClasses = classNames(\n styles['help-trigger-icon'],\n {\n [styles['help-trigger-icon--strong']]: weight === 'strong',\n [styles['help-trigger-icon--is-button']]: isButton,\n },\n styles[`help-trigger-icon--${size}`],\n className\n );\n\n if (isButton) {\n return (\n <button\n {...ariaLabelAttributes}\n type=\"button\"\n data-testid={testId}\n data-analyticsid={AnalyticsId.HelpTriggerIcon}\n className={iconClasses}\n ref={mergeRefs([refObject, ref])}\n {...buttonRest}\n >\n {helpIcon}\n </button>\n );\n }\n\n return (\n <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n {helpIcon}\n </span>\n );\n }~~\n)~~;\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":"~~;;;;;;;;AASA~~,IAAMA,YAAqC,EAAE,OAAO,aAAgD;AA6ClG,QACE,oBAAC,OAAA;EAAI,MAAK;EAAO,QAAO;EAAK,UAAS;EAAU,MAAM;EAAgB,OAAM;EAAK,SAAQ;EAAY,OAAM;YA5C3G,WAAW,WACT,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA,EAAA,UACC,oBAAC,YAAA;IAAS,IAAG;IAAa,eAAc;cACtC,oBAAC,QAAA;KACC,UAAS;KACT,UAAS;KACT,GAAE;MACF;KACO,EAAA,CACN;GACP,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;IACN,UAAS;KACT;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;MACD,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;MACD;GAMC;;AAIV,IAAA,mBAAe;~~ACPf~~,IAAM,gBAAgB,OAAgB,WAAmD;AACvF,KAAI,WAAW,SACb,QAAO,QAAQ,wCAAwC;;AAI3D,~~IAAM~~,~~kBAAkB~~,~~MAAM,YAAqD,OAAO,QAAQ~~;~~AAChG~~,QAAO,oBAAC,yBAAA;EAAwB,GAAI~~;EAAY;GAAO;EACvD;AAEF~~,~~MAAa~~,~~0BAA0B~~,MAAM,~~YAEzC~~,~~EACE,~~WACA,kBACA,WACA,aAAa,UACb,YAAY,OACZ,OAAO,UACP,QACA,SAAS,UACT,GAAG,~~cAEL,QACG~~;~~CACH~~,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,EAAE,WAAW,WAAW,qBAAqB,iBAAoC,~~IAA0C~~;~~CACjI~~,MAAM,WAAW,oBAAC,kBAAA;EAAS,OAAO,aAAa,oBAAoB,WAAW,OAAO;EAAU;GAAU;CACzG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,GAClB,OAAO,sBACP;GACG,OAAO,+BAA+B,WAAW;GACjD,OAAO,kCAAkC;EAC3C,EACD,OAAO,sBAAsB,SAC7B,UACD;AAED,KAAI,SACF,QACE,oBAAC,UAAA;EACC,GAAI;EACJ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;YAEH;GACM;AAIb,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB,WAAW;YAClF;GACI~~;EAGZ;AAED~~,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;~~ACpHtC~~,IAAA,~~4BDsHe~~"}
1	+ {"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>","HelpTriggerIcon: React.FC<HelpTriggerIconProps>","HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import type { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n color?: string;\n weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n const paths =\n weight === 'normal' ? (\n <>\n <defs>\n <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n />\n </clipPath>\n </defs>\n <path\n d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n fill={color}\n clipPath=\"url(#clipCircle)\"\n />\n <path\n d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n fill={color}\n />\n <path\n d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n fill={color}\n />\n </>\n ) : (\n <>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n />\n <path\n d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n fill=\"white\"\n />\n <path\n d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n fill=\"white\"\n />\n </>\n );\n\n return (\n <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n {paths}\n </svg>\n );\n};\n\nexport default HelpSign;\n","import classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' \| 'medium' \| 'large' \| 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' \| 'span';\n\nexport type HelpTriggerWeights = 'normal' \| 'strong';\n\nexport interface HelpTriggerIconProps extends Pick<\n React.InputHTMLAttributes<HTMLButtonElement>,\n 'onClick' \| 'aria-haspopup' \| 'aria-controls' \| 'aria-expanded'\n> {\n /*\n Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n /\n ariaLabel?: string;\n /\n Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n /\n ariaLabelledById?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /\n Size of the Icon. Default: medium.\n /\n size?: HelpTriggerIconSizes;\n /* Sets the data-testid attribute. /\n testId?: string;\n /\n Sets the colors of the help trigger icon. Default: normal.\n /\n weight?: HelpTriggerWeights;\n /* Ref passed to the component /\n ref?: React.Ref<HTMLButtonElement \| null>;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n /\n Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n /\n isHovered?: boolean;\n /\n Only use this if the parent wrapper is a Button!\n * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n /\n htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string \| undefined => {\n if (weight === 'normal') {\n return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n }\n};\n\nconst HelpTriggerIcon: React.FC<HelpTriggerIconProps> = props => {\n return <HelpTriggerIconInternal {...props} />;\n};\n\nexport const HelpTriggerIconInternal: React.FC<HelpTriggerIconInternalProps> = props => {\n const {\n ariaLabel,\n ariaLabelledById,\n className,\n htmlMarkup = 'button',\n isHovered = false,\n size = 'medium',\n testId,\n weight = 'normal',\n ref,\n ...buttonRest\n } = props;\n const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(isMutableRefObject(ref) ? ref : null);\n const helpIcon = <HelpSign color={getIconColor(interalIsHovered \|\| isHovered, weight)} weight={weight} />;\n const isButton = htmlMarkup === 'button';\n const iconClasses = classNames(\n styles['help-trigger-icon'],\n {\n [styles['help-trigger-icon--strong']]: weight === 'strong',\n [styles['help-trigger-icon--is-button']]: isButton,\n },\n styles[`help-trigger-icon--${size}`],\n className\n );\n\n if (isButton) {\n return (\n <button\n {...ariaLabelAttributes}\n type=\"button\"\n data-testid={testId}\n data-analyticsid={AnalyticsId.HelpTriggerIcon}\n className={iconClasses}\n ref={mergeRefs([refObject, ref])}\n {...buttonRest}\n >\n {helpIcon}\n </button>\n );\n }\n\n return (\n <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n {helpIcon}\n </span>\n );\n};\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":";;;;;;;AAOA,IAAMA,YAAqC,EAAE,OAAO,aAAgD;AA6ClG,QACE,oBAAC,OAAA;EAAI,MAAK;EAAO,QAAO;EAAK,UAAS;EAAU,MAAM;EAAgB,OAAM;EAAK,SAAQ;EAAY,OAAM;YA5C3G,WAAW,WACT,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA,EAAA,UACC,oBAAC,YAAA;IAAS,IAAG;IAAa,eAAc;cACtC,oBAAC,QAAA;KACC,UAAS;KACT,UAAS;KACT,GAAE;MACF;KACO,EAAA,CACN;GACP,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;IACN,UAAS;KACT;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;MACD,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;MACD;GAMC;;AAIV,IAAA,mBAAe;ACHf,IAAM,gBAAgB,OAAgB,WAAmD;AACvF,KAAI,WAAW,SACb,QAAO,QAAQ,wCAAwC;;AAI3D,IAAMC,mBAAkD,UAAS;AAC/D,QAAO,oBAAC,yBAAA,EAAwB,GAAI,OAAA,CAAS;;AAG/C,MAAaC,2BAAkE,UAAS;CACtF,MAAM,EACJ,WACA,kBACA,WACA,aAAa,UACb,YAAY,OACZ,OAAO,UACP,QACA,SAAS,UACT,KACA,GAAG,eACD;CACJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,EAAE,WAAW,WAAW,qBAAqB,iBAAoC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CAC5H,MAAM,WAAW,oBAAC,kBAAA;EAAS,OAAO,aAAa,oBAAoB,WAAW,OAAO;EAAU;GAAU;CACzG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,GAClB,OAAO,sBACP;GACG,OAAO,+BAA+B,WAAW;GACjD,OAAO,kCAAkC;EAC3C,EACD,OAAO,sBAAsB,SAC7B,UACD;AAED,KAAI,SACF,QACE,oBAAC,UAAA;EACC,GAAI;EACJ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;YAEH;GACM;AAIb,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB,WAAW;YAClF;GACI;;AAIX,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;ACnHtC,IAAA,4BDqHe"}

package/lib/HelpTriggerStandalone.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import { n as AnalyticsId } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs } from "./refs.js";
+import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { n as getAriaLabelAttributes } from "./accessibility.js";
 import { n as HelpTriggerIconInternal } from "./HelpTriggerIcon.js";
-import React from "react";
 import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerStandalone/styles.module.scss";
-var HelpTriggerStandalone = React.forwardRef(({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ...rest }, ref) => {
+var HelpTriggerStandalone = (props) => {
+	const { ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ref, ...rest } = props;
 	const isMobile = useIsMobileBreakpoint();
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledById
 	});
 	const helpTriggerStandaloneStyles = cn(styles["help-trigger-standalone"], className);
-	const { refObject, isHovered } = usePseudoClasses(ref);
+	const { refObject, isHovered } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": ariaLabel,
 		type: "button",
@@ -35,7 +35,7 @@ var HelpTriggerStandalone = React.forwardRef(({ ariaLabel, ariaLabelledById, chi
 			children
 		})]
 	});
-});
+};
 HelpTriggerStandalone.displayName = "HelpTriggerStandalone";
 var HelpTriggerStandalone_default$1 = HelpTriggerStandalone;
 export { HelpTriggerStandalone_default$1 as t };

package/lib/HelpTriggerStandalone.js.map CHANGED Viewed

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

package/lib/HighlightPanel.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { t as Icon_default } from "./Icon.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
 import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
 import { t as Title_default } from "./Title2.js";
-import React from "react";
 import cn from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HighlightPanel/styles.module.scss";

package/lib/HighlightPanel.js.map CHANGED Viewed

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

package/lib/Highlighter.js.map CHANGED Viewed

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

package/lib/HorizontalScroll.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { t as useIsVisible } from "./useIsVisible.js";
 import { t as useSize } from "./useSize.js";
 import { t as useStopPropagation } from "./usestopPropagation.js";
-import React, { useRef } from "react";
 import cn from "classnames";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HorizontalScroll/styles.module.scss";
 var ROOT_MARGIN_OFFSET = "3px";

package/lib/HorizontalScroll.js.map CHANGED Viewed

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

package/lib/Icon.js CHANGED Viewed

@@ -1,14 +1,9 @@
 import { a as IconSize, n as AnalyticsId } from "./constants2.js";
-import React, { useId } from "react";
 import cn from "classnames";
+import React, { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-const getIcon = ({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover }) => {
-	if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) return isHovered ? xxSmallHover : xxSmall;
-	if (size <= IconSize.XSmall && xSmall && xSmallHover) return isHovered ? xSmallHover : xSmall;
-	return isHovered ? normalHover : normal;
-};
-const Icon = React.forwardRef((props, ref) => {
-	const { svgIcon, ariaLabel, className = "", size = IconSize.Small, color = "black", hoverColor = color || "black", isHovered = false, onColor, testId, ...other } = props;
+const Icon = (props) => {
+	const { svgIcon, ariaLabel, className = "", size = IconSize.Small, color = "black", hoverColor = color || "black", isHovered = false, onColor, testId, ref, ...other } = props;
 	const svgRaw = React.createElement(svgIcon, {
 		size,
 		isHovered,
@@ -40,9 +35,9 @@ const Icon = React.forwardRef((props, ref) => {
 			children: ariaLabel
 		}), svgRaw]
 	});
-});
+};
 Icon.displayName = "Icon";
 var Icon_default = Icon;
-export { Icon as n, getIcon as r, Icon_default as t };
+export { Icon as n, Icon_default as t };
 //# sourceMappingURL=Icon.js.map

package/lib/Icon.js.map CHANGED Viewed

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

package/lib/Illustration.js CHANGED Viewed

@@ -1,14 +1,9 @@
 import { n as AnalyticsId } from "./constants2.js";
-import { t as getIllustration } from "./utils.js";
+import { n as getIllustration, t as ViewBoxSize } from "./utils3.js";
 import React, { useId } from "react";
 import { jsx } from "react/jsx-runtime";
-let ViewBoxSize = /* @__PURE__ */ function(ViewBoxSize$1) {
-	ViewBoxSize$1["Medium"] = "0 0 512 512";
-	ViewBoxSize$1["Small"] = "0 0 200 200";
-	return ViewBoxSize$1;
-}({});
-const Illustration = React.forwardRef((props, ref) => {
-	const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId, ...other } = props;
+const Illustration = (props) => {
+	const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId, ref, ...other } = props;
 	const titleId = useId();
 	const viewBox = getIllustration({
 		size,
@@ -43,9 +38,9 @@ const Illustration = React.forwardRef((props, ref) => {
 			children: ariaLabel
 		})
 	});
-});
+};
 Illustration.displayName = "Illustration";
 var Illustration_default$1 = Illustration;
-export { Illustration as n, ViewBoxSize as r, Illustration_default$1 as t };
+export { Illustration as n, Illustration_default$1 as t };
 //# sourceMappingURL=Illustration.js.map

package/lib/Illustration.js.map CHANGED Viewed

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

package/lib/InfoSignFill.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { r as getIcon } from "./Icon.js";
-import React from "react";
+import { t as getIcon } from "./utils.js";
 import { jsx } from "react/jsx-runtime";
 var InfoSignFill = ({ size, isHovered }) => {
 	return getIcon({

package/lib/InfoSignFill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoSignFill.js","names":["InfoSignFill: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/InfoSignFill.tsx"],"sourcesContent":["import ~~React~~ from '~~react~~';\n\nimport { getIcon, ~~SvgPathProps~~ } from '../Icon';\n\nconst InfoSignFill: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): JSX.Element => {\n const normal = (\n <path d=\"M26.372 31.239h-4.709v-.544c.129-.01.256-.022.38-.037a1.31 1.31 0 00.32-.075.614.614 0 00.335-.256.883.883 0 00.097-.444v-6.337a.87.87 0 00-.119-.459 1.003 1.003 0 00-.298-.316 1.546 1.546 0 00-.406-.171 2.65 2.65 0 00-.496-.105v-.544l3.652-.193.111.111v7.917c0 .174.038.322.112.443a.672.672 0 00.321.272 2.368 2.368 0 00.7.194v.544zM23.726 16.21a1.559 1.559 0 11-.002 3.118 1.559 1.559 0 01.002-3.118zm.275-7.514C15.562 8.696 8.696 15.561 8.696 24c0 8.438 6.866 15.304 15.305 15.304 8.438 0 15.303-6.866 15.303-15.304 0-8.439-6.865-15.304-15.303-15.304z\" />\n );\n\n const normalHover = (\n <path d=\"M26.372 31.239h-4.709v-.544c.129-.01.256-.022.38-.037a1.31 1.31 0 00.32-.075.614.614 0 00.335-.256.883.883 0 00.097-.444v-6.337a.87.87 0 00-.119-.459 1.003 1.003 0 00-.298-.316 1.546 1.546 0 00-.406-.171 2.65 2.65 0 00-.496-.105v-.544l3.652-.193.111.111v7.917c0 .174.038.322.112.443a.672.672 0 00.321.272 2.368 2.368 0 00.7.194v.544zM23.726 14.21a1.559 1.559 0 11-.002 3.118 1.559 1.559 0 01.002-3.118zm.275-5.514C15.562 8.696 8.696 15.561 8.696 24c0 8.438 6.866 15.304 15.305 15.304 8.438 0 15.303-6.866 15.303-15.304 0-8.439-6.865-15.304-15.303-15.304z\" />\n );\n\n const xSmall = (\n <path d=\"M26.367 31.224h-4.7v-.543a8.88 8.88 0 00.38-.037c.124-.015.23-.04.32-.075a.612.612 0 00.334-.255.881.881 0 00.097-.443v-6.324a.868.868 0 00-.12-.458 1.001 1.001 0 00-.297-.315 1.543 1.543 0 00-.405-.171 2.644 2.644 0 00-.495-.105v-.543l3.645-.192.11.11v7.9c0 .174.038.322.112.443a.67.67 0 00.32.271 2.363 2.363 0 00.699.194v.543zm-2.64-14.998a1.556 1.556 0 11-.002 3.111 1.556 1.556 0 01.002-3.11zM24 8.728C15.58 8.728 8.728 15.578 8.728 24c0 8.42 6.852 15.272 15.273 15.272 8.42 0 15.27-6.852 15.27-15.272 0-8.421-6.85-15.272-15.27-15.272z\" />\n );\n\n const xSmallHover = (\n <path d=\"M26.367 31.224h-4.7v-.543a8.88 8.88 0 00.38-.037c.124-.015.23-.04.32-.075a.612.612 0 00.334-.255.881.881 0 00.097-.443v-6.324a.868.868 0 00-.12-.458 1.001 1.001 0 00-.297-.315 1.543 1.543 0 00-.405-.171 2.644 2.644 0 00-.495-.105v-.543l3.645-.192.11.11v7.9c0 .174.038.322.112.443a.67.67 0 00.32.271 2.363 2.363 0 00.699.194v.543zM23.727 13.7a1.556 1.556 0 11-.002 3.111 1.556 1.556 0 01.002-3.11zM24 8.728C15.58 8.728 8.728 15.578 8.728 24c0 8.42 6.852 15.272 15.273 15.272 8.42 0 15.27-6.852 15.27-15.272 0-8.421-6.85-15.272-15.27-15.272z\" />\n );\n\n return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default InfoSignFill;\n"],"mappings":"~~;;;~~AAIA,IAAMA,gBAAwC,EAAE,MAAM,~~gBAA2C~~;~~AAiB/F~~,QAAO,QAAQ;EAAE;EAAM;EAAW,QAfhC,oBAAC,QAAA,EAAK,GAAE,8iBAAA,CAA+iB;EAe/gB,aAXxC,oBAAC,QAAA,EAAK,GAAE,8iBAAA,CAA+iB;EAWlgB,QAPrD,oBAAC,QAAA,EAAK,GAAE,giBAAA,CAAiiB;EAO5e,aAH7D,oBAAC,QAAA,EAAK,GAAE,+hBAAA,CAAgiB;EAG9d,CAAC;;AAG/E,IAAA,uBAAe"}
1	+ {"version":3,"file":"InfoSignFill.js","names":["InfoSignFill: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/InfoSignFill.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst InfoSignFill: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.JSX.Element => {\n const normal = (\n <path d=\"M26.372 31.239h-4.709v-.544c.129-.01.256-.022.38-.037a1.31 1.31 0 00.32-.075.614.614 0 00.335-.256.883.883 0 00.097-.444v-6.337a.87.87 0 00-.119-.459 1.003 1.003 0 00-.298-.316 1.546 1.546 0 00-.406-.171 2.65 2.65 0 00-.496-.105v-.544l3.652-.193.111.111v7.917c0 .174.038.322.112.443a.672.672 0 00.321.272 2.368 2.368 0 00.7.194v.544zM23.726 16.21a1.559 1.559 0 11-.002 3.118 1.559 1.559 0 01.002-3.118zm.275-7.514C15.562 8.696 8.696 15.561 8.696 24c0 8.438 6.866 15.304 15.305 15.304 8.438 0 15.303-6.866 15.303-15.304 0-8.439-6.865-15.304-15.303-15.304z\" />\n );\n\n const normalHover = (\n <path d=\"M26.372 31.239h-4.709v-.544c.129-.01.256-.022.38-.037a1.31 1.31 0 00.32-.075.614.614 0 00.335-.256.883.883 0 00.097-.444v-6.337a.87.87 0 00-.119-.459 1.003 1.003 0 00-.298-.316 1.546 1.546 0 00-.406-.171 2.65 2.65 0 00-.496-.105v-.544l3.652-.193.111.111v7.917c0 .174.038.322.112.443a.672.672 0 00.321.272 2.368 2.368 0 00.7.194v.544zM23.726 14.21a1.559 1.559 0 11-.002 3.118 1.559 1.559 0 01.002-3.118zm.275-5.514C15.562 8.696 8.696 15.561 8.696 24c0 8.438 6.866 15.304 15.305 15.304 8.438 0 15.303-6.866 15.303-15.304 0-8.439-6.865-15.304-15.303-15.304z\" />\n );\n\n const xSmall = (\n <path d=\"M26.367 31.224h-4.7v-.543a8.88 8.88 0 00.38-.037c.124-.015.23-.04.32-.075a.612.612 0 00.334-.255.881.881 0 00.097-.443v-6.324a.868.868 0 00-.12-.458 1.001 1.001 0 00-.297-.315 1.543 1.543 0 00-.405-.171 2.644 2.644 0 00-.495-.105v-.543l3.645-.192.11.11v7.9c0 .174.038.322.112.443a.67.67 0 00.32.271 2.363 2.363 0 00.699.194v.543zm-2.64-14.998a1.556 1.556 0 11-.002 3.111 1.556 1.556 0 01.002-3.11zM24 8.728C15.58 8.728 8.728 15.578 8.728 24c0 8.42 6.852 15.272 15.273 15.272 8.42 0 15.27-6.852 15.27-15.272 0-8.421-6.85-15.272-15.27-15.272z\" />\n );\n\n const xSmallHover = (\n <path d=\"M26.367 31.224h-4.7v-.543a8.88 8.88 0 00.38-.037c.124-.015.23-.04.32-.075a.612.612 0 00.334-.255.881.881 0 00.097-.443v-6.324a.868.868 0 00-.12-.458 1.001 1.001 0 00-.297-.315 1.543 1.543 0 00-.405-.171 2.644 2.644 0 00-.495-.105v-.543l3.645-.192.11.11v7.9c0 .174.038.322.112.443a.67.67 0 00.32.271 2.363 2.363 0 00.699.194v.543zM23.727 13.7a1.556 1.556 0 11-.002 3.111 1.556 1.556 0 01.002-3.11zM24 8.728C15.58 8.728 8.728 15.578 8.728 24c0 8.42 6.852 15.272 15.273 15.272 8.42 0 15.27-6.852 15.27-15.272 0-8.421-6.85-15.272-15.27-15.272z\" />\n );\n\n return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default InfoSignFill;\n"],"mappings":";;AAIA,IAAMA,gBAAwC,EAAE,MAAM,gBAAiD;AAiBrG,QAAO,QAAQ;EAAE;EAAM;EAAW,QAfhC,oBAAC,QAAA,EAAK,GAAE,8iBAAA,CAA+iB;EAe/gB,aAXxC,oBAAC,QAAA,EAAK,GAAE,8iBAAA,CAA+iB;EAWlgB,QAPrD,oBAAC,QAAA,EAAK,GAAE,giBAAA,CAAiiB;EAO5e,aAH7D,oBAAC,QAAA,EAAK,GAAE,+hBAAA,CAAgiB;EAG9d,CAAC;;AAG/E,IAAA,uBAAe"}

package/lib/InfoTeaser.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { a as IconSize, n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
 import { t as Icon_default } from "./Icon.js";
-import { r as useLanguage } from "./language.js";
+import { n as useLanguage } from "./useLanguage.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
 import { t as Title_default } from "./Title2.js";
-import React, { useId, useState } from "react";
 import cn from "classnames";
+import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/InfoTeaser/styles.module.scss";
 var HN_Designsystem_InfoTeaser_en_GB_default = {

package/lib/InfoTeaser.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n \"expandButtonOpen\": \"Show less\",\n \"expandButtonClose\": \"Show more\"\n}\n","{\n \"expandButtonOpen\": \"Vis mindre\",\n \"expandButtonClose\": \"Vis mer\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\~~nimport { HNDesignsystemInfoTeaser } from '../../resources/Resources';\~~n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import ~~React,~~ { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ~~AnalyticsId,~~ ~~LanguageLocales~~ } from '../../~~constants~~';\nimport { ~~HNDesignsystemInfoTeaser~~ } from '~~../../resources/Resources~~';\nimport { ~~useLanguage~~ } from '~~../../utils~~/~~language~~';\nimport ~~Icon,~~ { ~~IconSize,~~ ~~SvgIcon~~ } from '../~~Icon~~';\nimport { ~~IconName~~ } from '~~../Icons/IconNames~~';\nimport ~~LazyIcon~~ from '~~../LazyIcon~~';\nimport ~~Title~~, { ~~TitleTags~~ } from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' \| 'section' \| 'aside' \| 'article';\n\nexport interface InfoTeaserProps {\n /** For overriding styling on the button /\n buttonClassName?: string;\n /* What's in the box? /\n children: React.ReactNode;\n /* For overriding styling on infoteaser box /\n className?: string;\n /* Changes the underlying element of the wrapper /\n htmlMarkup?: InfoTeaserTags;\n /* Resources for component /\n resources?: Partial<HNDesignsystemInfoTeaser>;\n /* Adds an icon /\n svgIcon?: SvgIcon \| IconName;\n /* Sets the data-testid attribute /\n testId?: string;\n /* Title on top of the component /\n title: string;\n /* Markup props for title /\n titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n const { buttonClassName, children, className, htmlMarkup = 'div', resources, svgIcon, testId, title, titleHtmlMarkup = 'h2' } = props;\n const [expanded, setExpanded] = useState(false);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const infoteaserTextId = useId();\n\n const mergedResources: HNDesignsystemInfoTeaser = {\n ...defaultResources,\n ...resources,\n };\n\n const WrapperTag = htmlMarkup;\n\n return (\n <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n <div\n className={classNames(styles.infoteaser, className, {\n [styles['infoteaser--collapsed']]: !expanded,\n })}\n >\n {svgIcon &&\n (typeof svgIcon === 'string' ? (\n <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n ) : (\n <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n ))}\n <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n {title}\n </Title>\n <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n {children}\n </div>\n </div>\n <button\n type=\"button\"\n className={classNames(styles.infoteaser__button, buttonClassName)}\n onClick={() => {\n setExpanded(!expanded);\n }}\n aria-expanded={expanded}\n aria-controls={infoteaserTextId}\n >\n {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n </button>\n </WrapperTag>\n );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;~~AEKA~~,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;~~AC2Bb~~,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,iBAAiB,UAAU,WAAW,aAAa,OAAO,WAAW,SAAS,QAAQ,OAAO,kBAAkB,SAAS;CAChI,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,GAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;;IAED,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,GAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;~~ACjFjB~~,IAAA,~~uBDqFe~~"}
1	+ {"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n \"expandButtonOpen\": \"Show less\",\n \"expandButtonClose\": \"Show more\"\n}\n","{\n \"expandButtonOpen\": \"Vis mindre\",\n \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' \| 'section' \| 'aside' \| 'article';\n\nexport interface InfoTeaserProps {\n /** For overriding styling on the button /\n buttonClassName?: string;\n /* What's in the box? /\n children: React.ReactNode;\n /* For overriding styling on infoteaser box /\n className?: string;\n /* Changes the underlying element of the wrapper /\n htmlMarkup?: InfoTeaserTags;\n /* Resources for component /\n resources?: Partial<HNDesignsystemInfoTeaser>;\n /* Adds an icon /\n svgIcon?: SvgIcon \| IconName;\n /* Sets the data-testid attribute /\n testId?: string;\n /* Title on top of the component /\n title: string;\n /* Markup props for title /\n titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n const { buttonClassName, children, className, htmlMarkup = 'div', resources, svgIcon, testId, title, titleHtmlMarkup = 'h2' } = props;\n const [expanded, setExpanded] = useState(false);\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const infoteaserTextId = useId();\n\n const mergedResources: HNDesignsystemInfoTeaser = {\n ...defaultResources,\n ...resources,\n };\n\n const WrapperTag = htmlMarkup;\n\n return (\n <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n <div\n className={classNames(styles.infoteaser, className, {\n [styles['infoteaser--collapsed']]: !expanded,\n })}\n >\n {svgIcon &&\n (typeof svgIcon === 'string' ? (\n <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n ) : (\n <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n ))}\n <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n {title}\n </Title>\n <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n {children}\n </div>\n </div>\n <button\n type=\"button\"\n className={classNames(styles.infoteaser__button, buttonClassName)}\n onClick={() => {\n setExpanded(!expanded);\n }}\n aria-expanded={expanded}\n aria-controls={infoteaserTextId}\n >\n {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n </button>\n </WrapperTag>\n );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC6Bb,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,iBAAiB,UAAU,WAAW,aAAa,OAAO,WAAW,SAAS,QAAQ,OAAO,kBAAkB,SAAS;CAChI,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,GAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;;IAED,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,GAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;ACpFjB,IAAA,uBDwFe"}

package/lib/Input.js CHANGED Viewed

@@ -2,29 +2,18 @@ import { a as IconSize, i as FormSize, n as AnalyticsId, r as FormOnColor, s as
 import { t as getColor } from "./color.js";
 import { n as mergeRefs } from "./refs.js";
 import { t as Icon_default } from "./Icon.js";
-import { r as useLanguage } from "./language.js";
+import { n as useLanguage } from "./useLanguage.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
 import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
 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 renderLabel } from "./Label.js";
+import { n as renderLabel } from "./utils2.js";
 import { t as MaxCharacters_default } from "./MaxCharacters.js";
-import React, { useEffect, useRef, useState } from "react";
 import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Input/styles.module.scss";
-var HN_Designsystem_Input_en_GB_default = { characters: "characters" };
-var HN_Designsystem_Input_nb_NO_default = { characters: "tegn" };
-var HN_Designsystem_Input_nn_NO_default = { characters: "teikn" };
-const getResources = (language) => {
-	switch (language) {
-		case LanguageLocales.ENGLISH: return HN_Designsystem_Input_en_GB_default;
-		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Input_nn_NO_default;
-		case LanguageLocales.NORWEGIAN:
-		default: return HN_Designsystem_Input_nb_NO_default;
-	}
-};
 let InputTypes = /* @__PURE__ */ function(InputTypes$1) {
 	InputTypes$1["text"] = "text";
 	InputTypes$1["number"] = "number";
@@ -37,19 +26,28 @@ let InputTypes = /* @__PURE__ */ function(InputTypes$1) {
 	InputTypes$1["time"] = "time";
 	return InputTypes$1;
 }({});
+var HN_Designsystem_Input_en_GB_default = { characters: "characters" };
+var HN_Designsystem_Input_nb_NO_default = { characters: "tegn" };
+var HN_Designsystem_Input_nn_NO_default = { characters: "teikn" };
+const getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_Input_en_GB_default;
+		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Input_nn_NO_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Input_nb_NO_default;
+	}
+};
 var getInputMaxWidth = (characters$3, hasIcon, iconSize) => {
 	const paddingWidth = hasIcon ? "1.5rem" : "2rem";
 	const iconWidth = hasIcon ? `${iconSize}px` : "0px";
 	return `calc(${characters$3 * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
 };
-var Input = React.forwardRef((props, ref) => {
-	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, maxText, inputContainerRef, resources, ...rest } = props;
+var Input = (props) => {
+	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, inputContainerRef, resources, ref, ...rest } = props;
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
-	const defaultResources = getResources(language);
 	const mergedResources = {
-		...defaultResources,
-		...resources,
-		characters: maxText || resources?.characters || defaultResources.characters
+		...getResources(language),
+		...resources
 	};
 	const breakpoint = useBreakpoint();
 	const inputContainerRefLocal = useRef(null);
@@ -184,9 +182,9 @@ var Input = React.forwardRef((props, ref) => {
 			]
 		})
 	});
-});
+};
 Input.displayName = "Input";
 var Input_default = Input;
-export { Input_default as n, InputTypes as t };
+export { InputTypes as n, Input_default as t };
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["mergedResources: HNDesignsystemInput"],"sources":["../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["{\n \"characters\": \"characters\"\n}\n","{\n \"characters\": \"tegn\"\n}\n","{\n \"characters\": \"teikn\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\nimport { HNDesignsystemInput } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { HNDesignsystemInput } from '../../resources/Resources';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'disabled'\n \| 'readOnly'\n \| 'autoComplete'\n \| 'name'\n \| 'placeholder'\n \| 'defaultValue'\n \| 'required'\n \| 'value'\n \| 'min'\n \| 'max'\n \| 'aria-describedby'\n \| 'aria-labelledby'\n \| 'onBlur'\n \| 'onClick'\n \| 'onChange'\n \| 'onFocus'\n \| 'onKeyDown'\n \| 'autoFocus'\n \| 'inputMode'\n > {\n /** The number at which the input field starts when you increment or decrement it /\n baseIncrementValue?: number;\n /* Adds custom classes to the element. /\n className?: string;\n /* HMTL Input type /\n type?: keyof typeof InputTypes;\n /* input id /\n inputId?: string;\n /* Width of input field in characters (approximate) /\n width?: number;\n /* If true, the component will be transparent. /\n transparent?: boolean;\n /* Icon to be displayed next to the input field /\n icon?: SvgIcon \| IconName;\n /* Places the icon to the right /\n iconRight?: boolean;\n /* Ref that is placed on the inputContainerRef /\n inputContainerRef?: React.RefObject<HTMLDivElement>;\n /* Ref that is placed on the inputWrapper /\n inputWrapperRef?: React.RefObject<HTMLDivElement>;\n /* Changes the color profile of the input /\n onColor?: keyof typeof FormOnColor;\n /* Changes the visuals of the input /\n size?: keyof typeof FormSize;\n /* Label of the input /\n label?: React.ReactNode;\n /* Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Component shown after input /\n afterInputChildren?: React.ReactNode;\n /* Component shown to the right of input /\n rightOfInput?: React.ReactNode;\n /* max character limit in input /\n maxCharacters?: number;\n /* @deprecated use resources instead. The text is displayed in the end of the text-counter /\n maxText?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemInput>;\n}\n\nexport enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n name,\n transparent = false,\n icon,\n iconRight,\n inputWrapperRef,\n onColor = FormOnColor.onwhite,\n size,\n baseIncrementValue,\n label,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n inputId: inputIdProp,\n errorWrapperClassName,\n testId,\n disabled,\n readOnly,\n autoComplete = 'off',\n afterInputChildren,\n rightOfInput,\n width,\n required,\n onChange,\n onKeyDown,\n autoFocus,\n maxCharacters,\n maxText,\n inputContainerRef,\n resources,\n ...rest\n } = props;\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemInput = {\n ...defaultResources,\n ...resources,\n characters: maxText \|\| resources?.characters \|\| defaultResources.characters,\n };\n\n const breakpoint = useBreakpoint();\n const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n const inputId = useIdWithFallback(inputIdProp);\n const [input, setInput] = useState(defaultValue \|\| '');\n const [prevValue, setPrevValue] = useState<string \| number \| undefined>(undefined);\n const numKeyPressed = useRef<boolean>(false);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const numRegex = /^[0-9]$/;\n\n useEffect(() => {\n setInput(defaultValue \|\| '');\n }, [defaultValue]);\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid \|\| !!errorText \|\| !!error \|\| maxCharactersExceeded;\n const isLarge = size === FormSize.large;\n const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const inputContainer = cn(styles['input-container'], {\n [styles['input-container--transparent']]: isTransparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: disabled,\n [styles['input-container--with-icon']]: icon,\n [styles['input-container--with-icon--right']]: icon && iconRight,\n });\n\n const inputClass = cn(styles['input-container__input'], {\n [styles['input-container__input--large']]: isLarge,\n [styles['input-container__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs \|\| !isLarge ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = (): React.ReactNode => {\n if (!icon) {\n return;\n }\n\n if (typeof icon === 'string') {\n return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n }\n\n return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n };\n\n // eslint-disable-next-line\n const handleClick = (e: React.MouseEvent<any>): void => {\n if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n\n if (props.onClick) props.onClick(e);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n const newValue = getIncrementValue(e);\n\n if (onChange) {\n onChange(e);\n }\n\n setInput(newValue);\n setPrevValue(newValue);\n };\n\n // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n if (typeof baseIncrementValue === 'undefined' \|\| type !== 'number') return e.target.value;\n\n const valueAsNumber = Number(e.target.value);\n\n if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 \|\| valueAsNumber === -1)) {\n e.target.value = baseIncrementValue + '';\n }\n\n return e.target.value;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = true;\n }\n if (onKeyDown) onKeyDown(e);\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = false;\n }\n };\n\n const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n {renderLabel(label, inputId, onColor as FormOnColor)}\n {/* input-elementet tillater keyboard-interaksjon /}\n <div className={styles['content-wrapper']}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n onClick={handleClick}\n ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n className={inputContainer}\n style={{ maxWidth }}\n >\n {!iconRight && renderIcon()}\n <input\n {...rest}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputId}\n className={inputClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete \|\| 'off'}\n required={required}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n {iconRight && renderIcon()}\n </div>\n <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={input.toString().length}\n maxText={mergedResources.characters}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n {afterInputChildren}\n </div>\n </ErrorWrapper>\n );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","names":["Input: React.FC<InputProps>","mergedResources: HNDesignsystemInput"],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n","{\n \"characters\": \"characters\"\n}\n","{\n \"characters\": \"tegn\"\n}\n","{\n \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'disabled'\n \| 'readOnly'\n \| 'autoComplete'\n \| 'name'\n \| 'placeholder'\n \| 'defaultValue'\n \| 'required'\n \| 'value'\n \| 'min'\n \| 'max'\n \| 'aria-describedby'\n \| 'aria-labelledby'\n \| 'onBlur'\n \| 'onClick'\n \| 'onChange'\n \| 'onFocus'\n \| 'onKeyDown'\n \| 'autoFocus'\n \| 'inputMode'\n > {\n /** The number at which the input field starts when you increment or decrement it /\n baseIncrementValue?: number;\n /* Adds custom classes to the element. /\n className?: string;\n /* HMTL Input type /\n type?: keyof typeof InputTypes;\n /* input id /\n inputId?: string;\n /* Width of input field in characters (approximate) /\n width?: number;\n /* If true, the component will be transparent. /\n transparent?: boolean;\n /* Icon to be displayed next to the input field /\n icon?: SvgIcon \| IconName;\n /* Places the icon to the right /\n iconRight?: boolean;\n /* Ref that is placed on the inputContainerRef /\n inputContainerRef?: React.RefObject<HTMLDivElement \| null>;\n /* Ref that is placed on the inputWrapper /\n inputWrapperRef?: React.RefObject<HTMLDivElement \| null>;\n /* Changes the color profile of the input /\n onColor?: keyof typeof FormOnColor;\n /* Changes the visuals of the input /\n size?: keyof typeof FormSize;\n /* Label of the input /\n label?: React.ReactNode;\n /* Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Component shown after input /\n afterInputChildren?: React.ReactNode;\n /* Component shown to the right of input /\n rightOfInput?: React.ReactNode;\n /* max character limit in input /\n maxCharacters?: number;\n /* Resources for component /\n resources?: Partial<HNDesignsystemInput>;\n /* Ref passed to the input element /\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n name,\n transparent = false,\n icon,\n iconRight,\n inputWrapperRef,\n onColor = FormOnColor.onwhite,\n size,\n baseIncrementValue,\n label,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n inputId: inputIdProp,\n errorWrapperClassName,\n testId,\n disabled,\n readOnly,\n autoComplete = 'off',\n afterInputChildren,\n rightOfInput,\n width,\n required,\n onChange,\n onKeyDown,\n autoFocus,\n maxCharacters,\n inputContainerRef,\n resources,\n ref,\n ...rest\n } = props;\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemInput = {\n ...defaultResources,\n ...resources,\n };\n\n const breakpoint = useBreakpoint();\n const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n const inputId = useIdWithFallback(inputIdProp);\n const [input, setInput] = useState(defaultValue \|\| '');\n const [prevValue, setPrevValue] = useState<string \| number \| undefined>(undefined);\n const numKeyPressed = useRef<boolean>(false);\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const numRegex = /^[0-9]$/;\n\n useEffect(() => {\n setInput(defaultValue \|\| '');\n }, [defaultValue]);\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid \|\| !!errorText \|\| !!error \|\| maxCharactersExceeded;\n const isLarge = size === FormSize.large;\n const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const inputContainer = cn(styles['input-container'], {\n [styles['input-container--transparent']]: isTransparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: disabled,\n [styles['input-container--with-icon']]: icon,\n [styles['input-container--with-icon--right']]: icon && iconRight,\n });\n\n const inputClass = cn(styles['input-container__input'], {\n [styles['input-container__input--large']]: isLarge,\n [styles['input-container__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs \|\| !isLarge ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = (): React.ReactNode => {\n if (!icon) {\n return;\n }\n\n if (typeof icon === 'string') {\n return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n }\n\n return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n };\n\n // eslint-disable-next-line\n const handleClick = (e: React.MouseEvent<any>): void => {\n if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n\n if (props.onClick) props.onClick(e);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n const newValue = getIncrementValue(e);\n\n if (onChange) {\n onChange(e);\n }\n\n setInput(newValue);\n setPrevValue(newValue);\n };\n\n // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n if (typeof baseIncrementValue === 'undefined' \|\| type !== 'number') return e.target.value;\n\n const valueAsNumber = Number(e.target.value);\n\n if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 \|\| valueAsNumber === -1)) {\n e.target.value = baseIncrementValue + '';\n }\n\n return e.target.value;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = true;\n }\n if (onKeyDown) onKeyDown(e);\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = false;\n }\n };\n\n const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n {renderLabel(label, inputId, onColor as FormOnColor)}\n {/* input-elementet tillater keyboard-interaksjon /}\n <div className={styles['content-wrapper']}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n onClick={handleClick}\n ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n className={inputContainer}\n style={{ maxWidth }}\n >\n {!iconRight && renderIcon()}\n <input\n {...rest}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputId}\n className={inputClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete \|\| 'off'}\n required={required}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n {iconRight && renderIcon()}\n </div>\n <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={input.toString().length}\n maxText={mergedResources.characters}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n {afterInputChildren}\n </div>\n </ErrorWrapper>\n );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/Input2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n as Input_default } from "./Input.js";
+import { t as Input_default } from "./Input.js";
 var Input_default$1 = Input_default;
 export { Input_default$1 as t };

package/lib/Input2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input2.js","names":[],"sources":["../src/components/Input/index.ts"],"sourcesContent":["import Input from './Input';\nexport * from './Input';\nexport default Input;\n"],"mappings":";~~AAEA~~,IAAA,kBAAe"}
1	+ {"version":3,"file":"Input2.js","names":[],"sources":["../src/components/Input/index.ts"],"sourcesContent":["import Input from './Input';\nexport { InputTypes } from './constants';\nexport * from './Input';\nexport default Input;\n"],"mappings":";AAGA,IAAA,kBAAe"}