@helsenorge/designsystem-react 15.7.1 → 16.0.0

package/lib/DictionaryTrigger.js

@@ -1,27 +0,0 @@
-import { AnalyticsId } from "./constants.js";
-import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
-import styles from "./components/DictionaryTrigger/styles.module.scss";
-//#region src/components/DictionaryTrigger/DictionaryTrigger.tsx
-var DictionaryTrigger = (props) => {
-	const { children, selected = false, className, testId, ref, ...rest } = props;
-	const triggerClasses = classNames(styles.dictionarytrigger, className);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.DictionaryTrigger,
-		className: triggerClasses,
-		"aria-expanded": selected,
-		ref,
-		...rest,
-		children
-	});
-};
-DictionaryTrigger.displayName = "DictionaryTrigger";
-//#endregion
-//#region src/components/DictionaryTrigger/index.ts
-var DictionaryTrigger_default = DictionaryTrigger;
-//#endregion
-export { DictionaryTrigger_default as t };
-
-//# sourceMappingURL=DictionaryTrigger.js.map

package/lib/RadioButton.js

@@ -1,84 +0,0 @@
-import uuid from "./utils/uuid.js";
-import { AnalyticsId, FormOnColor, FormSize } from "./constants.js";
-import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
-import { getAriaDescribedBy } from "./utils/accessibility.js";
-import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
-import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
-import { t as RadioMarker } from "./RadioMarker.js";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import radioButtonStyles from "./components/RadioButton/styles.module.scss";
-//#region src/components/RadioButton/RadioButton.tsx
-var RadioButton = (props) => {
-	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames, ref, ...rest } = props;
-	const invalid = error || onColor === FormOnColor.oninvalid;
-	const onDark = onColor === FormOnColor.ondark;
-	const onGrey = onColor === FormOnColor.ongrey;
-	const onBlueberry = onColor === FormOnColor.onblueberry;
-	const onCherry = onColor === FormOnColor.oninvalid;
-	const isLarge = size === FormSize.large;
-	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
-		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
-		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry,
-		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry
-	});
-	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
-		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
-		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
-		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
-		[radioButtonStyles["radio-button-label__large"]]: isLarge,
-		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled,
-		[radioButtonStyles["radio-button-label__large--on-grey"]]: isLarge && onGrey,
-		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: isLarge && onBlueberry,
-		[radioButtonStyles["radio-button-label__large--invalid"]]: isLarge && onCherry
-	}, labelClassNames);
-	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], className);
-	const getLabelContent = () => /* @__PURE__ */ jsxs("span", {
-		className: radioButtonStyles["radio-button__marker-wrapper"],
-		children: [/* @__PURE__ */ jsx("input", {
-			...rest,
-			id: inputId,
-			name,
-			className: radioButtonClasses,
-			type: "radio",
-			disabled,
-			value,
-			ref,
-			defaultChecked,
-			"aria-describedby": getAriaDescribedBy(props, errorTextId),
-			required,
-			onChange
-		}), /* @__PURE__ */ jsx(RadioMarker, {
-			disabled,
-			error: invalid,
-			onColor,
-			size
-		})]
-	});
-	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: errorWrapperClassName,
-		errorText,
-		errorTextId,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-testid": testId,
-			"data-analyticsid": AnalyticsId.RadioButton,
-			className: radioButtonWrapperClasses,
-			children: renderLabelAsParent({
-				label,
-				children: getLabelContent(),
-				inputId,
-				onColor,
-				labelClassName: radioButtonLabelClasses,
-				sublabelWrapperClassName: radioButtonStyles["radiobutton-sublabel-wrapper"],
-				large: isLarge,
-				afterLabelChildrenClassName: radioButtonStyles["radiobutton-afterlabelchildren-wrapper"]
-			})
-		})
-	});
-};
-RadioButton.displayName = "RadioButton";
-//#endregion
-export { RadioButton as t };
-
-//# sourceMappingURL=RadioButton.js.map

