@norges-domstoler/dds-components 13.8.1 → 13.8.3

package/dist/components/Popover/PopoverGroup.js

@@ -1,62 +0,0 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useId, useRef, Children, isValidElement, cloneElement } from 'react';
-import { useOnKeyDown } from '@norges-domstoler/dds-core';
-
-var PopoverGroup = function PopoverGroup(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-    onCloseButtonClick = _ref.onCloseButtonClick,
-    onTriggerClick = _ref.onTriggerClick,
-    children = _ref.children,
-    popoverId = _ref.popoverId;
-  var _useState = useState(isOpen),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var generatedId = useId();
-  var uniquePopoverId = popoverId !== null && popoverId !== void 0 ? popoverId : "".concat(generatedId, "-popover");
-  var handleOnCloseButtonClick = function handleOnCloseButtonClick() {
-    setOpen(false);
-    onCloseButtonClick && onCloseButtonClick();
-  };
-  var handleOnTriggerClick = function handleOnTriggerClick() {
-    setOpen(!open);
-    onTriggerClick && onTriggerClick();
-  };
-  var buttonRef = useRef(null);
-  var popoverRef = useRef(null);
-  useOnKeyDown(['Esc', 'Escape'], function () {
-    var _a;
-    if (open) {
-      setOpen(false);
-      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  });
-  var handleClose = function handleClose() {
-    return setOpen(false);
-  };
-  var Children$1 = Children.map(children, function (child, childIndex) {
-    return /*#__PURE__*/isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
-      'aria-haspopup': 'dialog',
-      'aria-controls': uniquePopoverId,
-      'aria-expanded': open,
-      onClick: handleOnTriggerClick,
-      ref: buttonRef
-    }) : /*#__PURE__*/cloneElement(child, {
-      isOpen: open,
-      'aria-hidden': !open,
-      id: uniquePopoverId,
-      onCloseButtonClick: handleOnCloseButtonClick,
-      anchorElement: buttonRef.current,
-      ref: popoverRef,
-      onClose: handleClose
-    }));
-  });
-  return jsx(Fragment, {
-    children: Children$1
-  });
-};
-PopoverGroup.displayName = 'PopoverGroup';
-
-export { PopoverGroup };

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

@@ -1,2 +0,0 @@
-export * from './Popover';
-export * from './PopoverGroup';

package/dist/components/ProgressTracker/ProgressTracker.context.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-type ProgressTrackerContextType = {
-    activeStep: number;
-    handleStepChange?: (index: number) => void;
-};
-export declare const ProgressTrackerContext: import("react").Context<ProgressTrackerContextType>;
-export declare const useProgressTrackerContext: () => ProgressTrackerContextType;
-export {};

package/dist/components/ProgressTracker/ProgressTracker.context.js

@@ -1,10 +0,0 @@
-import { createContext, useContext } from 'react';
-
-var ProgressTrackerContext = /*#__PURE__*/createContext({
-  activeStep: 0
-});
-var useProgressTrackerContext = function useProgressTrackerContext() {
-  return useContext(ProgressTrackerContext);
-};
-
-export { ProgressTrackerContext, useProgressTrackerContext };

package/dist/components/ProgressTracker/ProgressTracker.d.ts

@@ -1,14 +0,0 @@
-import { ForwardRefExoticComponent } from 'react';
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-import { ProgressTrackerItem } from './ProgressTrackerItem';
-type ProgressTrackerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /** Indeksen til det aktive steget. */
-    activeStep?: number;
-    /** Ekstra logikk ved klikking på et steg. */
-    onStepChange?: (step: number) => void;
-}>;
-type ProgressTrackerComponent = ForwardRefExoticComponent<ProgressTrackerProps> & {
-    Item: typeof ProgressTrackerItem;
-};
-export declare const ProgressTracker: ProgressTrackerComponent;
-export {};

package/dist/components/ProgressTracker/ProgressTracker.js

