@helsenorge/designsystem-react 3.0.0 → 3.0.1

package/components/FormExample/styles.module.scss

@@ -1,12 +1,12 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 .date-time {
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
 
-  @media (min-width: map-get($grid-breakpoints, sm)) {
+  @media (min-width: map.get($grid-breakpoints, sm)) {
     flex-direction: row;
     align-items: flex-end;
   }
@@ -20,7 +20,7 @@
     align-items: flex-end;
     padding-top: getSpacer(m);
 
-    @media (min-width: map-get($grid-breakpoints, sm)) {
+    @media (min-width: map.get($grid-breakpoints, sm)) {
       padding-top: 0;
     }
   }

package/components/FormGroup/styles.module.scss

@@ -1,7 +1,7 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .form-group-wrapper {
   &__title {
@@ -19,6 +19,7 @@
   border: none;
   padding: 0;
   margin: 0;
+
   > div {
     padding-bottom: 0;
   }

package/components/FormLayout/styles.module.scss

@@ -1,5 +1,5 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
 
 .form-layout-container {
   // Settes med harde verdier fordi calc() lenger nede ikke støtter getSpacer()
@@ -22,12 +22,15 @@
   &--two {
     flex-basis: calc(50% - var(--column-gap));
   }
+
   &--three {
     flex-basis: calc(33% - var(--column-gap));
   }
+
   &--four {
     flex-basis: calc(25% - var(--column-gap));
   }
+
   &--five {
     flex-basis: calc(20% - var(--column-gap));
   }

package/components/HelpBubble/HelpBubble.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { PopOverVariant } from '../PopOver';
+import { PopOverProps, PopOverVariant } from '../PopOver';
 export declare const HelpBubbleVariant: typeof PopOverVariant;
 type HelpBubbleRole = 'tooltip';
-export interface HelpBubbleProps {
+export interface HelpBubbleProps extends Pick<PopOverProps, 'children' | 'variant' | 'controllerRef' | 'role'> {
     /** Id of the HelpBubble */
     helpBubbleId?: string;
     /** Content shown inside HelpBubble. Note that if role="tooltip", you must not include interactive/focusable elements. */

package/components/HelpBubble/HelpBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIrD,eAAO,MAAM,iBAAiB,uBAAiB,CAAC;AAEhD,KAAK,cAAc,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yHAAyH;IACzH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,wGAuEd,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAInE,eAAO,MAAM,iBAAiB,uBAAiB,CAAC;AAEhD,KAAK,cAAc,GAAG,SAAS,CAAC;AAEhC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,eAAe,GAAG,MAAM,CAAC;IAC5G,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yHAAyH;IACzH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,wGA6Ed,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/components/HelpBubble/index.js

@@ -1,2 +1,2 @@
-import{H as o}from"../../HelpBubble.js";import{a as G}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{G as HelpBubbleVariant,o as default};
+import{H as o}from"../../HelpBubble.js";import{a as G}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{G as HelpBubbleVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubble/styles.module.scss

@@ -1,22 +1,21 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../AnchorLink/styles.module.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../AnchorLink/styles.module';
 
 .helpbubble {
   $bubble: &;
+
   display: flex;
   align-items: flex-start !important;
   text-align: start;
   font-family: inherit;
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-  &--visible {
-    visibility: visible;
-  }
 
-  @media (min-width: map-get($grid-breakpoints, lg)) {
+  @media (min-width: map.get($grid-breakpoints, lg)) {
     font-size: $font-size-md;
     line-height: $lineheight-size-md;
   }
@@ -41,11 +40,12 @@
 
   &__link {
     all: unset;
+
     @include anchorlink;
   }
 
   &__close {
     order: 2;
-    padding: getSpacer(2xs) getSpacer(2xs) 0px 0px;
+    padding: getSpacer(2xs) getSpacer(2xs) 0 0;
   }
 }

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

@@ -8,7 +8,6 @@ export type Styles = {
   'helpbubble__content--close': string;
   helpbubble__link: string;
   helpbubble__link__icon: string;
-  'helpbubble--visible': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/HelpBubbleExample/index.js

@@ -1,2 +1,2 @@
-import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},w=a;export{w as default};
+import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},w=a;export{w as default};
 //# sourceMappingURL=index.js.map

package/components/HighlightBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\nconst ContentWrapper: React.FC = ({ children }) => (\n  <div className={styles['highlightbox__content-wrapper']}>\n    <div className={classNames(styles.highlightbox__row)}>{children}</div>\n  </div>\n);\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const { children, color = 'white', size = HighlightBoxSize.medium, testId, svgIcon, htmlMarkup = 'div', className } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n          </div>\n          <div className={styles.highlightbox__content}>{children}</div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={styles['highlightbox__content-wrapper']} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","HighlightBox","props","color","testId","svgIcon","htmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"2XAaY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAiCZ,MAAMC,EAAkC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,SAAAC,CAC1D,IAAAC,EAAA,cAAC,MAAI,CAAA,UAAAH,EAAsB,cAAa,sBAAA,kBACrC,MAAI,CAAA,UAAWI,EAAO,iBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,kBAAmBH,IAAS,UAA2BG,EAAO,2BAA2B,CAAC,GACzHF,CACH,CACF,CACF,EAGII,EAA2B,CAAC,CAAE,SAAAJ,KAClCC,EAAA,cAAC,OAAI,UAAWC,EAAO,+BAA+B,CACpD,EAAAD,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,iBAAiB,CAAA,EAAIF,CAAS,CAClE,EAGIK,EAAqDC,GAAA,CACnD,KAAA,CAAE,SAAAN,EAAU,MAAAO,EAAQ,QAAS,KAAAR,EAAO,SAAyB,OAAAS,EAAQ,QAAAC,EAAS,WAAAC,EAAa,MAAO,UAAAZ,CAAA,EAAcQ,EAChHK,EAAaC,IAEbC,EAAqBV,EACzBD,EAAO,aACPA,EAAO,iBAAiBK,GAAO,EAC/BL,EAAO,iBAAiBH,GAAM,EAC9BU,GAAWP,EAAO,wBAAwB,EAC1C,CAAE,UAAWH,IAAS,UAAYA,IAAS,OAAQ,EACnDD,CAAA,EAGIgB,EAAgB,IAAM,CAC1B,GAAIL,EAAS,CACL,MAAAM,EAAWhB,IAAS,SAA0BY,GAAcA,GAAcK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAC3H,uCAEKhB,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,kBAAA,kBACpBgB,EAAK,CAAA,QAAAT,EAAkB,KAAMM,CAAU,CAAA,CAC1C,EACCd,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,qBAAA,EAAwBF,CAAS,CAC1D,CAEJ,CAEO,OAAAA,CAAA,EAGHmB,EAAYT,EAElB,OAAIX,IAAS,yBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,GACtCE,EAAA,cAACkB,GAAU,UAAWjB,EAAO,+BAA+B,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,YAC/G,EAAAN,EACH,CAAA,CACF,EAIAf,IAAS,SAA0BU,kBAElCZ,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,oCAAoC,CAAC,EAC5F,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,2BAA2B,CAAC,EACnF,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERoB,EAAU,CAAA,UAAWN,EAAoB,cAAaL,CAAA,EACpDM,GACH,EAIG,IACT,EAEAO,EAAehB"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral' | 'kiwi' | 'plum'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\nconst ContentWrapper: React.FC = ({ children }) => (\n  <div className={styles['highlightbox__content-wrapper']}>\n    <div className={classNames(styles.highlightbox__row)}>{children}</div>\n  </div>\n);\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const { children, color = 'white', size = HighlightBoxSize.medium, testId, svgIcon, htmlMarkup = 'div', className } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n          </div>\n          <div className={styles.highlightbox__content}>{children}</div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={styles['highlightbox__content-wrapper']} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","HighlightBox","props","color","testId","svgIcon","htmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"2XAaY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAiCZ,MAAMC,EAAkC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,SAAAC,CAC1D,IAAAC,EAAA,cAAC,MAAI,CAAA,UAAAH,EAAsB,cAAa,sBAAA,kBACrC,MAAI,CAAA,UAAWI,EAAO,iBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,kBAAmBH,IAAS,UAA2BG,EAAO,2BAA2B,CAAC,GACzHF,CACH,CACF,CACF,EAGII,EAA2B,CAAC,CAAE,SAAAJ,KAClCC,EAAA,cAAC,OAAI,UAAWC,EAAO,+BAA+B,CACpD,EAAAD,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,iBAAiB,CAAA,EAAIF,CAAS,CAClE,EAGIK,EAAqDC,GAAA,CACnD,KAAA,CAAE,SAAAN,EAAU,MAAAO,EAAQ,QAAS,KAAAR,EAAO,SAAyB,OAAAS,EAAQ,QAAAC,EAAS,WAAAC,EAAa,MAAO,UAAAZ,CAAA,EAAcQ,EAChHK,EAAaC,IAEbC,EAAqBV,EACzBD,EAAO,aACPA,EAAO,iBAAiBK,GAAO,EAC/BL,EAAO,iBAAiBH,GAAM,EAC9BU,GAAWP,EAAO,wBAAwB,EAC1C,CAAE,UAAWH,IAAS,UAAYA,IAAS,OAAQ,EACnDD,CAAA,EAGIgB,EAAgB,IAAM,CAC1B,GAAIL,EAAS,CACL,MAAAM,EAAWhB,IAAS,SAA0BY,GAAcA,GAAcK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAC3H,uCAEKhB,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,kBAAA,kBACpBgB,EAAK,CAAA,QAAAT,EAAkB,KAAMM,CAAU,CAAA,CAC1C,EACCd,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,qBAAA,EAAwBF,CAAS,CAC1D,EAIG,OAAAA,CAAA,EAGHmB,EAAYT,EAElB,OAAIX,IAAS,yBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,GACtCE,EAAA,cAACkB,GAAU,UAAWjB,EAAO,+BAA+B,EAAG,cAAaM,EAAQ,mBAAkBY,EAAY,YAC/G,EAAAN,EACH,CAAA,CACF,EAIAf,IAAS,SAA0BU,kBAElCZ,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,oCAAoC,CAAC,EAC5F,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERF,EAAQ,CAAA,UAAWgB,EAAoB,KAAAd,CAAA,kBACrCK,EACC,KAAAH,EAAA,cAACkB,EAAA,CACC,UAAWhB,EAAWD,EAAO,kBAAmBA,EAAO,2BAA2B,CAAC,EACnF,cAAaM,EACb,mBAAkBY,EAAY,YAAA,EAE7BN,EAAc,CAEnB,CAAA,CACF,EAIAf,IAAS,wBAERoB,EAAU,CAAA,UAAWN,EAAoB,cAAaL,CAAA,EACpDM,GACH,EAIG,IACT,EAEAO,EAAehB"}

package/components/HighlightBox/styles.module.scss

@@ -1,13 +1,14 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_grid.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/grid';
 
 @mixin content-wrapper-with-icon-flex {
   display: flex;
   flex-direction: column;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     flex-direction: row;
   }
 }
@@ -15,7 +16,7 @@
 @mixin content-wrapper-with-icon-padding {
   padding-top: getSpacer(s);
 
-  @media (min-width: map-get($grid-breakpoints, xl)) {
+  @media (min-width: map.get($grid-breakpoints, xl)) {
     padding-top: getSpacer(m);
   }
 }
@@ -31,7 +32,7 @@
     @each $color in $colors {
       &#{$box}--#{$color} {
         #{$box}__content-wrapper {
-          background-color: map-get($palette-map, #{$color}50);
+          background-color: map.get($palette-map, #{$color}50);
         }
       }
     }
@@ -50,7 +51,7 @@
     @each $color in $colors {
       &#{$box}--#{$color} {
         @include media-breakpoint-down(xs) {
-          background-color: map-get($palette-map, #{$color}50);
+          background-color: map.get($palette-map, #{$color}50);
         }
       }
     }
@@ -65,10 +66,12 @@
   &--medium {
     #{$box}__content-wrapper {
       padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
       }
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         padding: getSpacer(l);
       }
     }
@@ -78,7 +81,8 @@
     #{$box}__content-wrapper {
       padding-top: getSpacer(m);
       padding-bottom: getSpacer(l);
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-top: getSpacer(l);
         padding-bottom: getSpacer(xl);
       }
@@ -89,13 +93,13 @@
   &--fluid {
     padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
 
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
     }
 
     @each $color in $colors {
       &#{$box}--#{$color} {
-        background-color: map-get($palette-map, #{$color}50);
+        background-color: map.get($palette-map, #{$color}50);
       }
     }
     &#{$box}--white {
@@ -108,7 +112,7 @@
       @include content-wrapper-with-icon-flex;
       @include content-wrapper-with-icon-padding;
 
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: getSpacer(m);
       }
     }
@@ -120,13 +124,16 @@
     }
     #{$box}__content-wrapper {
       @include content-wrapper-with-icon-padding;
-      @media (min-width: map-get($grid-breakpoints, sm)) {
+
+      @media (min-width: map.get($grid-breakpoints, sm)) {
         padding-left: getSpacer(s);
       }
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding-left: getSpacer(m);
       }
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: 0;
         padding-top: getSpacer(l);
         padding-bottom: getSpacer(xl);
@@ -134,9 +141,10 @@
     }
 
     #{$box}__icon {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        @include make-col-ready();
+      @media (min-width: map.get($grid-breakpoints, lg)) {
+        @include make-col-ready;
         @include make-col(2);
+
         display: flex;
         justify-content: flex-end;
         margin-right: 0;
@@ -145,15 +153,15 @@
     }
 
     #{$box}__content {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        @include make-col-ready();
+      @media (min-width: map.get($grid-breakpoints, lg)) {
+        @include make-col-ready;
         @include make-col(8);
       }
     }
   }
 
   &__content {
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       margin-top: 0.625rem;
     }
   }