package/lib/RadioButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button-label__large--on-grey']]: isLarge && onGrey,\n      [radioButtonStyles['radio-button-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioButtonStyles['radio-button-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(radioButtonStyles['radio-button'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioButtonStyles['radio-button__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioButtonClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={onChange}\n      />\n      <RadioMarker disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,+CAA+C,WAAW;CAC/E,CAAC;CACD,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,yCAAyC,WAAW;GACtE,kBAAkB,wCAAwC,WAAW;GACrE,kBAAkB,6CAA6C,WAAW;GAC1E,kBAAkB,wCAAwC,WAAW;CACxE,GACA,eACF;CACA,MAAM,qBAAqB,WAAW,kBAAkB,iBAAiB,SAAS;CAElF,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,kBAAkB;EAAnC,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;GAC7E,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;GACjD,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/lib/components/HelpTooltip/HelpTooltip.d.ts

@@ -1,12 +0,0 @@
-import { FloatingDelayGroup } from '@floating-ui/react';
-export interface HelpTooltipProps {
-    /** Ordet som skal ha en tilhørende tooltip. Det skal bare sendes inn string som children. Er satt til ReactNode for å kunne brukes i CMSet. */
-    children: React.ReactNode;
-    /** Teksten som skal vises i boblen som åpnes */
-    description: React.ReactNode;
-    /** Valgfri test-id */
-    testId?: string;
-}
-export declare const HelpTooltip: React.FC<HelpTooltipProps>;
-export declare const HelpTooltipDelayGroup: typeof FloatingDelayGroup;
-export default HelpTooltip;

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

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

package/lib/components/HelpTooltip/index.js

@@ -1,48 +0,0 @@
-import { t as DictionaryTrigger_default } from "../../DictionaryTrigger.js";
-import { a as useDismiss, c as useHover, l as useInteractions, n as FloatingDelayGroup, o as useFloating, s as useFocus } from "../../floating-ui.react.js";
-import { t as PopOver_default } from "../../PopOver.js";
-import { useId, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/HelpTooltip/HelpTooltip.tsx
-var HelpTooltip = ({ children, description, testId }) => {
-	const popoverId = useId();
-	const [showTooltip, setShowTooltip] = useState(false);
-	const wordRef = useRef(null);
-	const { refs, context } = useFloating({
-		open: showTooltip,
-		elements: { reference: wordRef.current },
-		onOpenChange: setShowTooltip
-	});
-	const hover = useHover(context, { move: false });
-	const focus = useFocus(context);
-	const dismiss = useDismiss(context);
-	const { getReferenceProps } = useInteractions([
-		hover,
-		focus,
-		dismiss
-	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DictionaryTrigger_default, {
-		ref: wordRef,
-		...getReferenceProps(),
-		selected: showTooltip,
-		"aria-describedby": popoverId,
-		"data-testid": testId,
-		children
-	}), /* @__PURE__ */ jsx(PopOver_default, {
-		role: "tooltip",
-		ref: refs.setFloating,
-		id: popoverId,
-		show: showTooltip,
-		testId,
-		controllerRef: wordRef,
-		children: description
-	})] });
-};
-var HelpTooltipDelayGroup = FloatingDelayGroup;
-//#endregion
-//#region src/components/HelpTooltip/index.ts
-var HelpTooltip_default = HelpTooltip;
-//#endregion
-export { HelpTooltip, HelpTooltipDelayGroup, HelpTooltip_default as default };
-
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpTooltip/HelpTooltip.tsx","../../../src/components/HelpTooltip/index.ts"],"sourcesContent":["import { useState, useRef, useId } from 'react';\n\nimport { useFloating, useHover, useFocus, useDismiss, useInteractions, FloatingDelayGroup } from '@floating-ui/react';\n\nimport DictionaryTrigger from '../DictionaryTrigger';\nimport PopOver from '../PopOver';\n\nexport interface HelpTooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip. Det skal bare sendes inn string som children. Er satt til ReactNode for å kunne brukes i CMSet. */\n  children: React.ReactNode;\n  /** Teksten som skal vises i boblen som åpnes */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, description, testId }) => {\n  const popoverId = useId();\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { refs, context } = useFloating({\n    open: showTooltip,\n    elements: {\n      reference: wordRef.current,\n    },\n    onOpenChange: setShowTooltip,\n  });\n\n  const hover = useHover(context, { move: false });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n\n  const { getReferenceProps } = useInteractions([hover, focus, dismiss]);\n\n  return (\n    <>\n      <DictionaryTrigger ref={wordRef} {...getReferenceProps()} selected={showTooltip} aria-describedby={popoverId} data-testid={testId}>\n        {children}\n      </DictionaryTrigger>\n      <PopOver role=\"tooltip\" ref={refs.setFloating} id={popoverId} show={showTooltip} testId={testId} controllerRef={wordRef}>\n        {description}\n      </PopOver>\n    </>\n  );\n};\n\nexport const HelpTooltipDelayGroup = FloatingDelayGroup;\n\nexport default HelpTooltip;\n","import HelpTooltip from './HelpTooltip';\nexport * from './HelpTooltip';\nexport default HelpTooltip;\n"],"mappings":";;;;;;AAgBA,IAAa,eAA2C,EAAE,UAAU,aAAa,aAAa;CAC5F,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,EAAE,MAAM,YAAY,YAAY;EACpC,MAAM;EACN,UAAU,EACR,WAAW,QAAQ,QACrB;EACA,cAAc;CAChB,CAAC;CAED,MAAM,QAAQ,SAAS,SAAS,EAAE,MAAM,MAAM,CAAC;CAC/C,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,UAAU,WAAW,OAAO;CAElC,MAAM,EAAE,sBAAsB,gBAAgB;EAAC;EAAO;EAAO;CAAO,CAAC;CAErE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,2BAAD;EAAmB,KAAK;EAAS,GAAI,kBAAkB;EAAG,UAAU;EAAa,oBAAkB;EAAW,eAAa;EACxH;CACgB,CAAA,GACnB,oBAAC,iBAAD;EAAS,MAAK;EAAU,KAAK,KAAK;EAAa,IAAI;EAAW,MAAM;EAAqB;EAAQ,eAAe;EAC7G,UAAA;CACM,CAAA,CACT,EAAA,CAAA;AAEN;AAEA,IAAa,wBAAwB;;;AC7CrC,IAAA,sBAAe"}