@@ -1,93 +0,0 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { __rest } from 'tslib';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, useMemo, Children, isValidElement, cloneElement, Fragment } from 'react';
-import styled from 'styled-components';
-import { getBaseHTMLProps } from '@norges-domstoler/dds-core';
-import { ProgressTrackerContext } from './ProgressTracker.context.js';
-import { progressTrackerTokens } from './ProgressTracker.tokens.js';
-import { ProgressTrackerItem } from './ProgressTrackerItem.js';
-
-var ItemsWrapper = styled.ol.withConfig({
-  displayName: "ProgressTracker__ItemsWrapper",
-  componentId: "sc-v5htnb-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;gap:", ";margin:0;padding:0;"], progressTrackerTokens.itemsWrapper.gap);
-var ProgressTrackerConnector = styled.div.withConfig({
-  displayName: "ProgressTracker__ProgressTrackerConnector",
-  componentId: "sc-v5htnb-1"
-})(["margin-left:calc( (", " / 2) - (", " / 2) );height:", ";border-right:", " solid ", ";"], progressTrackerTokens.itemNumber.size, progressTrackerTokens.connector.width, progressTrackerTokens.connector.height, progressTrackerTokens.connector.width, progressTrackerTokens.connector.color);
-var ProgressTracker = function () {
-  var Res = /*#__PURE__*/forwardRef(function (props, ref) {
-    var id = props.id,
-      _props$activeStep = props.activeStep,
-      activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
-      onStepChange = props.onStepChange,
-      children = props.children,
-      className = props.className,
-      htmlProps = props.htmlProps,
-      rest = __rest(props, ["id", "activeStep", "onStepChange", "children", "className", "htmlProps"]);
-    var _useState = useState(activeStep),
-      _useState2 = _slicedToArray(_useState, 2),
-      thisActiveStep = _useState2[0],
-      setActiveStep = _useState2[1];
-    var handleChange = function handleChange(step) {
-      setActiveStep(step);
-      onStepChange && onStepChange(step);
-    };
-    useEffect(function () {
-      if (activeStep !== undefined && activeStep != thisActiveStep) {
-        setActiveStep(activeStep);
-      }
-    }, [activeStep, thisActiveStep]);
-    var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
-      ref: ref
-    });
-    var steps = useMemo(function () {
-      var validChildren = removeInvalidChildren(children);
-      var itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
-      var itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
-      return itemsWithConnectorsBetween;
-    }, [children]);
-    return jsx(ProgressTrackerContext.Provider, {
-      value: {
-        activeStep: thisActiveStep,
-        handleStepChange: handleChange
-      },
-      children: jsx("div", Object.assign({
-        role: "group",
-        "aria-label": "progress"
-      }, containerProps, {
-        children: jsx(ItemsWrapper, {
-          children: steps
-        })
-      }))
-    });
-  });
-  Res.Item = ProgressTrackerItem;
-  Res.displayName = 'ProgressTracker';
-  return Res;
-}();
-var removeInvalidChildren = function removeInvalidChildren(children) {
-  return Children.toArray(children).filter(isValidElement);
-};
-var passIndexPropToProgressTrackerItem = function passIndexPropToProgressTrackerItem(children) {
-  return Children.map(children, function (item, index) {
-    return /*#__PURE__*/cloneElement(item, Object.assign(Object.assign({}, item.props), {
-      index: index
-    }));
-  });
-};
-var intersperseItemsWithConnector = function intersperseItemsWithConnector(children) {
-  return Children.map(children, function (child, index) {
-    if (index === 0) {
-      return child;
-    }
-    return jsxs(Fragment, {
-      children: [jsx(ProgressTrackerConnector, {
-        "aria-hidden": true
-      }), child]
-    }, index);
-  });
-};
-
-export { ProgressTracker };

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

