@norges-domstoler/dds-components 5.4.0 → 5.5.0

package/dist/components/Tag/Tag.stories.d.ts

@@ -1,11 +1,11 @@
 import { TagProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
         text?: string | undefined;
         purpose?: import("./Tag").TagPurpose | undefined;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
     } & import("react").RefAttributes<HTMLSpanElement>>;
     argTypes: {
         text: {

package/dist/components/TextInput/CharCounter.js

@@ -2,9 +2,10 @@ import { __rest } from 'tslib';
 import { jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
 import styled from 'styled-components';
-import { charCounterTokens } from './CharCounter.tokens.js';
-import { Typography } from '../Typography/Typography.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography/Typography.js';
+import '../Typography/Link/Link.js';
+import { charCounterTokens } from './CharCounter.tokens.js';
 
 var Wrapper = styled(Typography).withConfig({
   displayName: "CharCounter__Wrapper",

package/dist/components/TextInput/TextInput.js

@@ -3,12 +3,18 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect, useId } from 'react';
 import { textInputTokens } from './TextInput.tokens.js';
-import CharCounter from './CharCounter.js';
-import { TextArea, Label, MessageContainer } from './TextInput.styles.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
 import { OuterInputContainer, InputContainer, StatefulInput } from '../../helpers/Input/Input.styles.js';
-import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
+import CharCounter from './CharCounter.js';
+import { TextArea, Label, MessageContainer } from './TextInput.styles.js';
+import { spaceSeparatedIdListGenerator, derivativeIdGenerator } from '../../utils/idGenerator.js';
+import '../../utils/color.js';
 
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,

package/dist/components/TextInput/TextInput.styles.js

@@ -1,8 +1,16 @@
 import styled, { css } from 'styled-components';
 import { textInputTokens } from './TextInput.tokens.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import 'react/jsx-runtime';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import '../../helpers/HiddenInput/HiddenInput.js';
 import { StatefulInput, Label as Label$1 } from '../../helpers/Input/Input.styles.js';
-import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { inputTokens } from '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
+import '../ScrollableContainer/Scrollbar.js';
+import '../ScrollableContainer/ScrollableContainer.js';
+import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 
 var TextArea = styled(StatefulInput).withConfig({
   displayName: "TextInputstyles__TextArea",

package/dist/components/ToggleBar/ToggleBar.js

@@ -3,12 +3,18 @@ import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { ToggleBarContext } from './ToggleBar.context.js';
-import { toggleBarTokens } from './ToggleBar.tokens.js';
+import '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
-import { combineHandlers } from '../../utils/combineHandlers.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { Typography } from '../Typography/Typography.js';
+import { combineHandlers } from '../../utils/combineHandlers.js';
+import '../../utils/color.js';
+import { Typography } from '../Typography/Typography/Typography.js';
+import '../Typography/Link/Link.js';
+import { ToggleBarContext } from './ToggleBar.context.js';
+import { toggleBarTokens } from './ToggleBar.tokens.js';
 
 var OuterContainer = styled.div.withConfig({
   displayName: "ToggleBar__OuterContainer",

package/dist/components/ToggleBar/ToggleBar.tokens.js

@@ -1,5 +1,6 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import { calculateHeightWithLineHeight } from '../../utils/text.js';
+import '../../utils/color.js';
 
 var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,

package/dist/components/ToggleBar/ToggleRadio.d.ts

@@ -8,12 +8,12 @@ export declare type ToggleRadioProps = BaseComponentProps<HTMLInputElement, {
     /**Ikonet som vises i komponenten. */
     icon?: SvgIcon;
 } & PickedInputHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof PickedInputHTMLAttributes>>;
-export declare const ToggleRadio: import("react").ForwardRefExoticComponent<{
-    htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "checked" | "value" | "onChange" | "aria-label" | "aria-labelledby"> | undefined;
-} & Pick<Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "checked" | "value" | "onChange" | "aria-label" | "aria-labelledby">, "className" | "id"> & {
+export declare const ToggleRadio: import("react").ForwardRefExoticComponent<Pick<Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "checked" | "value" | "onChange" | "aria-label" | "aria-labelledby">, "className" | "id"> & {
     /**Ledetekst som vises i komponenten. */
     label?: string | undefined;
     /**Ikonet som vises i komponenten. */
     icon?: SvgIcon | undefined;
-} & PickedInputHTMLAttributes & import("react").RefAttributes<HTMLInputElement>>;
+} & PickedInputHTMLAttributes & {
+    htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "checked" | "value" | "onChange" | "aria-label" | "aria-labelledby"> | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/ToggleBar/ToggleRadio.js

@@ -1,11 +1,17 @@
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
-import { useToggleBarContext } from './ToggleBar.context.js';
-import { Label, Content } from './ToggleRadio.styles.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Icon } from '../Icon/Icon.js';
+import { useToggleBarContext } from './ToggleBar.context.js';
+import { Label, Content } from './ToggleRadio.styles.js';
 
 /**Beregner om en ToggleRadio skal være checked eller ikke.
  *

package/dist/components/ToggleBar/ToggleRadio.styles.js

@@ -1,7 +1,18 @@
 import { toggleBarTokens } from './ToggleBar.tokens.js';
 import styled, { css } from 'styled-components';
 import { focusVisibleTransitionValue, focusVisible } 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';
+import '../../helpers/Backdrop/Backdrop.js';
+import 'react/jsx-runtime';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 
 var content = toggleBarTokens.content,
     label = toggleBarTokens.label;

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -7,11 +7,11 @@ export declare type ToggleButtonProps = BaseComponentProps<HTMLInputElement, {
     /** Ikon. */
     icon?: SvgIcon;
 }, InputHTMLAttributes<HTMLInputElement>>;
-export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
-    htmlProps?: InputHTMLAttributes<HTMLInputElement> | undefined;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
     /**Ledetekst for inputelementet. */
     label?: string | undefined;
     /** Ikon. */
     icon?: SvgIcon | undefined;
+} & {
+    htmlProps?: InputHTMLAttributes<HTMLInputElement> | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ToggleButton/ToggleButton.js

@@ -2,18 +2,27 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
 import styled from 'styled-components';
+import { Icon } from '../Icon/Icon.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import { selection } from '../../helpers/styling/selection.js';
 import { buttonTokens } from '../Button/Button.tokens.js';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { toggleButtonTokens } from './ToggleButton.tokens.js';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
-import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { Icon } from '../Icon/Icon.js';
+import '../../helpers/Backdrop/Backdrop.js';
+import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
+import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
+import '../../helpers/Input/Input.styles.js';
+import '../../helpers/Input/Input.tokens.js';
+import '../../helpers/Paper/Paper.js';
+import '../../helpers/RequiredMarker/RequiredMarker.js';
 
 var Content = styled.span.withConfig({
   displayName: "ToggleButton__Content",
   componentId: "sc-ya01sa-0"
-})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;}", ";cursor:pointer;", " width:fit-content;", " ", " ", " &::selection,*::selection{", "}&:hover{", "}"], focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
+})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;}", ";cursor:pointer;", " width:fit-content;", " ", " ", " &::selection,*::selection{", "}&:hover{", "}"], focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, selection, toggleButtonTokens.hover.base);
 var Container = styled.label.withConfig({
   displayName: "ToggleButton__Container",
   componentId: "sc-ya01sa-1"

package/dist/components/ToggleButton/ToggleButton.stories.d.ts

@@ -1,11 +1,11 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: import("react").InputHTMLAttributes<HTMLInputElement> | undefined;
-    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
+    } & {
+        htmlProps?: import("react").InputHTMLAttributes<HTMLInputElement> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

package/dist/components/ToggleButton/ToggleButton.tokens.js

@@ -1,6 +1,11 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { checkboxTokens } from '../Checkbox/Checkbox.tokens.js';
+import 'styled-components';
 import { focusVisible } 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';
+import { checkboxTokens } from '../Checkbox/Checkbox.tokens.js';
 
 var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing;

package/dist/components/ToggleButton/ToggleButtonGroup.js

@@ -2,9 +2,10 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import styled, { css } from 'styled-components';
-import { toggleButtonTokens } from './ToggleButton.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { Typography } from '../Typography/Typography.js';
+import { Typography } from '../Typography/Typography/Typography.js';
+import '../Typography/Link/Link.js';
+import { toggleButtonTokens } from './ToggleButton.tokens.js';
 
 var Group = styled.div.withConfig({
   displayName: "ToggleButtonGroup__Group",

package/dist/components/Tooltip/Tooltip.d.ts

@@ -15,9 +15,7 @@ export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
     /**`id` for tooltip. */
     tooltipId?: string;
 } & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
-export declare const Tooltip: React.ForwardRefExoticComponent<{
-    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined; /**`id` for tooltip. */
-} & Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children">, "className" | "id"> & {
+export declare const Tooltip: React.ForwardRefExoticComponent<Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children">, "className" | "id"> & {
     /**Innhold i tooltip. */
     text: string;
     /**Plassering i forhold til anchor-elementet. */
@@ -28,5 +26,7 @@ export declare const Tooltip: React.ForwardRefExoticComponent<{
     delay?: number | undefined;
     /**`id` for tooltip. */
     tooltipId?: string | undefined;
-} & PickedHTMLAttributes & React.RefAttributes<HTMLDivElement>>;
+} & PickedHTMLAttributes & {
+    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Tooltip/Tooltip.js

@@ -2,13 +2,15 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
-import { Container, TooltipWrapper, ArrowWrapper, SvgArrow } from './Tooltip.styles.js';
-import { tooltipTokens } from './Tooltip.tokens.js';
-import { useFloatPosition } from '../../hooks/useFloatPosition.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
-import { combineHandlers } from '../../utils/combineHandlers.js';
+import { useFloatPosition } from '../../hooks/useFloatPosition.js';
+import '../../hooks/useScreenSize.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { combineHandlers } from '../../utils/combineHandlers.js';
+import '../../utils/color.js';
+import { Container, TooltipWrapper, ArrowWrapper, SvgArrow } from './Tooltip.styles.js';
+import { tooltipTokens } from './Tooltip.tokens.js';
 
 var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -1,9 +1,7 @@
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
-    } & Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
         placement?: import("../../hooks").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
@@ -13,6 +11,8 @@ declare const _default: {
         style?: import("react").CSSProperties | undefined;
         onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    } & {
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         text: {

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,7 +1,11 @@
 import styled from 'styled-components';
-import { typographyTokens } from '../Typography/Typography.tokens.js';
-import { tooltipTokens } from './Tooltip.tokens.js';
 import { visibilityTransition } from '../../helpers/styling/visibilityTransition.js';
+import '../../helpers/styling/focusVisible.js';
+import '../../helpers/styling/hover.js';
+import '../../helpers/styling/focus.js';
+import '../../helpers/styling/danger.js';
+import { selection } from '../../helpers/styling/selection.js';
+import { tooltipTokens } from './Tooltip.tokens.js';
 
 var SvgArrow = styled.svg.withConfig({
   displayName: "Tooltipstyles__SvgArrow",
@@ -18,7 +22,7 @@ var Container = styled.div.withConfig({
 var TooltipWrapper = styled.div.withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["&::selection{", "}", " width:fit-content;position:absolute;z-index:20;text-align:center;", ""], typographyTokens.selection.base, function (_ref) {
+})(["&::selection{", "}", " width:fit-content;position:absolute;z-index:20;text-align:center;", ""], selection, function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, tooltipTokens.wrapper.base);

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

@@ -0,0 +1,10 @@
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps } from '../Typography';
+export declare type CaptionProps = BaseComponentPropsWithChildren<HTMLTableCaptionElement, BaseTypographyProps>;
+export declare const Caption: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLTableCaptionElement>, "id" | "className"> & {
+    withMargins?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+    htmlProps?: import("react").HTMLAttributes<HTMLTableCaptionElement> | undefined;
+} & import("react").RefAttributes<HTMLTableCaptionElement>>;

package/dist/components/Typography/Caption/Caption.js

@@ -0,0 +1,23 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Caption = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = __rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    typographyType: "headingSans03",
+    as: "caption"
+  }, {
+    children: children
+  }));
+});
+
+export { Caption };

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

@@ -0,0 +1,28 @@
+import { CaptionProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & CaptionProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLTableCaptionElement>, "id" | "className"> & {
+        withMargins?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+        htmlProps?: import("react").HTMLAttributes<HTMLTableCaptionElement> | undefined;
+    } & import("react").RefAttributes<HTMLTableCaptionElement>>;
+    argTypes: {
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: StoryTProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Caption';

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

@@ -0,0 +1,21 @@
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps, TypographyHeadingType } from '../Typography';
+export declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export declare type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
+    /**Nivå på overskriften. Komponenten returnerer HTML heading element med dette nivået med default styling. */
+    level: HeadingLevel;
+    /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
+    typographyType?: TypographyHeadingType;
+} & BaseTypographyProps>;
+export declare const Heading: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHeadingElement>, "id" | "className"> & {
+    /**Nivå på overskriften. Komponenten returnerer HTML heading element med dette nivået med default styling. */
+    level: HeadingLevel;
+    /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
+    typographyType?: TypographyHeadingType | undefined;
+} & {
+    withMargins?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+    htmlProps?: import("react").HTMLAttributes<HTMLHeadingElement> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/Typography/Heading/Heading.js

@@ -0,0 +1,56 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var getHeadingElement = function getHeadingElement(level) {
+  return "h".concat(level);
+};
+
+var getDefaultTypographyType = function getDefaultTypographyType(h) {
+  switch (h) {
+    case 'h1':
+      return 'headingSans06';
+
+    case 'h2':
+      return 'headingSans05';
+
+    case 'h3':
+      return 'headingSans04';
+
+    case 'h4':
+      return 'headingSans03';
+
+    case 'h5':
+      return 'headingSans02';
+
+    case 'h6':
+      return 'headingSans01';
+
+    default:
+      return 'headingSans06';
+  }
+};
+
+var Heading = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      typographyType = props.typographyType,
+      level = props.level,
+      rest = __rest(props, ["id", "className", "htmlProps", "children", "typographyType", "level"]);
+
+  var headingElement = getHeadingElement(level);
+  var headingProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    typographyType: typographyType ? typographyType : getDefaultTypographyType(headingElement),
+    as: headingElement,
+    ref: ref
+  });
+  return jsx(Typography, Object.assign({}, headingProps, {
+    children: children
+  }));
+});
+
+export { Heading };

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

@@ -0,0 +1,37 @@
+import { HeadingProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & HeadingProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHeadingElement>, "id" | "className"> & {
+        level: import("./Heading").HeadingLevel;
+        typographyType?: import("..").TypographyHeadingType | undefined;
+    } & {
+        withMargins?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+        htmlProps?: import("react").HTMLAttributes<HTMLHeadingElement> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>>;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const Default: (args: StoryTProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Heading';

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

@@ -0,0 +1,13 @@
+import { LabelHTMLAttributes } from 'react';
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps } from '../Typography';
+declare type PickedHTMLAttributes = Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
+export declare type LabelProps = BaseComponentPropsWithChildren<HTMLLabelElement, BaseTypographyProps & PickedHTMLAttributes, Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof PickedHTMLAttributes>>;
+export declare const Label: import("react").ForwardRefExoticComponent<Pick<Omit<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "className" | "id"> & {
+    withMargins?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & PickedHTMLAttributes & {
+    htmlProps?: Omit<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> | undefined;
+} & import("react").RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/components/Typography/Label/Label.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Label = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      children = props.children,
+      rest = __rest(props, ["id", "className", "htmlProps", "children"]);
+
+  return jsx(Typography, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    ref: ref,
+    typographyType: "supportingStyleLabel01"
+  }, {
+    children: children
+  }));
+});
+
+export { Label };

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

@@ -0,0 +1,30 @@
+import { LabelProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & LabelProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").LabelHTMLAttributes<HTMLLabelElement>, "htmlFor">, "id" | "className"> & {
+        withMargins?: boolean | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+        htmlFor?: string | undefined;
+    } & {
+        htmlProps?: Omit<import("react").LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> | undefined;
+    } & import("react").RefAttributes<HTMLLabelElement>>;
+    argTypes: {
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: StoryTProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Label';

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

@@ -0,0 +1,10 @@
+import { BaseComponentPropsWithChildren } from '../../../types';
+import { BaseTypographyProps } from '../Typography';
+export declare type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps>;
+export declare const Legend: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLLegendElement>, "id" | "className"> & {
+    withMargins?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "style"> & {
+    htmlProps?: import("react").HTMLAttributes<HTMLLegendElement> | undefined;
+} & import("react").RefAttributes<HTMLLegendElement>>;