@@ -168,37 +176,38 @@
     margin-right: getSpacer(s);
     margin-bottom: getSpacer(2xs);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       margin-bottom: 0;
     }
   }
 
   &__row {
-    @include make-row();
+    @include make-row;
   }
 
   &__col {
-    @include make-col-ready();
+    @include make-col-ready;
     @include make-col(12);
 
     &--offset {
-      @media (min-width: map-get($grid-breakpoints, sm)) {
+      @media (min-width: map.get($grid-breakpoints, sm)) {
         @include make-col(10);
         @include make-col-offset(1);
       }
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         @include make-col(8);
         @include make-col-offset(2);
       }
     }
 
     &--large-with-icon {
-      @media (min-width: map-get($grid-breakpoints, sm)) {
+      @media (min-width: map.get($grid-breakpoints, sm)) {
         @include make-col(11);
         @include make-col-offset(0);
       }
 
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         @include make-col(12);
       }
     }

package/components/HorizontalScroll/HorizontalScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAYtC,UAAU,qBAAqB;IAC7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkC5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAYtC,UAAU,qBAAqB;IAC7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoC5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/HorizontalScroll/styles.module.scss

@@ -1,21 +1,25 @@
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
 
-$gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
+$gradient: rgb(0 0 0 / 27%), rgb(0 0 0 / 27%) 18%, transparent;
 
 .horizontalscroll {
   position: relative;
+
   &__viewport {
     display: flex;
+
     &:focus-visible {
       outline: getSpacer(4xs) solid $black;
       outline-offset: -1px;
     }
+
     &--overflow {
       overflow-x: auto;
       overflow-y: hidden;
     }
   }
+
   &__indicator {
     position: absolute;
     width: 23px;
@@ -23,14 +27,17 @@ $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
     height: 100%;
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
+
     &--left {
       left: 0;
       background: linear-gradient(to right, $gradient);
     }
+
     &--right {
       right: 0;
       background: linear-gradient(to left, $gradient);
     }
+
     &--visible {
       opacity: 1;
     }

package/components/Icons/SortUp.js

@@ -1,2 +1,2 @@
-import e from"react";import{getIcon as c}from"./Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const f=({size:l,isHovered:t})=>{const n=e.createElement("path",{d:"m24 10.14 12.37 12.45L34.95 24 25 13.985V35h-2V13.985L13.05 24l-1.42-1.41L24 10.14Z",fillRule:"evenodd"}),m=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m24 10.14 12.37 12.45L34.95 24 25 13.985V14l-1-1-1 1v-.015L13.05 24l-1.42-1.41L24 10.14Z"}),e.createElement("path",{fillRule:"evenodd",d:"m24 20.14 7.37 7.45L29.95 29 25 23.985V24l-1-1-1 1v-.015L18.05 29l-1.42-1.41L24 20.14Z"})),a=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z"}),e.createElement("path",{d:"M18 9h2v18h-2z"})),r=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z"}),e.createElement("path",{fillRule:"evenodd",d:"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z"})),o=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m17.79 13.842 1.42-1.409L12 5.159l-7.21 7.274 1.42 1.409L12 7.999l5.79 5.843Z"}),";",e.createElement("path",{d:"M11 7h2v13h-2V7Z"}),";"),d=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z"}),e.createElement("path",{fillRule:"evenodd",d:"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z"}));return c({size:l,isHovered:t,normal:n,normalHover:m,xSmall:a,xSmallHover:r,xxSmall:o,xxSmallHover:d})};export{f as default};
+import e from"react";import{getIcon as c}from"./Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const f=({size:l,isHovered:t})=>{const n=e.createElement("path",{d:"m24 10.14 12.37 12.45L34.95 24 25 13.985V35h-2V13.985L13.05 24l-1.42-1.41L24 10.14Z",fillRule:"evenodd"}),m=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m24 10.14 12.37 12.45L34.95 24 25 13.985V14l-1-1-1 1v-.015L13.05 24l-1.42-1.41L24 10.14Z"}),e.createElement("path",{fillRule:"evenodd",d:"m24 20.14 7.37 7.45L29.95 29 25 23.985V24l-1-1-1 1v-.015L18.05 29l-1.42-1.41L24 20.14Z"})),a=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z"}),e.createElement("path",{d:"M18 9h2v18h-2z"})),r=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z"}),e.createElement("path",{fillRule:"evenodd",d:"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z"})),o=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m17.79 13.842 1.42-1.409L12 5.159l-7.21 7.274 1.42 1.409L12 7.999l5.79 5.843Z"}),e.createElement("path",{d:"M11 7h2v13h-2V7Z"})),d=e.createElement(e.Fragment,null,e.createElement("path",{fillRule:"evenodd",d:"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z"}),e.createElement("path",{fillRule:"evenodd",d:"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z"}));return c({size:l,isHovered:t,normal:n,normalHover:m,xSmall:a,xSmallHover:r,xxSmall:o,xxSmallHover:d})};export{f as default};
 //# sourceMappingURL=SortUp.js.map