@@ -1,45 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-        activeStep?: number | undefined;
-        onStepChange?: ((step: number) => void) | undefined;
-    } & {
-        children?: import("react").ReactNode;
-    } & {
-        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-    }> & {
-        Item: {
-            (props: ({
-                onClick: (index: number) => void;
-            } & Pick<import("react").HTMLAttributes<HTMLButtonElement>, "className" | "id"> & {
-                active?: boolean | undefined;
-                completed?: boolean | undefined;
-                disabled?: boolean | undefined;
-                icon?: import("@norges-domstoler/dds-icons").SvgIcon | undefined;
-                index?: number | undefined;
-            } & {
-                children?: import("react").ReactNode;
-            } & {
-                htmlProps?: import("react").HTMLAttributes<HTMLButtonElement> | undefined;
-            }) | ({
-                onClick?: undefined;
-            } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-                active?: boolean | undefined;
-                completed?: boolean | undefined;
-                disabled?: boolean | undefined;
-                icon?: import("@norges-domstoler/dds-icons").SvgIcon | undefined;
-                index?: number | undefined;
-            } & {
-                children?: import("react").ReactNode;
-            } & {
-                htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-            })): import("react/jsx-runtime").JSX.Element;
-            displayName: string;
-        };
-    };
-};
-export default _default;
-export declare const Overview: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithIcons: () => import("react/jsx-runtime").JSX.Element;
-export declare const FutureStepsDisabled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressTracker/ProgressTracker.tokens.d.ts

@@ -1,72 +0,0 @@
-import { IconSize } from '@norges-domstoler/dds-icons';
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-export declare const typographyTypes: {
-    number: StaticTypographyType;
-    label: StaticTypographyType;
-};
-export declare const progressTrackerTokens: {
-    itemsWrapper: {
-        gap: string;
-    };
-    itemContentWrapper: {
-        gap: string;
-    };
-    connector: {
-        color: string;
-        height: string;
-        width: string;
-    };
-    itemNumber: {
-        size: string;
-        borderWidth: string;
-        iconSize: IconSize;
-        active: {
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
-        };
-        completed: {
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
-            hover: {
-                borderColor: string;
-                color: string;
-                backgroundColor: string;
-            };
-        };
-        inactive: {
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
-            hover: {
-                borderColor: string;
-                color: string;
-                backgroundColor: string;
-            };
-        };
-        disabled: {
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
-        };
-    };
-    itemText: {
-        textDecoration: string;
-        active: {
-            color: string;
-            textDecorationColor: string;
-        };
-        inactive: {
-            color: string;
-            textDecorationColor: string;
-            hover: {
-                textDecorationColor: string;
-            };
-        };
-        disabled: {
-            color: string;
-            textDecoration: string;
-        };
-    };
-};

package/dist/components/ProgressTracker/ProgressTracker.tokens.js

@@ -1,81 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var colors = ddsBaseTokens.colors,
-  spacing = ddsBaseTokens.spacing;
-var typographyTypes = {
-  number: 'bodySans01',
-  label: 'bodySans03'
-};
-var itemsWrapper = {
-  gap: spacing.SizesDdsSpacingLocalX0125
-};
-var itemContentWrapper = {
-  gap: spacing.SizesDdsSpacingLocalX05
-};
-var connector = {
-  color: colors.DdsColorNeutralsGray5,
-  height: '18px',
-  width: '1px'
-};
-var itemNumber = {
-  size: '28px',
-  borderWidth: '2px',
-  iconSize: 'small',
-  active: {
-    borderColor: colors.DdsColorInteractiveBase,
-    color: colors.DdsColorNeutralsWhite,
-    backgroundColor: colors.DdsColorInteractiveBase
-  },
-  completed: {
-    borderColor: colors.DdsColorInteractiveBase,
-    color: colors.DdsColorNeutralsWhite,
-    backgroundColor: colors.DdsColorInteractiveBase,
-    hover: {
-      borderColor: colors.DdsColorInteractiveDark,
-      color: colors.DdsColorNeutralsWhite,
-      backgroundColor: colors.DdsColorInteractiveDark
-    }
-  },
-  inactive: {
-    borderColor: colors.DdsColorInteractiveBase,
-    color: colors.DdsColorInteractiveBase,
-    backgroundColor: colors.DdsColorNeutralsWhite,
-    hover: {
-      borderColor: colors.DdsColorInteractiveBase,
-      color: colors.DdsColorInteractiveBase,
-      backgroundColor: colors.DdsColorInteractiveLightest
-    }
-  },
-  disabled: {
-    borderColor: colors.DdsColorNeutralsGray5,
-    color: colors.DdsColorNeutralsGray5,
-    backgroundColor: colors.DdsColorNeutralsWhite
-  }
-};
-var itemText = {
-  textDecoration: 'underline',
-  active: {
-    color: colors.DdsColorNeutralsGray9,
-    textDecorationColor: colors.DdsColorNeutralsGray9
-  },
-  inactive: {
-    color: colors.DdsColorNeutralsGray7,
-    textDecorationColor: 'transparent',
-    hover: {
-      textDecorationColor: colors.DdsColorNeutralsGray7
-    }
-  },
-  disabled: {
-    color: colors.DdsColorNeutralsGray6,
-    textDecoration: 'none'
-  }
-};
-var progressTrackerTokens = {
-  itemsWrapper: itemsWrapper,
-  itemContentWrapper: itemContentWrapper,
-  connector: connector,
-  itemNumber: itemNumber,
-  itemText: itemText
-};
-
-export { progressTrackerTokens, typographyTypes };

