@helsenorge/designsystem-react 12.3.0 → 12.5.0

package/components/LinkList/styles.module.scss

@@ -88,7 +88,11 @@
     min-height: 4rem;
     text-decoration: none;
     color: var(--color-base-text-onlight);
-    cursor: pointer;
+
+    // listeelement settes til div om man er i edit mode, og skal da ikke ha interactive effekter
+    &:not(div) {
+      cursor: pointer;
+    }
 
     &--button {
       width: 100%;
@@ -118,9 +122,16 @@
       }
     }
 
+    &--fill-negative {
+      background-color: var(--color-base-background-white);
+    }
+
     &--fill,
     &--fill-negative {
-      margin-top: spacers.getSpacer(s);
+      // listeelement settes til div om man er i edit mode, og styles da via ListEditMode
+      &:not(div) {
+        margin-top: spacers.getSpacer(s);
+      }
 
       &--blueberry {
         border: 1px solid var(--core-color-blueberry-500);
@@ -140,10 +151,6 @@
       }
     }
 
-    &--fill-negative {
-      background-color: var(--color-base-background-white);
-    }
-
     &--small {
       font-size: font-settings.$font-size-xs;
       line-height: font-settings.$lineheight-size-xs;
@@ -177,41 +184,42 @@
     }
 
     &--white:not(.link-list__anchor--outline) {
-      &:hover {
+      // listeelement settes til div om man er i edit mode, og skal da ikke ha hover/active effekter
+      &:hover:not(div) {
         background-color: var(--core-color-neutral-50);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-neutral-100);
       }
     }
 
     &--blueberry:not(.link-list__anchor--outline) {
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-blueberry-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--color-action-background-ondark-hoverselected);
       }
     }
 
     &--cherry:not(.link-list__anchor--outline) {
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-cherry-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-cherry-200);
       }
     }
 
     &--neutral:not(.link-list__anchor--outline) {
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-neutral-100);
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-neutral-200);
       }
     }
@@ -234,11 +242,11 @@
       &--blueberry {
         border-bottom: 1px solid var(--core-color-blueberry-500);
 
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-blueberry-50);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-blueberry-100);
         }
       }
@@ -246,11 +254,11 @@
       &--cherry {
         border-bottom: 1px solid var(--core-color-cherry-400);
 
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-cherry-50);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-cherry-100);
         }
       }