package/lib/components/RadioButton/RadioButton.d.ts

@@ -1,28 +0,0 @@
-import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
-import { FormOnColor, FormSize } from '../../constants';
-export interface RadioButtonProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */
-    label: React.ReactNode;
-    /** Adds custom classes to the label element. */
-    labelClassNames?: string;
-    /** input id of the radioButton */
-    inputId?: string;
-    /** Changes the visuals of the radioButton */
-    onColor?: keyof typeof FormOnColor;
-    /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */
-    size?: keyof typeof FormSize;
-    /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */
-    error?: boolean;
-    /** Error text to show above the component */
-    errorText?: string;
-    /** Error text id */
-    errorTextId?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-    /** Ref passed to the input element */
-    ref?: React.Ref<HTMLInputElement | null>;
-}
-export declare const RadioButton: React.FC<RadioButtonProps>;
-export default RadioButton;

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

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

package/lib/components/RadioButton/index.js

@@ -1,7 +0,0 @@
-import { t as RadioButton } from "../../RadioButton.js";
-//#region src/components/RadioButton/index.ts
-var RadioButton_default = RadioButton;
-//#endregion
-export { RadioButton, RadioButton_default as default };
-
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport default RadioButton;\n"],"mappings":";;AAEA,IAAA,sBAAe"}

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

