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

package/lib/AnchorLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorLink.js","names":[],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  | React.MouseEvent<HTMLElement, MouseEvent>\n  | React.FormEvent<unknown>\n  | React.KeyboardEvent<HTMLUListElement>\n  | null;\n\nexport interface AnchorLinkProps {\n  /** When true, onclick and keyboard events will be passed to the child. */\n  asChild?: boolean;\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement | null>;\n}\n\nconst AnchorLink: React.FC<AnchorLinkProps> = props => {\n  const { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId, ref } = props;\n  const external = target === '_blank';\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = (): React.ReactElement => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  if (asChild) {\n    return (\n      <AsChildSlot content={<span className={anchorClasses} />} className={AnchorLinkStyles['anchorlink-wrapper']} elementRef={refObject}>\n        {children}\n      </AsChildSlot>\n    );\n  }\n\n  if (htmlMarkup === 'a') {\n    return (\n      <a\n        href={href}\n        target={target}\n        className={anchorClasses}\n        rel={external ? 'noopener noreferrer' : undefined}\n        ref={refObject as React.RefObject<HTMLAnchorElement>}\n        {...commonProps}\n      >\n        {renderContent()}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={AnchorLinkStyles['anchorlink-wrapper']}\n      ref={refObject as React.RefObject<HTMLButtonElement>}\n      {...commonProps}\n    >\n      <span className={anchorClasses}>{renderContent()}</span>\n    </button>\n  );\n};\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport * from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;;AA4CA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,QAAQ,QAAQ;CAC7G,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,IACD;CACD,MAAM,gBAAgB,WAAW,iBAAiB,YAAY,UAAU;CAExE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;EACD;CAED,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAD;EACE,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,IAAI;EACjC,YAAY,SAAS,aAAa,IAAI;EACtC,MAAM,SAAS;EACJ;EACX,CAAA,CAEH,EAAA,CAAA;CAGL,IAAI,SACF,OACE,oBAAC,qBAAD;EAAa,SAAS,oBAAC,QAAD,EAAM,WAAW,eAAiB,CAAA;EAAE,WAAW,iBAAiB;EAAuB,YAAY;EACtH;EACW,CAAA;CAIlB,IAAI,eAAe,KACjB,OACE,oBAAC,KAAD;EACQ;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,eAAe;EACd,CAAA;CAIR,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAD;GAAM,WAAW;aAAgB,eAAe;GAAQ,CAAA;EACjD,CAAA;;;;ACxGb,IAAA,qBAAe"}
+{"version":3,"file":"AnchorLink.js","names":[],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  | React.MouseEvent<HTMLElement, MouseEvent>\n  | React.FormEvent<unknown>\n  | React.KeyboardEvent<HTMLUListElement>\n  | null;\n\nexport interface AnchorLinkProps {\n  /** When true, onclick and keyboard events will be passed to the child. */\n  asChild?: boolean;\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement | null>;\n}\n\nconst AnchorLink: React.FC<AnchorLinkProps> = props => {\n  const { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId, ref } = props;\n  const external = target === '_blank';\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = (): React.ReactElement => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  if (asChild) {\n    return (\n      <AsChildSlot content={<span className={anchorClasses} />} className={AnchorLinkStyles['anchorlink-wrapper']} elementRef={refObject}>\n        {children}\n      </AsChildSlot>\n    );\n  }\n\n  if (htmlMarkup === 'a') {\n    return (\n      <a\n        href={href}\n        target={target}\n        className={anchorClasses}\n        rel={external ? 'noopener noreferrer' : undefined}\n        ref={refObject as React.RefObject<HTMLAnchorElement>}\n        {...commonProps}\n      >\n        {renderContent()}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={AnchorLinkStyles['anchorlink-wrapper']}\n      ref={refObject as React.RefObject<HTMLButtonElement>}\n      {...commonProps}\n    >\n      <span className={anchorClasses}>{renderContent()}</span>\n    </button>\n  );\n};\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport * from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;;AA4CA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,QAAQ,QAAQ;CAC7G,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,GACF;CACA,MAAM,gBAAgB,WAAW,iBAAiB,YAAY,SAAS;CAEvE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;CACF;CAEA,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAD;EACE,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,GAAG;EAChC,YAAY,SAAS,aAAa,GAAG;EACrC,MAAM,SAAS;EACJ;CACZ,CAAA,CAEH,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,oBAAC,qBAAD;EAAa,SAAS,oBAAC,QAAD,EAAM,WAAW,cAAgB,CAAA;EAAG,WAAW,iBAAiB;EAAuB,YAAY;EACtH;CACU,CAAA;CAIjB,IAAI,eAAe,KACjB,OACE,oBAAC,KAAD;EACQ;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,cAAc;CACd,CAAA;CAIP,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAD;GAAM,WAAW;aAAgB,cAAc;EAAQ,CAAA;CACjD,CAAA;AAEZ;;;AC1GA,IAAA,qBAAe"}

package/lib/AsChildSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsChildSlot.js","names":[],"sources":["../src/components/AsChildSlot/AsChildSlot.tsx","../src/components/AsChildSlot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface AsChildSlotHandle {\n  /** Click the child’s DOM node */\n  click: () => void;\n}\n\nexport interface AsChildSlotProps {\n  /** Pass one element/component that we will map to a DOM element (<a>, <button>, React Router <Link>) */\n  children?: React.ReactNode;\n  /** Class names to apply to the visible element */\n  className?: string;\n  /** Content to render inside the visible element - For example the text and icons of the parent component that renders AsChildSlot */\n  content?: React.ReactNode;\n  /** Disabled state passed down (merged with child’s disabled/aria-disabled) */\n  disabled?: boolean;\n  /** Called before the child’s onClick when visible */\n  onSelect?: (e: React.SyntheticEvent) => void;\n  /** Optional states to apply to the DOM element */\n  ariaCurrent?: 'page' | 'true';\n  /** DOM ref for the element we end up rendering */\n  elementRef?: React.Ref<HTMLElement>;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<AsChildSlotHandle>;\n}\n\nconst isAriaDisabled = (v: unknown): boolean => v === true || v === 'true';\n\nexport const AsChildSlot: React.FC<AsChildSlotProps> = props => {\n  const { children, className, content, disabled, onSelect, ariaCurrent, elementRef, ref } = props;\n  const childElement = React.Children.toArray(children).filter(React.isValidElement)[0] as React.ReactElement | undefined;\n  const nodeRef = React.useRef<HTMLElement | null>(null);\n  const childPropsRef = (childElement as unknown as { props?: { ref?: React.Ref<HTMLElement> } })?.props?.ref;\n  const mergedRef = mergeRefs<HTMLElement>([\n    (node): void => {\n      nodeRef.current = node;\n    },\n    childPropsRef,\n    elementRef,\n  ]);\n\n  const childProps =\n    (childElement?.props as Partial<React.DOMAttributes<HTMLElement>> &\n      Partial<React.AnchorHTMLAttributes<HTMLElement>> &\n      Partial<React.ButtonHTMLAttributes<HTMLElement>> & { disabled?: boolean; href?: unknown }) || {};\n  const childDisabled = !!childProps.disabled || isAriaDisabled((childProps as React.AriaAttributes)['aria-disabled']);\n  const isDisabled = !!disabled || childDisabled;\n\n  // Exposes a callable click() to the parents.\n  React.useImperativeHandle(\n    ref,\n    () => ({\n      click: (): void => {\n        if (isDisabled) return;\n        nodeRef.current?.click();\n      },\n    }),\n    [isDisabled]\n  );\n\n  if (!childElement) return null;\n\n  // Actual user mouse interaction\n  const childOnClick = childProps.onClick as React.MouseEventHandler<HTMLElement> | undefined;\n  const wrappedOnClick: React.MouseEventHandler<HTMLElement> = e => {\n    if (isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    onSelect?.(e);\n    childOnClick?.(e);\n  };\n\n  // Actual user keyboard interaction\n  const childOnKeyDown = childProps.onKeyDown as React.KeyboardEventHandler<HTMLElement> | undefined;\n  const wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {\n    childOnKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {\n      if (isDisabled) {\n        e.preventDefault();\n        return;\n      }\n      e.preventDefault();\n      nodeRef.current?.click();\n    }\n  };\n\n  const isButtonLike = typeof childProps.href === 'undefined';\n  const elementWithChildren = childElement as React.ReactElement<{ children?: React.ReactNode }>;\n  const wrappedChildren =\n    content && React.isValidElement(content)\n      ? React.cloneElement(content, undefined, elementWithChildren.props.children)\n      : elementWithChildren.props.children;\n\n  const nextProps: Record<string, unknown> = {\n    ref: mergedRef,\n    className: `${styles['as-child-reset']} ${className ?? ''}`,\n    style: undefined,\n    'aria-disabled': isDisabled || undefined,\n    'aria-current': ariaCurrent,\n    ...(isButtonLike && !('type' in childProps) ? { type: 'button' as const } : {}),\n    onClick: wrappedOnClick,\n    onKeyDown: wrappedOnKeyDown,\n    children: wrappedChildren,\n  };\n\n  return React.cloneElement(childElement as React.ReactElement<Record<string, unknown>>, nextProps);\n};\n\nexport default AsChildSlot;\n","import AsChildSlot from './AsChildSlot';\nexport * from './AsChildSlot';\nexport default AsChildSlot;\n"],"mappings":";;;;AA8BA,IAAM,kBAAkB,MAAwB,MAAM,QAAQ,MAAM;AAEpE,IAAa,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,WAAW,SAAS,UAAU,UAAU,aAAa,YAAY,QAAQ;CAC3F,MAAM,eAAe,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAAC;CACnF,MAAM,UAAU,MAAM,OAA2B,KAAK;CACtD,MAAM,gBAAiB,cAA0E,OAAO;CACxG,MAAM,YAAY,UAAuB;GACtC,SAAe;GACd,QAAQ,UAAU;;EAEpB;EACA;EACD,CAAC;CAEF,MAAM,aACH,cAAc,SAEiF,EAAE;CACpG,MAAM,gBAAgB,CAAC,CAAC,WAAW,YAAY,eAAgB,WAAoC,iBAAiB;CACpH,MAAM,aAAa,CAAC,CAAC,YAAY;CAGjC,MAAM,oBACJ,YACO,EACL,aAAmB;EACjB,IAAI,YAAY;EAChB,QAAQ,SAAS,OAAO;IAE3B,GACD,CAAC,WAAW,CACb;CAED,IAAI,CAAC,cAAc,OAAO;CAG1B,MAAM,eAAe,WAAW;CAChC,MAAM,kBAAuD,MAAK;EAChE,IAAI,YAAY;GACd,EAAE,gBAAgB;GAClB,EAAE,iBAAiB;GACnB;;EAEF,WAAW,EAAE;EACb,eAAe,EAAE;;CAInB,MAAM,iBAAiB,WAAW;CAClC,MAAM,oBAA4D,MAAK;EACrE,iBAAiB,EAAE;EACnB,IAAI,EAAE,kBAAkB;EACxB,IAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,cAAc,EAAE,SAAS,SAAS;GAC/D,IAAI,YAAY;IACd,EAAE,gBAAgB;IAClB;;GAEF,EAAE,gBAAgB;GAClB,QAAQ,SAAS,OAAO;;;CAI5B,MAAM,eAAe,OAAO,WAAW,SAAS;CAChD,MAAM,sBAAsB;CAC5B,MAAM,kBACJ,WAAW,MAAM,eAAe,QAAQ,GACpC,MAAM,aAAa,SAAS,KAAA,GAAW,oBAAoB,MAAM,SAAS,GAC1E,oBAAoB,MAAM;CAEhC,MAAM,YAAqC;EACzC,KAAK;EACL,WAAW,GAAG,OAAO,kBAAkB,GAAG,aAAa;EACvD,OAAO,KAAA;EACP,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB;EAChB,GAAI,gBAAgB,EAAE,UAAU,cAAc,EAAE,MAAM,UAAmB,GAAG,EAAE;EAC9E,SAAS;EACT,WAAW;EACX,UAAU;EACX;CAED,OAAO,MAAM,aAAa,cAA6D,UAAU;;;;AC9GnG,IAAA,sBAAe"}
+{"version":3,"file":"AsChildSlot.js","names":[],"sources":["../src/components/AsChildSlot/AsChildSlot.tsx","../src/components/AsChildSlot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface AsChildSlotHandle {\n  /** Click the child’s DOM node */\n  click: () => void;\n}\n\nexport interface AsChildSlotProps {\n  /** Pass one element/component that we will map to a DOM element (<a>, <button>, React Router <Link>) */\n  children?: React.ReactNode;\n  /** Class names to apply to the visible element */\n  className?: string;\n  /** Content to render inside the visible element - For example the text and icons of the parent component that renders AsChildSlot */\n  content?: React.ReactNode;\n  /** Disabled state passed down (merged with child’s disabled/aria-disabled) */\n  disabled?: boolean;\n  /** Called before the child’s onClick when visible */\n  onSelect?: (e: React.SyntheticEvent) => void;\n  /** Optional states to apply to the DOM element */\n  ariaCurrent?: 'page' | 'true';\n  /** DOM ref for the element we end up rendering */\n  elementRef?: React.Ref<HTMLElement>;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<AsChildSlotHandle>;\n}\n\nconst isAriaDisabled = (v: unknown): boolean => v === true || v === 'true';\n\nexport const AsChildSlot: React.FC<AsChildSlotProps> = props => {\n  const { children, className, content, disabled, onSelect, ariaCurrent, elementRef, ref } = props;\n  const childElement = React.Children.toArray(children).filter(React.isValidElement)[0] as React.ReactElement | undefined;\n  const nodeRef = React.useRef<HTMLElement | null>(null);\n  const childPropsRef = (childElement as unknown as { props?: { ref?: React.Ref<HTMLElement> } })?.props?.ref;\n  const mergedRef = mergeRefs<HTMLElement>([\n    (node): void => {\n      nodeRef.current = node;\n    },\n    childPropsRef,\n    elementRef,\n  ]);\n\n  const childProps =\n    (childElement?.props as Partial<React.DOMAttributes<HTMLElement>> &\n      Partial<React.AnchorHTMLAttributes<HTMLElement>> &\n      Partial<React.ButtonHTMLAttributes<HTMLElement>> & { disabled?: boolean; href?: unknown }) || {};\n  const childDisabled = !!childProps.disabled || isAriaDisabled((childProps as React.AriaAttributes)['aria-disabled']);\n  const isDisabled = !!disabled || childDisabled;\n\n  // Exposes a callable click() to the parents.\n  React.useImperativeHandle(\n    ref,\n    () => ({\n      click: (): void => {\n        if (isDisabled) return;\n        nodeRef.current?.click();\n      },\n    }),\n    [isDisabled]\n  );\n\n  if (!childElement) return null;\n\n  // Actual user mouse interaction\n  const childOnClick = childProps.onClick as React.MouseEventHandler<HTMLElement> | undefined;\n  const wrappedOnClick: React.MouseEventHandler<HTMLElement> = e => {\n    if (isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    onSelect?.(e);\n    childOnClick?.(e);\n  };\n\n  // Actual user keyboard interaction\n  const childOnKeyDown = childProps.onKeyDown as React.KeyboardEventHandler<HTMLElement> | undefined;\n  const wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {\n    childOnKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {\n      if (isDisabled) {\n        e.preventDefault();\n        return;\n      }\n      e.preventDefault();\n      nodeRef.current?.click();\n    }\n  };\n\n  const isButtonLike = typeof childProps.href === 'undefined';\n  const elementWithChildren = childElement as React.ReactElement<{ children?: React.ReactNode }>;\n  const wrappedChildren =\n    content && React.isValidElement(content)\n      ? React.cloneElement(content, undefined, elementWithChildren.props.children)\n      : elementWithChildren.props.children;\n\n  const nextProps: Record<string, unknown> = {\n    ref: mergedRef,\n    className: `${styles['as-child-reset']} ${className ?? ''}`,\n    style: undefined,\n    'aria-disabled': isDisabled || undefined,\n    'aria-current': ariaCurrent,\n    ...(isButtonLike && !('type' in childProps) ? { type: 'button' as const } : {}),\n    onClick: wrappedOnClick,\n    onKeyDown: wrappedOnKeyDown,\n    children: wrappedChildren,\n  };\n\n  return React.cloneElement(childElement as React.ReactElement<Record<string, unknown>>, nextProps);\n};\n\nexport default AsChildSlot;\n","import AsChildSlot from './AsChildSlot';\nexport * from './AsChildSlot';\nexport default AsChildSlot;\n"],"mappings":";;;;AA8BA,IAAM,kBAAkB,MAAwB,MAAM,QAAQ,MAAM;AAEpE,IAAa,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,WAAW,SAAS,UAAU,UAAU,aAAa,YAAY,QAAQ;CAC3F,MAAM,eAAe,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,MAAM,cAAc,EAAE;CACnF,MAAM,UAAU,MAAM,OAA2B,IAAI;CACrD,MAAM,gBAAiB,cAA0E,OAAO;CACxG,MAAM,YAAY,UAAuB;GACtC,SAAe;GACd,QAAQ,UAAU;EACpB;EACA;EACA;CACF,CAAC;CAED,MAAM,aACH,cAAc,SAEiF,CAAC;CACnG,MAAM,gBAAgB,CAAC,CAAC,WAAW,YAAY,eAAgB,WAAoC,gBAAgB;CACnH,MAAM,aAAa,CAAC,CAAC,YAAY;CAGjC,MAAM,oBACJ,YACO,EACL,aAAmB;EACjB,IAAI,YAAY;EAChB,QAAQ,SAAS,MAAM;CACzB,EACF,IACA,CAAC,UAAU,CACb;CAEA,IAAI,CAAC,cAAc,OAAO;CAG1B,MAAM,eAAe,WAAW;CAChC,MAAM,kBAAuD,MAAK;EAChE,IAAI,YAAY;GACd,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB;EACF;EACA,WAAW,CAAC;EACZ,eAAe,CAAC;CAClB;CAGA,MAAM,iBAAiB,WAAW;CAClC,MAAM,oBAA4D,MAAK;EACrE,iBAAiB,CAAC;EAClB,IAAI,EAAE,kBAAkB;EACxB,IAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,cAAc,EAAE,SAAS,SAAS;GAC/D,IAAI,YAAY;IACd,EAAE,eAAe;IACjB;GACF;GACA,EAAE,eAAe;GACjB,QAAQ,SAAS,MAAM;EACzB;CACF;CAEA,MAAM,eAAe,OAAO,WAAW,SAAS;CAChD,MAAM,sBAAsB;CAC5B,MAAM,kBACJ,WAAW,MAAM,eAAe,OAAO,IACnC,MAAM,aAAa,SAAS,KAAA,GAAW,oBAAoB,MAAM,QAAQ,IACzE,oBAAoB,MAAM;CAEhC,MAAM,YAAqC;EACzC,KAAK;EACL,WAAW,GAAG,OAAO,kBAAkB,GAAG,aAAa;EACvD,OAAO,KAAA;EACP,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB;EAChB,GAAI,gBAAgB,EAAE,UAAU,cAAc,EAAE,MAAM,SAAkB,IAAI,CAAC;EAC7E,SAAS;EACT,WAAW;EACX,UAAU;CACZ;CAEA,OAAO,MAAM,aAAa,cAA6D,SAAS;AAClG;;;AC/GA,IAAA,sBAAe"}

package/lib/Avatar.js.map

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

package/lib/Badge.js.map

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

package/lib/Button.js.map

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

package/lib/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+## [15.0.0](https://github.com/helsenorge/designsystem/compare/v14.11.1...v15.0.0) (2026-06-04)
+
+### Features
+
+* **filter:**  ny komponent LoaderSpinner ([fab4ec7](https://github.com/helsenorge/designsystem/commit/fab4ec7c5ba0695b63e30d398ff60de43ca90217)), closes [#377329](https://github.com/helsenorge/designsystem/issues/377329)
+
+### Bug Fixes
+
+* **loaderspinner:**  justert spinner plassering for windows ([bc9c536](https://github.com/helsenorge/designsystem/commit/bc9c536ac3cfb730b9de882b0b1e25a0c9de233b)), closes [#377329](https://github.com/helsenorge/designsystem/issues/377329)
+
+## 15.0.0-beta.1 (2026-05-13)
+
 ## 15.0.0-beta.0 (2026-05-08)
 
 ### Features
@@ -7,6 +19,55 @@
 * **tag:**  legg til accent2 variant med banana farge ([bb0c49b](https://github.com/helsenorge/designsystem/commit/bb0c49b340c8305fdc98e25adf955777f0d80be0)), closes [#376269](https://github.com/helsenorge/designsystem/issues/376269)
 * **tag:**  nytt design på tag ([d0871d8](https://github.com/helsenorge/designsystem/commit/d0871d877a6b7ea52908114c533ea2cb924ad8ed)), closes [#374718](https://github.com/helsenorge/designsystem/issues/374718)
 
+## [14.11.1](https://github.com/helsenorge/designsystem/compare/v14.11.0...v14.11.1) (2026-05-29)
+
+### Bug Fixes
+
+* **radiobutton:**  dot forsvant ikke uten formgroup med name ([8da51a3](https://github.com/helsenorge/designsystem/commit/8da51a390f5a54aeca6ce697ed6c7818b2564515)), closes [#379249](https://github.com/helsenorge/designsystem/issues/379249)
+
+## [14.11.0](https://github.com/helsenorge/designsystem/compare/v14.10.0...v14.11.0) (2026-05-26)
+
+### Features
+
+*  nye komponenter visualcheckbox og visualcheckboxgroup ([8cde9b1](https://github.com/helsenorge/designsystem/commit/8cde9b1deea876ddb5fcc0bf22b7f228ca0d770f)), closes [#376756](https://github.com/helsenorge/designsystem/issues/376756)
+*  nye komponenter visualradio og visualradiogroup ([4643f81](https://github.com/helsenorge/designsystem/commit/4643f8177d086319ac168d24e2027573a76d681d)), closes [#376756](https://github.com/helsenorge/designsystem/issues/376756)
+*  renamet visualradiobuttoncloud til visualradiocloud ([2a52c26](https://github.com/helsenorge/designsystem/commit/2a52c26323c1cd57af057c301f8bc4d4ab66cb80)), closes [#376757](https://github.com/helsenorge/designsystem/issues/376757)
+* **datepicker:**  fjern blå markering ved focus på segment i dateinput og timeinput ([e02197e](https://github.com/helsenorge/designsystem/commit/e02197e5c63608a2ea531cce20d5d67f2a507c68)), closes [#378506](https://github.com/helsenorge/designsystem/issues/378506)
+* **illustration:**  nye illustrasjoner for småbarnsliv ([59a5521](https://github.com/helsenorge/designsystem/commit/59a5521d629420530cdc0d8dffa860a06a363912)), closes [#378919](https://github.com/helsenorge/designsystem/issues/378919)
+
+## [14.10.0](https://github.com/helsenorge/designsystem/compare/v14.9.2...v14.10.0) (2026-05-18)
+
+### Features
+
+*  ny komponent visualcheckboxcloud ([4e6ea9c](https://github.com/helsenorge/designsystem/commit/4e6ea9c904f65cf4aedf2cc3f474cbff117c080a)), closes [#376757](https://github.com/helsenorge/designsystem/issues/376757)
+*  ny komponent visualradiobuttoncloud ([d14fce7](https://github.com/helsenorge/designsystem/commit/d14fce7e75b9f22397288defc51bfc6158595199)), closes [#376757](https://github.com/helsenorge/designsystem/issues/376757)
+
+## [14.9.2](https://github.com/helsenorge/designsystem/compare/v14.9.1...v14.9.2) (2026-05-13)
+
+### Bug Fixes
+
+* **dateandtime:**  softerror skal spre seg uten å påvirke naboer ([27db71b](https://github.com/helsenorge/designsystem/commit/27db71b8e65f4d062da6b87f66147451d78be64f)), closes [#377339](https://github.com/helsenorge/designsystem/issues/377339)
+* **filtersort:**  første child skal være høyrestilt ([a9acf73](https://github.com/helsenorge/designsystem/commit/a9acf73ff4e65c267025535ec1d9f0ef78545b55)), closes [#376682](https://github.com/helsenorge/designsystem/issues/376682)
+
+## [14.9.1](https://github.com/helsenorge/designsystem/compare/v14.9.0...v14.9.1) (2026-05-12)
+
+### Bug Fixes
+
+* **datepicker:**  onblur skal trigges når popup lukkes ([dfc3193](https://github.com/helsenorge/designsystem/commit/dfc31937fae8d1dfa63c221792e340355db59101)), closes [#377127](https://github.com/helsenorge/designsystem/issues/377127)
+
+## [14.9.0](https://github.com/helsenorge/designsystem/compare/v14.8.0...v14.9.0) (2026-05-11)
+
+### Features
+
+* **daterangepicker:**  from og to value kan være undefined og null ([b1e2b07](https://github.com/helsenorge/designsystem/commit/b1e2b07037b932b1ceb35a5f2998fb0d8a224f3a)), closes [#377492](https://github.com/helsenorge/designsystem/issues/377492)
+* **formgroup:**  ny prop legendid ([5d73bdc](https://github.com/helsenorge/designsystem/commit/5d73bdcd1940f268b7aef79e602f8bf1d30044cf)), closes [#377978](https://github.com/helsenorge/designsystem/issues/377978)
+
+## [14.8.0](https://github.com/helsenorge/designsystem/compare/v14.7.3...v14.8.0) (2026-05-11)
+
+### Features
+
+* **datepicker:**  value kan være null ([67c98bd](https://github.com/helsenorge/designsystem/commit/67c98bdcf046674f9c3f04d8cbe922c506f9b298)), closes [#377492](https://github.com/helsenorge/designsystem/issues/377492)
+
 ## [14.7.3](https://github.com/helsenorge/designsystem/compare/v14.7.2...v14.7.3) (2026-05-08)
 
 ### Bug Fixes

package/lib/Checkbox.js

@@ -1,10 +1,8 @@
 import { t as uuid } from "./uuid.js";
-import { AnalyticsId, FormOnColor, FormSize, IconSize } from "./constants.js";
+import { AnalyticsId, FormOnColor, FormSize } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
-import { getColor } from "./theme/currys/color.js";
 import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
-import { t as Icon_default } from "./Icon.js";
-import Check from "./components/Icons/Check.js";
+import { t as CheckboxMarker } from "./CheckboxMarker.js";
 import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
 import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
@@ -40,34 +38,12 @@ var Checkbox = (props) => {
 		[checkboxStyles["checkbox-label__large--disabled"]]: large && disabled
 	});
 	const checkboxClasses = classNames(checkboxStyles.checkbox, className);
-	const checkboxIconWrapperClasses = classNames(checkboxStyles["checkbox__icon-wrapper"], {
-		[checkboxStyles["checkbox__icon-wrapper--on-white"]]: onWhite,
-		[checkboxStyles["checkbox__icon-wrapper--on-grey"]]: onGrey,
-		[checkboxStyles["checkbox__icon-wrapper--on-invalid"]]: onInvalid,
-		[checkboxStyles["checkbox__icon-wrapper--disabled"]]: disabled,
-		[checkboxStyles["checkbox__icon-wrapper__regular--checked"]]: !large && isChecked,
-		[checkboxStyles["checkbox__icon-wrapper__regular--invalid"]]: !large && isChecked && onInvalid,
-		[checkboxStyles["checkbox__icon-wrapper__regular--on-dark"]]: !large && isChecked && onDark,
-		[checkboxStyles["checkbox__icon-wrapper__large--checked"]]: large && isChecked,
-		[checkboxStyles["checkbox__icon-wrapper__large--invalid"]]: large && onInvalid,
-		[checkboxStyles["checkbox__icon-wrapper--on-dark"]]: onDark,
-		[checkboxStyles["checkbox__icon-wrapper--on-blueberry"]]: onBlueberry,
-		[checkboxStyles["checkbox__icon-wrapper--invalid"]]: onInvalid,
-		[checkboxStyles["checkbox__icon-wrapper__large--invalid"]]: large && isChecked && onInvalid,
-		[checkboxStyles["checkbox__icon-wrapper__large--disabled"]]: disabled && large && isChecked,
-		[checkboxStyles["checkbox__icon-wrapper__large--checked--invalid"]]: large && isChecked && onInvalid,
-		[checkboxStyles["checkbox__icon-wrapper__large--checked--disabled"]]: disabled && large && isChecked
-	});
 	const labelTextClasses = classNames(checkboxStyles["checkbox-label__text"], {
 		[checkboxStyles["checkbox-label__text__large--checked"]]: large && isChecked,
 		[checkboxStyles["checkbox-label__text__large--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox-label__text--on-dark"]]: onDark,
 		[checkboxStyles["checkbox-label__text--disabled"]]: disabled
 	});
-	let iconColor = getColor("white");
-	if (onDark || large && isChecked) iconColor = getColor("blueberry", 900);
-	if (onInvalid && large && isChecked) iconColor = getColor("white");
-	if (disabled) iconColor = getColor("neutral", 700);
 	useEffect(() => {
 		setIsChecked(checked);
 	}, [checked]);
@@ -76,28 +52,29 @@ var Checkbox = (props) => {
 		setIsChecked(!isChecked);
 	};
 	const getLabelContent = () => {
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-			id: inputId,
-			name,
-			className: checkboxClasses,
-			type: "checkbox",
-			checked: isChecked,
-			disabled,
-			value,
-			ref: mergedRefs,
-			"aria-describedby": getAriaDescribedBy(props, errorTextId),
-			"aria-invalid": error,
-			required,
-			onChange: onChangeHandler
-		}), /* @__PURE__ */ jsx("span", {
-			className: checkboxIconWrapperClasses,
-			children: isChecked && /* @__PURE__ */ jsx(Icon_default, {
-				color: iconColor,
-				className: checkboxStyles["checkbox__icon"],
-				svgIcon: Check,
-				size: IconSize.XSmall
-			})
-		})] });
+		return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", {
+			className: checkboxStyles["checkbox__marker-wrapper"],
+			children: [/* @__PURE__ */ jsx("input", {
+				id: inputId,
+				name,
+				className: checkboxClasses,
+				type: "checkbox",
+				checked: isChecked,
+				disabled,
+				value,
+				ref: mergedRefs,
+				"aria-describedby": getAriaDescribedBy(props, errorTextId),
+				"aria-invalid": error,
+				required,
+				onChange: onChangeHandler
+			}), /* @__PURE__ */ jsx(CheckboxMarker, {
+				checked: isChecked,
+				disabled,
+				error,
+				onColor,
+				size
+			})]
+		}) });
 	};
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
 		className: errorWrapperClassName,

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <span className={checkboxStyles['checkbox__marker-wrapper']}>\n          <input\n            id={inputId}\n            name={name}\n            className={checkboxClasses}\n            type=\"checkbox\"\n            checked={isChecked}\n            disabled={disabled}\n            value={value}\n            ref={mergedRefs}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,gBAAgB;EACd,aAAa,OAAO;CACtB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;aAAhC,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;KACN,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;aAC1E,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,0BAA0B,eAAe;IAClC;IACP,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}

package/lib/Checkbox2.js

@@ -0,0 +1,69 @@
+import { AnalyticsId } from "./constants.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import classNames from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/VisualCheckboxCloud/Checkbox/styles.module.scss";
+//#region src/components/VisualCheckboxCloud/Checkbox/Checkbox.tsx
+var Checkbox = (props) => {
+	const { className, checked, defaultChecked, children, inputId: inputIdProp, errorText, error = !!errorText, errorTextId: errorTextIdProp, errorWrapperClassName, testId, onChange, ref, ...rest } = props;
+	const inputId = useIdWithFallback(inputIdProp);
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const [isChecked, setIsChecked] = useState(!!(checked ?? defaultChecked));
+	const [prevChecked, setPrevChecked] = useState(checked);
+	if (prevChecked !== checked) {
+		setPrevChecked(checked);
+		if (checked !== void 0 && checked !== isChecked) setIsChecked(checked);
+	}
+	const handleChange = (e) => {
+		setIsChecked(e.target.checked);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: classNames(styles["visual-checkbox"], {
+				[styles["visual-checkbox--checked"]]: isChecked,
+				[styles["visual-checkbox--invalid"]]: error
+			}, className),
+			htmlFor: inputId,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Checkbox,
+			children: [/* @__PURE__ */ jsx("input", {
+				...rest,
+				id: inputId,
+				ref,
+				className: styles["visual-checkbox__input"],
+				type: "checkbox",
+				checked: isChecked,
+				"aria-invalid": error,
+				"aria-describedby": getAriaDescribedBy(props, errorTextId),
+				onChange: handleChange
+			}), /* @__PURE__ */ jsxs("span", {
+				className: styles["visual-checkbox__pill"],
+				children: [isChecked && /* @__PURE__ */ jsx("span", {
+					className: styles["visual-checkbox__icon"],
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "16",
+						height: "12",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ jsx("path", { d: "m14.754.165 1.08 1.074.166.164-.16.17L6.13 12 .159 5.59 0 5.42l.166-.164 1.08-1.075.165-.164.16.17 4.558 4.896 8.3-8.913.16-.17.165.165Z" })
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: styles["visual-checkbox__label"],
+					children
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { Checkbox as t };
+
+//# sourceMappingURL=Checkbox2.js.map

package/lib/Checkbox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox2.js","names":[],"sources":["../src/components/VisualCheckboxCloud/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../../ErrorWrapper';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useIdWithFallback } from '../../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../../utils/accessibility';\nimport ErrorWrapper from '../../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Label text shown inside the pill. */\n  children: React.ReactNode;\n  /** input id of the underlying checkbox */\n  inputId?: string;\n  /** Activates error styling. Can be true while errorText is empty (e.g. when used in a FormGroup). */\n  error?: boolean;\n  /** Error text to show above the component. */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref forwarded to the underlying input element. */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked,\n    defaultChecked,\n    children,\n    inputId: inputIdProp,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    testId,\n    onChange,\n    ref,\n    ...rest\n  } = props;\n\n  const inputId = useIdWithFallback(inputIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [isChecked, setIsChecked] = useState<boolean>(!!(checked ?? defaultChecked));\n  const [prevChecked, setPrevChecked] = useState<boolean | undefined>(checked);\n  if (prevChecked !== checked) {\n    setPrevChecked(checked);\n    if (checked !== undefined && checked !== isChecked) {\n      setIsChecked(checked);\n    }\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setIsChecked(e.target.checked);\n    onChange?.(e);\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <label\n        className={classNames(\n          styles['visual-checkbox'],\n          {\n            [styles['visual-checkbox--checked']]: isChecked,\n            [styles['visual-checkbox--invalid']]: error,\n          },\n          className\n        )}\n        htmlFor={inputId}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Checkbox}\n      >\n        <input\n          {...rest}\n          id={inputId}\n          ref={ref}\n          className={styles['visual-checkbox__input']}\n          type=\"checkbox\"\n          checked={isChecked}\n          aria-invalid={error}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          onChange={handleChange}\n        />\n        <span className={styles['visual-checkbox__pill']}>\n          {isChecked && (\n            <span className={styles['visual-checkbox__icon']} aria-hidden=\"true\">\n              <svg width=\"16\" height=\"12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"m14.754.165 1.08 1.074.166.164-.16.17L6.13 12 .159 5.59 0 5.42l.166-.164 1.08-1.075.165-.164.16.17 4.558 4.896 8.3-8.913.16-.17.165.165Z\" />\n              </svg>\n            </span>\n          )}\n          <span className={styles['visual-checkbox__label']}>{children}</span>\n        </span>\n      </label>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAiCA,IAAM,YAAoC,UAAS;CACjD,MAAM,EACJ,WACA,SACA,gBACA,UACA,SAAS,aACT,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QACA,UACA,KACA,GAAG,SACD;CAEJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAkB,CAAC,EAAE,WAAW,eAAe;CACjF,MAAM,CAAC,aAAa,kBAAkB,SAA8B,OAAO;CAC3E,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,IAAI,YAAY,KAAA,KAAa,YAAY,WACvC,aAAa,OAAO;CAExB;CAEA,MAAM,gBAAgB,MAAiD;EACrE,aAAa,EAAE,OAAO,OAAO;EAC7B,WAAW,CAAC;CACd;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,qBAAC,SAAD;GACE,WAAW,WACT,OAAO,oBACP;KACG,OAAO,8BAA8B;KACrC,OAAO,8BAA8B;GACxC,GACA,SACF;GACA,SAAS;GACT,eAAa;GACb,oBAAkB,YAAY;aAXhC,CAaE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,WAAW,OAAO;IAClB,MAAK;IACL,SAAS;IACT,gBAAc;IACd,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,UAAU;GACX,CAAA,GACD,qBAAC,QAAD;IAAM,WAAW,OAAO;cAAxB,CACG,aACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KAA0B,eAAY;eAC5D,oBAAC,OAAD;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAO,OAAM;gBAC5C,oBAAC,QAAD,EAAM,GAAE,2IAA4I,CAAA;KACjJ,CAAA;IACD,CAAA,GAER,oBAAC,QAAD;KAAM,WAAW,OAAO;KAA4B;IAAe,CAAA,CAC/D;KACD;;CACK,CAAA;AAElB"}

package/lib/CheckboxMarker.js

@@ -0,0 +1,64 @@
+import { FormOnColor, FormSize } from "./constants.js";
+import { getColor } from "./theme/currys/color.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/Checkbox/CheckboxMarker/styles.module.scss";
+//#region src/components/Checkbox/CheckboxMarker/CheckboxMarker.tsx
+/**
+* Does not render an <input>; consumers render this on their end.
+*/
+var CheckboxMarker = (props) => {
+	const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;
+	const onWhite = onColor === FormOnColor.onwhite;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onInvalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	const large = size === FormSize.large;
+	const markerClasses = classNames(styles["checkbox__marker"], {
+		[styles["checkbox__marker--on-white"]]: onWhite,
+		[styles["checkbox__marker--on-grey"]]: onGrey,
+		[styles["checkbox__marker--on-invalid"]]: onInvalid,
+		[styles["checkbox__marker--disabled"]]: disabled,
+		[styles["checkbox__marker__regular--checked"]]: !large && checked,
+		[styles["checkbox__marker__regular--invalid"]]: !large && checked && onInvalid,
+		[styles["checkbox__marker__regular--on-dark"]]: !large && checked && onDark,
+		[styles["checkbox__marker__large--checked"]]: large && checked,
+		[styles["checkbox__marker__large--invalid"]]: large && onInvalid,
+		[styles["checkbox__marker--on-dark"]]: onDark,
+		[styles["checkbox__marker--on-blueberry"]]: onBlueberry,
+		[styles["checkbox__marker--invalid"]]: onInvalid,
+		[styles["checkbox__marker__large--invalid"]]: large && checked && onInvalid,
+		[styles["checkbox__marker__large--disabled"]]: disabled && large && checked,
+		[styles["checkbox__marker__large--checked--invalid"]]: large && checked && onInvalid,
+		[styles["checkbox__marker__large--checked--disabled"]]: disabled && large && checked
+	}, className);
+	const getIconColor = () => {
+		if (disabled) return getColor("neutral", 700);
+		if (large && checked && onInvalid) return getColor("white");
+		if (onDark || large && checked) return getColor("blueberry", 900);
+		return getColor("white");
+	};
+	const iconColor = getIconColor();
+	return /* @__PURE__ */ jsx("span", {
+		className: markerClasses,
+		children: checked && /* @__PURE__ */ jsx("span", {
+			className: styles["checkbox__marker-icon"],
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("svg", {
+				strokeWidth: "2.75",
+				width: "18",
+				height: "16",
+				viewBox: "0 0 16 12",
+				fill: "none",
+				stroke: iconColor,
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M1 6 L6 11 L15 1" })
+			})
+		})
+	});
+};
+//#endregion
+export { CheckboxMarker as t };
+
+//# sourceMappingURL=CheckboxMarker.js.map

package/lib/CheckboxMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxMarker.js","names":[],"sources":["../src/components/Checkbox/CheckboxMarker/CheckboxMarker.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor, FormSize } from '../../../constants';\nimport { getColor } from '../../../theme/currys/color';\n\nimport styles from './styles.module.scss';\n\nexport interface CheckboxMarkerProps {\n  /** Whether the checkbox is checked. Controls the checkmark visibility. */\n  checked?: boolean;\n  /** Disables the visual state of the marker. */\n  disabled?: boolean;\n  /** Activates error styling. */\n  error?: boolean;\n  /** Background context the marker is rendered on. */\n  onColor?: keyof typeof FormOnColor;\n  /** Size variant of the marker. */\n  size?: keyof typeof FormSize;\n  /** Adds custom classes to the marker wrapper. */\n  className?: string;\n}\n\n/**\n * Does not render an <input>; consumers render this on their end.\n */\nexport const CheckboxMarker: React.FC<CheckboxMarkerProps> = props => {\n  const { checked = false, disabled = false, error = false, onColor = FormOnColor.onwhite, size, className } = props;\n\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n\n  const markerClasses = classNames(\n    styles['checkbox__marker'],\n    {\n      [styles['checkbox__marker--on-white']]: onWhite,\n      [styles['checkbox__marker--on-grey']]: onGrey,\n      [styles['checkbox__marker--on-invalid']]: onInvalid,\n      [styles['checkbox__marker--disabled']]: disabled,\n      [styles['checkbox__marker__regular--checked']]: !large && checked,\n      [styles['checkbox__marker__regular--invalid']]: !large && checked && onInvalid,\n      [styles['checkbox__marker__regular--on-dark']]: !large && checked && onDark,\n      [styles['checkbox__marker__large--checked']]: large && checked,\n      [styles['checkbox__marker__large--invalid']]: large && onInvalid,\n      [styles['checkbox__marker--on-dark']]: onDark,\n      [styles['checkbox__marker--on-blueberry']]: onBlueberry,\n      [styles['checkbox__marker--invalid']]: onInvalid,\n      [styles['checkbox__marker__large--invalid']]: large && checked && onInvalid,\n      [styles['checkbox__marker__large--disabled']]: disabled && large && checked,\n      [styles['checkbox__marker__large--checked--invalid']]: large && checked && onInvalid,\n      [styles['checkbox__marker__large--checked--disabled']]: disabled && large && checked,\n    },\n    className\n  );\n\n  const getIconColor = (): string => {\n    if (disabled) {\n      return getColor('neutral', 700);\n    }\n    if (large && checked && onInvalid) {\n      return getColor('white');\n    }\n    if (onDark || (large && checked)) {\n      return getColor('blueberry', 900);\n    }\n    return getColor('white');\n  };\n  const iconColor = getIconColor();\n\n  return (\n    <span className={markerClasses}>\n      {checked && (\n        <span className={styles['checkbox__marker-icon']} aria-hidden=\"true\">\n          <svg\n            strokeWidth=\"2.75\"\n            width=\"18\"\n            height=\"16\"\n            viewBox=\"0 0 16 12\"\n            fill=\"none\"\n            stroke={iconColor}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M1 6 L6 11 L15 1\" />\n          </svg>\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default CheckboxMarker;\n"],"mappings":";;;;;;;;;AAyBA,IAAa,kBAAgD,UAAS;CACpE,MAAM,EAAE,UAAU,OAAO,WAAW,OAAO,QAAQ,OAAO,UAAU,YAAY,SAAS,MAAM,cAAc;CAE7G,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAEhC,MAAM,gBAAgB,WACpB,OAAO,qBACP;GACG,OAAO,gCAAgC;GACvC,OAAO,+BAA+B;GACtC,OAAO,kCAAkC;GACzC,OAAO,gCAAgC;GACvC,OAAO,wCAAwC,CAAC,SAAS;GACzD,OAAO,wCAAwC,CAAC,SAAS,WAAW;GACpE,OAAO,wCAAwC,CAAC,SAAS,WAAW;GACpE,OAAO,sCAAsC,SAAS;GACtD,OAAO,sCAAsC,SAAS;GACtD,OAAO,+BAA+B;GACtC,OAAO,oCAAoC;GAC3C,OAAO,+BAA+B;GACtC,OAAO,sCAAsC,SAAS,WAAW;GACjE,OAAO,uCAAuC,YAAY,SAAS;GACnE,OAAO,+CAA+C,SAAS,WAAW;GAC1E,OAAO,gDAAgD,YAAY,SAAS;CAC/E,GACA,SACF;CAEA,MAAM,qBAA6B;EACjC,IAAI,UACF,OAAO,SAAS,WAAW,GAAG;EAEhC,IAAI,SAAS,WAAW,WACtB,OAAO,SAAS,OAAO;EAEzB,IAAI,UAAW,SAAS,SACtB,OAAO,SAAS,aAAa,GAAG;EAElC,OAAO,SAAS,OAAO;CACzB;CACA,MAAM,YAAY,aAAa;CAE/B,OACE,oBAAC,QAAD;EAAM,WAAW;YACd,WACC,oBAAC,QAAD;GAAM,WAAW,OAAO;GAA0B,eAAY;aAC5D,oBAAC,OAAD;IACE,aAAY;IACZ,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,QAAQ;IACR,OAAM;cAEN,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA;EACD,CAAA;CAEJ,CAAA;AAEV"}

package/lib/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":[],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n  \"removeAriaLabel\": \"Remove\"\n}\n","{\n  \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemChip = {\n    ...defaultResources,\n    ...resources,\n    removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n  };\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          aria-label={mergedResources.removeAriaLabel}\n          className={classNames(styles['chip__close'])}\n          onClick={onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;ACmBb,IAAM,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,MAAM,cAAc;CAC9H,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;EAC3H;CAED,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IACE,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,iBAChD,CAAC;IAED;IACI,CAAA;GACA,CAAA,EACR,mBACC,oBAAC,UAAD;GACE,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS;GACT,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IAAM,WAAW,OAAO;cACtB,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAW,CAAA;IACvC,CAAA;GACA,CAAA,CAEP;;;;;ACxEV,IAAA,eAAe"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n  \"removeAriaLabel\": \"Remove\"\n}\n","{\n  \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemChip = {\n    ...defaultResources,\n    ...resources,\n    removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n  };\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          aria-label={mergedResources.removeAriaLabel}\n          className={classNames(styles['chip__close'])}\n          onClick={onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACiBA,IAAM,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,MAAM,cAAc;CAC9H,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;CAC5H;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,WAAW,OAAO,aAAa;GAC1C,SAAS;GACT,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IACE,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,gBACjD,CAAC;IAEA;GACG,CAAA;EACA,CAAA,GACP,mBACC,oBAAC,UAAD;GACE,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IAAM,WAAW,OAAO;cACtB,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;IAAU,CAAA;GACvC,CAAA;EACA,CAAA,CAEP;;AAET;;;AC1EA,IAAA,eAAe"}