@norges-domstoler/dds-components 3.1.0 → 4.0.2

package/dist/index.js

@@ -12253,7 +12253,7 @@ var removeButtonStyling = {
 };
 
 var visibilityTransition = function visibilityTransition(open) {
-  return Ae(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    transition: visibility 0.4s, opacity 0.2s;\n    visibility: ", ";\n    opacity: ", ";\n  "], ["\n    transition: visibility 0.4s, opacity 0.2s;\n    visibility: ", ";\n    opacity: ", ";\n  "])), open ? 'visible' : 'hidden', open ? 1 : 0);
+  return Ae(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    @media (prefers-reduced-motion: no-preference) {\n      transition: visibility 0.4s, opacity 0.2s;\n    }\n    visibility: ", ";\n    opacity: ", ";\n  "], ["\n    @media (prefers-reduced-motion: no-preference) {\n      transition: visibility 0.4s, opacity 0.2s;\n    }\n    visibility: ", ";\n    opacity: ", ";\n  "])), open ? 'visible' : 'hidden', open ? 1 : 0);
 };
 var templateObject_1$$;
 
@@ -12322,8 +12322,8 @@ var focusInputfield = {
   boxShadow: "inset 0 0 0 1px ".concat(Border$e.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: Colors$q.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors$q.DdsColorDangerBase)
+  borderColor: Colors$q.DdsColorDangerDarker,
+  boxShadow: "inset 0 0 0 1px ".concat(Colors$q.DdsColorDangerDarker)
 };
 
 var Colors$p = ddsBaseTokens.colors;
@@ -20158,6 +20158,76 @@ var _default$k = (0, _createSvgIcon$k.default)( /*#__PURE__*/(0, _jsxRuntime$k.j
 
 default_1$k = LaunchOutlined.default = _default$k;
 
+var joinClassNames = function joinClassNames() {
+  var classNames = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    classNames[_i] = arguments[_i];
+  }
+
+  return classNames.filter(Boolean).join(' ');
+};
+/**
+ * Slår sammen id, className, htmlProps og unknownProps til ett objekt
+ * som kan spreades som baseprops for en komponent. `unknownProps` er
+ * med for å sikre at aria- og data- attributter blir spreadet, alle
+ * komponenter må derfor ta hensyn til `...rest` når de leser props.
+ *
+ * Typisk bruk:
+ * ```
+ * const Props = BaseComponentProps<HTMLElement, {
+ *   propA: string,
+ *   propB: string,
+ * }>
+ *
+ * const MyComponent = (props: Props) => {
+ *   const { propA, propB, id, className, htmlProps, ...rest } = props;
+ *
+ *   const wrapperProps = getBaseHTMLProps(id, className, htmlProps, rest)
+ *
+ *   return <div {...wrapperProps}>innhold</div>
+ * }
+ * ```
+ * @param id id fra props til komponenten.
+ * @param className className for komponenten.
+ * @param htmlProps htmlProps fra komponenten.
+ * @param unknownProps andre ukjente props som skal spreades, kommer typisk fra `...rest` når man leser props til komponenten.
+ * @returns Objekt med alle argumentene som kan spreades.
+ *
+ * Kan også kalles uten `className`-parameteret. Oppførselen er lik.
+ */
+
+var getBaseHTMLProps = function getBaseHTMLProps(id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unknownPropsOrUndefined) {
+  var _a, _b;
+
+  if (typeof htmlPropsOrClassName === 'string' || unknownPropsOrUndefined != undefined) {
+    var _c = (_a = htmlPropsOrUnknownProps) !== null && _a !== void 0 ? _a : {},
+        idFromHtmlProps = _c.id,
+        classNameFromHtmlProps = _c.className,
+        restHTMLProps = __rest(_c, ["id", "className"]);
+
+    var propId = id !== null && id !== void 0 ? id : idFromHtmlProps;
+    var propClassName = joinClassNames(htmlPropsOrClassName, classNameFromHtmlProps);
+    return __assign(__assign(__assign(__assign({}, unknownPropsOrUndefined), restHTMLProps), propClassName && {
+      className: propClassName
+    }), propId && {
+      id: propId
+    });
+  } else {
+    var _d = (_b = htmlPropsOrClassName) !== null && _b !== void 0 ? _b : {},
+        htmlPropsId = _d.id,
+        htmlPropsClassName = _d.className,
+        restHTMLProps = __rest(_d, ["id", "className"]);
+
+    var propId = id !== null && id !== void 0 ? id : htmlPropsId;
+    return __assign(__assign(__assign(__assign({}, htmlPropsOrUnknownProps), restHTMLProps), htmlPropsClassName && {
+      className: htmlPropsClassName
+    }), propId && {
+      id: propId
+    });
+  }
+};
+
 var getElementType = function getElementType(element) {
   switch (element) {
     case 'a':
@@ -20236,7 +20306,7 @@ var StyledTypography = styled$3.p.withConfig({
 }, function (_a) {
   var typographyType = _a.typographyType,
       interactionProps = _a.interactionProps;
-  return typographyType === 'a' && Ae(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      transition: ", ";\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      transition: ", ";\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "])), focusVisibleLinkTransitionValue, typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n        &:active {\n          ", "\n        }\n      "], ["\n        &:active {\n          ", "\n        }\n      "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
+  return typographyType === 'a' && Ae(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      @media (prefers-reduced-motion: no-preference) {\n        transition: ", ";\n      }\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      @media (prefers-reduced-motion: no-preference) {\n        transition: ", ";\n      }\n\n      &:hover {\n        ", "\n      }\n      ", "\n      &:focus-visible, &.focus-visible {\n        ", "\n      }\n      &:focus-visible::selection &.focus-visible::selection {\n        ", "\n      }\n    "])), focusVisibleLinkTransitionValue, typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n        &:active {\n          ", "\n        }\n      "], ["\n        &:active {\n          ", "\n        }\n      "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
 }, function (_a) {
   var interactionProps = _a.interactionProps;
   return interactionProps && interactionProps.hover && Ae(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n    "])), interactionProps.hover);
@@ -20272,7 +20342,15 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
       typographyType = _b === void 0 ? 'bodySans02' : _b,
       propAs = props.as,
       children = props.children,
-      rest = __rest(props, ["typographyType", "as", "children"]);
+      style = props.style,
+      id = props.id,
+      className = props.className,
+      _c = props.htmlProps,
+      htmlProps = _c === void 0 ? {} : _c,
+      rest = __rest(props, ["typographyType", "as", "children", "style", "id", "className", "htmlProps"]);
+
+  var htmlPropsStyle = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["style"]);
 
   var as = propAs ? propAs : getElementType(typographyType);
   var relProp;
@@ -20287,9 +20365,10 @@ var Typography = /*#__PURE__*/React.forwardRef(function (props, ref) {
     targetProp = as !== 'a' ? undefined : externalLink ? '_blank' : target;
   }
 
-  var typographyProps = __assign(__assign({}, rest), {
+  var typographyProps = __assign(__assign({}, getBaseHTMLProps(id, className, restHtmlProps, rest)), {
     typographyType: typographyType,
     as: as,
+    style: __assign(__assign({}, htmlPropsStyle), style),
     rel: relProp,
     target: targetProp
   });
@@ -20437,76 +20516,6 @@ var Container$j = styled$3.label.withConfig({
 }, CustomRadioButton, radioButtonTokens.checkmark.base);
 var templateObject_1$Y, templateObject_2$I, templateObject_3$u, templateObject_4$o, templateObject_5$f, templateObject_6$d;
 
-var joinClassNames = function joinClassNames() {
-  var classNames = [];
-
-  for (var _i = 0; _i < arguments.length; _i++) {
-    classNames[_i] = arguments[_i];
-  }
-
-  return classNames.filter(Boolean).join(' ');
-};
-/**
- * Slår sammen id, className, htmlProps og unknownProps til ett objekt
- * som kan spreades som baseprops for en komponent. `unknownProps` er
- * med for å sikre at aria- og data- attributter blir spreadet, alle
- * komponenter må derfor ta hensyn til `...rest` når de leser props.
- *
- * Typisk bruk:
- * ```
- * const Props = BaseComponentProps<HTMLElement, {
- *   propA: string,
- *   propB: string,
- * }>
- *
- * const MyComponent = (props: Props) => {
- *   const { propA, propB, id, className, htmlProps, ...rest } = props;
- *
- *   const wrapperProps = getBaseHTMLProps(id, className, htmlProps, rest)
- *
- *   return <div {...wrapperProps}>innhold</div>
- * }
- * ```
- * @param id id fra props til komponenten.
- * @param className className for komponenten.
- * @param htmlProps htmlProps fra komponenten.
- * @param unknownProps andre ukjente props som skal spreades, kommer typisk fra `...rest` når man leser props til komponenten.
- * @returns Objekt med alle argumentene som kan spreades.
- *
- * Kan også kalles uten `className`-parameteret. Oppførselen er lik.
- */
-
-var getBaseHTMLProps = function getBaseHTMLProps(id, htmlPropsOrClassName, htmlPropsOrUnknownProps, unknownPropsOrUndefined) {
-  var _a, _b;
-
-  if (typeof htmlPropsOrClassName === 'string' || unknownPropsOrUndefined != undefined) {
-    var _c = (_a = htmlPropsOrUnknownProps) !== null && _a !== void 0 ? _a : {},
-        idFromHtmlProps = _c.id,
-        classNameFromHtmlProps = _c.className,
-        restHTMLProps = __rest(_c, ["id", "className"]);
-
-    var propId = id !== null && id !== void 0 ? id : idFromHtmlProps;
-    var propClassName = joinClassNames(htmlPropsOrClassName, classNameFromHtmlProps);
-    return __assign(__assign(__assign(__assign({}, unknownPropsOrUndefined), restHTMLProps), propClassName && {
-      className: propClassName
-    }), propId && {
-      id: propId
-    });
-  } else {
-    var _d = (_b = htmlPropsOrClassName) !== null && _b !== void 0 ? _b : {},
-        htmlPropsId = _d.id,
-        htmlPropsClassName = _d.className,
-        restHTMLProps = __rest(_d, ["id", "className"]);
-
-    var propId = id !== null && id !== void 0 ? id : htmlPropsId;
-    return __assign(__assign(__assign(__assign({}, htmlPropsOrUnknownProps), restHTMLProps), htmlPropsClassName && {
-      className: htmlPropsClassName
-    }), propId && {
-      id: propId
-    });
-  }
-};
-
 var nextUniqueId$h = 0;
 
 var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
@@ -20597,7 +20606,7 @@ var changeRGBAAlpha = function changeRGBAAlpha(value, alpha) {
 var Backdrop = styled$3.div.withConfig({
   displayName: "Backdrop",
   componentId: "sc-vimg90-0"
-})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  overflow-y: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 50;\n  opacity: ", ";\n  transition: opacity 0.2s;\n"], ["\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  overflow-y: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 50;\n  opacity: ", ";\n  transition: opacity 0.2s;\n"])), changeRGBAAlpha(ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_a) {
+})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  overflow-y: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 50;\n  opacity: ", ";\n  @media (prefers-reduced-motion: no-preference) {\n    transition: opacity 0.2s;\n  }\n"], ["\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  overflow-y: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 50;\n  opacity: ", ";\n  @media (prefers-reduced-motion: no-preference) {\n    transition: opacity 0.2s;\n  }\n"])), changeRGBAAlpha(ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_a) {
   var isOpen = _a.isOpen;
   return isOpen ? 1 : 0;
 });
@@ -21223,7 +21232,7 @@ var Input$4 = styled$3.input.attrs(function (_a) {
 var Container$h = styled$3.label.withConfig({
   displayName: "Checkboxstyles__Container",
   componentId: "sc-17q1ubf-2"
-})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    ", "\n    transition: ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    ", "\n    transition: ", ";\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"])), checkboxTokens.container.base, function (_a) {
+})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    @media (prefers-reduced-motion: no-preference) {\n      transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n    }\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    ", "\n    @media (prefers-reduced-motion: no-preference) {\n      transition: ", ";\n    }\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  width: fit-content;\n  ", "\n  ", "\n\n    input ~ ", " {\n    @media (prefers-reduced-motion: no-preference) {\n      transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n    }\n  }\n\n  input:checked ~ ", ":after {\n    display: block;\n  }\n\n  input:checked ~ ", " {\n    ", "\n  }\n\n  &:hover input:enabled ~ ", " {\n    ", "\n  }\n  &:hover input:checked:enabled ~ ", " {\n    ", "\n  }\n  &:focus-within {\n    ", "\n    @media (prefers-reduced-motion: no-preference) {\n      transition: ", ";\n    }\n  }\n\n  ", "\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", ":after {\n    border: solid ", ";\n    ", "\n  }\n"])), checkboxTokens.container.base, function (_a) {
   var label = _a.label;
   return label ? Ae(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), checkboxTokens.container.noLabel.base);
 }, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focus.base, focusVisibleTransitionValue, function (_a) {
@@ -21907,20 +21916,20 @@ var spinnerTokens = {
 var StyledSpinner = styled$3.svg.withConfig({
   displayName: "Spinner__StyledSpinner",
   componentId: "sc-13hsttm-0"
-})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  display: block;\n  animation: rotate 2s linear infinite;\n  animation-delay: ", "ms;\n  width: ", ";\n  height: ", ";\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
-  var outerAnimationDelay = _a.outerAnimationDelay;
-  return outerAnimationDelay;
-}, function (_a) {
+})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  stroke-dasharray: 90, 150;\n  animation: rotate 1.5s linear infinite;\n  animation-delay: ", "ms;\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: rotate 2s linear infinite;\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  display: block;\n  width: ", ";\n  height: ", ";\n  stroke-dasharray: 90, 150;\n  animation: rotate 1.5s linear infinite;\n  animation-delay: ", "ms;\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: rotate 2s linear infinite;\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (_a) {
   var size = _a.size;
   return size;
 }, function (_a) {
   var size = _a.size;
   return size;
+}, function (_a) {
+  var outerAnimationDelay = _a.outerAnimationDelay;
+  return outerAnimationDelay;
 });
 var Circle = styled$3.circle.withConfig({
   displayName: "Spinner__Circle",
   componentId: "sc-13hsttm-1"
-})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"], ["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n  animation-delay: ", "ms;\n"])), spinnerTokens.circle.base, function (_a) {
+})(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: dash 1.5s ease-in-out infinite;\n    animation-delay: ", "ms;\n\n    @keyframes dash {\n      0% {\n        stroke-dasharray: 1, 150;\n        stroke-dashoffset: 0;\n      }\n      50% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -35;\n      }\n      100% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -124;\n      }\n    }\n  }\n"], ["\n  ", "\n  stroke: ", ";\n  stroke-linecap: round;\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: dash 1.5s ease-in-out infinite;\n    animation-delay: ", "ms;\n\n    @keyframes dash {\n      0% {\n        stroke-dasharray: 1, 150;\n        stroke-dashoffset: 0;\n      }\n      50% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -35;\n      }\n      100% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -124;\n      }\n    }\n  }\n"])), spinnerTokens.circle.base, function (_a) {
   var color = _a.color;
   return color && getTextColor(color);
 }, function (_a) {
@@ -21975,7 +21984,7 @@ var templateObject_1$O, templateObject_2$B;
 var ButtonWrapper$1 = styled$3.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s, ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n\n  *::selection {\n    ", "\n  }\n"], ["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s, ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
+})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s, text-decoration-color 0.2s,\n      box-shadow 0.2s, border-color 0.2s, color 0.2s,\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n\n  *::selection {\n    ", "\n  }\n"], ["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s, text-decoration-color 0.2s,\n      box-shadow 0.2s, border-color 0.2s, color 0.2s,\n      ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
   var fullWidth = _a.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
 }, focusVisibleTransitionValue, function (_a) {
@@ -27288,7 +27297,7 @@ var Label = styled$3(Typography).withConfig({
 var Container$f = styled$3.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  transition: 0.2s;\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n  }\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"], ["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n  }\n  position: relative;\n  ", "\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n  &:hover {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  &:focus-within {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n  ", "\n\n  .", "__menu-list {\n    ", "\n  }\n  &:hover\n    .", "__dropdown-indicator,\n    &:focus-within\n    .", "__dropdown-indicator {\n    ", "\n  }\n\n  ", "\n  ", "\n"])), selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_a) {
   var isMulti = _a.isMulti;
   return isMulti && Ae(templateObject_2$y || (templateObject_2$y = __makeTemplateObject([""], [""])));
 }, function (_a) {
@@ -27343,7 +27352,9 @@ var getCustomStyles = function getCustomStyles() {
       return __assign({
         display: 'inline-flex',
         transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : '',
-        transition: '0.2s'
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s, transform 0.2s'
+        }
       }, selectTokens.dropdownIndicator.base);
     },
     valueContainer: function valueContainer(provided, state) {
@@ -27366,7 +27377,9 @@ var getCustomStyles = function getCustomStyles() {
       return state.selectProps.isDisabled ? {
         display: 'none'
       } : __assign(__assign(__assign(__assign({}, provided), {
-        transition: '0.2s'
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s, background-color 0.2s'
+        }
       }), selectTokens.multiValueRemove.base), {
         svg: __assign({}, selectTokens.multiValueRemove.icon.base),
         '&:hover': __assign({}, selectTokens.multiValueRemove.hover.base),
@@ -27394,7 +27407,9 @@ var getCustomStyles = function getCustomStyles() {
       return __assign(__assign(__assign(__assign(__assign({}, provided), {
         display: 'flex',
         alignItems: 'center',
-        transition: '0.2s'
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s, background-color 0.2s'
+        }
       }), selectTokens.option.base), {
         '&:hover': __assign({}, selectTokens.option.hover.base)
       }), state.isSelected || state.isFocused ? selectTokens.option.selected.base : {});
@@ -27419,6 +27434,20 @@ var templateObject_1$K, templateObject_2$y, templateObject_3$m, templateObject_4
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
     Input$2 = components.Input;
+var createSelectOptions = function createSelectOptions() {
+  var args = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+
+  return args.map(function (v) {
+    return {
+      label: v,
+      value: v
+    };
+  });
+};
 
 var IconOption = function IconOption(props) {
   return jsxRuntime.exports.jsxs(DdsOption, __assign({}, props, {
@@ -28408,7 +28437,7 @@ var bodyStyles = function bodyStyles(mode, selected) {
 var StyledRow = styled$3.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-15vvjkk-0"
-})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n\n  ", "\n\n  ", "\n"], ["\n  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
   var type = _a.type;
   return type && Ae(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), rowTokens[type].base);
 }, function (_a) {
@@ -28687,19 +28716,28 @@ var TableWrapper = function TableWrapper(_a) {
 };
 var templateObject_1$z, templateObject_2$q;
 
-var Breadcrumb = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var children = _a.children,
-      href = _a.href,
-      rest = __rest(_a, ["children", "href"]);
+var isAnchorTypographyProps = function isAnchorTypographyProps(props) {
+  return props.href != undefined;
+};
 
-  return href ? jsxRuntime.exports.jsx(Typography, __assign({}, rest, {
-    ref: ref,
-    href: href,
-    typographyType: "a"
-  }, {
-    children: children
-  })) : jsxRuntime.exports.jsx(Typography, __assign({}, rest, {
+var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = __rest(props, ["children"]);
+
+  if (isAnchorTypographyProps(props)) {
+    return jsxRuntime.exports.jsx(Typography, __assign({
+      htmlProps: rest,
+      ref: ref,
+      typographyType: "a"
+    }, {
+      children: children
+    }));
+  }
+
+  return jsxRuntime.exports.jsx(Typography, __assign({
+    htmlProps: rest,
     ref: ref,
+    as: "span",
     color: "interactive"
   }, {
     children: children
@@ -29553,7 +29591,7 @@ var cardTokens = {
 var Container$a = styled$3.div.withConfig({
   displayName: "Card__Container",
   componentId: "sc-410ao9-0"
-})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  transition: box-shadow 0.2s, border-color 0.2s;\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
+})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-color 0.2s;\n  }\n  ", "\n  ", "\n"], ["\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-color 0.2s;\n  }\n  ", "\n  ", "\n"])), cardTokens.base, typographyTokens.selection.base, function (_a) {
   var color = _a.color;
   return color && Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), cardTokens.colors[color].base);
 }, function (_a) {
@@ -29694,11 +29732,11 @@ var ContentWrapper = styled$3.div.withConfig({
 var HeaderContainer$2 = styled$3.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
-})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: box-shadow 0.2s;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: box-shadow 0.2s;\n  ", "\n"])), cardAccordionHeaderTokens.base);
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s;\n  }\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s;\n  }\n  ", "\n"])), cardAccordionHeaderTokens.base);
 var HeaderWrapper = styled$3.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
-})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  position: relative;\n  cursor: pointer;\n  transition: box-shadow 0.2s;\n  ", "\n  display: block;\n  width: 100%;\n  &:hover {\n    ", "\n  }\n\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    ", "\n  }\n"], ["\n  position: relative;\n  cursor: pointer;\n  transition: box-shadow 0.2s;\n  ", "\n  display: block;\n  width: 100%;\n  &:hover {\n    ", "\n  }\n\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    ", "\n  }\n"])), removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
+})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  position: relative;\n  cursor: pointer;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s;\n  }\n  ", "\n  display: block;\n  width: 100%;\n  &:hover {\n    ", "\n  }\n\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    ", "\n  }\n"], ["\n  position: relative;\n  cursor: pointer;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s;\n  }\n  ", "\n  display: block;\n  width: 100%;\n  &:hover {\n    ", "\n  }\n\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    ", "\n  }\n"])), removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
 var ChevronWrapper = styled$3.span.withConfig({
   displayName: "CardAccordionHeader__ChevronWrapper",
   componentId: "sc-1qs6bkj-3"
@@ -29755,11 +29793,11 @@ var cardAccordionBodyTokens = {
   base: base$2
 };
 
-var expandingAnimation = Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  transition: padding 0.2s, visibility 0.3s,\n    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"], ["\n  transition: padding 0.2s, visibility 0.3s,\n    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n"])));
+var expandingAnimation = Ae(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: padding 0.2s, visibility 0.3s,\n      max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n"], ["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: padding 0.2s, visibility 0.3s,\n      max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n"])));
 var Body = styled$3.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), expandingAnimation, cardAccordionBodyTokens.base, function (_a) {
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  @media (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  @media (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n  ", "\n  ", "\n  ", "\n"])), expandingAnimation, cardAccordionBodyTokens.base, function (_a) {
   var paddingTop = _a.paddingTop;
   return paddingTop && Ae(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), paddingTop);
 }, function (_a) {
@@ -31724,7 +31762,7 @@ var Span = styled$3.span.withConfig({
 var Link$2 = styled$3.a.withConfig({
   displayName: "OverflowMenuItem__Link",
   componentId: "sc-1ka2asi-1"
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n"])), overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
+})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s;\n  }\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  width: 100%;\n  ", "\n  display: flex;\n  align-items: center;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s;\n  }\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n"])), overflowMenuTokens.link.base, overflowMenuTokens.link.hover.base, overflowMenuTokens.link.active.base, overflowMenuTokens.link.focus.base);
 var StyledIconWrapper = styled$3(IconWrapper$1).withConfig({
   displayName: "OverflowMenuItem__StyledIconWrapper",
   componentId: "sc-1ka2asi-2"
@@ -32089,7 +32127,7 @@ var templateObject_1$j, templateObject_2$d, templateObject_3$7, templateObject_4
 var Link$1 = styled$3.a.withConfig({
   displayName: "NavigationItem__Link",
   componentId: "sc-1fua9kw-0"
-})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  transition: background-color 0.2s;\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n  ", "\n"])), internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_a) {
+})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s;\n  }\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 0.2s;\n  }\n  height: 100%;\n  box-sizing: border-box;\n  ", "\n  &:hover {\n    ", "\n  }\n  &:active {\n    ", "\n  }\n  &:focus-visible,\n  &.focus-visible {\n    ", "\n  }\n  ", "\n"])), internalHeaderTokens.navigationLink.base, internalHeaderTokens.navigationLink.hover.base, internalHeaderTokens.navigationLink.active.base, internalHeaderTokens.navigationLink.focus.base, function (_a) {
   var isCurrent = _a.isCurrent;
   return isCurrent && Ae(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), internalHeaderTokens.navigationLink.current.base);
 });