package/dist/components/ProgressTracker/ProgressTrackerItem.d.ts

@@ -1,27 +0,0 @@
-import { SvgIcon } from '@norges-domstoler/dds-icons';
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-type BaseItemProps = {
-    /** Om steget er valgt eller ikke. Settes av konsument. */
-    active?: boolean;
-    /** Om steget er ferdig eller ikke. Settes av konsument. */
-    completed?: boolean;
-    /** Om steget skal være disabled. Settes av konsument.
-     * @default false
-     */
-    disabled?: boolean;
-    /** Ikon som skal vises istedenfor stegnummeret. Settes av konument. */
-    icon?: SvgIcon;
-    /** Indeksen til steget. NB! Denne settes automatisk av `<ProgressTracker />` og skal ikke settes manuelt. */
-    index?: number;
-};
-type ProgressTrackerItemProps = ({
-    /** Click-handler som gjør det mulig for bruker å klikke på steget for å navigere. Valgfri. */
-    onClick: (index: number) => void;
-} & BaseComponentPropsWithChildren<HTMLButtonElement, BaseItemProps>) | ({
-    onClick?: undefined;
-} & BaseComponentPropsWithChildren<HTMLDivElement, BaseItemProps>);
-export declare const ProgressTrackerItem: {
-    (props: ProgressTrackerItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/dist/components/ProgressTracker/ProgressTrackerItem.js

@@ -1,125 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { Icon, CheckIcon } from '@norges-domstoler/dds-icons';
-import { getFontStyling } from '@norges-domstoler/dds-typography';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-import { useProgressTrackerContext } from './ProgressTracker.context.js';
-import { typographyTypes, progressTrackerTokens } from './ProgressTracker.tokens.js';
-import { focusVisibleTransitionValue, focusVisible } from '@norges-domstoler/dds-form';
-
-var toItemState = function toItemState(active, completed, disabled) {
-  if (disabled) {
-    return 'disabled';
-  }
-  if (active) {
-    return completed ? 'activeCompleted' : 'activeIncomplete';
-  } else {
-    return completed ? 'inactiveCompleted' : 'inactiveIncomplete';
-  }
-};
-var itemNumber = progressTrackerTokens.itemNumber,
-  itemText = progressTrackerTokens.itemText,
-  itemContentWrapper = progressTrackerTokens.itemContentWrapper;
-var ItemWrapper = styled.li.withConfig({
-  displayName: "ProgressTrackerItem__ItemWrapper",
-  componentId: "sc-1j9qaj9-0"
-})(["flex:1;position:relative;display:flex;justify-content:center;"]);
-var ItemNumber = styled.div.withConfig({
-  displayName: "ProgressTrackerItem__ItemNumber",
-  componentId: "sc-1j9qaj9-1"
-})(["transition:background-color 0.2s,border-color 0.2s,color 0.2s;border-radius:50%;border:", " solid;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;", " font-weight:600;", ""], itemNumber.borderWidth, itemNumber.size, itemNumber.size, getFontStyling(typographyTypes.number), function (_ref) {
-  var state = _ref.state;
-  switch (state) {
-    case 'activeIncomplete':
-      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.active.borderColor, itemNumber.active.color, itemNumber.active.backgroundColor);
-    case 'activeCompleted':
-      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
-    case 'inactiveCompleted':
-      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.completed.borderColor, itemNumber.completed.color, itemNumber.completed.backgroundColor);
-    case 'inactiveIncomplete':
-      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.inactive.borderColor, itemNumber.inactive.color, itemNumber.inactive.backgroundColor);
-    case 'disabled':
-      return css(["border-color:", ";color:", ";background-color:", ";"], itemNumber.disabled.borderColor, itemNumber.disabled.color, itemNumber.disabled.backgroundColor);
-  }
-});
-var ItemText = styled.div.withConfig({
-  displayName: "ProgressTrackerItem__ItemText",
-  componentId: "sc-1j9qaj9-2"
-})(["", " text-align:start;text-decoration:", ";transition:text-decoration-color 0.2s;", ";"], getFontStyling(typographyTypes.label), itemText.textDecoration, function (_ref2) {
-  var state = _ref2.state;
-  switch (state) {
-    case 'activeCompleted':
-    case 'activeIncomplete':
-      return css(["color:", ";text-decoration-color:", ";"], itemText.active.color, itemText.active.textDecorationColor);
-    case 'inactiveCompleted':
-    case 'inactiveIncomplete':
-      return css(["color:", ";text-decoration-color:", ";"], itemText.inactive.color, itemText.inactive.textDecorationColor);
-    case 'disabled':
-      return css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
-  }
-});
-var ItemContentWrapper = styled.button.withConfig({
-  displayName: "ProgressTrackerItem__ItemContentWrapper",
-  componentId: "sc-1j9qaj9-3"
-})(["background:none;border:none;margin:0;padding:0;display:grid;grid-template-columns:", " 1fr;justify-content:flex-start;align-items:center;font-family:inherit;gap:", ";transition:", ";:focus-visible{", "}", ""], itemNumber.size, itemContentWrapper.gap, focusVisibleTransitionValue, focusVisible, function (_ref3) {
-  var state = _ref3.state;
-  return state !== 'disabled' && css(["cursor:pointer;"]);
-});
-var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed, index) {
-  return "".concat(index + 1, ", ").concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
-};
-var ProgressTrackerItem = function ProgressTrackerItem(props) {
-  var _props$index = props.index,
-    index = _props$index === void 0 ? 0 : _props$index,
-    _props$completed = props.completed,
-    completed = _props$completed === void 0 ? false : _props$completed,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    icon = props.icon,
-    children = props.children;
-  var _useProgressTrackerCo = useProgressTrackerContext(),
-    activeStep = _useProgressTrackerCo.activeStep,
-    handleStepChange = _useProgressTrackerCo.handleStepChange;
-  var active = activeStep === index;
-  var styleProps = {
-    state: toItemState(active, completed, disabled)
-  };
-  var stepNumberContent = useMemo(function () {
-    if (completed) {
-      return jsx(Icon, {
-        icon: CheckIcon,
-        iconSize: itemNumber.iconSize
-      });
-    }
-    if (icon !== undefined) {
-      return jsx(Icon, {
-        icon: icon,
-        iconSize: itemNumber.iconSize
-      });
-    }
-    return index + 1;
-  }, [completed, icon, index]);
-  return jsx(ItemWrapper, {
-    "aria-current": active ? 'step' : undefined,
-    children: jsxs(ItemContentWrapper, Object.assign({}, styleProps, {
-      as: handleStepChange ? 'button' : 'div',
-      onClick: !disabled && handleStepChange ? function () {
-        return handleStepChange(index);
-      } : undefined,
-      disabled: disabled,
-      children: [jsx(ItemNumber, Object.assign({}, styleProps, {
-        "aria-hidden": true,
-        children: stepNumberContent
-      })), jsxs(ItemText, Object.assign({}, styleProps, {
-        children: [jsx(VisuallyHidden, {
-          as: "span",
-          children: getVisuallyHiddenText(active, completed, index)
-        }), children]
-      }))]
-    }))
-  });
-};
-ProgressTrackerItem.displayName = 'ProgressTracker.Item';
-
-export { ProgressTrackerItem };

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

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

package/dist/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -1,10 +0,0 @@
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-import { Property } from 'csstype';
-export type ScrollableContainerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Høyde på innholdscontainer. */
-    contentHeight?: Property.Height;
-}>;
-export declare const ScrollableContainer: {
-    (props: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/components/ScrollableContainer/ScrollableContainer.js

@@ -1,46 +0,0 @@
-import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
-import styled from 'styled-components';
-import { getBaseHTMLProps } from '@norges-domstoler/dds-core';
-import { Scrollbar } from './Scrollbar.js';
-import { scrollbarTokens } from './ScrollableContainer.tokens.js';
-import { focusVisibleTransitionValue, focusVisible } from '@norges-domstoler/dds-form';
-
-var track = scrollbarTokens.track,
-  content = scrollbarTokens.content,
-  outerContainer = scrollbarTokens.outerContainer;
-var StyledScrollableContainer = styled.div.withConfig({
-  displayName: "ScrollableContainer__StyledScrollableContainer",
-  componentId: "sc-t0dczu-0"
-})(["grid-template:auto / 1fr ", ";overflow:hidden;position:relative;display:grid;padding:", ";"], track.width, outerContainer.padding);
-var Content = styled.div.withConfig({
-  displayName: "ScrollableContainer__Content",
-  componentId: "sc-t0dczu-1"
-})(["height:", ";overflow:auto;scrollbar-width:none;::-webkit-scrollbar{display:none;}padding-right:", ";@media (prefers-reduced-motion:no-preference){transition:", ";}:focus-visible,.focus-visible{outline:", ";outline-offset:", ";}"], function (_ref) {
-  var height = _ref.height;
-  return height;
-}, content.paddingRight, focusVisibleTransitionValue, focusVisible.outline, focusVisible.outlineOffset);
-var ScrollableContainer = function ScrollableContainer(props) {
-  var children = props.children,
-    id = props.id,
-    className = props.className,
-    _props$contentHeight = props.contentHeight,
-    contentHeight = _props$contentHeight === void 0 ? '90vh' : _props$contentHeight,
-    htmlProps = props.htmlProps,
-    rest = __rest(props, ["children", "id", "className", "contentHeight", "htmlProps"]);
-  var ref = useRef(null);
-  return jsxs(StyledScrollableContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    children: [jsx(Content, {
-      height: contentHeight,
-      ref: ref,
-      tabIndex: 0,
-      children: children
-    }), jsx(Scrollbar, {
-      contentRef: ref
-    })]
-  }));
-};
-ScrollableContainer.displayName = 'ScrollableContainer';
-
-export { ScrollableContainer };

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

@@ -1,18 +0,0 @@
-import { ScrollableContainerProps } from '.';
-declare const _default: {
-    title: string;
-    component: {
-        (props: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    argTypes: {
-        contentHeight: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: (args: ScrollableContainerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const JustScrollbar: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/ScrollableContainer/ScrollableContainer.tokens.d.ts

@@ -1,25 +0,0 @@
-export declare const scrollbarWidthNumberPx = 10;
-export declare const scrollbarTokens: {
-    minThumbHeightPx: number;
-    track: {
-        backgroundColor: string;
-        borderRadius: string;
-        width: string;
-    };
-    thumb: {
-        base: {
-            backgroundColor: string;
-            borderRadius: string;
-            width: string;
-        };
-        hover: {
-            backgroundColor: string;
-        };
-    };
-    content: {
-        paddingRight: string;
-    };
-    outerContainer: {
-        padding: string;
-    };
-};