@norges-domstoler/dds-components 5.4.0 → 5.5.0

package/dist/components/Typography/Typography.utils.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+import { TypographyType, TypographyHeadingType, InlineElement, TypographyInteractionStyling, StaticTypographyType } from './Typography/Typography.types';
+export declare const getElementType: (element: string) => ElementType;
+export declare const isHeading: (type: TypographyType) => type is TypographyHeadingType;
+export declare const inlineElements: ElementType[];
+export declare const isInlineElement: (as: ElementType) => as is InlineElement;
+export declare const getAdditionalFontStyle: (bold?: boolean, italic?: boolean, underline?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getMarginStyling: (typographyType: TypographyType, element: ElementType, withMargins?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getAnchorStyling: (external?: boolean, interactionStyling?: TypographyInteractionStyling, typographyType?: StaticTypographyType, withMargins?: boolean) => import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Typography/Typography.utils.js

@@ -0,0 +1,75 @@
+import { css } from 'styled-components';
+import { typographyTokens } from './Typography.tokens.js';
+import { focusVisibleLinkTransitionValue, focusVisibleLink } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import '../../helpers/styling/selection.js';
+
+var getElementType = function getElementType(element) {
+  switch (element) {
+    case 'a':
+      return 'a';
+
+    case 'headingSans01':
+      return 'h6';
+
+    case 'headingSans02':
+      return 'h5';
+
+    case 'headingSans03':
+      return 'h4';
+
+    case 'headingSans04':
+      return 'h3';
+
+    case 'headingSans05':
+      return 'h2';
+
+    case 'headingSans06':
+    case 'headingSans07':
+    case 'headingSans08':
+      return 'h1';
+
+    case 'supportingStyleLabel01':
+      return 'label';
+
+    case 'bodySans01':
+    case 'bodySans02':
+    case 'bodySans03':
+    case 'bodySans04':
+    case 'bodySerif01':
+    case 'bodySerif02':
+    case 'bodySerif03':
+    case 'bodySerif04':
+    case 'leadSans01':
+    case 'leadSans02':
+    case 'leadSans03':
+    case 'leadSans04':
+    case 'leadSans05':
+    case 'supportingStyleInputText01':
+    case 'supportingStyleInputText02':
+    case 'supportingStyleInputText03':
+    case 'supportingStyleHelperText01':
+    case 'supportingStylePlaceholderText01':
+    case 'supportingStyleTiny01':
+    case 'supportingStyleTiny02':
+    default:
+      return 'p';
+  }
+};
+var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
+var isInlineElement = function isInlineElement(as) {
+  return inlineElements.indexOf(as) !== -1;
+};
+var getAdditionalFontStyle = function getAdditionalFontStyle(bold, italic, underline) {
+  return css(["", " ", " ", ""], bold && css(["font-weight:", ";"], typographyTokens.style.bold.fontWeight), italic && css(["font-style:italic;"]), underline && css(["text-decoration:underline;"]));
+};
+var getMarginStyling = function getMarginStyling(typographyType, element, withMargins) {
+  return withMargins ? css(["", " margin-top:", ";margin-bottom:", ";", ""], isInlineElement(element) && element !== 'a' && css(["display:block;"]), typographyTokens.typographyType[typographyType].margins.marginTop, typographyTokens.typographyType[typographyType].margins.marginBottom, css(["padding-top:", ";"], typographyTokens.typographyType[typographyType].margins.paddingTop)) : css(["margin:0;"]);
+};
+var getAnchorStyling = function getAnchorStyling(external, interactionStyling, typographyType, withMargins) {
+  return css(["", " width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? css(["", ";color:", ";", ""], typographyTokens.typographyType[typographyType].base.font, typographyTokens.typographyType[typographyType].base.color, getMarginStyling(typographyType, 'a', withMargins)) : css(["font:inherit;color:", ";", ""], typographyTokens.typographyType.a.base.color, getMarginStyling('a', 'a', withMargins)), focusVisibleLinkTransitionValue, external ? css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap) : '', typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
+};
+
+export { getAdditionalFontStyle, getAnchorStyling, getElementType, getMarginStyling, inlineElements, isInlineElement };

package/dist/components/Typography/index.d.ts

@@ -1,2 +1,7 @@
 export * from './Typography';
-export * from './Typography.types';
+export * from './Label';
+export * from './Paragraph';
+export * from './Heading';
+export * from './Link';
+export * from './Legend';
+export * from './Caption';

package/dist/components/Typography/stories/Examples.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Article: () => JSX.Element;

package/dist/components/Typography/stories/TypographyComponents.stories.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+    title: string;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        bold: {
+            control: {
+                type: string;
+            };
+        };
+        italic: {
+            control: {
+                type: string;
+            };
+        };
+        underline: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const ComponentsOverview: () => JSX.Element;

package/dist/components/Typography/{Body.stories.d.ts → stories/TypographyTypes.stories.d.ts}

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
+    component: import("react").ForwardRefExoticComponent<import("..").TypographyProps & import("react").RefAttributes<HTMLElement>>;
 };
 export default _default;
 export declare const Body: () => JSX.Element;

package/dist/helpers/Input/Input.styles.js

@@ -1,12 +1,20 @@
 import styled, { css } from 'styled-components';
 import { inputTokens } from './Input.tokens.js';
-import { typographyTokens } from '../../components/Typography/Typography.tokens.js';
-import { Typography } from '../../components/Typography/Typography.js';
+import { Typography } from '../../components/Typography/Typography/Typography.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'react';
+import '../../components/Typography/Link/Link.js';
+import '../styling/focusVisible.js';
+import '../styling/hover.js';
+import '../styling/focus.js';
+import '../styling/danger.js';
+import { selection } from '../styling/selection.js';
 
 var Input = styled.input.withConfig({
   displayName: "Inputstyles__Input",
   componentId: "sc-1oz9x8w-0"
-})(["", " width:100%;top:0;left:0;margin:0;padding:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}&:hover:enabled:read-write{", "}"], inputTokens.baseInput.base, typographyTokens.selection.base, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
+})(["", " width:100%;top:0;left:0;margin:0;padding:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}&:hover:enabled:read-write{", "}"], inputTokens.baseInput.base, selection, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
 var StatefulInput = styled(Input).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"

package/dist/helpers/Input/Input.tokens.js

@@ -1,7 +1,10 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import { focusInputfield, focusDangerInputfield } from '../styling/focus.js';
+import 'styled-components';
+import '../styling/focusVisible.js';
 import { hoverInputfield, hoverDangerInputfield } from '../styling/hover.js';
+import { focusInputfield, focusDangerInputfield } from '../styling/focus.js';
 import { dangerInputfield } from '../styling/danger.js';
+import '../styling/selection.js';
 
 var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,

package/dist/helpers/Paper/Paper.js

@@ -1,10 +1,14 @@
 import styled from 'styled-components';
-import { typographyTokens } from '../../components/Typography/Typography.tokens.js';
+import '../styling/focusVisible.js';
+import '../styling/hover.js';
+import '../styling/focus.js';
+import '../styling/danger.js';
+import { selection } from '../styling/selection.js';
 import { paperTokens } from './Paper.tokens.js';
 
 var Paper = styled.div.withConfig({
   displayName: "Paper",
   componentId: "sc-mrbi8q-0"
-})(["box-sizing:border-box;margin:0;&::selection,*::selection{", "}", ""], typographyTokens.selection.base, paperTokens.base);
+})(["box-sizing:border-box;margin:0;&::selection,*::selection{", "}", ""], selection, paperTokens.base);
 
 export { Paper };

package/dist/hooks/useScreenSize.js

@@ -0,0 +1,17 @@
+import 'react';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var breakpoints = ddsBaseTokens.breakpoints;
+var ScreenSize;
+
+(function (ScreenSize) {
+  ScreenSize[ScreenSize["XSmall"] = 0] = "XSmall";
+  ScreenSize[ScreenSize["Small"] = 1] = "Small";
+  ScreenSize[ScreenSize["Medium"] = 2] = "Medium";
+  ScreenSize[ScreenSize["Large"] = 3] = "Large";
+  ScreenSize[ScreenSize["XLarge"] = 4] = "XLarge";
+})(ScreenSize || (ScreenSize = {}));
+
+[[ScreenSize.XLarge, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXl, ")")], [ScreenSize.Large, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointLg, ")")], [ScreenSize.Medium, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointMd, ")")], [ScreenSize.Small, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointSm, ")")], [ScreenSize.XSmall, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXs, ")")]];
+
+export { ScreenSize };