@@ -1,26 +0,0 @@
-export type Styles = {
-  'radio-button': string;
-  'radio-button__marker-wrapper': string;
-  'radio-button-errors': string;
-  'radio-button-label': string;
-  'radio-button-label__large': string;
-  'radio-button-label__large--disabled': string;
-  'radio-button-label__large--invalid': string;
-  'radio-button-label__large--on-blueberry': string;
-  'radio-button-label__large--on-grey': string;
-  'radio-button-label--disabled': string;
-  'radio-button-label--invalid': string;
-  'radio-button-label--on-dark': string;
-  'radio-button-wrapper': string;
-  'radio-button-wrapper__large': string;
-  'radio-button-wrapper__large--invalid': string;
-  'radio-button-wrapper__large--on-blueberry': string;
-  'radiobutton-afterlabelchildren-wrapper': string;
-  'radiobutton-sublabel-wrapper': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;

package/lib/designsystem-react.css

@@ -1,273 +0,0 @@
-/* stylelint-disable color-hex-length */
-/* stylelint-disable comment-empty-line-before */
-/* stylelint-disable scss/operator-no-unspaced */
-
-/**
- * This file was generated automatically by Supernova.io and should not be changed manually.
- * To modify the format or content of this file, please contact your design system team. 
- */
-
-:root {
-  --color-action-graphics-onlight: #188097;
-  --color-action-graphics-onlight-hover: #126f87;
-  --core-color-banana-50: #fdf8df;
-  --core-color-banana-100: #fcf2bf;
-  --core-color-banana-200: #f9ea9f;
-  --core-color-banana-300: #f5e080;
-  --core-color-banana-400: #ebc840;
-  --core-color-banana-500: #ddab06;
-  --core-color-banana-600: #c59302;
-  --core-color-banana-700: #ab7c00;
-  --core-color-banana-800: #916500;
-  --core-color-banana-900: #764f00;
-  --core-color-blueberry-50: #e4f7f9;
-  --core-color-blueberry-100: #cae7ed;
-  --core-color-blueberry-200: #afdae3;
-  --core-color-blueberry-300: #7abecc;
-  --core-color-blueberry-400: #58aabb;
-  --core-color-blueberry-500: #188097;
-  --core-color-blueberry-600: #126f87;
-  --core-color-blueberry-700: #08667c;
-  --core-color-blueberry-800: #06596c;
-  --core-color-blueberry-900: #084350;
-  --core-color-cherry-50: #fff2ea;
-  --core-color-cherry-100: #f7e1d2;
-  --core-color-cherry-200: #eec0a5;
-  --core-color-cherry-300: #e39376;
-  --core-color-cherry-400: #d56147;
-  --core-color-cherry-500: #c83521;
-  --core-color-cherry-600: #b62e1c;
-  --core-color-cherry-700: #a31f0e;
-  --core-color-cherry-800: #912112;
-  --core-color-cherry-900: #7e1c0e;
-  --core-color-kiwi-50: #e6f8ee;
-  --core-color-kiwi-100: #c2edd6;
-  --core-color-kiwi-200: #9de2bf;
-  --core-color-kiwi-300: #79d6aa;
-  --core-color-kiwi-400: #56ca96;
-  --core-color-kiwi-500: #33be84;
-  --core-color-kiwi-600: #10b172;
-  --core-color-kiwi-700: #0ca161;
-  --core-color-kiwi-800: #099150;
-  --core-color-kiwi-900: #078141;
-  --core-color-neutral-50: #f5f3f3;
-  --core-color-neutral-100: #eae7e7;
-  --core-color-neutral-200: #d6d4d3;
-  --core-color-neutral-300: #bdbab9;
-  --core-color-neutral-400: #aaa8a6;
-  --core-color-neutral-500: #989693;
-  --core-color-neutral-600: #7d7c79;
-  --core-color-neutral-700: #62625f;
-  --core-color-neutral-800: #474745;
-  --core-color-neutral-900: #2b2c2b;
-  --core-color-plum-50: #f4ecfe;
-  --core-color-plum-100: #e5d5fb;
-  --core-color-plum-200: #cfb1f6;
-  --core-color-plum-300: #b388ec;
-  --core-color-plum-400: #9862df;
-  --core-color-plum-500: #7c3fcb;
-  --core-color-plum-600: #6c36b3;
-  --core-color-plum-700: #5c27a1;
-  --core-color-plum-800: #4c1b8c;
-  --core-color-plum-900: #3c1471;
-  --core-color-black: #000000;
-  --core-color-white: #ffffff;
-  --color-action-border-ondark: #ffffff;
-  --color-action-text-ondark: #ffffff;
-  --color-action-graphics-ondark: #ffffff;
-  --color-notification-background-info: #e4f7f9;
-  --color-notification-background-error: #fff2ea;
-  --color-notification-background-warning: #fdf8df;
-  --color-notification-background-success: #e6f8ee;
-  --color-notification-border-info: #08667c;
-  --color-notification-border-error: #a31f0e;
-  --color-notification-border-warning: #ab7c00;
-  --color-notification-border-success: #078141;
-  --color-notification-graphics-info: #08667c;
-  --color-notification-graphics-error: #a31f0e;
-  --color-notification-graphics-warning: #ab7c00;
-  --color-notification-graphics-success: #078141;
-  --color-notification-status-info: #188097;
-  --color-notification-status-error: #c83521;
-  --color-notification-status-warning: #ebc840;
-  --color-notification-status-success: #099150;
-  --color-disabled-background: #d6d4d3;
-  --color-disabled-text: #62625f;
-  --color-disabled-border: #7d7c79;
-  --color-destructive-background-emphasized: #f7e1d2;
-  --color-destructive-background-normal: #fff2ea;
-  --color-destructive-graphics-normal: #c83521;
-  --color-destructive-graphics-hover: #b62e1c;
-  --color-destructive-text-normal: #b62e1c;
-  --color-destructive-text-hover: #a31f0e;
-  --color-help-background-normal: #f4ecfe;
-  --color-help-graphics-normal: #5c27a1;
-  --color-help-border-normal: #5c27a1;
-  --color-disabled-graphics: #62625f;
-  --color-destructive-border-normal: #c83521;
-  --color-action-border-ondark-hover: #e4f7f9;
-  --color-action-graphics-ondark-hover: #e4f7f9;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
-  --color-action-background-transparent-onlight-hover: #126f8721;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
-  --color-action-background-transparent-onlight-hoverselected: #126f872b;
-  --color-action-border-ondark-focus: #ffffff;
-  --color-disabled-border-ondark: #d6d4d3;
-  --color-disabled-graphics-ondark: #d6d4d3;
-  --color-disabled-text-ondark: #ffffff;
-  --color-action-text-onlight: #126f87;
-  --color-action-text-onlight-hover: #08667c;
-  --color-action-border-onlight: #188097;
-  --color-action-border-onlight-hover: #08667c;
-  --color-action-border-onlight-focus: #000000;
-  --color-action-background-ondark: #ffffff;
-  --color-action-background-ondark-hover: #e4f7f9;
-  --color-action-background-ondark-selected: #cae7ed;
-  --color-action-background-ondark-hoverselected: #afdae3;
-  --color-action-background-onlight: #188097;
-  --color-action-background-onlight-hover: #08667c;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
-  --color-action-background-transparent-ondark-hover: #00000026;
-  --color-action-background-transparent-onmulticolor-hover: #00000013;
-
-  /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
-  --color-action-background-transparent-ondark-hoverselected: #000000bf;
-  --color-action-background-transparent-onmulticolor-active: #00000026;
-  --color-base-background-blueberry: #e4f7f9;
-  --color-base-background-cherry: #fff2ea;
-  --color-base-background-neutral: #f5f3f3;
-  --color-base-background-white: #ffffff;
-  --color-base-background-dark-blueberry: #188097;
-  --color-base-background-dark-cherry: #c83521;
-  --color-base-background-dark-neutral: #2b2c2b;
-  --color-base-text-onlight: #000000;
-  --color-base-text-ondark: #ffffff;
-  --color-base-border-ondark: #d6d4d3;
-  --color-base-border-onlight: #7d7c79;
-  --color-base-border-onlight-emphasized: #62625f;
-  --color-base-graphics-onlight: #000000;
-  --color-base-graphics-ondark: #ffffff;
-  --brandcolor-white: #ffffff;
-  --brandcolor-black: #000000;
-  --brandcolor-neutral-verylight: #f5f3f3;
-  --brandcolor-neutral-light: #eae7e7;
-  --brandcolor-neutral-mediumlight: #d6d4d3;
-  --brandcolor-neutral-medium: #989693;
-  --brandcolor-neutral-dark: #62625f;
-  --brandcolor-neutral-verydark: #2b2c2b;
-  --brandcolor-blueberry-verylight: #e4f7f9;
-  --brandcolor-blueberry-light: #cae7ed;
-  --brandcolor-blueberry-mediumlight: #afdae3;
-  --brandcolor-blueberry-medium: #188097;
-  --brandcolor-blueberry-mediumdark: #126f87;
-  --brandcolor-blueberry-dark: #08667c;
-  --brandcolor-cherry-verylight: #fff2ea;
-  --brandcolor-cherry-light: #f7e1d2;
-  --brandcolor-cherry-medium: #c83521;
-  --brandcolor-cherry-mediumdark: #b62e1c;
-  --brandcolor-cherry-dark: #a31f0e;
-
-  /* Placeholdertext in input- and textarea-controls */
-  --color-placeholder-text-onlight: #62625f;
-  --color-base-border-onlight-subtle: #d6d4d3;
-  --color-base-border-neutral: #d6d4d3;
-  --color-base-border-blueberry: #afdae3;
-  --color-base-border-cherry: #eec0a5;
-
-  /* In a few cases where coloured text is required to stress the semantics of an information notification text */
-  --color-notification-text-info: #08667c;
-
-  /* In a few cases where coloured text is required to stress the semantics of an error notification text */
-  --color-notification-text-error: #a31f0e;
-  --color-notification-text-warning: #916500;
-  --color-notification-text-success: #078141;
-  --color-base-border-neutral-emphasized: #bdbab9;
-  --color-notification-status-draft: #7d7c79;
-
-  /* hoverstate on help components on white background */
-  --color-help-background-transparent-onlight-hover: #6c36b31a;
-  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
-  --color-help-background-transparent-onlight-active: #6c38b34d;
-  --color-action-background-transparent-onlight-active: #126f874d;
-
-  /* Background outside of modal and bottomsheet to mask inactive screen-area */
-  --color-shadow-pagemask: #2c2b2cb8;
-  --color-help-border-subtle-wcag: #9862df;
-  --color-help-graphics-dark: #4c1b8c;
-  --color-help-border-dark: #4c1b8c;
-  --color-help-graphics-verydark: #3c1471;
-  --color-help-border-verydark: #3c1471;
-  --color-action-background-onlight-active: #06596c;
-  --color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
-  --color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
-  --color-action-background-stroke-onlight: #126f87;
-  --component-stickynote-background-normal-light: #fdf8df;
-  --component-stickynote-background-normal-medium: #fcf2bf;
-  --component-stickynote-background-normal-dark: #f9ea9f;
-  --component-stickynote-border-normal: #916500;
-  --component-stickynote-border-error: #d56147;
-  --component-stickynote-background-error-dark: #eec0a5;
-  --component-stickynote-background-error-medium: #f7e1d2;
-  --component-stickynote-background-error-light: #fff2ea;
-  --color-base-text-onlight-subdued: #474745;
-  --component-stickynote-background-fold-error-dark: #e39376;
-  --component-stickynote-background-fold-error-light: #f7e1d2;
-  --component-stickynote-background-fold-error-medium: #eec0a5;
-  --component-stickynote-background-fold-normal-light: #fcf2bf;
-  --component-stickynote-background-fold-normal-medium: #f9ea9f;
-  --component-stickynote-background-fold-normal-dark: #ebc840;
-  --component-stickynote-background-transparent-onlight-hover: #ebc84021;
-  --component-stickynote-background-transparent-onlight-active: #ebc8404d;
-  --component-stickynote-background-transparent-error-hover: #d5614721;
-  --component-stickynote-background-transparent-error-active: #d5614740;
-  --component-listelements-background-neutral-light: #f5f3f3;
-  --component-listelements-background-neutral-medium: #eae7e7;
-  --component-listelements-background-neutral-dark: #d6d4d3;
-  --component-listelements-border-neutral-light: #eae7e7;
-  --component-listelements-background-blueberry-light: #e4f7f9;
-  --component-listelements-background-blueberry-medium: #cae7ed;
-  --component-listelements-border-blueberry-light: #cae7ed;
-  --component-listelements-background-blueberry-dark: #afdae3;
-  --component-listelements-border-blueberry-normal: #188097;
-  --component-listelements-background-cherry-light: #fff2ea;
-  --component-listelements-background-cherry-medium: #f7e1d2;
-  --component-listelements-border-cherry-light: #f7e1d2;
-  --component-listelements-background-cherry-dark: #eec0a5;
-  --component-listelements-border-cherry-normal: #d56147;
-  --component-listelements-border-neutral-normal: #7d7c79;
-  --component-statusdot-graphics-banana-ondark: #f5e080;
-  --component-statusdot-graphics-banana-onlight: #ab7c00;
-  --component-statusdot-graphics-blueberry-ondark: #afdae3;
-  --component-statusdot-graphics-blueberry-onlight: #188097;
-  --component-statusdot-graphics-cherry-ondark: #f7e1d2;
-  --component-statusdot-graphics-cherry-onlight: #a31f0e;
-  --component-statusdot-graphics-kiwi-ondark: #9de2bf;
-  --component-statusdot-graphics-kiwi-onlight: #078141;
-  --component-statusdot-graphics-neutral-ondark: #f5f3f3;
-  --component-statusdot-graphics-neutral-onlight: #7d7c79;
-  --color-action-graphics-emphasized-onlight: #08667c;
-  --color-base-background-stroke-dark-cherry: #b62e1c;
-  --color-base-background-stroke-dark-blueberry: #126f87;
-  --color-base-background-stroke-dark-neutral: #000000;
-  --color-destructive-graphics-emphasized-onlight: #a31f0e;
-  --component-listelements-background-neutral-verydark: #bdbab9;
-  --component-listelements-background-blueberry-verydark: #7abecc;
-  --component-listelements-border-neutral-ondark: #ffffff;
-  --component-listelements-background-cherry-verydark: #e39376;
-  --color-notification-background-info-hover: #cae7ed;
-  --color-notification-background-info-active: #afdae3;
-  --color-notification-background-error-hover: #f7e1d2;
-  --color-notification-background-error-active: #eec0a5;
-  --color-notification-background-warning-hover: #fcf2bf;
-  --color-notification-background-warning-active: #f9ea9f;
-  --color-notification-background-success-hover: #c2edd6;
-  --color-notification-background-success-active: #9de2bf;
-  --color-lightbox-background-transparent-ondark-hover: #00000026;
-  --color-lightbox-background-transparent-ondark-hoverselected: #000000bf;
-  --component-lightbox-background-transparent-ondark-hover: #00000026;
-  --component-lightbox-background-transparent-ondark-hoverselected: #000000bf;
-}
-/*$vite$:1*/