@norges-domstoler/dds-components 22.7.0 → 22.7.2

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.
package/dist/index.js CHANGED
@@ -7970,10 +7970,8 @@ var useDetailListContext = () => (0, import_react51.useContext)(DetailListContex
7970
7970
  // src/components/DetailList/DetailList.module.css
7971
7971
  var DetailList_default = {
7972
7972
  list: "DetailList_list",
7973
- "list--with-dividers": "DetailList_list--with-dividers",
7974
- row: "DetailList_row",
7975
- "list--striped": "DetailList_list--striped",
7976
7973
  "list--striped-with-bp": "DetailList_list--striped-with-bp",
7974
+ row: "DetailList_row",
7977
7975
  "list--small": "DetailList_list--small",
7978
7976
  "list--medium": "DetailList_list--medium",
7979
7977
  "list--large": "DetailList_list--large",
@@ -7982,6 +7980,32 @@ var DetailList_default = {
7982
7980
  term: "DetailList_term"
7983
7981
  };
7984
7982
 
7983
+ // src/components/Table/normal/Table.module.css
7984
+ var Table_default = {
7985
+ wrapper: "Table_wrapper",
7986
+ "wrapper--scrollable": "Table_wrapper--scrollable",
7987
+ table: "Table_table",
7988
+ "table--with-dividers": "Table_table--with-dividers",
7989
+ "row--body": "Table_row--body",
7990
+ "row--colapsible-header--open": "Table_row--colapsible-header--open",
7991
+ "table--sticky-header": "Table_table--sticky-header",
7992
+ "table--with-stripes": "Table_table--with-stripes",
7993
+ "table--small": "Table_table--small",
7994
+ "table--medium": "Table_table--medium",
7995
+ "table--large": "Table_table--large",
7996
+ row: "Table_row",
7997
+ "row--sum": "Table_row--sum",
7998
+ "row--selected": "Table_row--selected",
7999
+ "row--hoverable": "Table_row--hoverable",
8000
+ "cell--head": "Table_cell--head",
8001
+ "cell--left": "Table_cell--left",
8002
+ "cell--right": "Table_cell--right",
8003
+ "cell--center": "Table_cell--center",
8004
+ cell__inner: "Table_cell__inner",
8005
+ "sort-button": "Table_sort-button",
8006
+ "collapse-button": "Table_collapse-button"
8007
+ };
8008
+
7985
8009
  // src/components/DetailList/DetailList.tsx
7986
8010
  var import_jsx_runtime258 = require("react/jsx-runtime");
7987
8011
  var DETAIL_LIST_SIZES = createSizes("small", "medium", "large");
@@ -8003,10 +8027,11 @@ var DetailList = ({
8003
8027
  cn(
8004
8028
  className,
8005
8029
  typographyStyles_default[`body-short-${size2}`],
8030
+ Table_default.table,
8006
8031
  DetailList_default.list,
8007
8032
  DetailList_default[`list--${size2}`],
8008
- withDividers && DetailList_default["list--with-dividers"],
8009
- striped && !smallScreenBreakpoint && DetailList_default["list--striped"],
8033
+ withDividers && Table_default["table--with-dividers"],
8034
+ striped && !smallScreenBreakpoint && Table_default["table--with-stripes"],
8010
8035
  striped && smallScreenBreakpoint && DetailList_default["list--striped-with-bp"]
8011
8036
  ),
8012
8037
  style,
@@ -8033,7 +8058,7 @@ var DetailListRow = ({ className, ...rest }) => {
8033
8058
  {
8034
8059
  display: "table-row",
8035
8060
  hideBelow: hasBp ? bp : void 0,
8036
- className: cn(className, DetailList_default.row),
8061
+ className: cn(className, DetailList_default.row, Table_default["row--body"]),
8037
8062
  ...rest
8038
8063
  }
8039
8064
  ),
@@ -8043,7 +8068,12 @@ var DetailListRow = ({ className, ...rest }) => {
8043
8068
  display: "flex",
8044
8069
  flexDirection: "column",
8045
8070
  showBelow: bp,
8046
- className: cn(className, DetailList_default.row, DetailList_default.column),
8071
+ className: cn(
8072
+ className,
8073
+ DetailList_default.row,
8074
+ DetailList_default.column,
8075
+ Table_default["row--body"]
8076
+ ),
8047
8077
  ...rest
8048
8078
  }
8049
8079
  )
@@ -8401,7 +8431,7 @@ var ErrorSummary = ({
8401
8431
  props
8402
8432
  ),
8403
8433
  background: "surface-danger-default",
8404
- padding: "x1 x0.75 x1.5 x1",
8434
+ padding: "x1 x0.75 x0.25 x1",
8405
8435
  children: [
8406
8436
  heading,
8407
8437
  /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(List, { children })
@@ -11070,6 +11100,7 @@ var optionTypography = {
11070
11100
  letterSpacing: "var(--dds-font-body-short-xsmall-letter-spacing)"
11071
11101
  }
11072
11102
  };
11103
+ var controlTypography = optionTypography;
11073
11104
  var multiValueLabelTypography = {
11074
11105
  medium: {
11075
11106
  font: "var(--dds-font-body-short-small)",
@@ -11090,22 +11121,12 @@ var groupHeadingTypography = {
11090
11121
  };
11091
11122
  var typography = {
11092
11123
  option: optionTypography,
11124
+ control: controlTypography,
11093
11125
  multiValueLabel: multiValueLabelTypography,
11094
11126
  groupHeading: groupHeadingTypography
11095
11127
  };
11096
11128
  var prefix = "dds-select";
11097
- var control = {
11098
- medium: {
11099
- ...optionTypography.medium
11100
- },
11101
- small: {
11102
- ...optionTypography.small
11103
- },
11104
- xsmall: {
11105
- ...optionTypography.xsmall
11106
- }
11107
- };
11108
- var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
11129
+ var getCustomStyles = (size2, hasError, isReadOnly) => ({
11109
11130
  control: (provided, state) => ({
11110
11131
  position: "relative",
11111
11132
  display: "flex",
@@ -11117,7 +11138,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
11117
11138
  borderColor: "var(--dds-color-border-default)",
11118
11139
  backgroundColor: "var(--dds-color-surface-default)",
11119
11140
  transition: `box-shadow var(--dds-motion-micro-state), border-color var(--dds-motion-micro-state), ${focusVisibleTransitionValue}`,
11120
- ...control[size2],
11141
+ ...typography.control[size2],
11121
11142
  "&:hover": {
11122
11143
  ...!isReadOnly && {
11123
11144
  borderColor: "var(--dds-color-border-action-hover)",
@@ -11263,7 +11284,7 @@ var getCustomStyles = (size2, hasError, hasIcon, isReadOnly) => ({
11263
11284
  gap: "var(--dds-spacing-x0-25)",
11264
11285
  padding: "var(--dds-spacing-x0-75)",
11265
11286
  backgroundColor: "var(--dds-color-surface-default)",
11266
- ...typography.option.medium,
11287
+ ...typography.option[size2],
11267
11288
  color: "var(--dds-color-text-default)",
11268
11289
  "@media (prefers-reduced-motion: no-preference)": {
11269
11290
  transition: "color var(--dds-motion-micro-state), background-color var(--dds-motion-micro-state)"
@@ -11459,7 +11480,6 @@ function Select({
11459
11480
  const uniqueId = id != null ? id : `${generatedId}-select`;
11460
11481
  const singleValueId = !isMulti ? `${uniqueId}-singleValue` : void 0;
11461
11482
  const hasErrorMessage = !!errorMessage;
11462
- const hasIcon = !!icon;
11463
11483
  const showRequiredStyling = !!(rest.required || ariaRequired);
11464
11484
  const tipId = derivativeIdGenerator(uniqueId, "tip");
11465
11485
  const errorMessageId = derivativeIdGenerator(uniqueId, "errorMessage");
@@ -11542,12 +11562,7 @@ function Select({
11542
11562
  name: uniqueId,
11543
11563
  menuPortalTarget: portalTarget,
11544
11564
  classNamePrefix: prefix,
11545
- styles: getCustomStyles(
11546
- componentSize,
11547
- hasErrorMessage,
11548
- hasIcon,
11549
- readOnly
11550
- ),
11565
+ styles: getCustomStyles(componentSize, hasErrorMessage, readOnly),
11551
11566
  filterOption: (option, inputValue) => {
11552
11567
  const { label: label2 } = option;
11553
11568
  return searchFilter(label2, inputValue) || inputValue === "";
@@ -12727,7 +12742,7 @@ var PhoneInput = ({
12727
12742
  children: countryOptions.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("option", { value: item.countryCode, children: item.label }, index))
12728
12743
  }
12729
12744
  ),
12730
- /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(Box, { width: "100%", className: Input_default["input-group"], children: [
12745
+ /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(Box, { width: "100%", display: "flex", className: Input_default["input-group"], children: [
12731
12746
  /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
12732
12747
  "span",
12733
12748
  {
@@ -13964,32 +13979,6 @@ function useIsInTableHead() {
13964
13979
  return isInTableHead;
13965
13980
  }
13966
13981
 
13967
- // src/components/Table/normal/Table.module.css
13968
- var Table_default = {
13969
- wrapper: "Table_wrapper",
13970
- "wrapper--scrollable": "Table_wrapper--scrollable",
13971
- table: "Table_table",
13972
- "table--with-dividers": "Table_table--with-dividers",
13973
- "row--body": "Table_row--body",
13974
- "row--colapsible-header--open": "Table_row--colapsible-header--open",
13975
- "table--sticky-header": "Table_table--sticky-header",
13976
- "table--with-stripes": "Table_table--with-stripes",
13977
- "table--small": "Table_table--small",
13978
- "table--medium": "Table_table--medium",
13979
- "table--large": "Table_table--large",
13980
- row: "Table_row",
13981
- "row--sum": "Table_row--sum",
13982
- "row--selected": "Table_row--selected",
13983
- "row--hoverable": "Table_row--hoverable",
13984
- "cell--head": "Table_cell--head",
13985
- "cell--left": "Table_cell--left",
13986
- "cell--right": "Table_cell--right",
13987
- "cell--center": "Table_cell--center",
13988
- cell__inner: "Table_cell__inner",
13989
- "sort-button": "Table_sort-button",
13990
- "collapse-button": "Table_collapse-button"
13991
- };
13992
-
13993
13982
  // src/components/Table/normal/Cell.tsx
13994
13983
  var import_jsx_runtime324 = require("react/jsx-runtime");
13995
13984
  var Cell = ({