package/dist/index.js

@@ -9,7 +9,13 @@ export { Select, createSelectOptions, searchFilter } from './components/Select/S
 export { GlobalMessage } from './components/GlobalMessage/GlobalMessage.js';
 export { LocalMessage } from './components/LocalMessage/LocalMessage.js';
 export { Search } from './components/Search/Search.js';
-export { Typography, getTextColor, inlineElements, isTextColor } from './components/Typography/Typography.js';
+export { Typography } from './components/Typography/Typography/Typography.js';
+export { Label } from './components/Typography/Label/Label.js';
+export { Paragraph } from './components/Typography/Paragraph/Paragraph.js';
+export { Heading } from './components/Typography/Heading/Heading.js';
+export { Link } from './components/Typography/Link/Link.js';
+export { Legend } from './components/Typography/Legend/Legend.js';
+export { Caption } from './components/Typography/Caption/Caption.js';
 export { Table } from './components/Table/Table.js';
 export { Body } from './components/Table/Body.js';
 export { Head } from './components/Table/Head.js';

package/dist/types/BaseComponentProps.d.ts

@@ -10,10 +10,10 @@ import { HTMLAttributes, PropsWithChildren } from 'react';
  * @template TOtherProps Andre props komponenten skal eksponere til konsumenter.
  * @template THTMLAttributesProps Standard `HTMLAttributes<T>` men kan overstyres for f.eks knapper hvis man trenger en annen basetype for `htmlProps`.
  */
