@norges-domstoler/dds-components 0.0.26 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/Checkbox/CheckboxGroup.d.ts +2 -1
  2. package/dist/components/Checkbox/CheckboxGroupContext.d.ts +9 -0
  3. package/dist/components/RadioButton/RadioButtonGroupContext.d.ts +1 -0
  4. package/dist/components/TextInput/CharCounter.d.ts +3 -2
  5. package/dist/components/TextInput/TextInput.styles.d.ts +3 -2
  6. package/dist/components/Typography/Typography.d.ts +1 -2
  7. package/dist/components/Typography/Typography.types.d.ts +1 -0
  8. package/dist/helpers/Input/Input.styles.d.ts +4 -2
  9. package/dist/helpers/Input/Input.types.d.ts +3 -1
  10. package/dist/helpers/InputMessage/InputMessage.d.ts +6 -6
  11. package/dist/helpers/styling/index.d.ts +1 -0
  12. package/dist/helpers/styling/removeButtonStyling.d.ts +1 -0
  13. package/dist/index.es.js +334 -209
  14. package/dist/index.js +334 -209
  15. package/dist/utils/idGenerator.d.ts +3 -0
  16. package/dist/utils/index.d.ts +1 -0
  17. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -11805,17 +11805,17 @@ var ddsBaseTokens = {
11805
11805
  fontPackages: fontPackages,
11806
11806
  };
11807
11807
 
11808
- var Colors$l = ddsBaseTokens.colors, FontPackages$k = ddsBaseTokens.fontPackages, BorderRadius$7 = ddsBaseTokens.borderRadius, Border$f = ddsBaseTokens.border;
11808
+ var Colors$l = ddsBaseTokens.colors, FontPackages$k = ddsBaseTokens.fontPackages, BorderRadius$7 = ddsBaseTokens.borderRadius, Border$g = ddsBaseTokens.border;
11809
11809
  var textDefault$8 = {
11810
11810
  textColor: Colors$l.DdsColorNeutralsGray9,
11811
11811
  font: FontPackages$k.body_sans_02.base,
11812
11812
  };
11813
11813
  var focus = {
11814
11814
  colorDefault: Colors$l.DdsColorWarningDarker,
11815
- outlineWidth: Border$f.BordersDdsBorderStyle1StrokeWeight,
11815
+ outlineWidth: Border$g.BordersDdsBorderStyle1StrokeWeight,
11816
11816
  color__TextInput: Colors$l.DdsColorInteractiveBase,
11817
11817
  textColor__TextInput: Colors$l.DdsColorInteractiveDark,
11818
- borderWidth__TextInput: Border$f.BordersDdsBorderStyle1StrokeWeightNumberPx * 2 + "px",
11818
+ borderWidth__TextInput: Border$g.BordersDdsBorderStyle1StrokeWeightNumberPx * 2 + "px",
11819
11819
  };
11820
11820
  var ddsReferenceTokens = {
11821
11821
  focus: focus,
@@ -11823,7 +11823,7 @@ var ddsReferenceTokens = {
11823
11823
  textInput: {
11824
11824
  input: {
11825
11825
  borderRadius: BorderRadius$7.RadiiDdsBorderRadius1Radius,
11826
- borderWidth: Border$f.BordersDdsBorderStyle1StrokeWeight,
11826
+ borderWidth: Border$g.BordersDdsBorderStyle1StrokeWeight,
11827
11827
  borderColor: Colors$l.DdsColorNeutralsGray5,
11828
11828
  textColor: textDefault$8.textColor,
11829
11829
  font: FontPackages$k.supportingStyle_inputtext_02.base,
@@ -11851,7 +11851,7 @@ var ddsReferenceTokens = {
11851
11851
  var Colors$k = ddsBaseTokens.colors,
11852
11852
  FontPackages$j = ddsBaseTokens.fontPackages,
11853
11853
  Spacing$t = ddsBaseTokens.spacing,
11854
- Border$e = ddsBaseTokens.border;
11854
+ Border$f = ddsBaseTokens.border;
11855
11855
  var textDefault$7 = ddsReferenceTokens.textDefault;
11856
11856
  var textColors = {
11857
11857
  interactive: Colors$k.DdsColorInteractiveBase,
@@ -11887,7 +11887,7 @@ var aHoverBase = {
11887
11887
  color: Colors$k.DdsColorInteractiveDark
11888
11888
  };
11889
11889
  var aFocusBase = {
11890
- backgroundColor: Border$e.BordersDdsBorderFocusBaseStroke,
11890
+ backgroundColor: Border$f.BordersDdsBorderFocusBaseStroke,
11891
11891
  color: Colors$k.DdsColorNeutralsWhite,
11892
11892
  textDecoration: 'none',
11893
11893
  outline: 'none'
@@ -20043,7 +20043,7 @@ var getTextColor = function getTextColor(color) {
20043
20043
  };
20044
20044
 
20045
20045
  var getElementStyling = function getElementStyling(type) {
20046
- return Ae(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n &::selection, *::selection {\n ", "\n }\n "], ["\n ", "\n &::selection, *::selection {\n ", "\n }\n "])), typographyTokens.typographyType[type].base, typographyTokens.selection.base);
20046
+ return Ae(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n &::selection, *::selection {\n ", "\n }\n "], ["\n ", "\n &::selection, *::selection {\n ", "\n }\n "])), typographyTokens.typographyType[type].base, typographyTokens.selection.base);
20047
20047
  };
20048
20048
 
20049
20049
  var LinkIconWrapper = styled(IconWrapper$1).withConfig({
@@ -20059,7 +20059,7 @@ var StyledTypography = styled.p.withConfig({
20059
20059
  }, function (_a) {
20060
20060
  var typographyType = _a.typographyType,
20061
20061
  interactionProps = _a.interactionProps;
20062
- return typographyType === 'a' && Ae(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n\n &:hover {\n ", "\n }\n ", "\n &:focus-visible {\n ", "\n }\n &:focus-visible::selection {\n ", "\n }\n "], ["\n display: inline-flex;\n align-items: center;\n\n &:hover {\n ", "\n }\n ", "\n &:focus-visible {\n ", "\n }\n &:focus-visible::selection {\n ", "\n }\n "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n &:active {\n ", "\n }\n "], ["\n &:active {\n ", "\n }\n "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
20062
+ return typographyType === 'a' && Ae(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n transition: 0.2s;\n\n &:hover {\n ", "\n }\n ", "\n &:focus-visible {\n ", "\n }\n &:focus-visible::selection {\n ", "\n }\n "], ["\n display: inline-flex;\n align-items: center;\n transition: 0.2s;\n\n &:hover {\n ", "\n }\n ", "\n &:focus-visible {\n ", "\n }\n &:focus-visible::selection {\n ", "\n }\n "])), typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && Ae(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n &:active {\n ", "\n }\n "], ["\n &:active {\n ", "\n }\n "])), interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
20063
20063
  }, function (_a) {
20064
20064
  var interactionProps = _a.interactionProps;
20065
20065
  return interactionProps && interactionProps.hover && Ae(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n &:hover {\n ", "\n }\n "], ["\n &:hover {\n ", "\n }\n "])), interactionProps.hover);
@@ -20110,7 +20110,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20110
20110
  }, void 0) : '']
20111
20111
  }), void 0);
20112
20112
  });
20113
- var templateObject_1$L, templateObject_2$z, templateObject_3$p, templateObject_4$k, templateObject_5$e, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$6, templateObject_11$5, templateObject_12$3, templateObject_13$2;
20113
+ var templateObject_1$M, templateObject_2$z, templateObject_3$p, templateObject_4$k, templateObject_5$e, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$6, templateObject_11$5, templateObject_12$3, templateObject_13$2;
20114
20114
 
20115
20115
  var RadioButtonGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
20116
20116
  var useRadioButtonGroup = function useRadioButtonGroup() {
@@ -20118,7 +20118,7 @@ var useRadioButtonGroup = function useRadioButtonGroup() {
20118
20118
  };
20119
20119
 
20120
20120
  var Colors$j = ddsBaseTokens.colors,
20121
- Border$d = ddsBaseTokens.border,
20121
+ Border$e = ddsBaseTokens.border,
20122
20122
  Spacing$s = ddsBaseTokens.spacing,
20123
20123
  FontPackages$i = ddsBaseTokens.fontPackages;
20124
20124
  var radioButtonBase = {
@@ -20219,8 +20219,8 @@ var radioButtonTokens = {
20219
20219
  container: {
20220
20220
  base: containerBase$4,
20221
20221
  focusOutline: {
20222
- color: Border$d.BordersDdsBorderFocusBaseStroke,
20223
- width: Border$d.BordersDdsBorderFocusBaseStrokeWeight
20222
+ color: Border$e.BordersDdsBorderFocusBaseStroke,
20223
+ width: Border$e.BordersDdsBorderFocusBaseStrokeWeight
20224
20224
  }
20225
20225
  }
20226
20226
  };
@@ -20228,8 +20228,8 @@ var radioButtonTokens = {
20228
20228
  var CustomRadioButton = styled.span.withConfig({
20229
20229
  displayName: "RadioButtonstyles__CustomRadioButton",
20230
20230
  componentId: "sc-iwypha-0"
20231
- })(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n border-radius: 50%;\n vertical-align: middle;\n ", "\n left: ", ";\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"], ["\n position: absolute;\n box-sizing: border-box;\n border-radius: 50%;\n vertical-align: middle;\n ", "\n left: ", ";\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"])), radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
20232
- var Input$4 = styled.input.attrs(function (_a) {
20231
+ })(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n border-radius: 50%;\n vertical-align: middle;\n ", "\n left: ", ";\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"], ["\n position: absolute;\n box-sizing: border-box;\n border-radius: 50%;\n vertical-align: middle;\n ", "\n left: ", ";\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"])), radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
20232
+ var Input$5 = styled.input.attrs(function (_a) {
20233
20233
  var _b = _a.type,
20234
20234
  type = _b === void 0 ? 'radio' : _b;
20235
20235
  return {
@@ -20252,9 +20252,9 @@ var Container$a = styled.label.withConfig({
20252
20252
  var readOnly = _a.readOnly;
20253
20253
  return readOnly && Ae(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n cursor: default;\n input ~ ", " {\n ", "\n }\n input:checked ~ ", " {\n ", "\n }\n "], ["\n cursor: default;\n input ~ ", " {\n ", "\n }\n input:checked ~ ", " {\n ", "\n }\n "])), CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
20254
20254
  }, CustomRadioButton, radioButtonTokens.checkmark.base);
20255
- var templateObject_1$K, templateObject_2$y, templateObject_3$o, templateObject_4$j, templateObject_5$d, templateObject_6$d;
20255
+ var templateObject_1$L, templateObject_2$y, templateObject_3$o, templateObject_4$j, templateObject_5$d, templateObject_6$d;
20256
20256
 
20257
- var nextUniqueId$8 = 0;
20257
+ var nextUniqueId$a = 0;
20258
20258
 
20259
20259
  var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
20260
20260
  if (typeof value !== 'undefined' && value !== null && group) {
@@ -20282,9 +20282,10 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20282
20282
  children = _a.children,
20283
20283
  required = _a.required,
20284
20284
  onChange = _a.onChange,
20285
- rest = __rest(_a, ["id", "name", "label", "disabled", "readOnly", "error", "style", "checked", "value", "className", "children", "required", "onChange"]);
20285
+ ariaDescribedby = _a["aria-describedby"],
20286
+ rest = __rest(_a, ["id", "name", "label", "disabled", "readOnly", "error", "style", "checked", "value", "className", "children", "required", "onChange", 'aria-describedby']);
20286
20287
 
20287
- var uniqueId = React.useState(id !== null && id !== void 0 ? id : "radioButton-" + nextUniqueId$8++)[0];
20288
+ var uniqueId = React.useState(id !== null && id !== void 0 ? id : "radioButton-" + nextUniqueId$a++)[0];
20288
20289
  var radioButtonGroup = useRadioButtonGroup();
20289
20290
 
20290
20291
  var handleChange = function handleChange(event) {
@@ -20292,6 +20293,10 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20292
20293
  radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.onChange(event);
20293
20294
  };
20294
20295
 
20296
+ var describedByIds = [];
20297
+ if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
20298
+ if (ariaDescribedby) describedByIds.push(ariaDescribedby);
20299
+
20295
20300
  var inputProps = __assign({
20296
20301
  id: uniqueId,
20297
20302
  name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
@@ -20299,7 +20304,9 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20299
20304
  required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
20300
20305
  checked: typeof checked !== 'undefined' ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
20301
20306
  onChange: handleChange,
20302
- value: value
20307
+ value: value,
20308
+ 'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
20309
+ 'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
20303
20310
  }, rest);
20304
20311
 
20305
20312
  var containerProps = {
@@ -20312,7 +20319,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20312
20319
  return jsxRuntime.jsxs(Container$a, __assign({}, containerProps, {
20313
20320
  htmlFor: uniqueId
20314
20321
  }, {
20315
- children: [jsxRuntime.jsx(Input$4, __assign({
20322
+ children: [jsxRuntime.jsx(Input$5, __assign({
20316
20323
  ref: ref
20317
20324
  }, inputProps), void 0), jsxRuntime.jsx(CustomRadioButton, {}, void 0), jsxRuntime.jsx(Typography, __assign({
20318
20325
  as: "span"
@@ -20325,14 +20332,14 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20325
20332
  var MarkerWrapper = styled.span.withConfig({
20326
20333
  displayName: "RequiredMarker__MarkerWrapper",
20327
20334
  componentId: "sc-1p5sjqf-0"
20328
- })(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
20335
+ })(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), ddsBaseTokens.colors.DdsColorDangerBase);
20329
20336
 
20330
20337
  function RequiredMarker() {
20331
20338
  return jsxRuntime.jsx(MarkerWrapper, {
20332
20339
  children: "*"
20333
20340
  }, void 0);
20334
20341
  }
20335
- var templateObject_1$J;
20342
+ var templateObject_1$K;
20336
20343
 
20337
20344
  var ReportProblemOutlined = createCommonjsModule(function (module, exports) {
20338
20345
 
@@ -20391,21 +20398,25 @@ var InputMessageWrapper = styled.div.withConfig({
20391
20398
  componentId: "sc-n5r6yv-0"
20392
20399
  })(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: fit-content;\n word-break: break-word;\n ", "\n ", "\n max-width: ", ";\n\n svg {\n margin-right: ", ";\n position: relative;\n }\n"], ["\n display: flex;\n align-items: center;\n width: fit-content;\n word-break: break-word;\n ", "\n ", "\n max-width: ", ";\n\n svg {\n margin-right: ", ";\n position: relative;\n }\n"])), inputMessageTokens.base, function (_a) {
20393
20400
  var messageType = _a.messageType;
20394
- return messageType && Ae(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), inputMessageTokens[messageType].base);
20401
+ return messageType && Ae(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), inputMessageTokens[messageType].base);
20395
20402
  }, function (_a) {
20396
20403
  var maxWidth = _a.maxWidth;
20397
20404
  return maxWidth;
20398
20405
  }, inputMessageTokens.icon.spaceRight);
20399
-
20400
- function InputMessage(_a) {
20406
+ var InputMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20401
20407
  var message = _a.message,
20402
20408
  messageType = _a.messageType,
20403
20409
  _b = _a.maxWidth,
20404
- maxWidth = _b === void 0 ? inputMessageTokens.defaultMaxWidth : _b;
20405
- var wrapperProps = {
20410
+ maxWidth = _b === void 0 ? inputMessageTokens.defaultMaxWidth : _b,
20411
+ messageId = _a.messageId,
20412
+ rest = __rest(_a, ["message", "messageType", "maxWidth", "messageId"]);
20413
+
20414
+ var wrapperProps = __assign({
20415
+ ref: ref,
20406
20416
  messageType: messageType,
20407
20417
  maxWidth: maxWidth
20408
- };
20418
+ }, rest);
20419
+
20409
20420
  var isError = messageType === 'error';
20410
20421
  return jsxRuntime.jsxs(InputMessageWrapper, __assign({}, wrapperProps, {
20411
20422
  children: [isError && jsxRuntime.jsx(IconWrapper$1, {
@@ -20413,15 +20424,16 @@ function InputMessage(_a) {
20413
20424
  iconSize: "inline"
20414
20425
  }, void 0), jsxRuntime.jsx(Typography, __assign({
20415
20426
  typographyType: isError ? 'supportingStyleLabel01' : 'supportingStyleHelperText01',
20416
- as: "div",
20427
+ as: "span",
20428
+ id: messageId,
20417
20429
  bold: isError ? true : undefined,
20418
20430
  color: isError ? inputMessageTokens.error.base.color : undefined
20419
20431
  }, {
20420
20432
  children: message
20421
20433
  }), void 0)]
20422
20434
  }), void 0);
20423
- }
20424
- var templateObject_1$I, templateObject_2$x;
20435
+ });
20436
+ var templateObject_1$J, templateObject_2$x;
20425
20437
 
20426
20438
  var Spacing$q = ddsBaseTokens.spacing;
20427
20439
  var radioButtonGroupTokens = {
@@ -20430,10 +20442,37 @@ var radioButtonGroupTokens = {
20430
20442
  }
20431
20443
  };
20432
20444
 
20445
+ var combineHandlers = function combineHandlers(handler1, handler2) {
20446
+ var callback = function callback(event) {
20447
+ handler1 && handler1(event);
20448
+ handler2 && handler2(event);
20449
+ };
20450
+
20451
+ return callback;
20452
+ };
20453
+
20454
+ var derivativeIdGenerator = function derivativeIdGenerator(prefix, suffix, value) {
20455
+ return value ? prefix + "-" + suffix : undefined;
20456
+ };
20457
+ var idArrayGenerator = function idArrayGenerator(values) {
20458
+ var array = [];
20459
+ values.forEach(function (e) {
20460
+ if (e) {
20461
+ array.push(e);
20462
+ }
20463
+ });
20464
+ return array.length > 0 ? array : undefined;
20465
+ };
20466
+ var spaceSeparatedIdListGenerator = function spaceSeparatedIdListGenerator(values) {
20467
+ var _a;
20468
+
20469
+ return (_a = idArrayGenerator(values)) === null || _a === void 0 ? void 0 : _a.join(' ');
20470
+ };
20471
+
20433
20472
  var Container$9 = styled.div.withConfig({
20434
20473
  displayName: "RadioButtonGroup__Container",
20435
20474
  componentId: "sc-1xsll60-0"
20436
- })(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
20475
+ })(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
20437
20476
  var GroupContainer$1 = styled.div.withConfig({
20438
20477
  displayName: "RadioButtonGroup__GroupContainer",
20439
20478
  componentId: "sc-1xsll60-1"
@@ -20468,15 +20507,15 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
20468
20507
  setGroupValue = _b[1];
20469
20508
 
20470
20509
  var uniqueGroupId = React.useState(groupId !== null && groupId !== void 0 ? groupId : "radioButtonGroup-" + nextUniqueGroupId$1++)[0];
20471
-
20472
- var handleChange = function handleChange(event) {
20473
- var target = event.target;
20474
- setGroupValue(target.value);
20475
-
20476
- if (onChange) {
20477
- onChange(event, target.value);
20478
- }
20479
- };
20510
+ var handleChange = combineHandlers(function (e) {
20511
+ return setGroupValue(e.target.value);
20512
+ }, function (e) {
20513
+ return onChange && onChange(e, e.target.value);
20514
+ });
20515
+ var hasErrorMessage = !!errorMessage;
20516
+ var hasTip = !!tip;
20517
+ var tipId = hasTip ? uniqueGroupId + "-tip" : undefined;
20518
+ var errorMessageId = hasErrorMessage ? uniqueGroupId + "-errorMessage" : undefined;
20480
20519
 
20481
20520
  var containerProps = __assign({
20482
20521
  className: className,
@@ -20486,7 +20525,8 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
20486
20525
  var contextProps = {
20487
20526
  name: name,
20488
20527
  disabled: disabled,
20489
- error: !!errorMessage,
20528
+ error: hasErrorMessage,
20529
+ errorMessageId: errorMessageId,
20490
20530
  required: required,
20491
20531
  readOnly: readOnly,
20492
20532
  value: groupValue,
@@ -20499,29 +20539,33 @@ var RadioButtonGroup = function RadioButtonGroup(_a) {
20499
20539
  id: uniqueGroupId
20500
20540
  }, {
20501
20541
  children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
20502
- }), void 0), jsxRuntime.jsx(RadioButtonGroupContext.Provider, __assign({
20542
+ }), void 0), hasTip && jsxRuntime.jsx(InputMessage, {
20543
+ message: tip,
20544
+ messageType: "tip",
20545
+ messageId: tipId
20546
+ }, void 0), jsxRuntime.jsx(RadioButtonGroupContext.Provider, __assign({
20503
20547
  value: __assign({}, contextProps)
20504
20548
  }, {
20505
20549
  children: jsxRuntime.jsx(GroupContainer$1, __assign({
20506
20550
  role: "radiogroup",
20507
20551
  direction: direction,
20508
- "aria-labelledby": uniqueGroupId
20552
+ "aria-labelledby": uniqueGroupId,
20553
+ "aria-describedby": tipId,
20554
+ "aria-errormessage": errorMessageId
20509
20555
  }, {
20510
20556
  children: children
20511
20557
  }), void 0)
20512
- }), void 0), errorMessage ? jsxRuntime.jsx(InputMessage, {
20558
+ }), void 0), hasErrorMessage && jsxRuntime.jsx(InputMessage, {
20513
20559
  message: errorMessage,
20514
- messageType: "error"
20515
- }, void 0) : tip ? jsxRuntime.jsx(InputMessage, {
20516
- message: tip,
20517
- messageType: "tip"
20518
- }, void 0) : '']
20560
+ messageType: "error",
20561
+ messageId: errorMessageId
20562
+ }, void 0)]
20519
20563
  }), void 0);
20520
20564
  };
20521
- var templateObject_1$H, templateObject_2$w, templateObject_3$n;
20565
+ var templateObject_1$I, templateObject_2$w, templateObject_3$n;
20522
20566
 
20523
20567
  var Colors$h = ddsBaseTokens.colors,
20524
- Border$c = ddsBaseTokens.border,
20568
+ Border$d = ddsBaseTokens.border,
20525
20569
  Spacing$p = ddsBaseTokens.spacing,
20526
20570
  FontPackages$h = ddsBaseTokens.fontPackages,
20527
20571
  BorderRadius$6 = ddsBaseTokens.borderRadius;
@@ -20651,8 +20695,8 @@ var checkboxTokens = {
20651
20695
  container: {
20652
20696
  base: containerBase$3,
20653
20697
  focusOutline: {
20654
- color: Border$c.BordersDdsBorderFocusBaseStroke,
20655
- width: Border$c.BordersDdsBorderFocusBaseStrokeWeight
20698
+ color: Border$d.BordersDdsBorderFocusBaseStroke,
20699
+ width: Border$d.BordersDdsBorderFocusBaseStrokeWeight
20656
20700
  },
20657
20701
  withLabel: {
20658
20702
  base: containerWithLabelBase
@@ -20666,8 +20710,8 @@ var checkboxTokens = {
20666
20710
  var CustomCheckbox = styled.span.withConfig({
20667
20711
  displayName: "Checkboxstyles__CustomCheckbox",
20668
20712
  componentId: "sc-17q1ubf-0"
20669
- })(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n position: absolute;\n ", "\n left: ", ";\n box-sizing: border-box;\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"], ["\n position: absolute;\n ", "\n left: ", ";\n box-sizing: border-box;\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"])), checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
20670
- var Input$3 = styled.input.attrs(function (_a) {
20713
+ })(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: absolute;\n ", "\n left: ", ";\n box-sizing: border-box;\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"], ["\n position: absolute;\n ", "\n left: ", ";\n box-sizing: border-box;\n &:after {\n content: '';\n position: absolute;\n display: none;\n }\n"])), checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
20714
+ var Input$4 = styled.input.attrs(function (_a) {
20671
20715
  var _b = _a.type,
20672
20716
  type = _b === void 0 ? 'checkbox' : _b;
20673
20717
  return {
@@ -20701,9 +20745,14 @@ var Container$8 = styled.label.withConfig({
20701
20745
  var indeterminate = _a.indeterminate;
20702
20746
  return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "], ["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.checkmark.base);
20703
20747
  });
20704
- var templateObject_1$G, templateObject_2$v, templateObject_3$m, templateObject_4$i, templateObject_5$c, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$2, templateObject_13$1;
20748
+ var templateObject_1$H, templateObject_2$v, templateObject_3$m, templateObject_4$i, templateObject_5$c, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$2, templateObject_13$1;
20705
20749
 
20706
- var nextUniqueId$7 = 0;
20750
+ var CheckboxGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
20751
+ var useCheckboxGroup = function useCheckboxGroup() {
20752
+ return React.useContext(CheckboxGroupContext);
20753
+ };
20754
+
20755
+ var nextUniqueId$9 = 0;
20707
20756
  var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20708
20757
  var id = _a.id,
20709
20758
  name = _a.name,
@@ -20712,13 +20761,15 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20712
20761
  disabled = _a.disabled,
20713
20762
  readOnly = _a.readOnly,
20714
20763
  indeterminate = _a.indeterminate,
20764
+ ariaDescribedby = _a["aria-describedby"],
20715
20765
  className = _a.className,
20716
20766
  style = _a.style,
20717
- rest = __rest(_a, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", "className", "style"]);
20767
+ rest = __rest(_a, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "style"]);
20718
20768
 
20719
- var uniqueId = React.useState(id !== null && id !== void 0 ? id : "checkbox-" + nextUniqueId$7++)[0];
20769
+ var uniqueId = React.useState(id !== null && id !== void 0 ? id : "checkbox-" + nextUniqueId$9++)[0];
20770
+ var checkboxGroup = useCheckboxGroup();
20720
20771
  var containerProps = {
20721
- error: error,
20772
+ error: error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error),
20722
20773
  disabled: disabled,
20723
20774
  indeterminate: indeterminate,
20724
20775
  readOnly: readOnly,
@@ -20733,13 +20784,17 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
20733
20784
  id: uniqueId,
20734
20785
  name: name,
20735
20786
  indeterminate: indeterminate,
20736
- disabled: disabled || readOnly
20787
+ disabled: disabled || readOnly,
20788
+ 'aria-describedby': spaceSeparatedIdListGenerator([checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.tipId, checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.errorMessageId, ariaDescribedby]),
20789
+ 'aria-invalid': error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error) ? true : undefined,
20790
+ 'aria-labelledby': checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.uniqueGroupId,
20791
+ 'aria-checked': indeterminate ? 'mixed' : undefined,
20792
+ 'aria-readonly': readOnly
20737
20793
  }, rest);
20738
20794
 
20739
20795
  return jsxRuntime.jsxs(Container$8, __assign({}, containerProps, {
20740
- children: [jsxRuntime.jsx(Input$3, __assign({}, inputProps, {
20741
- "data-indeterminate": indeterminate,
20742
- "aria-readonly": readOnly
20796
+ children: [jsxRuntime.jsx(Input$4, __assign({}, inputProps, {
20797
+ "data-indeterminate": indeterminate
20743
20798
  }), void 0), jsxRuntime.jsx(CustomCheckbox, {}, void 0), label && jsxRuntime.jsx(Typography, __assign({
20744
20799
  as: "span"
20745
20800
  }, {
@@ -20758,7 +20813,7 @@ var checkboxGroupTokens = {
20758
20813
  var Container$7 = styled.div.withConfig({
20759
20814
  displayName: "CheckboxGroup__Container",
20760
20815
  componentId: "sc-uixbzg-0"
20761
- })(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
20816
+ })(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
20762
20817
  var GroupContainer = styled.div.withConfig({
20763
20818
  displayName: "CheckboxGroup__GroupContainer",
20764
20819
  componentId: "sc-uixbzg-1"
@@ -20775,12 +20830,13 @@ var CheckboxGroup = function CheckboxGroup(_a) {
20775
20830
  var label = _a.label,
20776
20831
  direction = _a.direction,
20777
20832
  errorMessage = _a.errorMessage,
20833
+ tip = _a.tip,
20778
20834
  required = _a.required,
20779
20835
  groupId = _a.groupId,
20780
20836
  children = _a.children,
20781
20837
  className = _a.className,
20782
20838
  style = _a.style,
20783
- rest = __rest(_a, ["label", "direction", "errorMessage", "required", "groupId", "children", "className", "style"]);
20839
+ rest = __rest(_a, ["label", "direction", "errorMessage", "tip", "required", "groupId", "children", "className", "style"]);
20784
20840
 
20785
20841
  var containerProps = __assign({
20786
20842
  className: className,
@@ -20788,6 +20844,15 @@ var CheckboxGroup = function CheckboxGroup(_a) {
20788
20844
  }, rest);
20789
20845
 
20790
20846
  var uniqueGroupId = React.useState(groupId !== null && groupId !== void 0 ? groupId : "checkboxGroup-" + nextUniqueGroupId++)[0];
20847
+ var hasErrorMessage = !!errorMessage;
20848
+ var errorMessageId = derivativeIdGenerator(uniqueGroupId, 'errorMessage', errorMessage);
20849
+ var tipId = derivativeIdGenerator(uniqueGroupId, 'tip', tip);
20850
+ var contextProps = {
20851
+ error: hasErrorMessage,
20852
+ errorMessageId: errorMessageId,
20853
+ uniqueGroupId: uniqueGroupId,
20854
+ tipId: tipId
20855
+ };
20791
20856
  return jsxRuntime.jsxs(Container$7, __assign({}, containerProps, {
20792
20857
  children: [jsxRuntime.jsxs(Label$3, __assign({
20793
20858
  forwardedAs: "span",
@@ -20795,26 +20860,36 @@ var CheckboxGroup = function CheckboxGroup(_a) {
20795
20860
  id: uniqueGroupId
20796
20861
  }, {
20797
20862
  children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
20798
- }), void 0), jsxRuntime.jsx(GroupContainer, __assign({
20799
- role: "group",
20800
- "aria-labelledby": uniqueGroupId,
20801
- direction: direction
20863
+ }), void 0), tip && jsxRuntime.jsx(InputMessage, {
20864
+ messageType: "tip",
20865
+ message: tip,
20866
+ messageId: tipId
20867
+ }, void 0), jsxRuntime.jsx(CheckboxGroupContext.Provider, __assign({
20868
+ value: __assign({}, contextProps)
20802
20869
  }, {
20803
- children: children
20804
- }), void 0), errorMessage ? jsxRuntime.jsx(InputMessage, {
20870
+ children: jsxRuntime.jsx(GroupContainer, __assign({
20871
+ role: "group",
20872
+ "aria-labelledby": uniqueGroupId,
20873
+ "aria-describedby": tipId,
20874
+ direction: direction
20875
+ }, {
20876
+ children: children
20877
+ }), void 0)
20878
+ }), void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
20805
20879
  messageType: "error",
20806
- message: errorMessage
20807
- }, void 0) : '']
20880
+ message: errorMessage,
20881
+ messageId: errorMessageId
20882
+ }, void 0)]
20808
20883
  }), void 0);
20809
20884
  };
20810
- var templateObject_1$F, templateObject_2$u, templateObject_3$l;
20885
+ var templateObject_1$G, templateObject_2$u, templateObject_3$l;
20811
20886
 
20812
20887
  var calculateHeightWithLineHeight = function calculateHeightWithLineHeight(lineHeight, fontSize) {
20813
20888
  return lineHeight * 0.01 * fontSize;
20814
20889
  };
20815
20890
 
20816
20891
  var Colors$g = ddsBaseTokens.colors,
20817
- Border$b = ddsBaseTokens.border,
20892
+ Border$c = ddsBaseTokens.border,
20818
20893
  Spacing$n = ddsBaseTokens.spacing,
20819
20894
  FontPackages$g = ddsBaseTokens.fontPackages,
20820
20895
  BorderRadius$5 = ddsBaseTokens.borderRadius,
@@ -20860,7 +20935,7 @@ var textLargeBase = __assign(__assign({}, FontPackages$g.supportingStyle_inputte
20860
20935
  });
20861
20936
 
20862
20937
  var buttonBase$1 = {
20863
- border: Border$b.BordersDdsBorderStyleLightStrokeWeight + " solid"
20938
+ border: Border$c.BordersDdsBorderStyleLightStrokeWeight + " solid"
20864
20939
  };
20865
20940
  var filledButtonColors = {
20866
20941
  primary: {
@@ -21080,8 +21155,8 @@ var roundedBase = {
21080
21155
  var buttonTokens = {
21081
21156
  base: buttonBase$1,
21082
21157
  focusOutline: {
21083
- color: Border$b.BordersDdsBorderFocusBaseStroke,
21084
- width: Border$b.BordersDdsBorderStyleLightStrokeWeight
21158
+ color: Border$c.BordersDdsBorderFocusBaseStroke,
21159
+ width: Border$c.BordersDdsBorderStyleLightStrokeWeight
21085
21160
  },
21086
21161
  sizes: {
21087
21162
  small: {
@@ -21282,7 +21357,7 @@ var spinnerTokens = {
21282
21357
  var StyledSpinner = styled.svg.withConfig({
21283
21358
  displayName: "Spinner__StyledSpinner",
21284
21359
  componentId: "sc-13hsttm-0"
21285
- })(templateObject_1$E || (templateObject_1$E = __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) {
21360
+ })(templateObject_1$F || (templateObject_1$F = __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) {
21286
21361
  var outerAnimationDelay = _a.outerAnimationDelay;
21287
21362
  return outerAnimationDelay;
21288
21363
  }, function (_a) {
@@ -21302,7 +21377,7 @@ var Circle = styled.circle.withConfig({
21302
21377
  var innerAnimationDelay = _a.innerAnimationDelay;
21303
21378
  return innerAnimationDelay;
21304
21379
  });
21305
- var nextUniqueId$6 = 0;
21380
+ var nextUniqueId$8 = 0;
21306
21381
  function Spinner(_a) {
21307
21382
  var _b = _a.size,
21308
21383
  size = _b === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _b,
@@ -21313,7 +21388,7 @@ function Spinner(_a) {
21313
21388
  var mountTime = React__default['default'].useRef(Date.now());
21314
21389
  var outerAnimationDelay = -(mountTime.current % 2000);
21315
21390
  var innerAnimationDelay = -(mountTime.current % 1500);
21316
- var uniqueId = React.useState("spinnerTitle-" + nextUniqueId$6++)[0];
21391
+ var uniqueId = React.useState("spinnerTitle-" + nextUniqueId$8++)[0];
21317
21392
 
21318
21393
  var spinnerProps = __assign({
21319
21394
  outerAnimationDelay: outerAnimationDelay,
@@ -21342,7 +21417,7 @@ function Spinner(_a) {
21342
21417
  }), void 0)]
21343
21418
  }), void 0);
21344
21419
  }
21345
- var templateObject_1$E, templateObject_2$t;
21420
+ var templateObject_1$F, templateObject_2$t;
21346
21421
 
21347
21422
  var ButtonWrapper$1 = styled.button.withConfig({
21348
21423
  displayName: "Buttonstyles__ButtonWrapper",
@@ -21353,7 +21428,7 @@ var ButtonWrapper$1 = styled.button.withConfig({
21353
21428
  }, function (_a) {
21354
21429
  var appearance = _a.appearance,
21355
21430
  purpose = _a.purpose;
21356
- return Ae(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n ", "\n\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n "], ["\n ", "\n ", "\n\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
21431
+ return Ae(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n ", "\n\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n "], ["\n ", "\n ", "\n\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
21357
21432
  }, function (_a) {
21358
21433
  var hasIcon = _a.hasIcon,
21359
21434
  hasLabel = _a.hasLabel,
@@ -21390,7 +21465,7 @@ var Label$2 = styled.span.withConfig({
21390
21465
  displayName: "Buttonstyles__Label",
21391
21466
  componentId: "sc-14dutqk-3"
21392
21467
  })(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
21393
- var templateObject_1$D, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$1, templateObject_13;
21468
+ var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$1, templateObject_13;
21394
21469
 
21395
21470
  var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
21396
21471
  var label = _a.label,
@@ -21528,27 +21603,35 @@ var charCounterTokens = {
21528
21603
  var Wrapper$6 = styled(Typography).withConfig({
21529
21604
  displayName: "CharCounter__Wrapper",
21530
21605
  componentId: "sc-qty1z2-0"
21531
- })(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n margin-left: auto;\n ", "\n"], ["\n margin-left: auto;\n ", "\n"])), charCounterTokens.base);
21606
+ })(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n margin-left: auto;\n ", "\n"], ["\n margin-left: auto;\n ", "\n"])), charCounterTokens.base);
21607
+ var nextUniqueId$7 = 0;
21532
21608
 
21533
21609
  function CharCounter(_a) {
21534
21610
  var current = _a.current,
21535
- max = _a.max;
21611
+ max = _a.max,
21612
+ id = _a.id,
21613
+ rest = __rest(_a, ["current", "max", "id"]);
21614
+
21615
+ var uniqueId = React.useState(id !== null && id !== void 0 ? id : "characterCounter-" + nextUniqueId$7++)[0];
21536
21616
  return jsxRuntime.jsxs(Wrapper$6, __assign({
21537
21617
  forwardedAs: "div",
21538
- typographyType: "supportingStyleHelperText01"
21539
- }, {
21618
+ typographyType: "supportingStyleHelperText01",
21619
+ id: uniqueId,
21620
+ "aria-label": current + " av " + max + " tegn skrevet"
21621
+ }, rest, {
21540
21622
  children: [current, "/", max]
21541
21623
  }), void 0);
21542
21624
  }
21543
- var templateObject_1$C;
21625
+ var templateObject_1$D;
21544
21626
 
21545
21627
  var Colors$d = ddsBaseTokens.colors,
21546
21628
  Spacing$k = ddsBaseTokens.spacing,
21547
21629
  FontPackages$f = ddsBaseTokens.fontPackages,
21548
- Border$a = ddsBaseTokens.border;
21630
+ Border$b = ddsBaseTokens.border;
21549
21631
  var TextInput$2 = ddsReferenceTokens.textInput;
21550
21632
  var inputBase$2 = {
21551
- border: " " + Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$d.DdsColorNeutralsGray5
21633
+ border: " " + Border$b.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$d.DdsColorNeutralsGray5,
21634
+ backgroundColor: Colors$d.DdsColorNeutralsWhite
21552
21635
  };
21553
21636
  var inputWithLabelBase = {
21554
21637
  padding: Spacing$k.SizesDdsSpacingLocalX075NumberPx + FontPackages$f.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * FontPackages$f.supportingStyle_label_01.numbers.fontSizeNumber + "px " + Spacing$k.SizesDdsSpacingLocalX1 + " " + Spacing$k.SizesDdsSpacingLocalX075 + " " + Spacing$k.SizesDdsSpacingLocalX1
@@ -21630,52 +21713,52 @@ var inputTokens = {
21630
21713
  };
21631
21714
 
21632
21715
  var TextInput$1 = ddsReferenceTokens.textInput;
21633
- var Border$9 = ddsBaseTokens.border;
21716
+ var Border$a = ddsBaseTokens.border;
21634
21717
 
21635
21718
  var stylingBase = __assign({
21636
21719
  color: TextInput$1.input.textColor,
21637
21720
  borderRadius: TextInput$1.input.borderRadius,
21638
- border: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid",
21721
+ border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
21639
21722
  borderColor: TextInput$1.input.borderColor
21640
21723
  }, TextInput$1.input.font);
21641
21724
 
21642
21725
  var focusBase$1 = {
21643
- border: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid",
21644
- borderColor: Border$9.BordersDdsBorderFocusInputfieldStroke,
21645
- boxShadow: " 0 0 0 1px " + Border$9.BordersDdsBorderFocusInputfieldStroke,
21726
+ border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
21727
+ borderColor: Border$a.BordersDdsBorderFocusInputfieldStroke,
21728
+ boxShadow: " 0 0 0 1px " + Border$a.BordersDdsBorderFocusInputfieldStroke,
21646
21729
  outline: 'none'
21647
21730
  };
21648
21731
  var hoverBase$1 = {
21649
- border: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid",
21650
- borderColor: Border$9.BordersDdsBorderFocusInputfieldStroke,
21732
+ border: Border$a.BordersDdsBorderStyleLightStrokeWeight + " solid",
21733
+ borderColor: Border$a.BordersDdsBorderFocusInputfieldStroke,
21651
21734
  boxShadow: " 0 0 0 1px " + TextInput$1.input.focus.borderColor,
21652
21735
  backgroundColor: TextInput$1.input.hover.backgroundColor
21653
21736
  };
21654
21737
  var inputFieldStylingBase = function inputFieldStylingBase() {
21655
- return Ae(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n &::selection {\n ", "\n }\n ", "\n\n &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n ", "\n }\n &:focus {\n outline: none;\n }\n\n &:hover:enabled:read-write {\n ", "\n }\n "], ["\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n &::selection {\n ", "\n }\n ", "\n\n &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n ", "\n }\n &:focus {\n outline: none;\n }\n\n &:hover:enabled:read-write {\n ", "\n }\n "])), typographyTokens.selection.base, stylingBase, focusBase$1, hoverBase$1);
21738
+ return Ae(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n &::selection {\n ", "\n }\n ", "\n\n &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n ", "\n }\n &:focus {\n outline: none;\n }\n\n &:hover:enabled:read-write {\n ", "\n }\n "], ["\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s;\n &::selection {\n ", "\n }\n ", "\n\n &:focus:enabled:read-write, &:focus-visible:enabled:read-write, &:active:enabled:read-write {\n ", "\n }\n &:focus {\n outline: none;\n }\n\n &:hover:enabled:read-write {\n ", "\n }\n "])), typographyTokens.selection.base, stylingBase, focusBase$1, hoverBase$1);
21656
21739
  };
21657
- var templateObject_1$B;
21740
+ var templateObject_1$C;
21658
21741
 
21659
21742
  var inputStyling = function inputStyling(_a) {
21660
21743
  var readOnly = _a.readOnly,
21661
- errorMessage = _a.errorMessage,
21662
21744
  label = _a.label,
21663
- disabled = _a.disabled;
21664
- return Ae(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n ", ";\n\n &:hover:enabled:read-write ~ label {\n ", "\n }\n &:focus:enabled:read-write ~ label {\n ", "\n }\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n box-sizing: border-box;\n ", ";\n\n &:hover:enabled:read-write ~ label {\n ", "\n }\n &:focus:enabled:read-write ~ label {\n ", "\n }\n\n ", "\n ", "\n ", "\n "])), inputFieldStylingBase, inputTokens.base, label ? Ae(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), inputTokens.withLabel.base) : Ae(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n cursor: not-allowed;\n ", "\n "], ["\n cursor: not-allowed;\n ", "\n "])), inputTokens.disabled.base), errorMessage && Ae(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n &:hover:enabled:read-write {\n ", "\n }\n &:focus:enabled:read-write,\n &:active:enabled:read-write {\n ", "\n }\n "], ["\n ", "\n &:hover:enabled:read-write {\n ", "\n }\n &:focus:enabled:read-write,\n &:active:enabled:read-write {\n ", "\n }\n "])), inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base), readOnly && Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n cursor: default;\n ", "\n "], ["\n cursor: default;\n ", "\n "])), inputTokens.readOnly.base));
21745
+ disabled = _a.disabled,
21746
+ hasErrorMessage = _a.hasErrorMessage;
21747
+ return Ae(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n -webkit-appearance: textfield;\n ", ";\n\n &:hover:enabled:read-write ~ label {\n ", "\n }\n &:focus:enabled:read-write ~ label {\n ", "\n }\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n box-sizing: border-box;\n -webkit-appearance: textfield;\n ", ";\n\n &:hover:enabled:read-write ~ label {\n ", "\n }\n &:focus:enabled:read-write ~ label {\n ", "\n }\n\n ", "\n ", "\n ", "\n "])), inputFieldStylingBase, inputTokens.base, label ? Ae(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), inputTokens.withLabel.base) : Ae(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), inputTokens.noLabel.base), inputTokens.label.hover.base, inputTokens.label.focus.base, disabled && Ae(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n cursor: not-allowed;\n ", "\n "], ["\n cursor: not-allowed;\n ", "\n "])), inputTokens.disabled.base), hasErrorMessage && Ae(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n &:hover:enabled:read-write {\n ", "\n }\n &:focus:enabled:read-write,\n &:active:enabled:read-write {\n ", "\n }\n "], ["\n ", "\n &:hover:enabled:read-write {\n ", "\n }\n &:focus:enabled:read-write,\n &:active:enabled:read-write {\n ", "\n }\n "])), inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base), readOnly && Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n cursor: default;\n ", "\n "], ["\n cursor: default;\n ", "\n "])), inputTokens.readOnly.base));
21665
21748
  };
21666
- var Input$2 = styled.input.withConfig({
21749
+ var Input$3 = styled.input.withConfig({
21667
21750
  displayName: "Inputstyles__Input",
21668
21751
  componentId: "sc-1oz9x8w-0"
21669
21752
  })(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
21670
21753
  var label = _a.label,
21671
21754
  disabled = _a.disabled,
21672
21755
  readOnly = _a.readOnly,
21673
- errorMessage = _a.errorMessage;
21756
+ hasErrorMessage = _a.hasErrorMessage;
21674
21757
  return inputStyling({
21675
21758
  readOnly: readOnly,
21676
- errorMessage: errorMessage,
21677
21759
  label: label,
21678
- disabled: disabled
21760
+ disabled: disabled,
21761
+ hasErrorMessage: hasErrorMessage
21679
21762
  });
21680
21763
  });
21681
21764
  var SingleLineLabel = styled(Typography).withConfig({
@@ -21696,10 +21779,10 @@ var OuterInputContainer = styled.div.withConfig({
21696
21779
  var width = _a.width;
21697
21780
  return width;
21698
21781
  });
21699
- var templateObject_1$A, templateObject_2$r, templateObject_3$j, templateObject_4$g, templateObject_5$a, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$3, templateObject_11$2;
21782
+ var templateObject_1$B, templateObject_2$r, templateObject_3$j, templateObject_4$g, templateObject_5$a, templateObject_6$a, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$3, templateObject_11$2;
21700
21783
 
21701
- var scrollbarStyling = Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n /* width */\n &::-webkit-scrollbar {\n width: 16px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 100px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 100px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n /* Firefox */\n scrollbar-color: ", "\n transparent;\n scrollbar-width: thin;\n"], ["\n /* width */\n &::-webkit-scrollbar {\n width: 16px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 100px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 100px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n /* Firefox */\n scrollbar-color: ", "\n transparent;\n scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
21702
- var templateObject_1$z;
21784
+ var scrollbarStyling = Ae(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n /* width */\n &::-webkit-scrollbar {\n width: 16px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 100px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 100px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n /* Firefox */\n scrollbar-color: ", "\n transparent;\n scrollbar-width: thin;\n"], ["\n /* width */\n &::-webkit-scrollbar {\n width: 16px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 100px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 100px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n /* Firefox */\n scrollbar-color: ", "\n transparent;\n scrollbar-width: thin;\n"])), ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.5)', ddsBaseTokens.colors.DdsColorPrimaryDarkest.slice(0, -2) + '0.35)');
21785
+ var templateObject_1$A;
21703
21786
 
21704
21787
  var TextArea = styled.textarea.withConfig({
21705
21788
  displayName: "TextInputstyles__TextArea",
@@ -21708,22 +21791,22 @@ var TextArea = styled.textarea.withConfig({
21708
21791
  var label = _a.label,
21709
21792
  disabled = _a.disabled,
21710
21793
  readOnly = _a.readOnly,
21711
- errorMessage = _a.errorMessage;
21794
+ hasErrorMessage = _a.hasErrorMessage;
21712
21795
  return inputStyling({
21713
21796
  readOnly: readOnly,
21714
- errorMessage: errorMessage,
21715
21797
  label: label,
21716
- disabled: disabled
21798
+ disabled: disabled,
21799
+ hasErrorMessage: hasErrorMessage
21717
21800
  });
21718
21801
  }, scrollbarStyling, function (_a) {
21719
21802
  var label = _a.label;
21720
21803
  return label ? textInputTokens.container.multiline.withLabel.height : textInputTokens.container.multiline.noLabel.height;
21721
21804
  }, textInputTokens.multiline.base, function (_a) {
21722
21805
  var label = _a.label;
21723
- return label ? Ae(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), textInputTokens.multiline.noLabel.base);
21806
+ return label ? Ae(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), textInputTokens.multiline.withLabel.base) : Ae(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), textInputTokens.multiline.noLabel.base);
21724
21807
  }, function (_a) {
21725
- var errorMessage = _a.errorMessage;
21726
- return errorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
21808
+ var hasErrorMessage = _a.hasErrorMessage;
21809
+ return hasErrorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
21727
21810
  });
21728
21811
  var MessageContainer = styled.div.withConfig({
21729
21812
  displayName: "TextInputstyles__MessageContainer",
@@ -21762,9 +21845,9 @@ var InputContainer$1 = styled(InputContainer$2).withConfig({
21762
21845
  return textInputTokens.container.multiline.noLabel.height;
21763
21846
  }
21764
21847
  });
21765
- var templateObject_1$y, templateObject_2$q, templateObject_3$i, templateObject_4$f, templateObject_5$9, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2;
21848
+ var templateObject_1$z, templateObject_2$q, templateObject_3$i, templateObject_4$f, templateObject_5$9, templateObject_6$9, templateObject_7$6, templateObject_8$3, templateObject_9$3, templateObject_10$2;
21766
21849
 
21767
- var nextUniqueId$5 = 0;
21850
+ var nextUniqueId$6 = 0;
21768
21851
  var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
21769
21852
  var label = _a.label,
21770
21853
  disabled = _a.disabled,
@@ -21782,7 +21865,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
21782
21865
  type = _c === void 0 ? 'text' : _c,
21783
21866
  className = _a.className,
21784
21867
  style = _a.style,
21785
- rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "className", "style"]);
21868
+ ariaDescribedby = _a["aria-describedby"],
21869
+ rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "className", "style", 'aria-describedby']);
21786
21870
 
21787
21871
  var textAreaRef = React.useRef(null);
21788
21872
 
@@ -21827,16 +21911,24 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
21827
21911
  }
21828
21912
  };
21829
21913
 
21830
- var uniqueId = React.useState(id !== null && id !== void 0 ? id : "textInput-" + nextUniqueId$5++)[0];
21914
+ var uniqueId = React.useState(id !== null && id !== void 0 ? id : "textInput-" + nextUniqueId$6++)[0];
21915
+ var hasErrorMessage = !!errorMessage;
21916
+ var hasTip = !!tip;
21917
+ var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
21918
+ var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
21919
+ var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
21831
21920
 
21832
21921
  var generalInputProps = __assign({
21833
21922
  id: uniqueId,
21834
21923
  label: label,
21835
21924
  errorMessage: errorMessage,
21925
+ hasErrorMessage: hasErrorMessage,
21836
21926
  disabled: disabled,
21837
21927
  readOnly: readOnly,
21838
21928
  tabIndex: readOnly ? -1 : 0,
21839
- maxLength: maxLength
21929
+ maxLength: maxLength,
21930
+ 'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, characterCounterId, ariaDescribedby]),
21931
+ 'aria-invalid': hasErrorMessage ? true : undefined
21840
21932
  }, rest);
21841
21933
 
21842
21934
  var labelProps = {
@@ -21865,7 +21957,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
21865
21957
  },
21866
21958
  onChange: onChangeHandlerMultiline,
21867
21959
  required: required
21868
- }, generalInputProps), void 0) : jsxRuntime.jsx(Input$2, __assign({
21960
+ }, generalInputProps), void 0) : jsxRuntime.jsx(Input$3, __assign({
21869
21961
  ref: ref,
21870
21962
  onChange: onChangeHandler,
21871
21963
  type: type,
@@ -21878,13 +21970,16 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
21878
21970
  children: [label, " ", required && jsxRuntime.jsx(RequiredMarker, {}, void 0)]
21879
21971
  }), void 0)]
21880
21972
  }), void 0), jsxRuntime.jsxs(MessageContainer, {
21881
- children: [errorMessage && jsxRuntime.jsx(InputMessage, {
21973
+ children: [hasErrorMessage && jsxRuntime.jsx(InputMessage, {
21882
21974
  message: errorMessage,
21883
- messageType: "error"
21884
- }, void 0), tip && !errorMessage && jsxRuntime.jsx(InputMessage, {
21975
+ messageType: "error",
21976
+ messageId: errorMessageId
21977
+ }, void 0), hasTip && !errorMessage && jsxRuntime.jsx(InputMessage, {
21885
21978
  message: tip,
21886
- messageType: "tip"
21979
+ messageType: "tip",
21980
+ messageId: tipId
21887
21981
  }, void 0), maxLength && Number.isInteger(maxLength) && maxLength > 0 && jsxRuntime.jsx(CharCounter, {
21982
+ id: characterCounterId,
21888
21983
  current: text.length,
21889
21984
  max: maxLength
21890
21985
  }, void 0)]
@@ -25411,7 +25506,7 @@ var inputStyle = function inputStyle(isHidden) {
25411
25506
  }, spacingStyle);
25412
25507
  };
25413
25508
 
25414
- var Input$1 = function Input(props) {
25509
+ var Input$2 = function Input(props) {
25415
25510
  var className = props.className,
25416
25511
  cx = props.cx,
25417
25512
  getStyles = props.getStyles,
@@ -25673,7 +25768,7 @@ var components = {
25673
25768
  GroupHeading: GroupHeading,
25674
25769
  IndicatorsContainer: IndicatorsContainer$1,
25675
25770
  IndicatorSeparator: IndicatorSeparator,
25676
- Input: Input$1,
25771
+ Input: Input$2,
25677
25772
  LoadingIndicator: LoadingIndicator,
25678
25773
  Menu: Menu,
25679
25774
  MenuList: MenuList,
@@ -28545,7 +28640,7 @@ var Colors$c = ddsBaseTokens.colors,
28545
28640
  Spacing$j = ddsBaseTokens.spacing,
28546
28641
  FontPackages$e = ddsBaseTokens.fontPackages,
28547
28642
  BorderRadius$4 = ddsBaseTokens.borderRadius,
28548
- Border$8 = ddsBaseTokens.border,
28643
+ Border$9 = ddsBaseTokens.border,
28549
28644
  IconSizes = ddsBaseTokens.iconSizes;
28550
28645
  var textDefault$6 = ddsReferenceTokens.textDefault;
28551
28646
  var multiValueContainerMinHeight = Spacing$j.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$j.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$e.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$e.supportingStyle_inputtext_01.numbers.fontSizeNumber) + "px"; //custom spacing so that multiselect has same height as single value select
@@ -28585,7 +28680,7 @@ var valueContainerIsMultiNoLabelBase = {
28585
28680
  };
28586
28681
  var containerBase$2 = {
28587
28682
  borderRadius: BorderRadius$4.RadiiDdsBorderRadius1Radius,
28588
- border: Border$8.BordersDdsBorderStyleLightStrokeWeight + " solid",
28683
+ border: Border$9.BordersDdsBorderStyleLightStrokeWeight + " solid",
28589
28684
  borderColor: Colors$c.DdsColorNeutralsGray5,
28590
28685
  backgroundColor: Colors$c.DdsColorNeutralsWhite
28591
28686
  };
@@ -28872,7 +28967,7 @@ var prefix = 'dds-select';
28872
28967
  var Label = styled(Typography).withConfig({
28873
28968
  displayName: "Selectstyles__Label",
28874
28969
  componentId: "sc-19jkd5s-0"
28875
- })(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: block;\n ", "\n"], ["\n display: block;\n ", "\n"])), selectTokens.label.base);
28970
+ })(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: block;\n ", "\n"], ["\n display: block;\n ", "\n"])), selectTokens.label.base);
28876
28971
  var Container$6 = styled.div.withConfig({
28877
28972
  displayName: "Selectstyles__Container",
28878
28973
  componentId: "sc-19jkd5s-1"
@@ -28994,10 +29089,11 @@ var CustomStyles = {
28994
29089
  return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
28995
29090
  }
28996
29091
  };
28997
- var templateObject_1$x, templateObject_2$p, templateObject_3$h, templateObject_4$e, templateObject_5$8, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12;
29092
+ var templateObject_1$y, templateObject_2$p, templateObject_3$h, templateObject_4$e, templateObject_5$8, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12;
28998
29093
 
28999
29094
  var DdsOption = components.Option,
29000
- NoOptionsMessage = components.NoOptionsMessage;
29095
+ NoOptionsMessage = components.NoOptionsMessage,
29096
+ Input$1 = components.Input;
29001
29097
 
29002
29098
  var IconOption = function IconOption(props) {
29003
29099
  return jsxRuntime.jsxs(DdsOption, __assign({}, props, {
@@ -29023,7 +29119,7 @@ function searchFilter(text, search) {
29023
29119
  var searchFilterRegex = new RegExp("(?:^|[\\s-(])" + escapeRegexCharacters(search.toLowerCase()));
29024
29120
  return searchFilterRegex.test(text.toLowerCase());
29025
29121
  }
29026
- var nextUniqueId$4 = 0;
29122
+ var nextUniqueId$5 = 0;
29027
29123
 
29028
29124
  var SelectInner = function SelectInner(_a, ref) {
29029
29125
  var id = _a.id,
@@ -29048,8 +29144,18 @@ var SelectInner = function SelectInner(_a, ref) {
29048
29144
  placeholder = _d === void 0 ? '-- Velg fra listen --' : _d,
29049
29145
  rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
29050
29146
 
29051
- var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$4++)[0];
29147
+ var uniqueId = React.useState(id !== null && id !== void 0 ? id : "select-" + nextUniqueId$5++)[0];
29052
29148
  var hasLabel = !!label;
29149
+ var hasErrorMessage = !!errorMessage;
29150
+ var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
29151
+ var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
29152
+
29153
+ var CustomInput = function CustomInput(props) {
29154
+ return jsxRuntime.jsx(Input$1, __assign({}, props, {
29155
+ "aria-describedby": spaceSeparatedIdListGenerator([tipId, errorMessageId])
29156
+ }), void 0);
29157
+ };
29158
+
29053
29159
  var wrapperProps = {
29054
29160
  width: width
29055
29161
  };
@@ -29082,8 +29188,10 @@ var SelectInner = function SelectInner(_a, ref) {
29082
29188
  },
29083
29189
  components: {
29084
29190
  Option: IconOption,
29085
- NoOptionsMessage: NoOptionsMessageCustom
29086
- }
29191
+ NoOptionsMessage: NoOptionsMessageCustom,
29192
+ Input: CustomInput
29193
+ },
29194
+ 'aria-invalid': hasErrorMessage ? true : undefined
29087
29195
  }, rest);
29088
29196
 
29089
29197
  return jsxRuntime.jsxs(Wrapper$5, __assign({}, wrapperProps, {
@@ -29099,9 +29207,11 @@ var SelectInner = function SelectInner(_a, ref) {
29099
29207
  }), void 0)]
29100
29208
  }), void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
29101
29209
  messageType: "error",
29210
+ messageId: errorMessageId,
29102
29211
  message: errorMessage
29103
29212
  }, void 0), tip && !errorMessage && jsxRuntime.jsx(InputMessage, {
29104
29213
  messageType: "tip",
29214
+ messageId: tipId,
29105
29215
  message: tip
29106
29216
  }, void 0)]
29107
29217
  }), void 0);
@@ -29271,7 +29381,7 @@ var Container$5 = styled.div.withConfig({
29271
29381
  componentId: "sc-bf2l65-0"
29272
29382
  })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n ", "\n"])), function (_a) {
29273
29383
  var purpose = _a.purpose;
29274
- return purpose && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
29384
+ return purpose && Ae(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), globalMessageTokens.container.base, globalMessageTokens.container[purpose].base);
29275
29385
  });
29276
29386
  var MessageIconWrapper$1 = styled(IconWrapper$1).withConfig({
29277
29387
  displayName: "GlobalMessage__MessageIconWrapper",
@@ -29329,12 +29439,13 @@ var GlobalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29329
29439
  setClosed(true);
29330
29440
  onClose && onClose();
29331
29441
  },
29332
- size: "small"
29442
+ size: "small",
29443
+ "aria-label": "Lukk melding"
29333
29444
  }, void 0)
29334
29445
  }, void 0)]
29335
29446
  }), void 0) : null;
29336
29447
  });
29337
- var templateObject_1$w, templateObject_2$o, templateObject_3$g, templateObject_4$d, templateObject_5$7, templateObject_6$7;
29448
+ var templateObject_1$x, templateObject_2$o, templateObject_3$g, templateObject_4$d, templateObject_5$7, templateObject_6$7;
29338
29449
 
29339
29450
  var CheckCircleOutlined = createCommonjsModule(function (module, exports) {
29340
29451
 
@@ -29394,13 +29505,13 @@ var Colors$a = ddsBaseTokens.colors,
29394
29505
  Spacing$h = ddsBaseTokens.spacing,
29395
29506
  FontPackages$c = ddsBaseTokens.fontPackages,
29396
29507
  BorderRadius$3 = ddsBaseTokens.borderRadius,
29397
- Border$7 = ddsBaseTokens.border,
29508
+ Border$8 = ddsBaseTokens.border,
29398
29509
  OuterShadow$2 = ddsBaseTokens.outerShadow;
29399
29510
 
29400
29511
  var containerBase = __assign(__assign({
29401
29512
  boxShadow: OuterShadow$2.DdsShadow1Onlight,
29402
29513
  borderRadius: BorderRadius$3.RadiiDdsBorderRadius1Radius,
29403
- border: Border$7.BordersDdsBorderStyleLightStrokeWeight + " solid",
29514
+ border: Border$8.BordersDdsBorderStyleLightStrokeWeight + " solid",
29404
29515
  padding: "0 " + Spacing$h.SizesDdsSpacingLocalX1
29405
29516
  }, FontPackages$c.body_sans_02.base), {
29406
29517
  color: Colors$a.DdsColorNeutralsGray8
@@ -29543,7 +29654,7 @@ var Container$4 = styled.div.withConfig({
29543
29654
  return layout === 'vertical' ? 'column' : 'row';
29544
29655
  }, function (_a) {
29545
29656
  var layout = _a.layout;
29546
- return layout === 'horisontal' && Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n align-items: center;\n justify-content: space-between;\n "], ["\n align-items: center;\n justify-content: space-between;\n "])));
29657
+ return layout === 'horisontal' && Ae(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n align-items: center;\n justify-content: space-between;\n "], ["\n align-items: center;\n justify-content: space-between;\n "])));
29547
29658
  }, typographyTokens.selection.base, function (_a) {
29548
29659
  var purpose = _a.purpose;
29549
29660
  return purpose && Ae(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), localMessageTokens.container.base, localMessageTokens.container[purpose].base);
@@ -29622,7 +29733,8 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29622
29733
  setClosed(true);
29623
29734
  onClose && onClose();
29624
29735
  },
29625
- size: "small"
29736
+ size: "small",
29737
+ "aria-label": "Lukk melding"
29626
29738
  }, void 0);
29627
29739
 
29628
29740
  return !isClosed ? jsxRuntime.jsx(Container$4, __assign({}, containerProps, {
@@ -29641,7 +29753,7 @@ var LocalMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29641
29753
  }, void 0)
29642
29754
  }), void 0) : null;
29643
29755
  });
29644
- var templateObject_1$v, templateObject_2$n, templateObject_3$f, templateObject_4$c, templateObject_5$6, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
29756
+ var templateObject_1$w, templateObject_2$n, templateObject_3$f, templateObject_4$c, templateObject_5$6, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9$1;
29645
29757
 
29646
29758
  var SearchOutlined = createCommonjsModule(function (module, exports) {
29647
29759
 
@@ -29723,7 +29835,7 @@ var Input = styled.input.withConfig({
29723
29835
  componentId: "sc-1ax3s9s-0"
29724
29836
  })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n &[type='search']::-webkit-search-decoration,\n &[type='search']::-webkit-search-cancel-button,\n &[type='search']::-webkit-search-results-button,\n &[type='search']::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n ", "\n ", "\n\n ", "\n\n padding-left: ", ";\n"], ["\n &[type='search']::-webkit-search-decoration,\n &[type='search']::-webkit-search-cancel-button,\n &[type='search']::-webkit-search-results-button,\n &[type='search']::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n ", "\n ", "\n\n ", "\n\n padding-left: ", ";\n"])), inputFieldStylingBase, searchTokens.input.base, function (_a) {
29725
29837
  var componentSize = _a.componentSize;
29726
- return componentSize && Ae(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), searchTokens.input[componentSize].base);
29838
+ return componentSize && Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), searchTokens.input[componentSize].base);
29727
29839
  }, searchTokens.input.spaceLeft);
29728
29840
  var IconWrapper = styled.span.withConfig({
29729
29841
  displayName: "Search__IconWrapper",
@@ -29745,26 +29857,34 @@ var ButtonWrapper = styled.div.withConfig({
29745
29857
  displayName: "Search__ButtonWrapper",
29746
29858
  componentId: "sc-1ax3s9s-5"
29747
29859
  })(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), searchTokens.buttonWrapper.spaceLeft);
29860
+ var nextUniqueId$4 = 0;
29748
29861
  var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29749
29862
  var _b = _a.componentSize,
29750
29863
  componentSize = _b === void 0 ? 'medium' : _b,
29751
29864
  buttonProps = _a.buttonProps,
29752
29865
  name = _a.name,
29753
29866
  tip = _a.tip,
29867
+ id = _a.id,
29754
29868
  className = _a.className,
29755
29869
  style = _a.style,
29756
- rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "className", "style"]);
29870
+ ariaDescribedby = _a["aria-describedby"],
29871
+ rest = __rest(_a, ["componentSize", "buttonProps", "name", "tip", "id", "className", "style", 'aria-describedby']);
29757
29872
 
29873
+ var uniqueId = React.useState(id !== null && id !== void 0 ? id : "searchInput-" + nextUniqueId$4++)[0];
29874
+ var hasTip = !!tip;
29875
+ var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
29758
29876
  var containerProps = {
29759
29877
  className: className,
29760
29878
  style: style
29761
29879
  };
29762
29880
 
29763
- var inputProps = __assign({
29881
+ var inputProps = __assign(__assign({}, rest), {
29764
29882
  componentSize: componentSize,
29765
29883
  name: name,
29766
- type: 'search'
29767
- }, rest);
29884
+ type: 'search',
29885
+ id: uniqueId,
29886
+ 'aria-describedby': spaceSeparatedIdListGenerator([tipId, ariaDescribedby])
29887
+ });
29768
29888
 
29769
29889
  var _c = buttonProps || {},
29770
29890
  label = _c.label,
@@ -29779,7 +29899,8 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29779
29899
  }, void 0), jsxRuntime.jsx(Input, __assign({
29780
29900
  ref: ref
29781
29901
  }, inputProps), void 0)]
29782
- }, void 0), tip && jsxRuntime.jsx(InputMessage, {
29902
+ }, void 0), hasTip && jsxRuntime.jsx(InputMessage, {
29903
+ messageId: tipId,
29783
29904
  messageType: "tip",
29784
29905
  message: tip
29785
29906
  }, void 0)]
@@ -29792,7 +29913,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29792
29913
  }, void 0)]
29793
29914
  }), void 0);
29794
29915
  });
29795
- var templateObject_1$u, templateObject_2$m, templateObject_3$e, templateObject_4$b, templateObject_5$5, templateObject_6$5, templateObject_7$3;
29916
+ var templateObject_1$v, templateObject_2$m, templateObject_3$e, templateObject_4$b, templateObject_5$5, templateObject_6$5, templateObject_7$3;
29796
29917
 
29797
29918
  var Colors$9 = ddsBaseTokens.colors,
29798
29919
  Spacing$f = ddsBaseTokens.spacing;
@@ -29846,7 +29967,7 @@ var StyledTable = styled.table.withConfig({
29846
29967
  componentId: "sc-bw0w0a-0"
29847
29968
  })(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n border-spacing: 0;\n border-collapse: collapse;\n *::selection {\n ", "\n }\n ", "\n ", "\n ", "\n"], ["\n border-spacing: 0;\n border-collapse: collapse;\n *::selection {\n ", "\n }\n ", "\n ", "\n ", "\n"])), typographyTokens.selection.base, scrollbarStyling, function (_a) {
29848
29969
  var density = _a.density;
29849
- return density && Ae(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n td,\n th {\n ", "\n }\n "], ["\n td,\n th {\n ", "\n }\n "])), cellTokens.density[density].base);
29970
+ return density && Ae(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n td,\n th {\n ", "\n }\n "], ["\n td,\n th {\n ", "\n }\n "])), cellTokens.density[density].base);
29850
29971
  }, function (_a) {
29851
29972
  var stickyHeader = _a.stickyHeader;
29852
29973
  return stickyHeader && Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n tr[type='head'] {\n th[type='head'] {\n position: sticky;\n top: 0;\n }\n }\n "], ["\n tr[type='head'] {\n th[type='head'] {\n position: sticky;\n top: 0;\n }\n }\n "])));
@@ -29866,12 +29987,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29866
29987
  children: children
29867
29988
  }), void 0);
29868
29989
  });
29869
- var templateObject_1$t, templateObject_2$l, templateObject_3$d;
29990
+ var templateObject_1$u, templateObject_2$l, templateObject_3$d;
29870
29991
 
29871
29992
  var StyledBody = styled.tbody.withConfig({
29872
29993
  displayName: "Body__StyledBody",
29873
29994
  componentId: "sc-67qjfs-0"
29874
- })(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
29995
+ })(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
29875
29996
  var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29876
29997
  var children = _a.children,
29877
29998
  rest = __rest(_a, ["children"]);
@@ -29884,12 +30005,12 @@ var Body$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29884
30005
  children: children
29885
30006
  }), void 0);
29886
30007
  });
29887
- var templateObject_1$s;
30008
+ var templateObject_1$t;
29888
30009
 
29889
30010
  var StyledHead = styled.thead.withConfig({
29890
30011
  displayName: "Head__StyledHead",
29891
30012
  componentId: "sc-vzd2kv-0"
29892
- })(templateObject_1$r || (templateObject_1$r = __makeTemplateObject([""], [""])));
30013
+ })(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
29893
30014
  var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29894
30015
  var children = _a.children,
29895
30016
  rest = __rest(_a, ["children"]);
@@ -29902,11 +30023,11 @@ var Head = /*#__PURE__*/React.forwardRef(function (_a, ref) {
29902
30023
  children: children
29903
30024
  }), void 0);
29904
30025
  });
29905
- var templateObject_1$r;
30026
+ var templateObject_1$s;
29906
30027
 
29907
30028
  var Colors$8 = ddsBaseTokens.colors,
29908
30029
  FontPackages$a = ddsBaseTokens.fontPackages,
29909
- Border$6 = ddsBaseTokens.border;
30030
+ Border$7 = ddsBaseTokens.border;
29910
30031
  var textDefault$4 = ddsReferenceTokens.textDefault;
29911
30032
 
29912
30033
  var bodyRowBase = __assign({
@@ -29935,8 +30056,8 @@ var bodyHoverBase = {
29935
30056
 
29936
30057
  var bodySumBase = __assign(__assign({}, FontPackages$a.body_sans_02.base), {
29937
30058
  fontWeight: 600,
29938
- borderTop: Border$6.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$8.DdsColorNeutralsGray4,
29939
- borderBottom: Border$6.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$8.DdsColorNeutralsGray4,
30059
+ borderTop: Border$7.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$8.DdsColorNeutralsGray4,
30060
+ borderBottom: Border$7.BordersDdsBorderStyleLightStrokeWeight + " solid " + Colors$8.DdsColorNeutralsGray4,
29940
30061
  backgroundColor: Colors$8.DdsColorNeutralsWhite
29941
30062
  });
29942
30063
 
@@ -29970,7 +30091,7 @@ var rowTokens = {
29970
30091
  };
29971
30092
 
29972
30093
  var bodyStyles = function bodyStyles(mode, selected) {
29973
- return Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), mode && Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), rowTokens.body.selected.base));
30094
+ return Ae(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), mode && Ae(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), rowTokens.body.mode[mode].base), selected && Ae(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), rowTokens.body.selected.base));
29974
30095
  };
29975
30096
 
29976
30097
  var StyledRow = styled.tr.withConfig({
@@ -30005,12 +30126,12 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
30005
30126
  children: children
30006
30127
  }), void 0);
30007
30128
  });
30008
- var templateObject_1$q, templateObject_2$k, templateObject_3$c, templateObject_4$a, templateObject_5$4, templateObject_6$4, templateObject_7$2;
30129
+ var templateObject_1$r, templateObject_2$k, templateObject_3$c, templateObject_4$a, templateObject_5$4, templateObject_6$4, templateObject_7$2;
30009
30130
 
30010
30131
  var layoutStyle = function layoutStyle(layout) {
30011
30132
  switch (layout) {
30012
30133
  case 'center':
30013
- return Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n justify-content: center;\n "], ["\n justify-content: center;\n "])));
30134
+ return Ae(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n justify-content: center;\n "], ["\n justify-content: center;\n "])));
30014
30135
 
30015
30136
  case 'right':
30016
30137
  return Ae(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n justify-content: flex-end;\n "], ["\n justify-content: flex-end;\n "])));
@@ -30076,7 +30197,7 @@ var Cell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
30076
30197
  }), void 0)
30077
30198
  }), void 0);
30078
30199
  });
30079
- var templateObject_1$p, templateObject_2$j, templateObject_3$b, templateObject_4$9, templateObject_5$3, templateObject_6$3;
30200
+ var templateObject_1$q, templateObject_2$j, templateObject_3$b, templateObject_4$9, templateObject_5$3, templateObject_6$3;
30080
30201
 
30081
30202
  var KeyboardArrowDown = createCommonjsModule(function (module, exports) {
30082
30203
 
@@ -30150,6 +30271,9 @@ exports.default = _default;
30150
30271
 
30151
30272
  var UnfoldMoreIcon = /*@__PURE__*/getDefaultExportFromCjs(UnfoldMore);
30152
30273
 
30274
+ var removeButtonStyling = Ae(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n outline: inherit;\n"], ["\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n outline: inherit;\n"])));
30275
+ var templateObject_1$p;
30276
+
30153
30277
  var SortIconWrapper = styled(IconWrapper$1).withConfig({
30154
30278
  displayName: "SortCell__SortIconWrapper",
30155
30279
  componentId: "sc-1l3jzvh-0"
@@ -30157,7 +30281,7 @@ var SortIconWrapper = styled(IconWrapper$1).withConfig({
30157
30281
  var StyledButton$1 = styled.button.withConfig({
30158
30282
  displayName: "SortCell__StyledButton",
30159
30283
  componentId: "sc-1l3jzvh-1"
30160
- })(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n outline: inherit;\n"], ["\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n outline: inherit;\n"])));
30284
+ })(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n display: flex;\n align-items: center;\n"], ["\n ", "\n display: flex;\n align-items: center;\n"])), removeButtonStyling);
30161
30285
 
30162
30286
  var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
30163
30287
  if (!isSorted || !sortOrder) {
@@ -30189,7 +30313,8 @@ var SortCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
30189
30313
  "aria-sort": isSorted && sortOrder ? sortOrder : undefined
30190
30314
  }, rest, {
30191
30315
  children: jsxRuntime.jsxs(StyledButton$1, __assign({
30192
- onClick: onClick
30316
+ onClick: onClick,
30317
+ "aria-description": "Aktiver for \xE5 endre sorteringsrekkef\xF8lge"
30193
30318
  }, {
30194
30319
  children: [children, " ", makeSortIcon(isSorted, sortOrder)]
30195
30320
  }), void 0)
@@ -30748,6 +30873,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
30748
30873
  children: [jsxRuntime.jsxs(IndicatorsContainer, {
30749
30874
  children: [withSelect && jsxRuntime.jsx(Select, {
30750
30875
  options: selectOptions,
30876
+ isSearchable: false,
30751
30877
  width: "76px",
30752
30878
  defaultValue: {
30753
30879
  label: itemsPerPage.toString(),
@@ -30767,16 +30893,16 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
30767
30893
  });
30768
30894
  var templateObject_1$k, templateObject_2$f, templateObject_3$9, templateObject_4$7, templateObject_5$2, templateObject_6$2, templateObject_7$1;
30769
30895
 
30770
- var Border$5 = ddsBaseTokens.border,
30896
+ var Border$6 = ddsBaseTokens.border,
30771
30897
  Spacing$c = ddsBaseTokens.spacing;
30772
30898
  var dividerColors = {
30773
- primary: Border$5.BordersDdsBorderStyleDarkStroke,
30774
- primaryLighter: Border$5.BordersDdsBorderStyleLightStroke
30899
+ primary: Border$6.BordersDdsBorderStyleDarkStroke,
30900
+ primaryLighter: Border$6.BordersDdsBorderStyleLightStroke
30775
30901
  };
30776
30902
  var base$7 = {
30777
30903
  border: 0,
30778
30904
  backgroundColor: 'transparent',
30779
- borderTop: Border$5.BordersDdsBorderStyleLightStrokeWeight + " solid",
30905
+ borderTop: Border$6.BordersDdsBorderStyleLightStrokeWeight + " solid",
30780
30906
  marginTop: Spacing$c.SizesDdsSpacingLocalX1,
30781
30907
  marginBottom: Spacing$c.SizesDdsSpacingLocalX1
30782
30908
  };
@@ -31058,21 +31184,21 @@ var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
31058
31184
  var templateObject_1$d, templateObject_2$a;
31059
31185
 
31060
31186
  var Colors$4 = ddsBaseTokens.colors,
31061
- Border$4 = ddsBaseTokens.border,
31187
+ Border$5 = ddsBaseTokens.border,
31062
31188
  FontPackages$5 = ddsBaseTokens.fontPackages;
31063
31189
  var textDefault = ddsReferenceTokens.textDefault;
31064
31190
 
31065
31191
  var base$2 = __assign({
31066
- border: Border$4.BordersDdsBorderStyleLightStrokeWeight + " solid"
31192
+ border: Border$5.BordersDdsBorderStyleLightStrokeWeight + " solid"
31067
31193
  }, FontPackages$5.body_sans_02.base);
31068
31194
 
31069
31195
  var navigationHoverBase = {
31070
- borderColor: Border$4.BordersDdsBorderFocusInputfieldStroke,
31071
- boxShadow: "0 0 0 1px " + Border$4.BordersDdsBorderFocusInputfieldStroke
31196
+ borderColor: Border$5.BordersDdsBorderFocusInputfieldStroke,
31197
+ boxShadow: "0 0 0 1px " + Border$5.BordersDdsBorderFocusInputfieldStroke
31072
31198
  };
31073
31199
  var navigationFocusBase = {
31074
- borderColor: Border$4.BordersDdsBorderFocusCardStroke,
31075
- boxShadow: "0 0 0 1px " + Border$4.BordersDdsBorderFocusCardStroke
31200
+ borderColor: Border$5.BordersDdsBorderFocusCardStroke,
31201
+ boxShadow: "0 0 0 1px " + Border$5.BordersDdsBorderFocusCardStroke
31076
31202
  };
31077
31203
  var filledDarkBase = {
31078
31204
  backgroundColor: Colors$4.DdsColorPrimaryBase,
@@ -31206,17 +31332,17 @@ var templateObject_1$b;
31206
31332
 
31207
31333
  var Spacing$6 = ddsBaseTokens.spacing,
31208
31334
  FontPackages$4 = ddsBaseTokens.fontPackages,
31209
- Border$3 = ddsBaseTokens.border;
31335
+ Border$4 = ddsBaseTokens.border;
31210
31336
 
31211
31337
  var base$1 = __assign({
31212
31338
  padding: Spacing$6.SizesDdsSpacingLocalX1
31213
31339
  }, FontPackages$4.heading_sans_03.base);
31214
31340
 
31215
31341
  var focusBase = {
31216
- boxShadow: "0 0 0 " + Border$3.BordersDdsBorderFocusCardStrokeWeight + " " + Border$3.BordersDdsBorderFocusCardStroke
31342
+ boxShadow: "0 0 0 " + Border$4.BordersDdsBorderFocusCardStrokeWeight + " " + Border$4.BordersDdsBorderFocusCardStroke
31217
31343
  };
31218
31344
  var hoverBase = {
31219
- boxShadow: "0 0 0 " + Border$3.BordersDdsBorderFocusInputfieldStrokeWeight + " " + Border$3.BordersDdsBorderFocusInputfieldStroke
31345
+ boxShadow: "0 0 0 " + Border$4.BordersDdsBorderFocusInputfieldStrokeWeight + " " + Border$4.BordersDdsBorderFocusInputfieldStroke
31220
31346
  };
31221
31347
  var cardAccordionHeaderTokens = {
31222
31348
  base: base$1,
@@ -33836,12 +33962,12 @@ function useRoveFocus(size, reset) {
33836
33962
  return [currentFocus, setCurrentFocus];
33837
33963
  }
33838
33964
 
33839
- var Border$2 = ddsBaseTokens.border,
33965
+ var Border$3 = ddsBaseTokens.border,
33840
33966
  BorderRadius$2 = ddsBaseTokens.borderRadius,
33841
33967
  Colors$3 = ddsBaseTokens.colors,
33842
33968
  Spacing$4 = ddsBaseTokens.spacing,
33843
33969
  FontPackages$2 = ddsBaseTokens.fontPackages;
33844
- var borderColor = Border$2.BordersDdsBorderStyleLightStroke;
33970
+ var borderColor = Border$3.BordersDdsBorderStyleLightStroke;
33845
33971
 
33846
33972
  var linkBase$1 = __assign({
33847
33973
  color: Colors$3.DdsColorNeutralsGray9,
@@ -33864,15 +33990,15 @@ var applicationNameWrapperBase = {
33864
33990
  };
33865
33991
  var lovisaWrapperBase = {
33866
33992
  padding: Spacing$4.SizesDdsSpacingLocalX1 + " " + Spacing$4.SizesDdsSpacingLocalX15,
33867
- borderRight: Border$2.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
33993
+ borderRight: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
33868
33994
  };
33869
33995
  var bannerBase = {
33870
- borderBottom: Border$2.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
33996
+ borderBottom: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
33871
33997
  paddingRight: Spacing$4.SizesDdsSpacingLocalX1
33872
33998
  };
33873
33999
  var bannerLeftBase = {};
33874
34000
  var navigationBase = {
33875
- borderBottom: Border$2.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
34001
+ borderBottom: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid "
33876
34002
  };
33877
34003
 
33878
34004
  var navigationLinkBase = __assign({
@@ -33885,14 +34011,14 @@ var navigationLinkActiveBase = __assign({}, linkActiveBase);
33885
34011
 
33886
34012
  var navigationLinkFocusBase = {
33887
34013
  color: Colors$3.DdsColorNeutralsWhite,
33888
- backgroundColor: Border$2.BordersDdsBorderFocusBaseStroke
34014
+ backgroundColor: Border$3.BordersDdsBorderFocusBaseStroke
33889
34015
  };
33890
34016
  var navigationLinkCurrentBase = {
33891
34017
  color: Colors$3.DdsColorInteractiveDarker,
33892
34018
  backgroundColor: Colors$3.DdsColorPrimaryLightest
33893
34019
  };
33894
34020
  var contextMenuBase = {
33895
- border: Border$2.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
34021
+ border: Border$3.BordersDdsBorderStyleLightStrokeWeight + " " + borderColor + " solid ",
33896
34022
  backgroundColor: Colors$3.DdsColorNeutralsWhite,
33897
34023
  borderRadius: BorderRadius$2.RadiiDdsBorderRadius1Radius
33898
34024
  };
@@ -33907,7 +34033,7 @@ var contextMenuLinkActiveBase = __assign({}, linkActiveBase);
33907
34033
 
33908
34034
  var contextMenuLinkFocusBase = {
33909
34035
  color: Colors$3.DdsColorNeutralsWhite,
33910
- backgroundColor: Border$2.BordersDdsBorderFocusBaseStroke
34036
+ backgroundColor: Border$3.BordersDdsBorderFocusBaseStroke
33911
34037
  };
33912
34038
  var iconBase = {
33913
34039
  marginRight: Spacing$4.SizesDdsSpacingLocalX025
@@ -34330,10 +34456,10 @@ var getWidth = function getWidth(type) {
34330
34456
  return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
34331
34457
  };
34332
34458
 
34333
- var StyledInput = styled(Input$2).withConfig({
34459
+ var StyledInput = styled(Input$3).withConfig({
34334
34460
  displayName: "Datepicker__StyledInput",
34335
34461
  componentId: "sc-1ijxhje-0"
34336
- })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n ::-webkit-calendar-picker-indicator {\n margin-left: 0px;\n }\n"], ["\n ::-webkit-calendar-picker-indicator {\n margin-left: 0px;\n }\n"])));
34462
+ })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n ::-webkit-calendar-picker-indicator {\n margin-left: 0px;\n }\n ::-webkit-inner-spin-button {\n display: none;\n }\n"], ["\n ::-webkit-calendar-picker-indicator {\n margin-left: 0px;\n }\n ::-webkit-inner-spin-button {\n display: none;\n }\n"])));
34337
34463
  var nextUniqueId$2 = 0;
34338
34464
  var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
34339
34465
  var id = _a.id,
@@ -34348,20 +34474,26 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
34348
34474
  tip = _a.tip,
34349
34475
  style = _a.style,
34350
34476
  className = _a.className,
34351
- rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className"]);
34477
+ ariaDescribedby = _a["aria-describedby"],
34478
+ rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
34352
34479
 
34353
34480
  var uniqueId = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-" + nextUniqueId$2++)[0];
34354
34481
  var componentWidth = width ? width : getWidth(type);
34482
+ var hasErrorMessage = !!errorMessage;
34483
+ var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
34484
+ var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
34355
34485
 
34356
34486
  var inputProps = __assign({
34357
34487
  label: label,
34358
- errorMessage: errorMessage,
34488
+ hasErrorMessage: hasErrorMessage,
34359
34489
  ref: ref,
34360
34490
  readOnly: readOnly,
34361
34491
  tabIndex: readOnly ? -1 : 0,
34362
34492
  required: required,
34363
34493
  disabled: disabled,
34364
- type: type
34494
+ type: type,
34495
+ 'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
34496
+ 'aria-invalid': hasErrorMessage ? true : undefined
34365
34497
  }, rest);
34366
34498
 
34367
34499
  var outerInputContainerProps = {
@@ -34383,9 +34515,11 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
34383
34515
  }), void 0)]
34384
34516
  }, void 0), errorMessage && jsxRuntime.jsx(InputMessage, {
34385
34517
  message: errorMessage,
34518
+ messageId: errorMessageId,
34386
34519
  messageType: "error"
34387
34520
  }, void 0), tip && !errorMessage && jsxRuntime.jsx(InputMessage, {
34388
34521
  message: tip,
34522
+ messageId: tipId,
34389
34523
  messageType: "tip"
34390
34524
  }, void 0)]
34391
34525
  }), void 0);
@@ -34395,7 +34529,7 @@ var templateObject_1$3;
34395
34529
  var Colors$2 = ddsBaseTokens.colors,
34396
34530
  Spacing$3 = ddsBaseTokens.spacing,
34397
34531
  FontPackages$1 = ddsBaseTokens.fontPackages,
34398
- Border$1 = ddsBaseTokens.border;
34532
+ Border$2 = ddsBaseTokens.border;
34399
34533
 
34400
34534
  var linkBase = __assign(__assign({
34401
34535
  color: Colors$2.DdsColorNeutralsWhite
@@ -34412,7 +34546,7 @@ var skipToContentTokens = {
34412
34546
  base: linkBase,
34413
34547
  focusOutline: {
34414
34548
  color: Colors$2.DdsColorWarningDark,
34415
- width: Border$1.BordersDdsBorderFocusBaseStrokeWeight
34549
+ width: Border$2.BordersDdsBorderFocusBaseStrokeWeight
34416
34550
  }
34417
34551
  },
34418
34552
  wrapper: {
@@ -34455,24 +34589,15 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
34455
34589
  });
34456
34590
  var templateObject_1$2, templateObject_2$2;
34457
34591
 
34458
- var combineHandlers = function combineHandlers(handler1, handler2) {
34459
- var callback = function callback(event) {
34460
- handler1 && handler1(event);
34461
- handler2 && handler2(event);
34462
- };
34463
-
34464
- return callback;
34465
- };
34466
-
34467
- var Colors$1 = ddsBaseTokens.colors,
34592
+ var Border$1 = ddsBaseTokens.border,
34593
+ Colors$1 = ddsBaseTokens.colors,
34468
34594
  FontPackages = ddsBaseTokens.fontPackages,
34469
34595
  Spacing$2 = ddsBaseTokens.spacing,
34470
34596
  OuterShadow$1 = ddsBaseTokens.outerShadow,
34471
34597
  BorderRadius$1 = ddsBaseTokens.borderRadius;
34472
34598
 
34473
34599
  var wrapperBase$1 = __assign(__assign({
34474
- // border: `${Border.BordersDdsBorderStyleLightStroke} solid ${Border.BordersDdsBorderFocusBaseStrokeWeight}`,
34475
- border: "1px solid " + Colors$1.DdsColorPrimaryLighter,
34600
+ border: Border$1.BordersDdsBorderStyleLightStroke + " solid " + Border$1.BordersDdsBorderFocusBaseStrokeWeight,
34476
34601
  backgroundColor: Colors$1.DdsColorNeutralsWhite
34477
34602
  }, FontPackages.body_sans_02.base), {
34478
34603
  padding: "" + Spacing$2.SizesDdsSpacingLocalX075,