@helsenorge/designsystem-react 14.2.0 → 14.3.0

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useState, useRef, useLayoutEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTextArea>;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLTextAreaElement | null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n  const {\n    maxCharacters,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    resources,\n    ref,\n    ...rest\n  } = props;\n\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState(value);\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTextArea = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setTextareaInput(defaultValue || '');\n  }\n\n  if (value !== prevValue) {\n    setPrevValue(value);\n\n    if (value) {\n      setTextareaInput(value);\n    }\n  }\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    } else {\n      target.rows = currentRows;\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useLayoutEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel({ label: label, inputId: textareaId, onColor: onColor as FormOnColor })}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={minRows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useState, useRef, useLayoutEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTextArea>;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLTextAreaElement | null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n  const {\n    maxCharacters,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    resources,\n    ref,\n    ...rest\n  } = props;\n\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState(value);\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTextArea = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setTextareaInput(defaultValue || '');\n  }\n\n  if (value !== prevValue) {\n    setPrevValue(value);\n\n    if (value) {\n      setTextareaInput(value);\n    }\n  }\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    } else {\n      target.rows = currentRows;\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useLayoutEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel({ label: label, inputId: textareaId, onColor: onColor as FormOnColor })}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={minRows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}

package/lib/Title.js

@@ -1,5 +1,5 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import titleStyles from "./components/Title/styles.module.scss";
 const instanceOfTitleMargin = (margin) => {
@@ -9,7 +9,7 @@ const Title = (props) => {
 	const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, testId, ref } = props;
 	return /* @__PURE__ */ jsx(htmlMarkup, {
 		id,
-		className: cn(titleStyles.title, {
+		className: classNames(titleStyles.title, {
 			[titleStyles["title--feature"]]: appearance === "titleFeature",
 			[titleStyles["title--title1"]]: appearance === "title1",
 			[titleStyles["title--title2"]]: appearance === "title2",

package/lib/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the heading element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n};\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,GACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}
+{"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the heading element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n};\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,WACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}

package/lib/Toast.js

@@ -3,7 +3,7 @@ import { t as Icon_default } from "./Icon.js";
 import { t as CheckFill_default } from "./CheckFill.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as Close_default } from "./Close.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Toast/styles.module.scss";
 var Toast = ({ testId, title, message, onClose }) => {
@@ -18,7 +18,7 @@ var Toast = ({ testId, title, message, onClose }) => {
 			/* @__PURE__ */ jsx(Icon_default, {
 				size: isMobile ? IconSize.XSmall : IconSize.Small,
 				svgIcon: CheckFill_default,
-				className: cn(styles["toast__icon"], styles["toast__icon--check"])
+				className: classNames(styles["toast__icon"], styles["toast__icon--check"])
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: styles["toast__text-container"],
@@ -33,7 +33,7 @@ var Toast = ({ testId, title, message, onClose }) => {
 			/* @__PURE__ */ jsx(Close_default, {
 				onClick: handleClose,
 				color: "black",
-				className: cn(styles["toast__icon"], styles["toast__icon--close"]),
+				className: classNames(styles["toast__icon"], styles["toast__icon--close"]),
 				testId: `${testId}-close`
 			})
 		]

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["Toast: React.FC<ToastProps>"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** The title to display in the toast */\n  title: string;\n  /** The message to display in the toast */\n  message?: string;\n  /** Callback when toast is closed */\n  onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  return (\n    <output className={styles['toast']} data-testid={testId}>\n      <Icon\n        size={isMobile ? IconSize.XSmall : IconSize.Small}\n        svgIcon={CheckFill}\n        className={classNames(styles['toast__icon'], styles['toast__icon--check'])}\n      />\n      <div className={styles['toast__text-container']}>\n        <span className={styles['toast__title']}>{title}</span>\n        {message && <span className={styles['toast__description']}>{message}</span>}\n      </div>\n      <Close\n        onClick={handleClose}\n        color=\"black\"\n        className={classNames(styles['toast__icon'], styles['toast__icon--close'])}\n        testId={`${testId}-close`}\n      />\n    </output>\n  );\n};\n\nexport default Toast;\n"],"mappings":";;;;;;;;AAoBA,IAAMA,SAA+B,EAAE,QAAQ,OAAO,SAAS,cAAc;CAC3E,MAAM,WAAW,uBAAuB;CAExC,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW,OAAO;EAAU,eAAa;;GAC/C,oBAAC,cAAA;IACC,MAAM,WAAW,SAAS,SAAS,SAAS;IAC5C,SAAS;IACT,WAAW,GAAW,OAAO,gBAAgB,OAAO,sBAAsB;KAC1E;GACF,qBAAC,OAAA;IAAI,WAAW,OAAO;eACrB,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAkB;MAAa,EACtD,WAAW,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAwB;MAAe,CAAA;KACvE;GACN,oBAAC,eAAA;IACC,SAAS;IACT,OAAM;IACN,WAAW,GAAW,OAAO,gBAAgB,OAAO,sBAAsB;IAC1E,QAAQ,GAAG,OAAO;KAClB;;GACK;;AAIb,IAAA,gBAAe"}
+{"version":3,"file":"Toast.js","names":["Toast: React.FC<ToastProps>"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** The title to display in the toast */\n  title: string;\n  /** The message to display in the toast */\n  message?: string;\n  /** Callback when toast is closed */\n  onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  return (\n    <output className={styles['toast']} data-testid={testId}>\n      <Icon\n        size={isMobile ? IconSize.XSmall : IconSize.Small}\n        svgIcon={CheckFill}\n        className={classNames(styles['toast__icon'], styles['toast__icon--check'])}\n      />\n      <div className={styles['toast__text-container']}>\n        <span className={styles['toast__title']}>{title}</span>\n        {message && <span className={styles['toast__description']}>{message}</span>}\n      </div>\n      <Close\n        onClick={handleClose}\n        color=\"black\"\n        className={classNames(styles['toast__icon'], styles['toast__icon--close'])}\n        testId={`${testId}-close`}\n      />\n    </output>\n  );\n};\n\nexport default Toast;\n"],"mappings":";;;;;;;;AAoBA,IAAMA,SAA+B,EAAE,QAAQ,OAAO,SAAS,cAAc;CAC3E,MAAM,WAAW,uBAAuB;CAExC,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW,OAAO;EAAU,eAAa;;GAC/C,oBAAC,cAAA;IACC,MAAM,WAAW,SAAS,SAAS,SAAS;IAC5C,SAAS;IACT,WAAW,WAAW,OAAO,gBAAgB,OAAO,sBAAsB;KAC1E;GACF,qBAAC,OAAA;IAAI,WAAW,OAAO;eACrB,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAkB;MAAa,EACtD,WAAW,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAwB;MAAe,CAAA;KACvE;GACN,oBAAC,eAAA;IACC,SAAS;IACT,OAAM;IACN,WAAW,WAAW,OAAO,gBAAgB,OAAO,sBAAsB;IAC1E,QAAQ,GAAG,OAAO;KAClB;;GACK;;AAIb,IAAA,gBAAe"}

package/lib/components/ArticleTeaser/index.js

@@ -1,6 +1,6 @@
 import { n as AnalyticsId, s as LanguageLocales } from "../../constants2.js";
 import { n as useLanguage } from "../../useLanguage.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var HN_Designsystem_ArticleTeaser_en_GB_default = {
@@ -27,16 +27,16 @@ var ArticleTeaser = (props) => {
 		...resources
 	};
 	return /* @__PURE__ */ jsxs(WrapperTag, {
-		className: cn(styles.articleteaser),
+		className: classNames(styles.articleteaser),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.ArticleTeaser,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(styles["articleteaser__content"], { [styles["articleteaser__content--collapsed"]]: !expanded }),
+			className: classNames(styles["articleteaser__content"], { [styles["articleteaser__content--collapsed"]]: !expanded }),
 			style: { maxHeight: expanded ? "none" : props.heightCollapsed },
 			children
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: cn(styles["articleteaser__button"], { [styles["articleteaser__button--expanded"]]: expanded }),
+			className: classNames(styles["articleteaser__button"], { [styles["articleteaser__button--expanded"]]: expanded }),
 			onClick: onExpand,
 			"aria-expanded": expanded,
 			"aria-controls": contentId,

package/lib/components/ArticleTeaser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ArticleTeaser: React.FC<ArticleTeaserProps>","mergedResources: HNDesignsystemArticleTeaser"],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonClose\": \"Show more\",\n  \"expandButtonOpen\": \"Show less\"\n}\n","{\n  \"expandButtonClose\": \"Vis mer\",\n  \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAA2D;AACtF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmBb,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA+C;EACnD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,qBAAC,YAAA;EAAW,WAAW,GAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;aAC1G,oBAAC,OAAA;GACC,WAAW,GAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;IACG,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,GAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AChEjB,IAAA,wBDoEe"}
+{"version":3,"file":"index.js","names":["ArticleTeaser: React.FC<ArticleTeaserProps>","mergedResources: HNDesignsystemArticleTeaser"],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonClose\": \"Show more\",\n  \"expandButtonOpen\": \"Show less\"\n}\n","{\n  \"expandButtonClose\": \"Vis mer\",\n  \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAA2D;AACtF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmBb,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA+C;EACnD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,qBAAC,YAAA;EAAW,WAAW,WAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;aAC1G,oBAAC,OAAA;GACC,WAAW,WAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;IACG,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AChEjB,IAAA,wBDoEe"}

package/lib/components/Chip/Chip.d.ts

@@ -1,16 +1,16 @@
-import { PaletteNames } from '../../theme/palette';
-import { ChipSize, ChipAction, ChipVariant } from './constants';
-export type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
 export interface ChipProps {
     /** Sets the text of the chip */
     children: string;
-    /** Sets the size of the chip. Default: medium */
-    size?: keyof typeof ChipSize;
-    /** Sets the background of the chip. Not used if action is "undo". Default: blueberry */
-    color?: ChipColors;
-    variant?: keyof typeof ChipVariant;
-    action: keyof typeof ChipAction;
-    onClick: () => void;
+    /** Wether or not to have a close button */
+    withCloseButton?: boolean;
+    /** onClick handler for text-part of the chip */
+    onChipClick?: () => void;
+    /** Button props for main chip button */
+    chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** onClick handler for close button */
+    onCloseClick?: () => void;
+    /** Button props for the close button */
+    closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
 }

package/lib/components/Chip/index.d.ts

@@ -1,4 +1,3 @@
 import { default as Chip } from './Chip';
-export { ChipSize, ChipAction, ChipVariant } from './constants';
 export * from './Chip';
 export default Chip;

package/lib/components/Chip/index.js

@@ -1,54 +1,42 @@
 import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
-import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import { t as palette } from "../../palette.js";
 import { t as Icon_default } from "../../Icon.js";
-import { t as Undo_default } from "../../Undo.js";
 import { t as X_default } from "../../X.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
-let ChipSize = /* @__PURE__ */ function(ChipSize$1) {
-	ChipSize$1["medium"] = "medium";
-	ChipSize$1["large"] = "large";
-	return ChipSize$1;
-}({});
-let ChipAction = /* @__PURE__ */ function(ChipAction$1) {
-	ChipAction$1["remove"] = "remove";
-	ChipAction$1["undo"] = "undo";
-	return ChipAction$1;
-}({});
-let ChipVariant = /* @__PURE__ */ function(ChipVariant$1) {
-	ChipVariant$1["normal"] = "normal";
-	ChipVariant$1["oncolor"] = "oncolor";
-	ChipVariant$1["emphasised"] = "emphasised";
-	return ChipVariant$1;
-}({});
 var Chip = (props) => {
-	const { children, size = ChipSize.medium, color = "blueberry", variant = "normal", action, onClick, testId } = props;
-	const { refObject, isHovered } = usePseudoClasses();
-	const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
-	const getActionIcon = () => {
-		switch (action) {
-			case "undo": return Undo_default;
-			case "remove": return X_default;
-		}
-	};
-	return /* @__PURE__ */ jsxs("button", {
-		className: chipClasses,
-		onClick,
-		ref: refObject,
-		type: "button",
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.Tag,
-		children: [children, /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: getActionIcon(),
-			size: IconSize.XXSmall,
-			color: palette[`${color}800`],
-			isHovered
+	const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles["chip"],
+		children: [/* @__PURE__ */ jsx("button", {
+			...chipButtonProps,
+			className: classNames(styles["chip__chip"]),
+			onClick: onChipClick,
+			type: "button",
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Tag,
+			children: /* @__PURE__ */ jsx("span", {
+				className: classNames(styles["chip__chip__inner"], { [styles["chip__chip__inner--without-close"]]: !withCloseButton }),
+				children
+			})
+		}), withCloseButton && /* @__PURE__ */ jsx("button", {
+			...closeButtonProps,
+			className: classNames(styles["chip__close"]),
+			onClick: onCloseClick,
+			type: "button",
+			"data-testid": `${testId}-close`,
+			"data-analyticsid": AnalyticsId.Tag,
+			children: /* @__PURE__ */ jsx("span", {
+				className: styles["chip__close__inner"],
+				children: /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon: X_default,
+					size: IconSize.XXSmall
+				})
+			})
 		})]
 	});
 };
 var Chip_default = Chip;
-export { ChipAction, ChipSize, ChipVariant, Chip_default as default };
+export { Chip_default as default };
 
 //# sourceMappingURL=index.js.map

package/lib/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/constants.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["export enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { ChipSize, type ChipAction, type ChipVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport { ChipSize, ChipAction, ChipVariant } from './constants';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;ACqBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,GAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACrDb,IAAA,eDyDe"}
+{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true } = props;\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          className={classNames(styles['chip__close'])}\n          onClick={onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;AAyBA,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,SAAS;AAEnH,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,UAAA;GACC,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IACC,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,iBAChD,CAAC;IAED;KACI;IACA,EACR,mBACC,oBAAC,UAAA;GACC,GAAI;GACJ,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS;GACT,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IAAK,WAAW,OAAO;cACtB,oBAAC,cAAA;KAAK,SAAS;KAAG,MAAM,SAAS;MAAW;KACvC;IACA,CAAA;GAEP;;AC1DV,IAAA,eD8De"}

package/lib/components/Chip/styles.module.scss

@@ -1,96 +1,91 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .chip {
-  $chip: &;
+  display: flex;
+  flex-flow: row nowrap;
+  height: 2.75rem;
 
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  text-transform: uppercase;
-  border-width: 1px;
-  border-style: solid;
-  background-color: transparent;
+  .chip__chip:focus-visible,
+  .chip__close:focus-visible {
+    z-index: 1;
+  }
 
-  // komponenten bruker ekstra liten font-size og line-height
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 600;
-  border-radius: 100px;
-  cursor: pointer;
-  font-family: inherit;
+  &__chip,
+  &__close {
+    height: 2.75rem;
+    background-color: transparent;
+    align-self: flex-start;
+    padding: 0;
+    border: unset;
+    outline: unset;
+    cursor: pointer;
 
-  $colors: 'blueberry', 'neutral', 'cherry', 'banana', 'kiwi', 'plum';
+    &__inner {
+      display: block;
+      box-sizing: border-box;
+      height: 1.625rem;
+      line-height: 1.25rem;
+      background-color: var(--core-color-blueberry-50);
+      border: 1px solid var(--core-color-blueberry-500);
 
-  @each $color in $colors {
-    &--#{$color},
-    // Sørg for at fargene overstyrer dersom chip har type=button
-    &--#{$color}[type='button'] {
-      // banana og kiwi har unntak fra hovedregelen
-      @if $color == 'banana' {
-        color: map.get(palette.$palette-map, #{$color}900);
-        border-color: map.get(palette.$palette-map, #{$color}300);
-      } @else if $color == 'kiwi' {
-        color: map.get(palette.$palette-map, #{$color}900);
-        border-color: map.get(palette.$palette-map, #{$color}200);
-      } @else {
-        color: map.get(palette.$palette-map, #{$color}800);
-        border-color: map.get(palette.$palette-map, #{$color}200);
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        height: 1.875rem;
       }
 
-      &#{$chip}--normal {
-        &:hover {
-          background-color: rgba-to-rgb(rgba(map.get(palette.$palette-map, #{$color}200), 0.2));
-        }
+      .chip__chip:hover &,
+      .chip__close:hover & {
+        background-color: var(--core-color-blueberry-100);
       }
 
-      &#{$chip}--oncolor {
-        background-color: transparent;
-
-        &:hover {
-          background-color: map.get(palette.$palette-map, #{$color}100);
-          border-color: map.get(palette.$palette-map, #{$color}100);
-        }
-
-        &:focus {
-          background-color: palette.$white;
-          border-color: palette.$white;
-          box-shadow: 0 0 0 3px palette.$black;
-        }
+      .chip__chip:active &,
+      .chip__close:active & {
+        background-color: var(--core-color-blueberry-200);
       }
 
-      &#{$chip}--emphasised {
-        background-color: map.get(palette.$palette-map, #{$color}50);
-
-        &:hover {
-          @if $color == 'banana' {
-            background-color: rgba-to-rgb(rgba(map.get(palette.$palette-map, #{$color}300), 0.5));
-          } @else {
-            background-color: rgba-to-rgb(rgba(map.get(palette.$palette-map, #{$color}200), 0.5));
-          }
-        }
+      .chip__chip:focus-visible &,
+      .chip__close:focus-visible & {
+        outline: 3px solid var(--color-action-border-onlight-focus);
       }
     }
   }
 
-  &:focus {
-    outline: none;
-    border-color: palette.$black;
-    box-shadow: inset 0 0 0 2px palette.$black;
-  }
+  &__chip {
+    &__inner {
+      border-radius: 100px 0 0 100px;
+      padding-right: 0.375rem;
+      padding-left: 0.75rem;
+      padding-top: 0.1875rem;
+      text-transform: uppercase;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--core-color-blueberry-800);
+      text-wrap: nowrap;
 
-  &#{$chip}--undo {
-    text-decoration: line-through;
-  }
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding-top: 0.3125rem;
+        font-size: 1rem;
+      }
 
-  &--medium {
-    padding: 0 spacers.getSpacer(3xs) 0 spacers.getSpacer(xs);
-    min-height: 1.875rem;
+      &--without-close {
+        border-radius: 100px;
+        padding-right: 0.75rem;
+      }
+    }
   }
 
-  &--large {
-    padding: spacers.getSpacer(4xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs) spacers.getSpacer(xs);
-    min-height: 2.125rem;
+  &__close {
+    &__inner {
+      border-radius: 0 100px 100px 0;
+      border-left: 0;
+      padding-right: 0.25rem;
+      display: flex;
+      align-items: center;
+
+      svg {
+        fill: var(--color-action-graphics-onlight);
+      }
+    }
   }
 }

package/lib/components/Chip/styles.module.scss.d.ts

@@ -1,17 +1,10 @@
 export type Styles = {
   chip: string;
-  'chip--banana': string;
-  'chip--blueberry': string;
-  'chip--cherry': string;
-  'chip--emphasised': string;
-  'chip--kiwi': string;
-  'chip--large': string;
-  'chip--medium': string;
-  'chip--neutral': string;
-  'chip--normal': string;
-  'chip--oncolor': string;
-  'chip--plum': string;
-  'chip--undo': string;
+  chip__chip: string;
+  chip__chip__inner: string;
+  'chip__chip__inner--without-close': string;
+  chip__close: string;
+  chip__close__inner: string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/Dropdown/index.js

@@ -18,7 +18,7 @@ import { t as ChevronDown_default } from "../../ChevronDown.js";
 import { t as ChevronUp_default } from "../../ChevronUp.js";
 import { t as PlusSmall_default } from "../../PlusSmall.js";
 import { t as Label_default } from "../../Label.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useId, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clamp } from "motion/react";
@@ -81,14 +81,14 @@ const DropdownBase = (props) => {
 		...getResources(language),
 		...resources
 	};
-	const toggleClasses = cn(styles.dropdown__toggle, {
+	const toggleClasses = classNames(styles.dropdown__toggle, {
 		[styles["dropdown__toggle--open"]]: isOpen && !disabled,
 		[styles["dropdown__toggle--with-icon"]]: typeof svgIcon !== "undefined",
 		[styles["dropdown__toggle--transparent"]]: variant === "transparent",
 		[styles["dropdown__toggle--borderless"]]: variant === "borderless"
 	});
-	const contentClasses = cn(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
-	const listItemClasses = cn(styles["dropdown__list-item"], { [styles["dropdown__list-item--single-select"]]: isSingleSelect });
+	const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
+	const listItemClasses = classNames(styles["dropdown__list-item"], { [styles["dropdown__list-item--single-select"]]: isSingleSelect });
 	const { refs, floatingStyles } = useFloating({
 		strategy: "fixed",
 		placement: "bottom-start",
@@ -185,7 +185,7 @@ const DropdownBase = (props) => {
 					const label = element.props.label;
 					if (React.isValidElement(label) && isComponent(label, Label_default)) return React.cloneElement(element, {
 						ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),
-						label: React.cloneElement(label, { labelClassName: cn(label.props?.labelClassName, styles["dropdown__multiselect-item"]) })
+						label: React.cloneElement(label, { labelClassName: classNames(label.props?.labelClassName, styles["dropdown__multiselect-item"]) })
 					});
 				}
 				return React.cloneElement(child, { ref: mergeRefs([element.props.ref, childrenRefList.current[index]]) });