@norges-domstoler/dds-components 5.2.0 → 5.4.0

package/dist/components/InternalHeader/InternalHeader.tokens.js

@@ -1,93 +1,61 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
 
-var Border = ddsBaseTokens.border,
-    Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
-var borderColor = Border.BordersDdsBorderStyleLightStroke;
-var linkBase = Object.assign({
-  color: Colors.DdsColorNeutralsGray9,
-  textDecoration: 'none',
-  backgroundColor: Colors.DdsColorNeutralsWhite
-}, FontPackages.body_sans_01.base);
-var linkHoverBase = {
-  color: Colors.DdsColorInteractiveDark,
-  backgroundColor: Colors.DdsColorPrimaryLightest
-};
-var linkActiveBase = {
-  color: Colors.DdsColorInteractiveBase
-};
-var wrapperBase = {
-  backgroundColor: Colors.DdsColorNeutralsWhite
+var border = ddsBaseTokens.border,
+    colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages;
+var borderStyle = "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border.BordersDdsBorderStyleLightStroke, " solid ");
+var navLink = {
+  base: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'none',
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15),
+    font: fontPackages.body_sans_01.base
+  },
+  hover: {
+    color: colors.DdsColorInteractiveDark
+  },
+  active: {
+    color: colors.DdsColorInteractiveDark
+  },
+  current: {
+    color: colors.DdsColorInteractiveDarkest,
+    backgroundColor: colors.DdsColorPrimaryLightest
+  }
 };
-var applicationNameWrapperBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+var outerContainer = {
+  backgroundColor: colors.DdsColorNeutralsWhite
 };
-var lovisaWrapperBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15),
-  borderRight: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid ")
+var applicationNameWrapper = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX15)
 };
-var bannerBase = {
-  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid "),
-  paddingRight: Spacing.SizesDdsSpacingLocalX1
+var lovisaWrapper = {
+  padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX15),
+  borderRight: borderStyle
 };
-var bannerLeftBase = {};
-var navigationBase = {
-  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(borderColor, " solid ")
+var banner = {
+  borderBottom: borderStyle,
+  paddingRight: spacing.SizesDdsSpacingLocalX1,
+  hasContextMenu: {
+    paddingRight: spacing.SizesDdsSpacingLayoutX4
+  }
 };
-var navigationLinkBase = Object.assign({
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX15)
-}, linkBase);
-var navigationLinkHoverBase = Object.assign({}, linkHoverBase);
-var navigationLinkActiveBase = Object.assign({}, linkActiveBase);
-var navigationLinkFocusBase = Object.assign({}, focusVisibleLink);
-var navigationLinkCurrentBase = {
-  color: Colors.DdsColorInteractiveDarker,
-  backgroundColor: Colors.DdsColorPrimaryLightest
+var navigation = {
+  borderBottom: borderStyle
 };
-var contextGroupBase = {
-  right: Spacing.SizesDdsSpacingLocalX075,
-  top: Spacing.SizesDdsSpacingLocalX025
+var contextGroup = {
+  right: spacing.SizesDdsSpacingLocalX075,
+  top: spacing.SizesDdsSpacingLocalX025
 };
 var internalHeaderTokens = {
-  wrapper: {
-    base: wrapperBase
-  },
-  applicationNameWrapper: {
-    base: applicationNameWrapperBase
-  },
-  lovisaWrapper: {
-    base: lovisaWrapperBase
-  },
-  banner: {
-    base: bannerBase,
-    contextMenuSpacing: Spacing.SizesDdsSpacingLayoutX4
-  },
-  bannerLeft: {
-    base: bannerLeftBase
-  },
-  navigation: {
-    base: navigationBase
-  },
-  navigationLink: {
-    base: navigationLinkBase,
-    hover: {
-      base: navigationLinkHoverBase
-    },
-    active: {
-      base: navigationLinkActiveBase
-    },
-    focus: {
-      base: navigationLinkFocusBase
-    },
-    current: {
-      base: navigationLinkCurrentBase
-    }
-  },
-  contextGroup: {
-    base: contextGroupBase
-  }
+  navLink: navLink,
+  outerContainer: outerContainer,
+  applicationNameWrapper: applicationNameWrapper,
+  lovisaWrapper: lovisaWrapper,
+  banner: banner,
+  navigation: navigation,
+  contextGroup: contextGroup
 };
 
 export { internalHeaderTokens };

package/dist/components/InternalHeader/NavigationItem.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { internalHeaderTokens } from './InternalHeader.tokens.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
 
+var navLink = internalHeaderTokens.navLink;
 var Link = styled.a.withConfig({
   displayName: "NavigationItem__Link",
   componentId: "sc-1fua9kw-0"
-})(["display:flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}height:100%;box-sizing:border-box;", " &:hover{", "}&:active{", "}&:focus-visible,&.focus-visible{", "}", ""], internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_ref) {
+})(["display:flex;align-items:center;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}color:", ";background-color:", ";padding:", ";text-decoration:", ";", ";&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", ";}", ""], navLink.base.color, navLink.base.backgroundColor, navLink.base.padding, navLink.base.textDecoration, navLink.base.font, navLink.hover.color, navLink.active.color, focusVisible, function (_ref) {
   var isCurrent = _ref.isCurrent;
-  return isCurrent && css(["", ""], internalHeaderTokens.navigationLink.current.base);
+  return isCurrent && css(["color:", ";background-color:", ";&:hover{color:", ";}"], navLink.current.color, navLink.current.backgroundColor, navLink.current.color);
 });
 var NavigationItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,

package/dist/components/Modal/Modal.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useId, useEffect } from 'react';
 import styled from 'styled-components';
 import { modalTokens } from './Modal.tokens.js';
 import { createPortal } from 'react-dom';