@@ -258,11 +266,11 @@
       &--neutral {
         border-bottom: 1px solid var(--color-base-border-onlight);
 
-        &:hover {
+        &:hover:not(div) {
           background-color: var(--core-color-neutral-50);
         }
 
-        &:active {
+        &:active:not(div) {
           background-color: var(--core-color-neutral-100);
         }
       }
@@ -271,11 +279,11 @@
     &--new {
       background-color: var(--core-color-blueberry-50) !important;
 
-      &:hover {
+      &:hover:not(div) {
         background-color: var(--core-color-blueberry-100) !important;
       }
 
-      &:active {
+      &:active:not(div) {
         background-color: var(--core-color-blueberry-200) !important;
       }
     }

package/components/List/stories.module.scss

@@ -0,0 +1,7 @@
+.list-anchorlink {
+  li {
+    button {
+      vertical-align: top;
+    }
+  }
+}

package/components/List/stories.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'list-anchorlink': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ListEditMode/ListEditMode.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';
+import { SvgIcon } from '../Icon';
+import { LinkListColors, LinkListVariant } from '../LinkList';
+export interface ListEditModeProps extends ListEditModeItemProps {
+    /** Items in the ListEditMode */
+    children: React.ReactNode;
+    /** Sets visual priority */
+    variant?: LinkListVariant | ExpanderListVariant;
+    /** Sets color */
+    color?: LinkListColors | ExpanderListColors;
+}
+export interface ListEditModeItemProps {
+    /** Enables ListEditMode */
+    editMode?: boolean;
+    /** Callback for delete button  */
+    onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const listEditModeWrapperClassnames: string;
+export declare const IconButton: ({ icon, color, onClick, }: {
+    icon: SvgIcon;
+    color: "red" | "blue";
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}) => React.JSX.Element;
+export declare const ListEditModeItem: {
+    (props: ListEditModeProps): React.JSX.Element;
+    displayName: string;
+};
+export default ListEditModeItem;

package/components/ListEditMode/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ListEditModeItem } from './ListEditMode';
+export * from './ListEditMode';
+export default ListEditModeItem;

package/components/ListEditMode/index.js

@@ -0,0 +1,9 @@
+import { L as ListEditModeItem } from "../../ListEditMode.js";
+import { I, l } from "../../ListEditMode.js";
+export {
+  I as IconButton,
+  ListEditModeItem,
+  ListEditModeItem as default,
+  l as listEditModeWrapperClassnames
+};
+//# sourceMappingURL=index.js.map

package/components/ListEditMode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/ListEditMode/styles.module.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
+
+.list-edit-mode {
+  border: none !important;
+
+  &__icon-button {
+    background: none;
+    border: none;
+    height: 3rem;
+    width: 3rem;
+    background-color: transparent;
+    outline: none;
+    padding: 0;
+    margin: 4px;
+
+    &:focus-visible {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-flow: row;
+    width: 100%;
+    align-items: center;
+
+    li {
+      width: 100%;
+    }
+
+    &--neutral,
+    &--white {
+      border-bottom: 1px solid var(--color-base-border-onlight);
+
+      &:first-of-type {
+        border-top: 1px solid var(--color-base-border-onlight);
+      }
+    }
+
+    &--cherry {
+      border-bottom: 1px solid var(--core-color-cherry-400);
+
+      &:first-of-type {
+        border-top: 1px solid var(--core-color-cherry-400);
+      }
+    }
+
+    &--blueberry {
+      border-bottom: 1px solid var(--core-color-blueberry-500);
+
+      &:first-of-type {
+        border-top: 1px solid var(--core-color-blueberry-500);
+      }
+    }
+
+    &--line {
+      li {
+        border: none !important;
+      }
+    }
+
+    &--fill {
+      li {
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+    }
+
+    &__link {
+      margin: 0;
+    }
+  }
+}

package/components/ListEditMode/styles.module.scss.d.ts

@@ -0,0 +1,18 @@
+export type Styles = {
+  'list-edit-mode': string;
+  'list-edit-mode__icon-button': string;
+  'list-edit-mode__item': string;
+  'list-edit-mode__item__link': string;
+  'list-edit-mode__item--blueberry': string;
+  'list-edit-mode__item--cherry': string;
+  'list-edit-mode__item--fill': string;
+  'list-edit-mode__item--line': string;
+  'list-edit-mode__item--neutral': string;
+  'list-edit-mode__item--white': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Panel/styles.module.scss

@@ -7,10 +7,12 @@
 
 .panel {
   $panel: &;
+  $status-width: 6px;
 
   display: flex;
   flex-flow: column;
   padding: spacers.getSpacer(s);
+  padding-left: calc(spacers.getSpacer(s) - $status-width);
 
   & > *:not(:last-child) {
     // because of a problem with gap this margin gives space between elements
@@ -19,6 +21,7 @@
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(m);
+    padding-left: calc(spacers.getSpacer(m) - $status-width);
   }
 
   &--icon {
@@ -155,7 +158,7 @@
   }
 
   &--status {
-    border-left: 6px;
+    border-left: $status-width;
     border-left-style: solid;
     border-left-color: transparent;
   }
@@ -166,7 +169,7 @@
   }
 
   &--draft {
-    border-left: dotted 6px var(--color-notification-status-draft);
+    border-left: dotted $status-width var(--color-notification-status-draft);
   }
 
   &--error {

package/components/PopMenu/index.js

@@ -102,7 +102,7 @@ const PopMenu = (props) => {
       type: "button",
       children: [
         labelText && labelTextPosition == "left" && /* @__PURE__ */ jsx("span", { children: labelText }),
-        /* @__PURE__ */ jsx("div", { ref: iconRef, children: isOpen ? closeIcon : openIcon }),
+        /* @__PURE__ */ jsx("div", { className: styles["pop-menu-button__icon-wrapper"], ref: iconRef, children: isOpen ? closeIcon : openIcon }),
         labelText && labelTextPosition == "right" && /* @__PURE__ */ jsx("span", { children: labelText })
       ]
     }

package/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    if (e) e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    if (e) e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {\n        <div className={styles['pop-menu-button__icon-wrapper']} ref={iconRef}>\n          {isOpen ? closeIcon : openIcon}\n        </div>\n      }\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":"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"}

package/components/PopMenu/styles.module.scss

@@ -18,6 +18,10 @@
     box-shadow: none;
     outline: none;
   }
+
+  &__icon-wrapper {
+    display: flex;
+  }
 }
 
 html :focus > .pop-menu-button {

package/components/PopMenu/styles.module.scss.d.ts

@@ -1,6 +1,7 @@
 export type Styles = {
   'pop-menu__pop-over': string;
   'pop-menu-button': string;
+  'pop-menu-button__icon-wrapper': string;
   'pop-menu-button--on-blueberry': string;
   'pop-menu-button--on-gray': string;
   'pop-menu-button--on-white': string;

package/components/RadioButton/styles.module.scss

@@ -11,11 +11,30 @@ $padding-clickable-area-left: 8px;
 
 @mixin dashed-border() {
   box-shadow: none;
+  position: relative;
 
-  $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+  &::after {
+    position: absolute;
+    content: '';
 
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23" + $encoded-color + "' stroke-width='4' stroke-dasharray='0.5, 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-  border-radius: 100px;
+    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+
+    // Variabler for å lettere styre dashen i background-imaget under
+    $stroke: 4;
+    $dash: 0.2;
+    $gap: 7;
+    $scale: 1;
+    $stroke-scaled: $stroke * $scale;
+    $dash-scaled: $dash * $scale;
+    $gap-scaled: $gap * $scale;
+
+    border-radius: 100px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    width: 28px;
+    height: 28px;
+    inset: -2px;
+  }
 }
 
 .radio-button-errors {
@@ -26,7 +45,6 @@ $padding-clickable-area-left: 8px;
 }
 
 .radio-button-wrapper {
-  cursor: pointer;
   margin-left: -$padding-clickable-area-left;
 
   &__large {

package/components/StatusDot/styles.module.scss

@@ -10,6 +10,7 @@
 $status-dot-size: 1rem;
 
 .statusdot {
+  min-height: 1.75rem;
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -29,6 +30,7 @@ $status-dot-size: 1rem;
     &--active {
       fill: var(--color-notification-graphics-success);
     }
+
     &--success#{&}--on-dark,
     &--active#{&}--on-dark {
       fill: var(--core-color-kiwi-200);
@@ -41,6 +43,7 @@ $status-dot-size: 1rem;
     &--pending {
       fill: var(--color-notification-graphics-warning);
     }
+
     &--inprocess#{&}--on-dark,
     &--exception#{&}--on-dark,
     &--unknown#{&}--on-dark,
@@ -54,6 +57,7 @@ $status-dot-size: 1rem;
     &--inactive {
       fill: var(--color-notification-graphics-error);
     }
+
     &--cancelled#{&}--on-dark,
     &--alert#{&}--on-dark,
     &--inactive#{&}--on-dark {
@@ -63,6 +67,7 @@ $status-dot-size: 1rem;
     &--info {
       fill: var(--core-color-blueberry-500);
     }
+
     &--info#{&}--on-dark {
       fill: var(--core-color-blueberry-200);
     }
@@ -70,6 +75,7 @@ $status-dot-size: 1rem;
     &--transparent {
       fill: var(--color-disabled-border);
     }
+
     &--transparent#{&}--on-dark,
     &--group#{&}--on-dark,
     &--recurring#{&}--on-dark,

package/components/Tabs/Tabs.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { default as Tab } from './Tab';
+import { HNDesignsystemTabs } from '../../resources/Resources';
 import { PaletteNames } from '../../theme/palette';
 export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
@@ -20,14 +21,16 @@ export interface TabsProps {
     sticky?: boolean;
     /** Sets the data-testid attribute. */
     testId?: string;
-    /** Sets aria label on the "scroll to the right" button in TabList */
+    /** @deprecated Sets aria label on the "scroll to the right" button in TabList */
     ariaLabelRightButton?: string;
-    /** Sets aria label on the "scroll to the left" button in TabList */
+    /** @deprecated Sets aria label on the "scroll to the left" button in TabList */
     ariaLabelLeftButton?: string;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemTabs>;
     /** Overrides the default z-index of the tabs header */
     zIndex?: number;
 }
-declare const TabsRoot: React.FC<TabsProps>;
+export declare const TabsRoot: React.FC<TabsProps>;
 type TabsComponent = typeof TabsRoot & {
     Tab: typeof Tab;
 };

package/components/Tabs/index.js

@@ -1,10 +1,33 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useState, useRef } from "react";
 import classNames from "classnames";
+import { LanguageLocales } from "../../constants.js";
 import { T as TabList, a as Tab } from "../../TabList.js";
 import { T as TabPanel } from "../../TabPanel.js";
 import designsystemlayout from "../../scss/layout.module.scss";
+import { useLanguage } from "../../utils/language.js";
 import styles from "./styles.module.scss";
+const ariaLabelRightButton$1 = "Scroll right";
+const ariaLabelLeftButton$1 = "Scroll left";
+const enGB = {
+  ariaLabelRightButton: ariaLabelRightButton$1,
+  ariaLabelLeftButton: ariaLabelLeftButton$1
+};
+const ariaLabelRightButton = "Scroll til høyre";
+const ariaLabelLeftButton = "Scroll til venstre";
+const nbNO = {
+  ariaLabelRightButton,
+  ariaLabelLeftButton
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 const TabsRoot = ({
   activeTab,
   children,
@@ -14,8 +37,9 @@ const TabsRoot = ({
   onColor = "onwhite",
   sticky = true,
   testId,
-  ariaLabelRightButton,
-  ariaLabelLeftButton,
+  ariaLabelRightButton: ariaLabelRightButton2,
+  ariaLabelLeftButton: ariaLabelLeftButton2,
+  resources,
   zIndex
 }) => {
   const isControlled = activeTab !== void 0;
@@ -23,6 +47,14 @@ const TabsRoot = ({
   const tabsRef = useRef(null);
   const tabPanelRef = useRef(null);
   const tabListRef = useRef(null);
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    ariaLabelRightButton: ariaLabelRightButton2 || (resources == null ? void 0 : resources.ariaLabelRightButton) || defaultResources.ariaLabelRightButton,
+    ariaLabelLeftButton: ariaLabelLeftButton2 || (resources == null ? void 0 : resources.ariaLabelLeftButton) || defaultResources.ariaLabelLeftButton
+  };
   let onColorUsed = "onwhite";
   if (color === "white") {
     onColorUsed = onColor;
@@ -52,8 +84,8 @@ const TabsRoot = ({
               selectedTab: activeTabIndex,
               color,
               onColor: onColorUsed,
-              ariaLabelLeftButton,
-              ariaLabelRightButton,
+              ariaLabelLeftButton: mergedResources.ariaLabelLeftButton,
+              ariaLabelRightButton: mergedResources.ariaLabelRightButton,
               children
             }
           ),
@@ -65,10 +97,12 @@ const TabsRoot = ({
   ] });
 };
 const Tabs = TabsRoot;
+TabsRoot.displayName = "Tabs";
 Tabs.displayName = "Tabs";
 Tabs.Tab = Tab;
 Tabs.Tab.displayName = "Tabs.Tab";
 export {
+  TabsRoot,
   Tabs as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACrB,kBAAc;AAAA,EAChB;AAEA,QAAM,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,iBAAiB,eAAe,YAAY;AAElD,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1F,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAA,EAAS,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAAA,eAAM,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAAA,CAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** @deprecated Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** @deprecated Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelRightButton: ariaLabelRightButton || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,\n    ariaLabelLeftButton: ariaLabelLeftButton || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["ariaLabelRightButton","ariaLabelLeftButton","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,eAAe,CAAC,aAAkD;AAC7E,UAAQ,UAAA;AAAA,IACN,KAAK,gBAAgB;AACnB,aAAO;AAAA,IACT,KAAK,gBAAgB;AAAA,IACrB;AACE,aAAO;AAAA,EAAA;AAEb;ACiCO,MAAM,WAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA,sBAAAA;AAAA,EACA,qBAAAC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,EAAE,SAAA,IAAa,YAA6B,gBAAgB,SAAS;AAC3E,QAAM,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAAsC;AAAA,IAC1C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,sBAAsBD,0BAAwB,uCAAW,yBAAwB,iBAAiB;AAAA,IAClG,qBAAqBC,yBAAuB,uCAAW,wBAAuB,iBAAiB;AAAA,EAAA;AAGjG,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACrB,kBAAc;AAAA,EAChB;AAEA,QAAM,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,iBAAiB,eAAe,YAAY;AAElD,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT,qBAAqB,gBAAgB;AAAA,cACrC,sBAAsB,gBAAgB;AAAA,cAErC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1F,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAA,EAAS,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAAC,eAAM,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAAA,CAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Tabs/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemTabs } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemTabs;