@norges-domstoler/dds-components 4.3.0 → 5.2.0-beta.0

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,66 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import { StepperContext } from './Stepper.context.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var StepsWrapper = styled.ol.withConfig({
+  displayName: "Stepper__StepsWrapper",
+  componentId: "sc-4w2c73-0"
+})(["display:flex;margin:0;padding:0;"]);
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+
+var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a;
+
+  var id = props.id,
+      _props$activeStep = props.activeStep,
+      activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
+      children = props.children,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+  var _useState = useState(activeStep),
+      _useState2 = _slicedToArray(_useState, 2),
+      thisActiveStep = _useState2[0],
+      setActiveStep = _useState2[1];
+
+  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 = (_a = Children.map(children, function (step, index) {
+    if (! /*#__PURE__*/isValidElement(step)) {
+      return false;
+    }
+
+    return /*#__PURE__*/cloneElement(step, Object.assign(Object.assign({}, step.props), {
+      index: index
+    }));
+  })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+  return jsx(StepperContext.Provider, Object.assign({
+    value: {
+      activeStep: thisActiveStep
+    }
+  }, {
+    children: jsx("div", Object.assign({
+      role: "group",
+      "aria-label": "progress"
+    }, containerProps, {
+      children: jsx(StepsWrapper, {
+        children: steps
+      })
+    }))
+  }));
+});
+
+export { Stepper };

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        activeStep?: number | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const NonClickable: () => JSX.Element;

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

@@ -0,0 +1,39 @@
+export declare const stepperTokens: {
+    connector: {
+        color: string;
+    };
+    stepNumber: {
+        active: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        completed: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        inactive: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    stepButton: {
+        marginTop: string;
+        fontFamily: string;
+        fontSize: string;
+        active: {
+            color: string;
+            textDecoration: string;
+        };
+        completed: {
+            color: string;
+            textDecoration: string;
+        };
+        inactive: {
+            color: string;
+            textDecoration: string;
+        };
+    };
+};

package/dist/components/Stepper/Stepper.tokens.js

@@ -0,0 +1,49 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    font = ddsBaseTokens.font;
+var connector = {
+  color: colors.DdsColorInteractiveBase
+};
+var stepNumber = {
+  active: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase
+  },
+  completed: {
+    borderColor: colors.DdsColorSuccessLighter,
+    color: colors.DdsColorNeutralsGray9,
+    backgroundColor: colors.DdsColorSuccessLighter
+  },
+  inactive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorNeutralsWhite
+  }
+};
+var stepButton = {
+  marginTop: spacing.SizesDdsSpacingLayoutX1,
+  fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
+  fontSize: font.DdsFontSupportingStyleLabel01FontSize,
+  active: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'none'
+  },
+  completed: {
+    color: colors.DdsColorInteractiveBase,
+    textDecoration: 'underline'
+  },
+  inactive: {
+    color: colors.DdsColorInteractiveBase,
+    textDecoration: 'underline'
+  }
+};
+var stepperTokens = {
+  connector: connector,
+  stepNumber: stepNumber,
+  stepButton: stepButton
+};
+
+export { stepperTokens };

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

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './Step';

package/dist/components/Table/SortCell.js

@@ -3,15 +3,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Cell } from './Cell.js';
 import { cellTokens } from './Cell.tokens.js';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import styled from 'styled-components';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { UnfoldMoreIcon } from '../../icons/tsx/unfoldMore.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
+import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
+import { Icon } from '../Icon/Icon.js';
 