@@ -34,7 +33,6 @@ var StyledButton = styled(Button).withConfig({
   displayName: "Modal__StyledButton",
   componentId: "sc-12c14zx-3"
 })(["align-self:flex-end;"]);
-var nextUniqueId = 0;
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$isOpen = props.isOpen,
       isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
@@ -49,12 +47,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = __rest(props, ["isOpen", "parentElement", "children", "header", "onClose", "id", "triggerRef", "className", "htmlProps"]);
 
-  var uniqueId = nextUniqueId++;
-
-  var _useState = useState(id !== null && id !== void 0 ? id : "modal-".concat(uniqueId)),
-      _useState2 = _slicedToArray(_useState, 1),
-      modalId = _useState2[0];
-
+  var generatedId = useId();
+  var modalId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-modal");
   var headerId = "".concat(modalId, "-header");
   var modalRef = useFocusTrap(isOpen);
   var combinedRef = useCombinedRef(ref, modalRef);

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -18,13 +18,15 @@ import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
+var container = overflowMenuTokens.container,
+    divider = overflowMenuTokens.divider;
 var Container = styled.div.withConfig({
   displayName: "OverflowMenu__Container",
   componentId: "sc-kh744b-0"
-})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " ", " ", " ", " *::selection{", "}"], function (_ref) {
+})(["box-sizing:border-box;z-index:3;overflow-y:auto;min-width:180px;max-width:300px;", " border:", ";background-color:", ";border-radius:", ";", " ", " *::selection{", "}"], function (_ref) {
   var isOpen = _ref.isOpen;
   return visibilityTransition(isOpen);
-}, overflowMenuTokens.container.base, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
+}, container.border, container.backgroundColor, container.borderRadius, scrollbarStyling.webkit, scrollbarStyling.firefox, typographyTokens.selection.base);
 var OverflowMenuList = styled.ul.withConfig({
   displayName: "OverflowMenu__OverflowMenuList",
   componentId: "sc-kh744b-1"
@@ -32,7 +34,7 @@ var OverflowMenuList = styled.ul.withConfig({
 var StyledDivider = styled(Divider).withConfig({
   displayName: "OverflowMenu__StyledDivider",
   componentId: "sc-kh744b-2"
-})(["", ""], overflowMenuTokens.divider.base);
+})(["margin-left:", ";margin-right:", ";"], divider.marginLeft, divider.marginRight);
 var OverflowMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _a, _b;
 

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

@@ -1,22 +1,37 @@
-import { CSSObject } from 'styled-components';
 export declare const overflowMenuTokens: {
     container: {
-        base: CSSObject;
+        border: string;
+        backgroundColor: string;
+        borderRadius: string;
     };
-    link: {
-        base: CSSObject;
-        active: {
-            base: CSSObject;
+    element: {
+        base: {
+            color: string;
+            textDecoration: string;
+            backgroundColor: string;
+            padding: string;
+            gap: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
         };
+    };
+    link: {
         hover: {
-            base: CSSObject;
+            color: string;
         };
-        focus: {
-            base: CSSObject;
+        active: {
+            color: string;
         };
     };
     divider: {
-        base: CSSObject;
+        marginRight: string;
+        marginLeft: string;
     };
     offset: number;
 };

package/dist/components/OverflowMenu/OverflowMenu.tokens.js

@@ -1,55 +1,43 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
 
-var Border = ddsBaseTokens.border,
-    BorderRadius = ddsBaseTokens.borderRadius,
-    Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
-var linkBase = Object.assign({
-  color: Colors.DdsColorNeutralsGray9,
-  textDecoration: 'none',
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX15),
-  gap: Spacing.SizesDdsSpacingLocalX025
-}, FontPackages.body_sans_01.base);
-var linkHoverBase = {
-  color: Colors.DdsColorInteractiveDark,
-  backgroundColor: Colors.DdsColorPrimaryLightest
+var border = ddsBaseTokens.border,
+    borderRadius = ddsBaseTokens.borderRadius,
+    colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages;
+var element = {
+  base: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'none',
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15),
+    gap: spacing.SizesDdsSpacingLocalX025,
+    font: fontPackages.body_sans_01.base
+  }
 };
-var linkActiveBase = {
-  color: Colors.DdsColorInteractiveBase
+var link = {
+  hover: {
+    color: colors.DdsColorInteractiveDark
+  },
+  active: {
+    color: colors.DdsColorInteractiveDark
+  }
 };
-var wrapperBase = {
-  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(Border.BordersDdsBorderStyleLightStroke, " solid "),
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius
+var container = {
+  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border.BordersDdsBorderStyleLightStroke, " solid "),
+  backgroundColor: colors.DdsColorNeutralsWhite,
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius
 };
-var linkFocusBase = Object.assign({}, focusVisibleLink);
-var dividerBase = {
-  marginRight: Spacing.SizesDdsSpacingLocalX15,
-  marginLeft: Spacing.SizesDdsSpacingLocalX15
+var divider = {
+  marginRight: spacing.SizesDdsSpacingLocalX15,
+  marginLeft: spacing.SizesDdsSpacingLocalX15
 };
 var overflowMenuTokens = {
-  container: {
-    base: wrapperBase
-  },
-  link: {
-    base: linkBase,
-    active: {
-      base: linkActiveBase
-    },
-    hover: {
-      base: linkHoverBase
-    },
-    focus: {
-      base: linkFocusBase
-    }
-  },
-  divider: {
-    base: dividerBase
-  },
-  offset: Spacing.SizesDdsSpacingLocalX0125NumberPx
+  container: container,
+  element: element,
+  link: link,
+  divider: divider,
+  offset: spacing.SizesDdsSpacingLocalX0125NumberPx
 };
 
 export { overflowMenuTokens };

package/dist/components/OverflowMenu/OverflowMenuGroup.js

@@ -1,8 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, Children, isValidElement, cloneElement } from 'react';
+import { useState, useRef, useId, Children, isValidElement, cloneElement } from 'react';
 
-var nextUniqueId = 0;
 var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   var children = _ref.children,
       onClose = _ref.onClose,
@@ -24,11 +23,8 @@ var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   };
 
   var buttonRef = useRef(null);
-  var uniqueId = nextUniqueId++;
-
-  var _useState3 = useState(overflowMenuId !== null && overflowMenuId !== void 0 ? overflowMenuId : "overflowMenu-".concat(uniqueId)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniqueOverflowMenuId = _useState4[0];
+  var generatedId = useId();
+  var uniqueOverflowMenuId = overflowMenuId !== null && overflowMenuId !== void 0 ? overflowMenuId : "".concat(generatedId, "-overflowMenu");
 
   var handleClose = function handleClose() {
     onClose && onClose();

package/dist/components/OverflowMenu/OverflowMenuItem.js

@@ -1,20 +1,24 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { overflowMenuTokens } from './OverflowMenu.tokens.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
 import { Icon } from '../Icon/Icon.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 
+var element = overflowMenuTokens.element,
+    link = overflowMenuTokens.link;
+var elementBaseCSS = css(["display:flex;align-items:center;box-sizing:border-box;color:", ";text-decoration:", ";background-color:", ";padding:", ";gap:", ";", ""], element.base.color, element.base.textDecoration, element.base.backgroundColor, element.base.padding, element.base.gap, element.base.font);
 var Span = styled.span.withConfig({
   displayName: "OverflowMenuItem__Span",
   componentId: "sc-1ka2asi-0"
-})(["", " display:flex;align-items:center;box-sizing:border-box;"], overflowMenuTokens.link.base);
+})(["", ""], elementBaseCSS);
 var Link = styled.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(["box-sizing:border-box;background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;width:100%;", " display:flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{", "}&:active{", "}&:focus-visible,&.focus-visible{", "}"], overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
+})(["border:none;cursor:pointer;outline:inherit;width:100%;", " @media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", "}"], elementBaseCSS, link.hover.color, link.active.color, focusVisibleLink);
 
 var isAnchorProps = function isAnchorProps(props) {
   return props.href !== undefined;

package/dist/components/Pagination/Pagination.js

@@ -34,9 +34,9 @@ var ListItem = styled.li.withConfig({
 var Container = styled.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-5ltegq-3"
-})(["display:inline-flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
+})(["display:flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
-  return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-around;flex-wrap:wrap;"]);
+  return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
 var IndicatorsContainer = styled.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
@@ -229,7 +229,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
       children: [withSelect && jsx(Select, {
         options: selectOptions,
         isSearchable: false,
-        width: "80px",
+        width: "88px",
         defaultValue: {
           label: itemsPerPage.toString(),
           value: itemsPerPage

package/dist/components/Popover/PopoverGroup.js

@@ -1,10 +1,9 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, Children, isValidElement, cloneElement } from 'react';
+import { useState, useEffect, useId, useRef, Children, isValidElement, cloneElement } from 'react';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 
-var nextUniqueId = 0;
 var PopoverGroup = function PopoverGroup(_ref) {
   var _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
@@ -21,11 +20,8 @@ var PopoverGroup = function PopoverGroup(_ref) {
   useEffect(function () {
     setOpen(isOpen);
   }, [isOpen]);
-  var uniqueId = nextUniqueId++;
-
-  var _useState3 = useState(popoverId !== null && popoverId !== void 0 ? popoverId : "popover-".concat(uniqueId)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniquePopoverId = _useState4[0];
+  var generatedId = useId();
+  var uniquePopoverId = popoverId !== null && popoverId !== void 0 ? popoverId : "".concat(generatedId, "-popover");
 
   var handleOnCloseButtonClick = function handleOnCloseButtonClick() {
     setOpen(false);

package/dist/components/RadioButton/RadioButton.js

@@ -1,14 +1,12 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import { useRadioButtonGroup } from './RadioButtonGroupContext.js';
-import { Container, Input, CustomRadioButton } from './RadioButton.styles.js';
+import { Container, CustomRadioButton } from './RadioButton.styles.js';
 import { getBaseHTMLProps, joinClassNames } from '../../types/BaseComponentProps.js';
+import { HiddenInput } from '../../helpers/HiddenInput/HiddenInput.js';
 import { Typography } from '../Typography/Typography.js';
 
-var nextUniqueId = 0;
-
 var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
   if (typeof value !== 'undefined' && value !== null && group) {
     if (typeof value === 'number') {
@@ -43,10 +41,8 @@ var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
       style = htmlProps.style,
       restHtmlProps = __rest(htmlProps, ["className", "style"]);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "radioButton-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-radioButton");
   var radioButtonGroup = useRadioButtonGroup();
 
   var handleChange = function handleChange(event) {
@@ -58,6 +54,7 @@ var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
   if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
   if (ariaDescribedby) describedByIds.push(ariaDescribedby);
   var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
+    type: 'radio',
     name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
     disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
     required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
@@ -77,9 +74,9 @@ var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsxs(Container, Object.assign({}, containerProps, {
     htmlFor: uniqueId
   }, {
-    children: [jsx(Input, Object.assign({
+    children: [jsx(HiddenInput, Object.assign({}, inputProps, {
       ref: ref
-    }, inputProps)), jsx(CustomRadioButton, {}), jsx(Typography, Object.assign({
+    })), jsx(CustomRadioButton, {}), jsx(Typography, Object.assign({
       as: "span"
     }, {
       children: children !== null && children !== void 0 ? children : label

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

@@ -1,8 +1,5 @@
 import { RadioButtonProps } from './RadioButton.types';
 export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, {
-    type: import("react").HTMLInputTypeAttribute;
-}, "type">;
 declare type ContainerProps = Pick<RadioButtonProps, 'error' | 'disabled' | 'readOnly'>;
 export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
 export {};

package/dist/components/RadioButton/RadioButton.styles.js

@@ -1,34 +1,23 @@
 import styled, { css } from 'styled-components';
 import { radioButtonTokens } from './RadioButton.tokens.js';
-import { hideInput } from '../../helpers/styling/hideInput.js';
 import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
 
 var CustomRadioButton = styled.span.withConfig({
   displayName: "RadioButtonstyles__CustomRadioButton",
   componentId: "sc-iwypha-0"
 })(["position:absolute;box-sizing:border-box;border-radius:50%;vertical-align:middle;", " left:", ";&:after{content:'';position:absolute;display:none;}"], radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
-var Input = styled.input.attrs(function (_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'radio' : _ref$type;
-  return {
-    type: type
-  };
-}).withConfig({
-  displayName: "RadioButtonstyles__Input",
-  componentId: "sc-iwypha-1"
-})(["", ""], hideInput);
 var Container = styled.label.withConfig({
   displayName: "RadioButtonstyles__Container",
-  componentId: "sc-iwypha-2"
-})(["position:relative;display:block;cursor:pointer;user-select:none;width:fit-content;display:flex;align-items:center;", " input:checked ~ ", ":after{display:block;}input ~ ", "{transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " transition:", ";}", " ", " ", " ", ":after{border-radius:50%;", "}"], radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focus.base, focusVisibleTransitionValue, function (_ref2) {
-  var error = _ref2.error;
+  componentId: "sc-iwypha-1"
+})(["position:relative;display:block;cursor:pointer;user-select:none;width:fit-content;display:flex;align-items:center;", " input:checked ~ ", ":after{display:block;}input ~ ", "{transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " transition:", ";}", " ", " ", " ", ":after{border-radius:50%;", "}"], radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focus.base, focusVisibleTransitionValue, function (_ref) {
+  var error = _ref.error;
   return error && css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
   return disabled && css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
-}, function (_ref4) {
-  var readOnly = _ref4.readOnly;
+}, function (_ref3) {
+  var readOnly = _ref3.readOnly;
   return readOnly && css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
 }, CustomRadioButton, radioButtonTokens.checkmark.base);
 
-export { Container, CustomRadioButton, Input };
+export { Container, CustomRadioButton };

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import styled, { css } from 'styled-components';
 import { radioButtonGroupTokens } from './RadioButtonGroup.tokens.js';
 import { RadioButtonGroupContext } from './RadioButtonGroupContext.js';
@@ -26,7 +26,6 @@ var Label = styled(Typography).withConfig({
   displayName: "RadioButtonGroup__Label",
   componentId: "sc-1xsll60-2"
 })(["padding-left:", ";"], radioButtonGroupTokens.label.spaceLeft);
-var nextUniqueGroupId = 0;
 var RadioButtonGroup = function RadioButtonGroup(_a) {
   var name = _a.name,
       label = _a.label,
@@ -51,10 +50,8 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
       groupValue = _useState2[0],
       setGroupValue = _useState2[1];
 
-  var _useState3 = useState(groupId !== null && groupId !== void 0 ? groupId : "radioButtonGroup-".concat(nextUniqueGroupId++)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      uniqueGroupId = _useState4[0];
-
+  var generatedId = useId();
+  var uniqueGroupId = groupId !== null && groupId !== void 0 ? groupId : "".concat(generatedId, "-radioButtonGroup");
   var handleChange = combineHandlers(function (e) {
     return setGroupValue(e.target.value);
   }, function (e) {
@@ -62,8 +59,8 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
   });
   var hasErrorMessage = !!errorMessage;
   var hasTip = !!tip;
-  var tipId = hasTip ? "".concat(uniqueGroupId, "-tip") : undefined;
-  var errorMessageId = hasErrorMessage ? "".concat(uniqueGroupId, "-errorMessage") : undefined;
+  var tipId = tip && "".concat(uniqueGroupId, "-tip");
+  var errorMessageId = errorMessage && "".concat(uniqueGroupId, "-errorMessage");
   var contextProps = {
     name: name,
     disabled: disabled,

package/dist/components/Search/Search.js

@@ -1,7 +1,6 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import styled, { css } from 'styled-components';
 import { searchTokens } from './Search.tokens.js';
 import { Input as Input$1, OuterInputContainer, InputContainer } from '../../helpers/Input/Input.styles.js';
@@ -33,7 +32,6 @@ var ButtonWrapper = styled.div.withConfig({
   displayName: "Search__ButtonWrapper",
   componentId: "sc-1ax3s9s-3"
 })([""]);
-var nextUniqueId = 0;
 var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$componentSize = _a.componentSize,
       componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
@@ -46,10 +44,8 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
       ariaDescribedby = _a['aria-describedby'],
       rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
 
-  var _useState = useState(id !== null && id !== void 0 ? id : "searchInput-".concat(nextUniqueId++)),
-      _useState2 = _slicedToArray(_useState, 1),
-      uniqueId = _useState2[0];
-
+  var generatedId = useId();
+  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-searchInput");
   var hasTip = !!tip;
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var containerProps = {