-export declare type BaseComponentProps<TElement extends Element, TOtherProps extends Record<string, unknown> = Record<string, unknown>, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = {
+export declare type BaseComponentProps<TElement extends Element, TOtherProps extends Record<string, unknown> = Record<string, unknown>, THTMLAttributesProps extends HTMLAttributes<TElement> = HTMLAttributes<TElement>> = Pick<THTMLAttributesProps, 'id' | 'className'> & TOtherProps & {
     /**Ekstra HTML-attributter som vil settes på elementet som genereres. Untatt `id` og `className` som settes på toppnivå. */
     htmlProps?: THTMLAttributesProps;
-} & Pick<THTMLAttributesProps, 'id' | 'className'> & TOtherProps;
+};
 /**
  * Utvidelese av {@link BaseComponentProps} med prop for `children`.
  *

package/dist/utils/color.d.ts

@@ -1,6 +1,30 @@
+import { Property } from 'csstype';
 export declare type ColorAlphaFormat = 'hex8' | 'decimal';
 export declare const convertAlpha: (value: number | string, typeFrom: ColorAlphaFormat, typeTo: ColorAlphaFormat) => string | number | undefined;
 export declare const hexToRGBA: (hex: string) => string;
 export declare const addAlphaToRGB: (rgb: string, alpha: number | string) => string;
 export declare const RGBToHex: (value: string) => string;
 export declare const changeRGBAAlpha: (value: string, alpha: number) => string;
+export declare const textColors: {
+    interactive: string;
+    primary: string;
+    danger: string;
+    success: string;
+    warning: string;
+    onLight: string;
+    onDark: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+};
+export declare type DDSTextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare const textColorsArray: string[];
+export declare type TextColor = DDSTextColor | Property.Color;
+export declare function isTextColor(color: string): color is DDSTextColor;
+export declare const getTextColor: (color: TextColor) => string;

package/dist/utils/color.js

@@ -1,3 +1,7 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors;
+var textDefault = ddsReferenceTokens.textDefault;
 var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
   if (value.slice(0, 5) !== 'rgba(' || value.slice(-1) !== ')') {
     return '';
@@ -5,5 +9,31 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
 
   return value.replace(/[\d\.]+\)$/g, alpha.toString() + ')');
 };
+var textColors = {
+  interactive: colors.DdsColorInteractiveBase,
+  primary: colors.DdsColorPrimaryBase,
+  danger: colors.DdsColorDangerBase,
+  success: colors.DdsColorSuccessBase,
+  warning: colors.DdsColorWarningBase,
+  onLight: textDefault.textColor,
+  onDark: colors.DdsColorNeutralsWhite,
+  gray1: colors.DdsColorNeutralsGray1,
+  gray2: colors.DdsColorNeutralsGray2,
+  gray3: colors.DdsColorNeutralsGray3,
+  gray4: colors.DdsColorNeutralsGray4,
+  gray5: colors.DdsColorNeutralsGray5,
+  gray6: colors.DdsColorNeutralsGray6,
+  gray7: colors.DdsColorNeutralsGray7,
+  gray8: colors.DdsColorNeutralsGray8,
+  gray9: colors.DdsColorNeutralsGray9
+};
+var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
+function isTextColor(color) {
+  return textColorsArray.indexOf(color) !== -1;
+}
+var getTextColor = function getTextColor(color) {
+  if (isTextColor(color)) return textColors[color];
+  return color;
+};
 
-export { changeRGBAAlpha };
+export { changeRGBAAlpha, getTextColor, isTextColor, textColors, textColorsArray };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-node-resolve": "^14.1.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
@@ -87,7 +87,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-sass": "^1.2.13",
-    "rollup-plugin-typescript2": "^0.33.0",
+    "rollup-plugin-typescript2": "^0.34.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4"
   },

package/dist/cjs/components/Typography/Examples.stories.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
-};
-export default _default;
-export declare const Article: () => JSX.Element;
-export declare const Link: () => JSX.Element;

package/dist/cjs/components/Typography/Typography.d.ts

@@ -1,49 +0,0 @@
-import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
-import { CSSObject } from 'styled-components';
-import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
-import { BaseComponentProps } from '../../types';
-export declare const inlineElements: ElementType[];
-export declare function isTextColor(color: string): color is TextColor;
-export declare const getTextColor: (color: TextColor | string) => string;
-export declare type TypographyInteractionProps = {
-    hover?: CSSObject;
-    active?: CSSObject;
-};
-declare type BaseTypographyProps = PropsWithChildren<{
-    /**HTML tag som skal brukes istedenfor default definert via `typographyType`.  */
-    as?: ElementType;
-    /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa. Brukes hovedsakelig i artikler og lignende. **OBS!** har forskjellig virkning på ulike typografityper. `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens `supportingStyles` får margin topp og bunn. */
-    withMargins?: boolean;
-    /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens`. */
-    color?: TextColor | string;
-    /**Setter `bold` styling. */
-    bold?: boolean;
-    /**Setter `italic` styling. */
-    italic?: boolean;
-    /**Setter en linje under. */
-    underline?: boolean;
-    /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
-    interactionProps?: TypographyInteractionProps;
-}> & Pick<HTMLAttributes<HTMLElement>, 'style'>;
-declare type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, BaseTypographyProps & {
-    /**nativ `href`-prop ved `typographyType='a'`.  */
-    href?: string | undefined;
-    /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
-    externalLink?: boolean;
-    /**nativ `target`-prop ved `typographyType='a'`.  */
-    target?: string;
-}, AnchorHTMLAttributes<HTMLAnchorElement>>;
-declare type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, BaseTypographyProps, HTMLAttributes<HTMLLabelElement>>;
-declare type OtherTypographyProps = BaseComponentProps<HTMLElement, BaseTypographyProps, HTMLAttributes<HTMLElement>>;
-export declare type TypographyProps = ({
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: AnchorTypographyType;
-} & AnchorTypographyProps) | ({
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: LabelTypographyType;
-} & LabelTypographyProps) | ({
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: OtherTypographyType;
-} & OtherTypographyProps);
-export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
-export {};

package/dist/cjs/components/Typography/Typography.types.d.ts

@@ -1,13 +0,0 @@
-declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
-declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
-export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
-declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
-declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
-declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
-export declare type AnchorTypographyType = 'a';
-export declare type LabelTypographyType = 'supportingStyleLabel01';
-export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
-export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
-export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
-export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
-export {};

package/dist/components/Typography/Examples.stories.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
-};
-export default _default;
-export declare const Article: () => JSX.Element;
-export declare const Link: () => JSX.Element;

package/dist/components/Typography/Typography.d.ts

@@ -1,49 +0,0 @@
-import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
-import { CSSObject } from 'styled-components';
-import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
-import { BaseComponentProps } from '../../types';
-export declare const inlineElements: ElementType[];
-export declare function isTextColor(color: string): color is TextColor;
-export declare const getTextColor: (color: TextColor | string) => string;
-export declare type TypographyInteractionProps = {
-    hover?: CSSObject;
-    active?: CSSObject;
-};
-declare type BaseTypographyProps = PropsWithChildren<{
-    /**HTML tag som skal brukes istedenfor default definert via `typographyType`.  */
-    as?: ElementType;
-    /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa. Brukes hovedsakelig i artikler og lignende. **OBS!** har forskjellig virkning på ulike typografityper. `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens `supportingStyles` får margin topp og bunn. */
-    withMargins?: boolean;
-    /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens`. */
-    color?: TextColor | string;
-    /**Setter `bold` styling. */
-    bold?: boolean;
-    /**Setter `italic` styling. */
-    italic?: boolean;
-    /**Setter en linje under. */
-    underline?: boolean;
-    /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
-    interactionProps?: TypographyInteractionProps;
-}> & Pick<HTMLAttributes<HTMLElement>, 'style'>;
-declare type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, BaseTypographyProps & {
-    /**nativ `href`-prop ved `typographyType='a'`.  */
-    href?: string | undefined;
-    /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
-    externalLink?: boolean;
-    /**nativ `target`-prop ved `typographyType='a'`.  */
-    target?: string;
-}, AnchorHTMLAttributes<HTMLAnchorElement>>;
-declare type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, BaseTypographyProps, HTMLAttributes<HTMLLabelElement>>;
-declare type OtherTypographyProps = BaseComponentProps<HTMLElement, BaseTypographyProps, HTMLAttributes<HTMLElement>>;
-export declare type TypographyProps = ({
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: AnchorTypographyType;
-} & AnchorTypographyProps) | ({
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: LabelTypographyType;
-} & LabelTypographyProps) | ({
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: OtherTypographyType;
-} & OtherTypographyProps);
-export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
-export {};