@@ -32379,14 +32417,14 @@ var skipToContentTokens = {
 var Wrapper$2 = styled$3.div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  transition: opacity 0.2s;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"])), function (_a) {
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: opacity 0.2s;\n  }\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  top: ", ";\n  text-align: center;\n  opacity: 0;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: opacity 0.2s;\n  }\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  width: 1px;\n  white-space: nowrap;\n  ", "\n\n  &:focus-within {\n    clip: auto;\n    height: auto;\n    overflow: auto;\n    width: 100%;\n    z-index: 200;\n    opacity: 1;\n  }\n"])), function (_a) {
   var top = _a.top;
   return top;
 }, skipToContentTokens.wrapper.base);
 var Link = styled$3.a.withConfig({
   displayName: "SkipToContent__Link",
   componentId: "sc-57o1qv-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  ", "\n  &:focus {\n    ", "\n    transition: ", ";\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  ", "\n  &:focus {\n    ", "\n    transition: ", ";\n  }\n  &:hover {\n    ", "\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focus.base, focusVisibleTransitionValue, skipToContentTokens.link.hover.base);
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  ", "\n  &:focus {\n    ", "\n    @media (prefers-reduced-motion: no-preference) {\n      transition: ", ";\n    }\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  ", "\n  &:focus {\n    ", "\n    @media (prefers-reduced-motion: no-preference) {\n      transition: ", ";\n    }\n  }\n  &:hover {\n    ", "\n  }\n"])), skipToContentTokens.link.base, skipToContentTokens.link.focus.base, focusVisibleTransitionValue, skipToContentTokens.link.hover.base);
 var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _a = props.text,
       text = _a === void 0 ? 'Til hovedinnhold' : _a,
@@ -32793,7 +32831,7 @@ var drawerTokens = {
 var Container$4 = styled$3(Paper).withConfig({
   displayName: "Drawer__Container",
   componentId: "sc-i9luw3-0"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  transition: transform 0.5s;\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  transition: transform 0.5s;\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"])), function (_a) {
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  @media (prefers-reduced-motion: no-preference) {\n    transition: transform 0.5s;\n  }\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  min-width: 300px;\n  ", "\n  ", "\n  z-index: 50;\n  ", "\n  @media (prefers-reduced-motion: no-preference) {\n    transition: transform 0.5s;\n  }\n  ", "\n  &:focus-visible, &.focus-visible {\n    ", "\n  }\n"])), function (_a) {
   var size = _a.size;
   return Ae(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), drawerTokens.container.size[size].base);
 }, function (_a) {
@@ -33202,7 +33240,7 @@ var Input = styled$3.input.withConfig({
 var Content = styled$3.span.withConfig({
   displayName: "ToggleButton__Content",
   componentId: "sc-ya01sa-1"
-})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s,\n    ", ";\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s,\n    ", ";\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"])), focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;\n  }\n  ", ";\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  @media (prefers-reduced-motion: no-preference) {\n    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;\n  }\n  ", ";\n  cursor: pointer;\n  ", "\n  width: fit-content;\n  ", "\n  ", "\n  ", "\n  &::selection, *::selection {\n    ", "\n  }\n  &:hover {\n    ", "\n  }\n"])), focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
 var Container$3 = styled$3.label.withConfig({
   displayName: "ToggleButton__Container",
   componentId: "sc-ya01sa-2"
@@ -33340,6 +33378,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange && onChange(index);
   };
 
+  React.useEffect(function () {
+    if (activeTab && activeTab != thisActiveTab) {
+      setActiveTab(activeTab);
+    }
+  }, [activeTab, thisActiveTab]);
+
   var containerProps = __assign(__assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
     ref: ref
   });
@@ -33368,7 +33412,9 @@ var Border = ddsBaseTokens.border,
     Spacing = ddsBaseTokens.spacing,
     Colors = ddsBaseTokens.colors;
 var tabListBase = {
-  transition: '0.2s',
+  '@media (prefers-reduced-motion: no-preference)': {
+    transition: focusVisibleTransitionValue
+  },
   display: 'flex',
   borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke),
   overflowX: 'auto'
@@ -33463,7 +33509,7 @@ var tabsTokens = {
 var Button = styled$3.button.withConfig({
   displayName: "Tab__Button",
   componentId: "sc-1dd8soq-0"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  transition: box-shadow 0.2s, border-bottom 0.2s, color 0.2s,\n    ", ";\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"], ["\n  transition: box-shadow 0.2s, border-bottom 0.2s, color 0.2s,\n    ", ";\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"])), focusVisibleTransitionValue, tabsTokens.tab.base, function (_a) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-bottom 0.2s, color 0.2s,\n      ", ";\n  }\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"], ["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: box-shadow 0.2s, border-bottom 0.2s, color 0.2s,\n      ", ";\n  }\n  ", "\n  width: ", ";\n\n  ", ";\n\n  ", "\n\n  &:focus-visible {\n    ", "\n  }\n\n  &:hover {\n    ", "\n  }\n"])), focusVisibleTransitionValue, tabsTokens.tab.base, function (_a) {
   var width = _a.width;
   return width;
 }, function (_a) {
@@ -33494,7 +33540,6 @@ var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _b = useTabsContext(),
       tabPanelsRef = _b.tabPanelsRef,
-      hasTabFocus = _b.hasTabFocus,
       setHasTabFocus = _b.setHasTabFocus,
       tabContentDirection = _b.tabContentDirection,
       tabWidth = _b.tabWidth;
@@ -33505,7 +33550,6 @@ var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (focus) {
       (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       setHasTabFocus(true);
-      console.log('setHasTabFocus if(focus)', hasTabFocus);
     }
   }, [focus]);
   useOnKeyDown('Tab', function () {
@@ -33626,7 +33670,7 @@ var templateObject_1$4;
 var Panel = styled$3.div.withConfig({
   displayName: "TabPanel__Panel",
   componentId: "sc-vkzivq-0"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  transition: ", ";\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"], ["\n  transition: ", ";\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"])), focusVisibleTransitionValue, tabsTokens.panel.base, function (_a) {
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: ", ";\n  }\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"], ["\n  @media (prefers-reduced-motion: no-preference) {\n    transition: ", ";\n  }\n  ", "\n  ", "\n    &:focus-visible {\n    ", "\n  }\n"])), focusVisibleTransitionValue, tabsTokens.panel.base, function (_a) {
   var active = _a.active;
   return !active && Ae(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
 }, tabsTokens.panel.focusVisible.base);
@@ -33939,6 +33983,7 @@ exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.createSelectOptions = createSelectOptions;
 exports.getTextColor = getTextColor;
 exports.isTextColor = isTextColor;
 exports.searchFilter = searchFilter;

package/dist/types/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gir tilbake `T` med properties fra `K` som påkrevd gitt at `Condition` er `true`
+ *
+ * @template Condition
+ * @template T
+ * @template K
+ */
+export declare type WithRequiredIf<Condition extends boolean, T, K extends keyof T> = Omit<T, K> & Pick<true extends Condition ? Required<T> : T, K>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "3.1.0",
+  "version": "4.0.2",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",