package/components/Icons/SortUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortUp.js","sources":["../../../src/components/Icons/SortUp.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from './Icon';\n\nconst SortUp: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): JSX.Element => {\n  const normal = <path d=\"m24 10.14 12.37 12.45L34.95 24 25 13.985V35h-2V13.985L13.05 24l-1.42-1.41L24 10.14Z\" fillRule={'evenodd'} />;\n\n  const normalHover = (\n    <>\n      <path fillRule={'evenodd'} d=\"m24 10.14 12.37 12.45L34.95 24 25 13.985V14l-1-1-1 1v-.015L13.05 24l-1.42-1.41L24 10.14Z\" />\n      <path fillRule={'evenodd'} d=\"m24 20.14 7.37 7.45L29.95 29 25 23.985V24l-1-1-1 1v-.015L18.05 29l-1.42-1.41L24 20.14Z\" />\n    </>\n  );\n\n  const xSmall = (\n    <>\n      <path fillRule={'evenodd'} d=\"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z\" />\n      <path d=\"M18 9h2v18h-2z\" />\n    </>\n  );\n\n  const xSmallHover = (\n    <>\n      <path fillRule={'evenodd'} d=\"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z\" />\n      <path fillRule={'evenodd'} d=\"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z\" />\n    </>\n  );\n\n  const xxSmall = (\n    <>\n      <path fillRule={'evenodd'} d=\"m17.79 13.842 1.42-1.409L12 5.159l-7.21 7.274 1.42 1.409L12 7.999l5.79 5.843Z\" />;\n      <path d=\"M11 7h2v13h-2V7Z\" />;\n    </>\n  );\n\n  const xxSmallHover = (\n    <>\n      <path fillRule={'evenodd'} d=\"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z\" />\n      <path fillRule={'evenodd'} d=\"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z\" />\n    </>\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default SortUp;\n"],"names":["SortUp","size","isHovered","normal","React","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","getIcon"],"mappings":"+LAIA,MAAMA,EAAiC,CAAC,CAAE,KAAAC,EAAM,UAAAC,KAA2C,CACzF,MAAMC,EAAUC,EAAA,cAAA,OAAA,CAAK,EAAE,sFAAsF,SAAU,SAAW,CAAA,EAE5HC,EACJD,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,0FAA2F,CAAA,kBACvH,OAAK,CAAA,SAAU,UAAW,EAAE,yFAAyF,CACxH,EAGIE,EACJF,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,gFAAgF,EAC7GA,EAAA,cAAC,OAAK,CAAA,EAAE,gBAAiB,CAAA,CAC3B,EAGIG,EACJH,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,+EAAgF,CAAA,kBAC5G,OAAK,CAAA,SAAU,UAAW,EAAE,kFAAkF,CACjH,EAGII,EACJJ,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,+EAAgF,CAAA,EAAE,IAC9GA,EAAA,cAAA,OAAA,CAAK,EAAE,mBAAmB,EAAE,GAC/B,EAGIK,EACJL,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,+EAAgF,CAAA,kBAC5G,OAAK,CAAA,SAAU,UAAW,EAAE,kFAAkF,CACjH,EAGK,OAAAM,EAAQ,CAAE,KAAAT,EAAM,UAAAC,EAAW,OAAAC,EAAQ,YAAAE,EAAa,OAAAC,EAAQ,YAAAC,EAAa,QAAAC,EAAS,aAAAC,CAAc,CAAA,CACrG"}
+{"version":3,"file":"SortUp.js","sources":["../../../src/components/Icons/SortUp.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from './Icon';\n\nconst SortUp: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): JSX.Element => {\n  const normal = <path d=\"m24 10.14 12.37 12.45L34.95 24 25 13.985V35h-2V13.985L13.05 24l-1.42-1.41L24 10.14Z\" fillRule={'evenodd'} />;\n\n  const normalHover = (\n    <>\n      <path fillRule={'evenodd'} d=\"m24 10.14 12.37 12.45L34.95 24 25 13.985V14l-1-1-1 1v-.015L13.05 24l-1.42-1.41L24 10.14Z\" />\n      <path fillRule={'evenodd'} d=\"m24 20.14 7.37 7.45L29.95 29 25 23.985V24l-1-1-1 1v-.015L18.05 29l-1.42-1.41L24 20.14Z\" />\n    </>\n  );\n\n  const xSmall = (\n    <>\n      <path fillRule={'evenodd'} d=\"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z\" />\n      <path d=\"M18 9h2v18h-2z\" />\n    </>\n  );\n\n  const xSmallHover = (\n    <>\n      <path fillRule={'evenodd'} d=\"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z\" />\n      <path fillRule={'evenodd'} d=\"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z\" />\n    </>\n  );\n\n  const xxSmall = (\n    <>\n      <path fillRule={'evenodd'} d=\"m17.79 13.842 1.42-1.409L12 5.159l-7.21 7.274 1.42 1.409L12 7.999l5.79 5.843Z\" />\n      <path d=\"M11 7h2v13h-2V7Z\" />\n    </>\n  );\n\n  const xxSmallHover = (\n    <>\n      <path fillRule={'evenodd'} d=\"m27.79 18.842 1.42-1.409L19 7.159 8.79 17.433l1.42 1.409L19 9.999l8.79 8.843Z\" />\n      <path fillRule={'evenodd'} d=\"m23.79 22.842 1.42-1.409L19 15.159l-6.21 6.274 1.42 1.409L19 17.999l4.79 4.843Z\" />\n    </>\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default SortUp;\n"],"names":["SortUp","size","isHovered","normal","React","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","getIcon"],"mappings":"+LAIA,MAAMA,EAAiC,CAAC,CAAE,KAAAC,EAAM,UAAAC,KAA2C,CACzF,MAAMC,EAAUC,EAAA,cAAA,OAAA,CAAK,EAAE,sFAAsF,SAAU,SAAW,CAAA,EAE5HC,EACJD,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,0FAA2F,CAAA,kBACvH,OAAK,CAAA,SAAU,UAAW,EAAE,yFAAyF,CACxH,EAGIE,EACJF,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,gFAAgF,EAC7GA,EAAA,cAAC,OAAK,CAAA,EAAE,gBAAiB,CAAA,CAC3B,EAGIG,EACJH,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,+EAAgF,CAAA,kBAC5G,OAAK,CAAA,SAAU,UAAW,EAAE,kFAAkF,CACjH,EAGII,EACJJ,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,gFAAgF,EAC7GA,EAAA,cAAC,OAAK,CAAA,EAAE,kBAAmB,CAAA,CAC7B,EAGIK,EACJL,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,SAAU,UAAW,EAAE,+EAAgF,CAAA,kBAC5G,OAAK,CAAA,SAAU,UAAW,EAAE,kFAAkF,CACjH,EAGK,OAAAM,EAAQ,CAAE,KAAAT,EAAM,UAAAC,EAAW,OAAAC,EAAQ,YAAAE,EAAa,OAAAC,EAAQ,YAAAC,EAAa,QAAAC,EAAS,aAAAC,CAAc,CAAA,CACrG"}

package/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAKjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,iBAAiB,GACjB,UAAU,GACV,WAAW,GACX,WAAW,CACd;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFAyIT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAKjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,iBAAiB,GACjB,UAAU,GACV,WAAW,GACX,WAAW,CACd;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFAwIT,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/components/Input/styles.module.scss

@@ -1,8 +1,9 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_input.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/input';
 
 .input-wrapper {
   @include input-wrapper;
@@ -27,7 +28,7 @@
   &--with-icon {
     padding: 1px 0;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding: 0.375rem 0;
     }
   }
@@ -44,7 +45,7 @@
       height: 2.5rem;
     }
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       line-height: 1.625rem;
       height: 2.125rem;
       font-size: $font-size-md;

package/components/LinkList/styles.module.scss

@@ -1,7 +1,8 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_palette.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
 
 .link-list {
   list-style: none;
@@ -12,10 +13,12 @@
   &__list-item {
     &--line {
       border-bottom: 1px solid $neutral500;
+
       &:first-of-type {
         border-top: 1px solid $neutral500;
       }
     }
+
     &--outline {
       border-top: getSpacer(2xs) $neutral100 solid;
       border-left: getSpacer(2xs) $neutral100 solid;
@@ -41,9 +44,11 @@
       text-align: left;
       box-sizing: border-box;
     }
+
     &:hover {
       color: $blueberry700;
     }
+
     &--fill {
       margin: getSpacer(s) 0;
       background-color: $neutral50;
@@ -53,23 +58,28 @@
       font-size: $font-size-xs;
       line-height: $lineheight-size-xs;
     }
+
     &--medium {
       font-size: $font-size-sm;
       line-height: $lineheight-size-sm;
     }
+
     &--large {
       font-size: $font-size-md;
       line-height: $lineheight-size-md;
     }
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       &--small {
         font-size: $font-size-sm;
         line-height: $lineheight-size-sm;
       }
+
       &--medium {
         font-size: $font-size-md;
         line-height: $lineheight-size-md;
       }
+
       &--large {
         font-size: $font-size-lg;
         line-height: $lineheight-size-lg;
@@ -81,43 +91,51 @@
         background-color: $banana100;
       }
     }
+
     &--blueberry {
       &:hover {
         background-color: $blueberry100;
       }
     }
+
     &--cherry {
       &:hover {
         background-color: $cherry100;
       }
     }
+
     &--kiwi {
       &:hover {
         background-color: $kiwi100;
       }
     }
+
     &--neutral,
     &--black {
       &:hover {
         background-color: $neutral100;
       }
     }
+
     &--plum {
       &:hover {
         background-color: $plum100;
       }
     }
+
     &--black {
       &:hover {
         background-color: $black;
         color: $white;
       }
     }
+
     &--white {
       &:hover {
         background-color: $neutral50;
       }
     }
+
     &:focus,
     &:focus-visible {
       outline: getSpacer(4xs) solid $black;