-var SortIconWrapper = styled(IconWrapper).withConfig({
-  displayName: "SortCell__SortIconWrapper",
+var SortIcon = styled(Icon).withConfig({
+  displayName: "SortCell__SortIcon",
   componentId: "sc-1l3jzvh-0"
 })(["", ""], cellTokens.head.sortCell.icon.base);
 var StyledButton = styled.button.withConfig({
@@ -21,18 +21,18 @@ var StyledButton = styled.button.withConfig({
 
 var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
   if (!isSorted || !sortOrder) {
-    return jsx(SortIconWrapper, {
-      Icon: UnfoldMoreIcon,
-      iconSize: "inline"
+    return jsx(SortIcon, {
+      icon: UnfoldMoreIcon,
+      iconSize: "inherit"
     });
   }
 
-  return sortOrder === 'ascending' ? jsx(SortIconWrapper, {
-    Icon: KeyboardArrowDownIcon,
-    iconSize: "inline"
-  }) : jsx(SortIconWrapper, {
-    Icon: KeyboardArrowUpIcon,
-    iconSize: "inline"
+  return sortOrder === 'ascending' ? jsx(SortIcon, {
+    icon: ChevronDownIcon,
+    iconSize: "inherit"
+  }) : jsx(SortIcon, {
+    icon: ChevronUpIcon,
+    iconSize: "inherit"
   });
 };
 

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TableProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/Tabs/Tab.d.ts

@@ -1,13 +1,12 @@
-import { SvgIconTypeMap } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import { BaseComponentPropsWithChildren } from '../../types';
 import { Property } from 'csstype';
+import { SvgIcon } from '../../icons/utils';
 export declare type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     /**Spesifiserer om fanen er aktiv. */
     active?: boolean;
     /** Ikon. */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
     /** Custom bredde for enkel fane. */
     width?: Property.Width;
     /** Spesifiserer om `<Tab />` skal ha fokus. **OBS!** settes automatisk av forelder.*/
@@ -23,7 +22,7 @@ export declare const Tab: import("react").ForwardRefExoticComponent<{
     /**Spesifiserer om fanen er aktiv. */
     active?: boolean | undefined;
     /** Ikon. */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+    icon?: SvgIcon | undefined;
     /** Custom bredde for enkel fane. */
     width?: Property.Width<0 | (string & {})> | undefined;
     /** Spesifiserer om `<Tab />` skal ha fokus. **OBS!** settes automatisk av forelder.*/

package/dist/components/Tabs/Tab.js

@@ -8,7 +8,7 @@ import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 
 var Button = styled.button.withConfig({
   displayName: "Tab__Button",
@@ -27,7 +27,7 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$active = props.active,
       active = _props$active === void 0 ? false : _props$active,
       width = props.width,
-      Icon = props.Icon,
+      icon = props.icon,
       children = props.children,
       focus = props.focus,
       setFocus = props.setFocus,
@@ -37,7 +37,7 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
       id = props.id,
       className = props.className,
       htmlProps = props.htmlProps,
-      rest = __rest(props, ["active", "width", "Icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown", "id", "className", "htmlProps"]);
+      rest = __rest(props, ["active", "width", "icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown", "id", "className", "htmlProps"]);
 
   var itemRef = useRef(null);
   var combinedRef = useCombinedRef(ref, itemRef);
@@ -90,9 +90,9 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: focus ? 0 : -1
   });
   return jsxs(Button, Object.assign({}, buttonProps, {
-    children: [Icon && jsx(IconWrapper, {
-      Icon: Icon,
-      iconSize: "inline"
+    children: [icon && jsx(Icon, {
+      icon: icon,
+      iconSize: "inherit"
     }), jsx("span", {
       children: children
     })]

package/dist/components/Tabs/TabPanel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 export declare type TabPanelProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /** Spesifiserer om panelet skal vises basert på aktiv fane. */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentProps } from '../../types';
 export declare type TagPurpose = 'success' | 'info' | 'danger' | 'warning' | 'default';
 export declare type TagProps = BaseComponentProps<HTMLSpanElement, {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TagProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/TextInput/CharCounter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentProps } from '../../types';
 declare type Props = BaseComponentProps<HTMLElement, {
     current: number;

package/dist/components/TextInput/TextInput.js

@@ -30,12 +30,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
       className = _a.className,
       style = _a.style,
+      value = _a.value,
+      defaultValue = _a.defaultValue,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", 'aria-describedby']);
+      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-describedby']);
 
   var textAreaRef = useRef(null);
 
-  var _useState = useState(''),
+  var _useState = useState(getDefaultText(value, defaultValue)),
       _useState2 = _slicedToArray(_useState, 2),
       text = _useState2[0],
       setText = _useState2[1];
@@ -84,6 +86,8 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     readOnly: readOnly,
     tabIndex: readOnly ? -1 : 0,
     maxLength: maxLength,
+    value: value,
+    defaultValue: defaultValue,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, characterCounterId, ariaDescribedby]),
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
@@ -136,4 +140,16 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   }));
 });
 
+function getDefaultText(value, defaultValue) {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (typeof defaultValue === 'string') {
+    return defaultValue;
+  }
+
+  return '';
+}
+
 export { TextInput };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextInputProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/TextInput/TextInput.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextInputProps } from './TextInput.types';
 export declare const TextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;

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

@@ -1,12 +1,11 @@
-import { SvgIconTypeMap } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { InputHTMLAttributes } from 'react';
 import { BaseComponentProps } from '../../types';
+import { SvgIcon } from '../../icons/utils';
 export declare type ToggleButtonProps = BaseComponentProps<HTMLInputElement, {
     /**Ledetekst for inputelementet. */
     label?: string;
     /** Ikon. */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    icon?: SvgIcon;
 }, InputHTMLAttributes<HTMLInputElement>>;
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
     htmlProps?: InputHTMLAttributes<HTMLInputElement> | undefined;
@@ -14,5 +13,5 @@ export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
     /**Ledetekst for inputelementet. */
     label?: string | undefined;
     /** Ikon. */
-    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+    icon?: SvgIcon | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ToggleButton/ToggleButton.js

@@ -9,7 +9,7 @@ import { toggleButtonTokens } from './ToggleButton.tokens.js';
 import { hideInput } from '../../helpers/styling/hideInput.js';
 import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 
 var Input = styled.input.withConfig({
   displayName: "ToggleButton__Input",
@@ -27,10 +27,10 @@ var nextUniqueId = 0;
 var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var id = _a.id,
       label = _a.label,
-      Icon = _a.Icon,
+      icon = _a.icon,
       className = _a.className,
       htmlProps = _a.htmlProps,
-      rest = __rest(_a, ["id", "label", "Icon", "className", "htmlProps"]);
+      rest = __rest(_a, ["id", "label", "icon", "className", "htmlProps"]);
 
   var _useState = useState(id !== null && id !== void 0 ? id : "toggleButton-".concat(nextUniqueId++)),
       _useState2 = _slicedToArray(_useState, 1),
@@ -45,9 +45,9 @@ var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   };
   return jsxs(Container, Object.assign({}, containerProps, {
     children: [jsx(Input, Object.assign({}, inputProps)), jsxs(Content, {
-      children: [Icon && jsx(IconWrapper, {
-        Icon: Icon,
-        iconSize: "inline"
+      children: [icon && jsx(Icon, {
+        icon: icon,
+        iconSize: "inherit"
       }), " ", label]
     })]
   }));

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
@@ -6,8 +5,13 @@ declare const _default: {
         htmlProps?: import("react").InputHTMLAttributes<HTMLInputElement> | undefined;
     } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
         label?: string | undefined;
-        Icon?: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+        icon?: import("../../icons/utils").SvgIcon | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        label: {
+            control: string;
+        };
+    };
 };
 export default _default;
 export declare const Default: (args: ToggleButtonProps) => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 declare type Direction = 'row' | 'column';
 export declare type ToggleButtonGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ToggleButtonGroupProps } from '.';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -26,6 +26,7 @@ declare type BaseTypographyProps = PropsWithChildren<{
     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;

package/dist/components/Typography/Typography.js

@@ -3,9 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { textColorsArray, textColors, typographyTokens } from './Typography.tokens.js';
-import LaunchOutlinedIcon from '@mui/icons-material/LaunchOutlined';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { Icon } from '../Icon/Icon.js';
 import { focusVisibleLinkTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { OpenExternalIcon } from '../../icons/tsx/openExternal.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
 var getElementType = function getElementType(element) {
@@ -79,8 +79,8 @@ var getElementStyling = function getElementStyling(type) {
   return css(["", " &::selection,*::selection{", "}"], typographyTokens.typographyType[type].base, typographyTokens.selection.base);
 };
 
-var LinkIconWrapper = styled(IconWrapper).withConfig({
-  displayName: "Typography__LinkIconWrapper",
+var LinkIcon = styled(Icon).withConfig({
+  displayName: "Typography__LinkIcon",
   componentId: "sc-1uvxoh6-0"
 })(["", ""], typographyTokens.typographyType.a.icon);
 var StyledTypography = styled.p.withConfig({
@@ -142,12 +142,12 @@ var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
   var as = propAs ? propAs : getElementType(typographyType);
   var relProp;
   var targetProp;
-  var renderWrapper = false;
+  var renderIcon = false;
 
   if (isAnchorProps(props)) {
     var externalLink = props.externalLink,
         target = props.target;
-    renderWrapper = (_a = as === 'a' && externalLink) !== null && _a !== void 0 ? _a : false;
+    renderIcon = (_a = as === 'a' && externalLink) !== null && _a !== void 0 ? _a : false;
     relProp = as === 'a' ? 'noopener noreferer' : undefined;
     targetProp = as !== 'a' ? undefined : externalLink ? '_blank' : target;
   }
@@ -162,9 +162,9 @@ var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsxs(StyledTypography, Object.assign({
     ref: ref
   }, typographyProps, {
-    children: [children, renderWrapper && jsx(LinkIconWrapper, {
-      Icon: LaunchOutlinedIcon,
-      iconSize: "inline"
+    children: [children, renderIcon && jsx(LinkIcon, {
+      icon: OpenExternalIcon,
+      iconSize: "inherit"
     })]
   }));
 });

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from '.';
 declare type StoryTProps = {
     text: string;

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseComponentPropsWithChildren } from '../../types';
 declare type VisuallyHiddenDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     as: 'div';

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -6,7 +6,7 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 var Wrapper = styled.span.withConfig({
   displayName: "VisuallyHidden__Wrapper",
   componentId: "sc-ciubxt-0"
-})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+})(["position:absolute;width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0px;"]);
 var VisuallyHidden = function VisuallyHidden(props) {
   var children = props.children,
       id = props.id,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { VisuallyHiddenProps } from '.';
 declare const _default: {
     title: string;

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 declare type SvgChevronProps = {
     isUp?: boolean;

package/dist/helpers/Input/Input.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledLabelProps } from '.';
 import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;

package/dist/helpers/RequiredMarker/RequiredMarker.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const RequiredMarker: () => JSX.Element;

package/dist/hooks/useFloatPosition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Strategy } from '@floating-ui/react-dom';
 export declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
 export declare const useFloatPosition: (arrowRef: HTMLElement | null, placement?: Placement, offset?: number) => {

package/dist/hooks/useFocusTrap.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

package/dist/icons/icons.stories.d.ts

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

package/dist/icons/tsx/apps.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function AppsIcon(props: SvgProps): JSX.Element;