@navikt/ds-react 7.6.0 → 7.7.0

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 (161) hide show
  1. package/cjs/copybutton/CopyButton.d.ts +1 -6
  2. package/cjs/copybutton/CopyButton.js +8 -6
  3. package/cjs/copybutton/CopyButton.js.map +1 -1
  4. package/cjs/date/datepicker/parts/WeekNumber.js +11 -2
  5. package/cjs/date/datepicker/parts/WeekNumber.js.map +1 -1
  6. package/cjs/form/combobox/FilteredOptions/AddNewOption.js +3 -1
  7. package/cjs/form/combobox/FilteredOptions/AddNewOption.js.map +1 -1
  8. package/cjs/form/combobox/FilteredOptions/LoadingMessage.js +3 -1
  9. package/cjs/form/combobox/FilteredOptions/LoadingMessage.js.map +1 -1
  10. package/cjs/form/combobox/FilteredOptions/MaxSelectedMessage.js +6 -2
  11. package/cjs/form/combobox/FilteredOptions/MaxSelectedMessage.js.map +1 -1
  12. package/cjs/form/combobox/Input/Input.context.d.ts +1 -1
  13. package/cjs/form/combobox/Input/Input.context.js.map +1 -1
  14. package/cjs/form/combobox/Input/InputController.js +9 -7
  15. package/cjs/form/combobox/Input/InputController.js.map +1 -1
  16. package/cjs/form/combobox/Input/ToggleListButton.d.ts +1 -4
  17. package/cjs/form/combobox/Input/ToggleListButton.js +3 -5
  18. package/cjs/form/combobox/Input/ToggleListButton.js.map +1 -1
  19. package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +8 -6
  20. package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
  21. package/cjs/form/combobox/types.d.ts +2 -7
  22. package/cjs/form/form-summary/FormSummaryEditLink.js +4 -2
  23. package/cjs/form/form-summary/FormSummaryEditLink.js.map +1 -1
  24. package/cjs/form/search/Search.js +8 -3
  25. package/cjs/form/search/Search.js.map +1 -1
  26. package/cjs/guide-panel/Illustration.js +3 -1
  27. package/cjs/guide-panel/Illustration.js.map +1 -1
  28. package/cjs/help-text/HelpText.d.ts +1 -1
  29. package/cjs/help-text/HelpText.js +6 -3
  30. package/cjs/help-text/HelpText.js.map +1 -1
  31. package/cjs/internal-header/InternalHeaderButton.d.ts +1 -1
  32. package/cjs/internal-header/InternalHeaderUserButton.d.ts +1 -1
  33. package/cjs/internal-header/InternalHeaderUserButton.js +1 -1
  34. package/cjs/internal-header/InternalHeaderUserButton.js.map +1 -1
  35. package/cjs/layout/base/BasePrimitive.js +4 -1
  36. package/cjs/layout/base/BasePrimitive.js.map +1 -1
  37. package/cjs/layout/bleed/Bleed.js +5 -2
  38. package/cjs/layout/bleed/Bleed.js.map +1 -1
  39. package/cjs/layout/box/Box.d.ts +6 -1
  40. package/cjs/layout/box/Box.darkside.d.ts +70 -0
  41. package/cjs/layout/box/Box.darkside.js +98 -0
  42. package/cjs/layout/box/Box.darkside.js.map +1 -0
  43. package/cjs/layout/box/Box.js +19 -6
  44. package/cjs/layout/box/Box.js.map +1 -1
  45. package/cjs/layout/box/index.js +2 -0
  46. package/cjs/layout/box/index.js.map +1 -1
  47. package/cjs/layout/grid/HGrid.js +4 -1
  48. package/cjs/layout/grid/HGrid.js.map +1 -1
  49. package/cjs/layout/page/Page.d.ts +1 -0
  50. package/cjs/layout/page/Page.js +5 -0
  51. package/cjs/layout/page/Page.js.map +1 -1
  52. package/cjs/layout/stack/Stack.js +4 -1
  53. package/cjs/layout/stack/Stack.js.map +1 -1
  54. package/cjs/layout/utilities/css.d.ts +2 -2
  55. package/cjs/layout/utilities/css.js +8 -9
  56. package/cjs/layout/utilities/css.js.map +1 -1
  57. package/cjs/layout/utilities/types.d.ts +10 -0
  58. package/cjs/util/i18n/locales/en.d.ts +19 -0
  59. package/cjs/util/i18n/locales/en.js +19 -0
  60. package/cjs/util/i18n/locales/en.js.map +1 -1
  61. package/cjs/util/i18n/locales/nb.d.ts +21 -0
  62. package/cjs/util/i18n/locales/nb.js +21 -0
  63. package/cjs/util/i18n/locales/nb.js.map +1 -1
  64. package/cjs/util/i18n/locales/nn.d.ts +19 -0
  65. package/cjs/util/i18n/locales/nn.js +19 -0
  66. package/cjs/util/i18n/locales/nn.js.map +1 -1
  67. package/esm/copybutton/CopyButton.d.ts +1 -6
  68. package/esm/copybutton/CopyButton.js +8 -6
  69. package/esm/copybutton/CopyButton.js.map +1 -1
  70. package/esm/date/datepicker/parts/WeekNumber.js +12 -3
  71. package/esm/date/datepicker/parts/WeekNumber.js.map +1 -1
  72. package/esm/form/combobox/FilteredOptions/AddNewOption.js +3 -1
  73. package/esm/form/combobox/FilteredOptions/AddNewOption.js.map +1 -1
  74. package/esm/form/combobox/FilteredOptions/LoadingMessage.js +3 -1
  75. package/esm/form/combobox/FilteredOptions/LoadingMessage.js.map +1 -1
  76. package/esm/form/combobox/FilteredOptions/MaxSelectedMessage.js +6 -2
  77. package/esm/form/combobox/FilteredOptions/MaxSelectedMessage.js.map +1 -1
  78. package/esm/form/combobox/Input/Input.context.d.ts +1 -1
  79. package/esm/form/combobox/Input/Input.context.js.map +1 -1
  80. package/esm/form/combobox/Input/InputController.js +9 -7
  81. package/esm/form/combobox/Input/InputController.js.map +1 -1
  82. package/esm/form/combobox/Input/ToggleListButton.d.ts +1 -4
  83. package/esm/form/combobox/Input/ToggleListButton.js +3 -5
  84. package/esm/form/combobox/Input/ToggleListButton.js.map +1 -1
  85. package/esm/form/combobox/SelectedOptions/SelectedOptions.js +8 -6
  86. package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
  87. package/esm/form/combobox/types.d.ts +2 -7
  88. package/esm/form/form-summary/FormSummaryEditLink.js +4 -2
  89. package/esm/form/form-summary/FormSummaryEditLink.js.map +1 -1
  90. package/esm/form/search/Search.js +8 -3
  91. package/esm/form/search/Search.js.map +1 -1
  92. package/esm/guide-panel/Illustration.js +3 -1
  93. package/esm/guide-panel/Illustration.js.map +1 -1
  94. package/esm/help-text/HelpText.d.ts +1 -1
  95. package/esm/help-text/HelpText.js +6 -3
  96. package/esm/help-text/HelpText.js.map +1 -1
  97. package/esm/internal-header/InternalHeaderButton.d.ts +1 -1
  98. package/esm/internal-header/InternalHeaderUserButton.d.ts +1 -1
  99. package/esm/internal-header/InternalHeaderUserButton.js +1 -1
  100. package/esm/internal-header/InternalHeaderUserButton.js.map +1 -1
  101. package/esm/layout/base/BasePrimitive.js +4 -1
  102. package/esm/layout/base/BasePrimitive.js.map +1 -1
  103. package/esm/layout/bleed/Bleed.js +5 -2
  104. package/esm/layout/bleed/Bleed.js.map +1 -1
  105. package/esm/layout/box/Box.d.ts +6 -1
  106. package/esm/layout/box/Box.darkside.d.ts +70 -0
  107. package/esm/layout/box/Box.darkside.js +69 -0
  108. package/esm/layout/box/Box.darkside.js.map +1 -0
  109. package/esm/layout/box/Box.js +18 -5
  110. package/esm/layout/box/Box.js.map +1 -1
  111. package/esm/layout/grid/HGrid.js +4 -1
  112. package/esm/layout/grid/HGrid.js.map +1 -1
  113. package/esm/layout/page/Page.d.ts +1 -0
  114. package/esm/layout/page/Page.js +5 -0
  115. package/esm/layout/page/Page.js.map +1 -1
  116. package/esm/layout/stack/Stack.js +4 -1
  117. package/esm/layout/stack/Stack.js.map +1 -1
  118. package/esm/layout/utilities/css.d.ts +2 -2
  119. package/esm/layout/utilities/css.js +8 -9
  120. package/esm/layout/utilities/css.js.map +1 -1
  121. package/esm/layout/utilities/types.d.ts +10 -0
  122. package/esm/util/i18n/locales/en.d.ts +19 -0
  123. package/esm/util/i18n/locales/en.js +19 -0
  124. package/esm/util/i18n/locales/en.js.map +1 -1
  125. package/esm/util/i18n/locales/nb.d.ts +21 -0
  126. package/esm/util/i18n/locales/nb.js +21 -0
  127. package/esm/util/i18n/locales/nb.js.map +1 -1
  128. package/esm/util/i18n/locales/nn.d.ts +19 -0
  129. package/esm/util/i18n/locales/nn.js +19 -0
  130. package/esm/util/i18n/locales/nn.js.map +1 -1
  131. package/package.json +3 -3
  132. package/src/copybutton/CopyButton.tsx +14 -30
  133. package/src/date/datepicker/parts/WeekNumber.tsx +31 -6
  134. package/src/form/combobox/FilteredOptions/AddNewOption.tsx +3 -1
  135. package/src/form/combobox/FilteredOptions/LoadingMessage.tsx +3 -1
  136. package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx +9 -2
  137. package/src/form/combobox/Input/Input.context.tsx +2 -2
  138. package/src/form/combobox/Input/InputController.tsx +13 -16
  139. package/src/form/combobox/Input/ToggleListButton.tsx +8 -24
  140. package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +17 -11
  141. package/src/form/combobox/__tests__/combobox.test.tsx +2 -1
  142. package/src/form/combobox/types.ts +2 -7
  143. package/src/form/form-summary/FormSummaryEditLink.tsx +7 -6
  144. package/src/form/search/Search.tsx +33 -12
  145. package/src/guide-panel/Illustration.tsx +4 -1
  146. package/src/help-text/HelpText.tsx +8 -6
  147. package/src/internal-header/InternalHeaderButton.tsx +1 -1
  148. package/src/internal-header/InternalHeaderUserButton.tsx +2 -2
  149. package/src/layout/base/BasePrimitive.tsx +29 -25
  150. package/src/layout/bleed/Bleed.tsx +8 -0
  151. package/src/layout/box/Box.darkside.tsx +154 -0
  152. package/src/layout/box/Box.tsx +90 -61
  153. package/src/layout/box/index.ts +3 -0
  154. package/src/layout/grid/HGrid.tsx +7 -3
  155. package/src/layout/page/Page.tsx +10 -0
  156. package/src/layout/stack/Stack.tsx +8 -4
  157. package/src/layout/utilities/css.ts +18 -12
  158. package/src/layout/utilities/types.ts +24 -0
  159. package/src/util/i18n/locales/en.ts +19 -0
  160. package/src/util/i18n/locales/nb.ts +21 -0
  161. package/src/util/i18n/locales/nn.ts +19 -0
@@ -49,7 +49,7 @@ exports.InternalHeaderUserButton = (0, react_1.forwardRef)((_a, ref) => {
49
49
  react_1.default.createElement("div", null,
50
50
  react_1.default.createElement(typography_1.BodyShort, { size: "small", as: "div" }, name),
51
51
  description && react_1.default.createElement(typography_1.Detail, { as: "div" }, description)),
52
- react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { title: "vis meny" })));
52
+ react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { "aria-hidden": true })));
53
53
  });
54
54
  exports.default = exports.InternalHeaderUserButton;
55
55
  //# sourceMappingURL=InternalHeaderUserButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InternalHeaderUserButton.js","sourceRoot":"","sources":["../../src/internal-header/InternalHeaderUserButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAAsD;AACtD,8CAAkD;AAElD,kFAA0D;AAc7C,QAAA,wBAAwB,GAGjC,IAAA,kBAAU,EAAC,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAAY,OAAA,CACrE,8BAAC,8BAAoB,oBACf,IAAI,IACR,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,mCAAmC,EAAE,SAAS,CAAC;QAE7D;YACE,8BAAC,sBAAS,IAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,IAC7B,IAAI,CACK;YACX,WAAW,IAAI,8BAAC,mBAAM,IAAC,EAAE,EAAC,KAAK,IAAE,WAAW,CAAU,CACnD;QACN,8BAAC,6BAAe,IAAC,KAAK,EAAC,UAAU,GAAG,CACf,CACxB,CAAA;CAAA,CAAC,CAAC;AAEH,kBAAe,gCAAwB,CAAC"}
1
+ {"version":3,"file":"InternalHeaderUserButton.js","sourceRoot":"","sources":["../../src/internal-header/InternalHeaderUserButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAAsD;AACtD,8CAAkD;AAElD,kFAA0D;AAc7C,QAAA,wBAAwB,GAGjC,IAAA,kBAAU,EAAC,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAAY,OAAA,CACrE,8BAAC,8BAAoB,oBACf,IAAI,IACR,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,mCAAmC,EAAE,SAAS,CAAC;QAE7D;YACE,8BAAC,sBAAS,IAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,IAC7B,IAAI,CACK;YACX,WAAW,IAAI,8BAAC,mBAAM,IAAC,EAAE,EAAC,KAAK,IAAE,WAAW,CAAU,CACnD;QACN,8BAAC,6BAAe,0BAAe,CACV,CACxB,CAAA;CAAA,CAAC,CAAC;AAEH,kBAAe,gCAAwB,CAAC"}
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.BasePrimitive = exports.PRIMITIVE_PROPS = void 0;
7
7
  const clsx_1 = __importDefault(require("clsx"));
8
8
  const react_1 = __importDefault(require("react"));
9
+ const provider_1 = require("../../provider");
9
10
  const Slot_1 = require("../../slot/Slot");
10
11
  const css_1 = require("../utilities/css");
11
12
  exports.PRIMITIVE_PROPS = [
@@ -37,7 +38,9 @@ exports.PRIMITIVE_PROPS = [
37
38
  "gridColumn",
38
39
  ];
39
40
  const BasePrimitive = ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, gridColumn, }) => {
40
- const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, css_1.getResponsiveProps)("r", "p", "spacing", padding)), (0, css_1.getResponsiveProps)("r", "pi", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("r", "pb", "spacing", paddingBlock)), (0, css_1.getResponsiveProps)("r", "m", "spacing", margin)), (0, css_1.getResponsiveProps)("r", "mi", "spacing", marginInline)), (0, css_1.getResponsiveProps)("r", "mb", "spacing", marginBlock)), (0, css_1.getResponsiveValue)("r", "w", width)), (0, css_1.getResponsiveValue)("r", "minw", minWidth)), (0, css_1.getResponsiveValue)("r", "maxw", maxWidth)), (0, css_1.getResponsiveValue)("r", "h", height)), (0, css_1.getResponsiveValue)("r", "minh", minHeight)), (0, css_1.getResponsiveValue)("r", "maxh", maxHeight)), (0, css_1.getResponsiveValue)("r", "position", position)), (0, css_1.getResponsiveProps)("r", "inset", "spacing", inset)), (0, css_1.getResponsiveProps)("r", "top", "spacing", top)), (0, css_1.getResponsiveProps)("r", "right", "spacing", right)), (0, css_1.getResponsiveProps)("r", "bottom", "spacing", bottom)), (0, css_1.getResponsiveProps)("r", "left", "spacing", left)), (0, css_1.getResponsiveValue)("r", "overflow", overflow)), (0, css_1.getResponsiveValue)("r", "overflowx", overflowX)), (0, css_1.getResponsiveValue)("r", "overflowy", overflowY)), (0, css_1.getResponsiveValue)("r", "flex-basis", flexBasis)), (0, css_1.getResponsiveValue)("r", "flex-grow", flexGrow)), (0, css_1.getResponsiveValue)("r", "flex-shrink", flexShrink)), (0, css_1.getResponsiveValue)("r", "grid-column", gridColumn));
41
+ const themeContext = (0, provider_1.UNSAFE_useAkselTheme)(false);
42
+ const prefix = themeContext ? "ax" : "a";
43
+ const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, css_1.getResponsiveProps)(prefix, "r", "p", "spacing", padding)), (0, css_1.getResponsiveProps)(prefix, "r", "pi", "spacing", paddingInline)), (0, css_1.getResponsiveProps)(prefix, "r", "pb", "spacing", paddingBlock)), (0, css_1.getResponsiveProps)(prefix, "r", "m", "spacing", margin)), (0, css_1.getResponsiveProps)(prefix, "r", "mi", "spacing", marginInline)), (0, css_1.getResponsiveProps)(prefix, "r", "mb", "spacing", marginBlock)), (0, css_1.getResponsiveValue)(prefix, "r", "w", width)), (0, css_1.getResponsiveValue)(prefix, "r", "minw", minWidth)), (0, css_1.getResponsiveValue)(prefix, "r", "maxw", maxWidth)), (0, css_1.getResponsiveValue)(prefix, "r", "h", height)), (0, css_1.getResponsiveValue)(prefix, "r", "minh", minHeight)), (0, css_1.getResponsiveValue)(prefix, "r", "maxh", maxHeight)), (0, css_1.getResponsiveValue)(prefix, "r", "position", position)), (0, css_1.getResponsiveProps)(prefix, "r", "inset", "spacing", inset)), (0, css_1.getResponsiveProps)(prefix, "r", "top", "spacing", top)), (0, css_1.getResponsiveProps)(prefix, "r", "right", "spacing", right)), (0, css_1.getResponsiveProps)(prefix, "r", "bottom", "spacing", bottom)), (0, css_1.getResponsiveProps)(prefix, "r", "left", "spacing", left)), (0, css_1.getResponsiveValue)(prefix, "r", "overflow", overflow)), (0, css_1.getResponsiveValue)(prefix, "r", "overflowx", overflowX)), (0, css_1.getResponsiveValue)(prefix, "r", "overflowy", overflowY)), (0, css_1.getResponsiveValue)(prefix, "r", "flex-basis", flexBasis)), (0, css_1.getResponsiveValue)(prefix, "r", "flex-grow", flexGrow)), (0, css_1.getResponsiveValue)(prefix, "r", "flex-shrink", flexShrink)), (0, css_1.getResponsiveValue)(prefix, "r", "grid-column", gridColumn));
41
44
  return (react_1.default.createElement(Slot_1.Slot, { className: (0, clsx_1.default)({
42
45
  className,
43
46
  "navds-r-p": padding,
@@ -1 +1 @@
1
- {"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":"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"}
@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.Bleed = void 0;
41
41
  const clsx_1 = __importDefault(require("clsx"));
42
42
  const react_1 = __importStar(require("react"));
43
+ const provider_1 = require("../../provider");
43
44
  const Slot_1 = require("../../slot/Slot");
44
45
  const css_1 = require("../utilities/css");
45
46
  /**
@@ -58,9 +59,11 @@ const css_1 = require("../utilities/css");
58
59
  */
59
60
  exports.Bleed = (0, react_1.forwardRef)((_a, ref) => {
60
61
  var { className, marginInline, marginBlock, reflectivePadding, style: _style, asChild } = _a, rest = __rest(_a, ["className", "marginInline", "marginBlock", "reflectivePadding", "style", "asChild"]);
61
- let style = Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)("bleed", "margin-inline", "spacing", marginInline, true, ["0", "full", "px"])), (0, css_1.getResponsiveProps)("bleed", "margin-block", "spacing", marginBlock, true, ["0", "px"]));
62
+ const themeContext = (0, provider_1.UNSAFE_useAkselTheme)(false);
63
+ const prefix = themeContext ? "ax" : "a";
64
+ let style = Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)(prefix, "bleed", "margin-inline", "spacing", marginInline, true, ["0", "full", "px"])), (0, css_1.getResponsiveProps)(prefix, "bleed", "margin-block", "spacing", marginBlock, true, ["0", "px"]));
62
65
  if (reflectivePadding) {
63
- style = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)("bleed", "padding-inline", "spacing", marginInline, false, ["0", "full", "px"])), (0, css_1.getResponsiveProps)("bleed", "padding-block", "spacing", marginBlock, false, ["0", "px"]));
66
+ style = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)(prefix, "bleed", "padding-inline", "spacing", marginInline, false, ["0", "full", "px"])), (0, css_1.getResponsiveProps)(prefix, "bleed", "padding-block", "spacing", marginBlock, false, ["0", "px"]));
64
67
  }
65
68
  const Comp = asChild ? Slot_1.Slot : "div";
66
69
  return (react_1.default.createElement(Comp, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-bleed", className, {
@@ -1 +1 @@
1
- {"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,0CAAsD;AAoDtD;;;;;;;;;;;;;GAaG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,IAAI,KAAK,iDACJ,MAAM,GACN,IAAA,wBAAkB,EACnB,OAAO,EACP,eAAe,EACf,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GAEE,IAAA,wBAAkB,EACnB,OAAO,EACP,cAAc,EACd,SAAS,EACT,WAAW,EACX,IAAI,EACJ,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IAEF,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,iDACA,KAAK,GACL,IAAA,wBAAkB,EACnB,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GACE,IAAA,wBAAkB,EACnB,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAW,EACX,KAAK,EACL,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,8BAAC,IAAI,oBACC,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,iBAAiB;SAC1C,CAAC,EACF,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
1
+ {"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,6CAAsD;AACtD,0CAAuC;AACvC,0CAAsD;AAoDtD;;;;;;;;;;;;;GAaG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,+BAAoB,EAAC,KAAK,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzC,IAAI,KAAK,iDACJ,MAAM,GACN,IAAA,wBAAkB,EACnB,MAAM,EACN,OAAO,EACP,eAAe,EACf,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GAEE,IAAA,wBAAkB,EACnB,MAAM,EACN,OAAO,EACP,cAAc,EACd,SAAS,EACT,WAAW,EACX,IAAI,EACJ,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IAEF,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,iDACA,KAAK,GACL,IAAA,wBAAkB,EACnB,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GACE,IAAA,wBAAkB,EACnB,MAAM,EACN,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAW,EACX,KAAK,EACL,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,8BAAC,IAAI,oBACC,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,iBAAiB;SAC1C,CAAC,EACF,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
@@ -3,6 +3,7 @@ import { OverridableComponent } from "../../util/types";
3
3
  import { PrimitiveProps } from "../base/BasePrimitive";
4
4
  import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
5
5
  import { BackgroundColorToken, BorderColorToken, BorderRadiiToken, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SurfaceColorToken } from "../utilities/types";
6
+ import BoxNew from "./Box.darkside";
6
7
  export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
7
8
  /**
8
9
  * CSS `background-color` property.
@@ -37,6 +38,9 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
37
38
  */
38
39
  shadow?: ShadowToken;
39
40
  } & PrimitiveProps & PrimitiveAsChildProps;
41
+ interface BoxComponentType extends OverridableComponent<BoxProps, HTMLDivElement> {
42
+ New: typeof BoxNew;
43
+ }
40
44
  /**
41
45
  * Foundational Layout-primitive for generic encapsulation & styling.
42
46
  *
@@ -64,5 +68,6 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
64
68
  * </Box>
65
69
  * </VStack>
66
70
  */
67
- export declare const Box: OverridableComponent<BoxProps, HTMLDivElement>;
71
+ export declare const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement>;
72
+ export declare const Box: BoxComponentType;
68
73
  export default Box;
@@ -0,0 +1,70 @@
1
+ import React from "react";
2
+ import { BorderKeys } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
3
+ import { OverridableComponent } from "../../util/types";
4
+ import { PrimitiveProps } from "../base/BasePrimitive";
5
+ import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
6
+ import { BorderRadiiToken, ResponsiveProp, SemanticRoleBgDarkside, SemanticShadowTokens, SemanticStaticBgDarkside, SemanticStaticBorderDarkside, SpaceDelimitedAttribute } from "../utilities/types";
7
+ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
8
+ /**
9
+ * CSS `background-color` property.
10
+ * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
11
+ */
12
+ background?: SemanticStaticBgDarkside | SemanticRoleBgDarkside;
13
+ /**
14
+ * CSS `border-color` property.
15
+ * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
16
+ */
17
+ borderColor?: BorderKeys | SemanticStaticBorderDarkside;
18
+ /**
19
+ * CSS `border-radius` property.
20
+ * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
21
+ * or an object of radius tokens for different breakpoints.
22
+ * @example
23
+ * borderRadius='full'
24
+ * borderRadius='0 full large small'
25
+ * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
26
+ */
27
+ borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
28
+ /**
29
+ * CSS `border-width` property. If this is not set there will be no border.
30
+ * @example
31
+ * borderWidth='2'
32
+ * borderWidth='1 2 3 4'
33
+ */
34
+ borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
35
+ /** Shadow on box. Accepts a shadow token.
36
+ * @example
37
+ * shadow='small'
38
+ */
39
+ shadow?: SemanticShadowTokens;
40
+ } & PrimitiveProps & PrimitiveAsChildProps;
41
+ /**
42
+ *
43
+ * Foundational Layout-primitive for generic encapsulation & styling.
44
+ *
45
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
46
+ * @see 🏷️ {@link BoxProps}
47
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
48
+ *
49
+ * @example
50
+ * <Box padding="4">
51
+ * <BodyShort>Hei</BodyShort>
52
+ * </Box>
53
+ *
54
+ * @example
55
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
56
+ * <BodyShort>Hei</BodyShort>
57
+ * </Box>
58
+ *
59
+ * @example
60
+ * <VStack gap="8">
61
+ * <Box padding="4">
62
+ * <BodyShort>Hei</BodyShort>
63
+ * </Box>
64
+ * <Box padding="4">
65
+ * <BodyShort>Hei</BodyShort>
66
+ * </Box>
67
+ * </VStack>
68
+ */
69
+ export declare const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement>;
70
+ export default BoxNew;
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __rest = (this && this.__rest) || function (s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
+ t[p] = s[p];
29
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
+ t[p[i]] = s[p[i]];
33
+ }
34
+ return t;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.BoxNew = void 0;
41
+ const clsx_1 = __importDefault(require("clsx"));
42
+ const react_1 = __importStar(require("react"));
43
+ const Slot_1 = require("../../slot/Slot");
44
+ const util_1 = require("../../util");
45
+ const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
46
+ const css_1 = require("../utilities/css");
47
+ /**
48
+ *
49
+ * Foundational Layout-primitive for generic encapsulation & styling.
50
+ *
51
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
52
+ * @see 🏷️ {@link BoxProps}
53
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
54
+ *
55
+ * @example
56
+ * <Box padding="4">
57
+ * <BodyShort>Hei</BodyShort>
58
+ * </Box>
59
+ *
60
+ * @example
61
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
62
+ * <BodyShort>Hei</BodyShort>
63
+ * </Box>
64
+ *
65
+ * @example
66
+ * <VStack gap="8">
67
+ * <Box padding="4">
68
+ * <BodyShort>Hei</BodyShort>
69
+ * </Box>
70
+ * <Box padding="4">
71
+ * <BodyShort>Hei</BodyShort>
72
+ * </Box>
73
+ * </VStack>
74
+ */
75
+ exports.BoxNew = (0, react_1.forwardRef)((_a, ref) => {
76
+ var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
77
+ const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__axc-box-background": background
78
+ ? `var(--ax-bg-${background})`
79
+ : undefined, "--__axc-box-shadow": shadow ? `var(--ax-shadow-${shadow})` : undefined, "--__axc-box-border-color": borderColor
80
+ ? `var(--ax-border-${borderColor})`
81
+ : undefined, "--__axc-box-border-width": borderWidth
82
+ ? borderWidth
83
+ .split(" ")
84
+ .map((x) => `${x}px`)
85
+ .join(" ")
86
+ : undefined }), (0, css_1.getResponsiveProps)("ax", "box", "border-radius", "border-radius", borderRadius, false, ["0"]));
87
+ const Comp = asChild ? Slot_1.Slot : Component;
88
+ return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
89
+ react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, clsx_1.default)("navds-box", className, {
90
+ "navds-box-bg": background,
91
+ "navds-box-border-color": borderColor,
92
+ "navds-box-border-width": borderWidth,
93
+ "navds-box-border-radius": borderRadius,
94
+ "navds-box-shadow": shadow,
95
+ }) }), children)));
96
+ });
97
+ exports.default = exports.BoxNew;
98
+ //# sourceMappingURL=Box.darkside.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Box.darkside.js","sourceRoot":"","sources":["../../../src/layout/box/Box.darkside.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAE1C,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AA+CtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACU,QAAA,MAAM,GACjB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,UAAU;YAClC,CAAC,CAAC,eAAe,UAAU,GAAG;YAC9B,CAAC,CAAC,SAAS,EACb,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACvE,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,mBAAmB,WAAW,GAAG;YACnC,CAAC,CAAC,SAAS,EACb,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,IAAI,EACJ,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY;gBACvC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,cAAM,CAAC"}
@@ -37,13 +37,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
- exports.Box = void 0;
40
+ exports.Box = exports.BoxComponent = void 0;
41
41
  const clsx_1 = __importDefault(require("clsx"));
42
42
  const react_1 = __importStar(require("react"));
43
+ const provider_1 = require("../../provider");
43
44
  const Slot_1 = require("../../slot/Slot");
44
45
  const util_1 = require("../../util");
45
46
  const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
46
47
  const css_1 = require("../utilities/css");
48
+ const Box_darkside_1 = __importDefault(require("./Box.darkside"));
47
49
  /**
48
50
  * Foundational Layout-primitive for generic encapsulation & styling.
49
51
  *
@@ -71,18 +73,27 @@ const css_1 = require("../utilities/css");
71
73
  * </Box>
72
74
  * </VStack>
73
75
  */
74
- exports.Box = (0, react_1.forwardRef)((_a, ref) => {
76
+ exports.BoxComponent = (0, react_1.forwardRef)((_a, ref) => {
75
77
  var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
76
- const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-box-background": background
78
+ const themeContext = (0, provider_1.UNSAFE_useAkselTheme)(false);
79
+ if (process.env.NODE_ENV !== "production" &&
80
+ themeContext &&
81
+ (background || borderColor || shadow)) {
82
+ console.warn(`<Box /> with properties 'background', 'borderColor' or 'shadow' cannot be used with AkselTheme (darkmode-support). To continue using these properties, migrate to '<Box.New>'`);
83
+ }
84
+ const prefix = themeContext ? "ax" : "a";
85
+ const style = Object.assign(Object.assign(Object.assign({}, _style), { [`--__${prefix}c-box-background`]: background
77
86
  ? `var(--a-${background})`
78
- : undefined, "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined, "--__ac-box-border-color": borderColor
87
+ : undefined, [`--__${prefix}c-box-shadow`]: shadow
88
+ ? `var(--a-shadow-${shadow})`
89
+ : undefined, [`--__${prefix}c-box-border-color`]: borderColor
79
90
  ? `var(--a-${borderColor})`
80
- : undefined, "--__ac-box-border-width": borderWidth
91
+ : undefined, [`--__${prefix}c-box-border-width`]: borderWidth
81
92
  ? borderWidth
82
93
  .split(" ")
83
94
  .map((x) => `${x}px`)
84
95
  .join(" ")
85
- : undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, false, ["0"]));
96
+ : undefined }), (0, css_1.getResponsiveProps)(prefix, "box", "border-radius", "border-radius", borderRadius, false, ["0"]));
86
97
  const Comp = asChild ? Slot_1.Slot : Component;
87
98
  return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
88
99
  react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, clsx_1.default)("navds-box", className, {
@@ -93,5 +104,7 @@ exports.Box = (0, react_1.forwardRef)((_a, ref) => {
93
104
  "navds-box-shadow": shadow,
94
105
  }) }), children)));
95
106
  });
107
+ exports.Box = exports.BoxComponent;
108
+ exports.Box.New = Box_darkside_1.default;
96
109
  exports.default = exports.Box;
97
110
  //# sourceMappingURL=Box.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AA+CtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,GAAG,GAAmD,IAAA,kBAAU,EAC3E,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY;gBACvC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,WAAG,CAAC"}
1
+ {"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,6CAAsD;AACtD,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAUtD,kEAAoC;AA2CpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,YAAY,GACvB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,+BAAoB,EAAC,KAAK,CAAC,CAAC;IAEjD,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QACrC,YAAY;QACZ,CAAC,UAAU,IAAI,WAAW,IAAI,MAAM,CAAC,EACrC,CAAC;QACD,OAAO,CAAC,IAAI,CACV,+KAA+K,CAChL,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzC,MAAM,KAAK,iDACN,MAAM,KACT,CAAC,OAAO,MAAM,kBAAkB,CAAC,EAAE,UAAU;YAC3C,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,cAAc,CAAC,EAAE,MAAM;YACnC,CAAC,CAAC,kBAAkB,MAAM,GAAG;YAC7B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,oBAAoB,CAAC,EAAE,WAAW;YAC9C,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,oBAAoB,CAAC,EAAE,WAAW;YAC9C,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,MAAM,EACN,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY;gBACvC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAES,QAAA,GAAG,GAAG,oBAAgC,CAAC;AAEpD,WAAG,CAAC,GAAG,GAAG,sBAAM,CAAC;AAEjB,kBAAe,WAAG,CAAC"}
@@ -7,4 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.Box = void 0;
8
8
  var Box_1 = require("./Box");
9
9
  Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return __importDefault(Box_1).default; } });
10
+ /* TODO: Uncomment this when ready to expose darkmode-support. Remember to update top-level `index.ts` at the same time. */
11
+ /* export { default as BoxNew, type BoxNewProps } from "./Box.darkside"; */
10
12
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6BAAsD;AAA7C,2GAAA,OAAO,OAAO"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6BAAsD;AAA7C,2GAAA,OAAO,OAAO;AAEvB,2HAA2H;AAC3H,2EAA2E"}
@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.HGrid = void 0;
41
41
  const clsx_1 = __importDefault(require("clsx"));
42
42
  const react_1 = __importStar(require("react"));
43
+ const provider_1 = require("../../provider");
43
44
  const Slot_1 = require("../../slot/Slot");
44
45
  const util_1 = require("../../util");
45
46
  const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
@@ -71,7 +72,9 @@ const css_1 = require("../utilities/css");
71
72
  */
72
73
  exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
73
74
  var { children, className, as: Component = "div", columns, gap, style, align, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "columns", "gap", "style", "align", "asChild"]);
74
- const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
75
+ const themeContext = (0, provider_1.UNSAFE_useAkselTheme)(false);
76
+ const prefix = themeContext ? "ax" : "a";
77
+ const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { [`--__${prefix}c-hgrid-align`]: align }), (0, css_1.getResponsiveProps)(prefix, `hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(prefix, `hgrid`, "columns", formatGrid(columns)));
75
78
  const Comp = asChild ? Slot_1.Slot : Component;
76
79
  return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
77
80
  react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className, {
@@ -1 +1 @@
1
- {"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,qCAAwD;AACxD,uEAG+B;AAE/B,0CAA0E;AA6B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACU,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,OAER,EADI,IAAI,cATT,8EAUC,CADQ;IAIT,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,IAAA,wBAAkB,EAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,IAAA,wBAAkB,EAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;aAC3B,CAAC,EACF,KAAK,EAAE,MAAM,KAEZ,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,aAAK,CAAC"}
1
+ {"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,6CAAsD;AACtD,0CAAuC;AACvC,qCAAwD;AACxD,uEAG+B;AAE/B,0CAA0E;AA6B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACU,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,OAER,EADI,IAAI,cATT,8EAUC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,+BAAoB,EAAC,KAAK,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzC,MAAM,MAAM,+DACP,KAAK,KACR,CAAC,OAAO,MAAM,eAAe,CAAC,EAAE,KAAK,KAClC,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAC1D,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CACvE,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;aAC3B,CAAC,EACF,KAAK,EAAE,MAAM,KAEZ,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,aAAK,CAAC"}
@@ -12,6 +12,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
12
12
  * Background color.
13
13
  * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
14
14
  * @default "bg-default"
15
+ * @deprecated 'background'-prop will be removed in future major-versions. Use `<Box asChild background="...">` wrapped around `<Page>`.
15
16
  */
16
17
  background?: BackgroundColorToken;
17
18
  /**
@@ -40,9 +40,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.PageComponent = void 0;
41
41
  const clsx_1 = __importDefault(require("clsx"));
42
42
  const react_1 = __importStar(require("react"));
43
+ const provider_1 = require("../../provider");
43
44
  const PageBlock_1 = require("./parts/PageBlock");
44
45
  exports.PageComponent = (0, react_1.forwardRef)((_a, ref) => {
45
46
  var { as: Component = "div", className, style: _style, footer, children, footerPosition, background = "bg-default", contentBlockPadding = "end" } = _a, rest = __rest(_a, ["as", "className", "style", "footer", "children", "footerPosition", "background", "contentBlockPadding"]);
47
+ const themeContext = (0, provider_1.UNSAFE_useAkselTheme)(false);
48
+ if (process.env.NODE_ENV !== "production" && themeContext && background) {
49
+ console.warn(`Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``);
50
+ }
46
51
  const style = Object.assign(Object.assign({}, _style), { "--__ac-page-background": `var(--a-${background})` });
47
52
  const belowFold = footerPosition === "belowFold";
48
53
  return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-page", className), ref: ref, style: style }),
@@ -1 +1 @@
1
- {"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAG1C,iDAA8C;AAkCjC,QAAA,aAAa,GACxB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EACN,QAAQ,EACR,cAAc,EACd,UAAU,GAAG,YAAY,EACzB,mBAAmB,GAAG,KAAK,OAE5B,EADI,IAAI,cATT,yGAUC,CADQ;IAIT,MAAM,KAAK,mCACN,MAAM,KACT,wBAAwB,EAAE,WAAW,UAAU,GAAG,GACnD,CAAC;IAEF,MAAM,SAAS,GAAG,cAAc,KAAK,WAAW,CAAC;IAEjD,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,YAAY,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC;gBACZ,iCAAiC,EAAE,SAAS;gBAC5C,2BAA2B,EAAE,CAAC,SAAS;gBACvC,8BAA8B,EAAE,mBAAmB,KAAK,KAAK;aAC9D,CAAC,IAED,QAAQ,CACL;QACL,MAAM,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,IAAI,GAAG,qBAAkC,CAAC;AAEhD,IAAI,CAAC,KAAK,GAAG,qBAAS,CAAC;AAEvB,kBAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,6CAAsD;AAGtD,iDAA8C;AAmCjC,QAAA,aAAa,GACxB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EACN,QAAQ,EACR,cAAc,EACd,UAAU,GAAG,YAAY,EACzB,mBAAmB,GAAG,KAAK,OAE5B,EADI,IAAI,cATT,yGAUC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,+BAAoB,EAAC,KAAK,CAAC,CAAC;IAEjD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,YAAY,IAAI,UAAU,EAAE,CAAC;QACxE,OAAO,CAAC,IAAI,CACV,mIAAmI,CACpI,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,mCACN,MAAM,KACT,wBAAwB,EAAE,WAAW,UAAU,GAAG,GACnD,CAAC;IAEF,MAAM,SAAS,GAAG,cAAc,KAAK,WAAW,CAAC;IAEjD,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,YAAY,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC;gBACZ,iCAAiC,EAAE,SAAS;gBAC5C,2BAA2B,EAAE,CAAC,SAAS;gBACvC,8BAA8B,EAAE,mBAAmB,KAAK,KAAK;aAC9D,CAAC,IAED,QAAQ,CACL;QACL,MAAM,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,IAAI,GAAG,qBAAkC,CAAC;AAEhD,IAAI,CAAC,KAAK,GAAG,qBAAS,CAAC;AAEvB,kBAAe,IAAI,CAAC"}
@@ -40,13 +40,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.Stack = void 0;
41
41
  const clsx_1 = __importDefault(require("clsx"));
42
42
  const react_1 = __importStar(require("react"));
43
+ const provider_1 = require("../../provider");
43
44
  const Slot_1 = require("../../slot/Slot");
44
45
  const util_1 = require("../../util");
45
46
  const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
46
47
  const css_1 = require("../utilities/css");
47
48
  exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
48
49
  var { children, className, as: Component = "div", align, justify, wrap = true, gap, style: _style, direction = "row", asChild } = _a, rest = __rest(_a, ["children", "className", "as", "align", "justify", "wrap", "gap", "style", "direction", "asChild"]);
49
- const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`stack`, "direction", direction)), (0, css_1.getResponsiveValue)(`stack`, "align", align)), (0, css_1.getResponsiveValue)(`stack`, "justify", justify));
50
+ const themeContext = (0, provider_1.UNSAFE_useAkselTheme)(false);
51
+ const prefix = themeContext ? "ax" : "a";
52
+ const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)(prefix, `stack`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(prefix, `stack`, "direction", direction)), (0, css_1.getResponsiveValue)(prefix, `stack`, "align", align)), (0, css_1.getResponsiveValue)(prefix, `stack`, "justify", justify));
50
53
  const Comp = asChild ? Slot_1.Slot : Component;
51
54
  return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
52
55
  react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, clsx_1.default)("navds-stack", className, {
@@ -1 +1 @@
1
- {"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0D;AAC1D,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAA0E;AAyD7D,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,EACjB,OAAO,OAER,EADI,IAAI,cAXT,mGAYC,CADQ;IAIT,MAAM,KAAK,6EACN,MAAM,GACN,IAAA,wBAAkB,EAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,IAAA,wBAAkB,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,IAAA,wBAAkB,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,IAAA,wBAAkB,EAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;gBACtC,cAAc,EAAE,SAAS,KAAK,KAAK;gBACnC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;gBAC1B,qBAAqB,EAAE,OAAO;gBAC9B,uBAAuB,EAAE,SAAS;gBAClC,kBAAkB,EAAE,IAAI;aACzB,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,aAAK,CAAC"}
1
+ {"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0D;AAC1D,6CAAsD;AACtD,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAA0E;AAyD7D,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,EACjB,OAAO,OAER,EADI,IAAI,cAXT,mGAYC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,+BAAoB,EAAC,KAAK,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzC,MAAM,KAAK,6EACN,MAAM,GACN,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAC1D,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GAC3D,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GACnD,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAC3D,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;gBACtC,cAAc,EAAE,SAAS,KAAK,KAAK;gBACnC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;gBAC1B,qBAAqB,EAAE,OAAO;gBAC9B,uBAAuB,EAAE,SAAS;gBAClC,kBAAkB,EAAE,IAAI;aACzB,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,aAAK,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { ResponsiveProp } from "./types";
2
- export declare function getResponsiveValue<T = string>(componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
2
+ export declare function getResponsiveValue<T = string>(prefix: string, componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
3
3
  [k: string]: T;
4
4
  };
5
- export declare function getResponsiveProps<T extends string>(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>, invert?: boolean, tokenExceptions?: string[]): {
5
+ export declare function getResponsiveProps<T extends string>(prefix: string, componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>, invert?: boolean, tokenExceptions?: string[]): {
6
6
  [x: string]: string;
7
7
  };
@@ -2,17 +2,17 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getResponsiveValue = getResponsiveValue;
4
4
  exports.getResponsiveProps = getResponsiveProps;
5
- function getResponsiveValue(componentName, componentProp, responsiveProp) {
5
+ function getResponsiveValue(prefix, componentName, componentProp, responsiveProp) {
6
6
  if (!responsiveProp) {
7
7
  return {};
8
8
  }
9
9
  if (typeof responsiveProp === "string") {
10
10
  return {
11
- [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
11
+ [`--__${prefix}c-${componentName}-${componentProp}-xs`]: responsiveProp,
12
12
  };
13
13
  }
14
14
  return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
15
- `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
15
+ `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`,
16
16
  responsiveValue,
17
17
  ]));
18
18
  }
@@ -23,7 +23,7 @@ const translateExceptionToCSS = (exception) => {
23
23
  }
24
24
  return exception;
25
25
  };
26
- const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, tokenExceptions, invert) => {
26
+ const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, tokenExceptions, invert, prefix) => {
27
27
  return tokenString
28
28
  .split(" ")
29
29
  .map((x, _, arr) => {
@@ -38,7 +38,7 @@ const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, to
38
38
  if (["mi", "mb"].includes(componentProp) && x === "auto") {
39
39
  return "auto";
40
40
  }
41
- let output = `var(--a-${tokenSubgroup}-${x})`;
41
+ let output = `var(--${prefix}-${tokenSubgroup}-${x})`;
42
42
  if (tokenExceptions.includes(x)) {
43
43
  output = translateExceptionToCSS(x);
44
44
  }
@@ -52,19 +52,18 @@ const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, to
52
52
  })
53
53
  .join(" ");
54
54
  };
55
- function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, invert = false, tokenExceptions = []) {
55
+ function getResponsiveProps(prefix, componentName, componentProp, tokenSubgroup, responsiveProp, invert = false, tokenExceptions = []) {
56
56
  if (!responsiveProp) {
57
57
  return {};
58
58
  }
59
59
  if (typeof responsiveProp === "string") {
60
60
  return {
61
- [`--__ac-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(componentProp, responsiveProp, tokenSubgroup, tokenExceptions, invert),
61
+ [`--__${prefix}c-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(componentProp, responsiveProp, tokenSubgroup, tokenExceptions, invert, prefix),
62
62
  };
63
63
  }
64
64
  const styleProps = {};
65
65
  Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
66
- styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
67
- translateTokenStringToCSS(componentProp, aliasOrScale, tokenSubgroup, tokenExceptions, invert);
66
+ styleProps[`--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`] = translateTokenStringToCSS(componentProp, aliasOrScale, tokenSubgroup, tokenExceptions, invert, prefix);
68
67
  });
69
68
  return styleProps;
70
69
  }
@@ -1 +1 @@
1
- {"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"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"}
@@ -1,3 +1,6 @@
1
+ import { semanticTokenConfig } from "@navikt/ds-tokens/darkside/tokens/semantic";
2
+ import { SemanticTokensForAllRolesConfigT } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
3
+ import { shadowTokenConfig } from "@navikt/ds-tokens/darkside/tokens/shadow";
1
4
  import borderRadii from "@navikt/ds-tokens/src/border.json";
2
5
  import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
3
6
  import borderColors from "@navikt/ds-tokens/src/colors-border.json";
@@ -16,4 +19,11 @@ type FixedResponsiveT<T> = {
16
19
  [Breakpoint in BreakpointsAlias]?: T;
17
20
  };
18
21
  export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
22
+ /**
23
+ * Darkside tokens
24
+ */
25
+ export type SemanticShadowTokens = keyof ReturnType<typeof shadowTokenConfig>["shadow"];
26
+ export type SemanticStaticBgDarkside = keyof ReturnType<typeof semanticTokenConfig>["bg"];
27
+ export type SemanticRoleBgDarkside = keyof SemanticTokensForAllRolesConfigT<"color">["bg"];
28
+ export type SemanticStaticBorderDarkside = keyof ReturnType<typeof semanticTokenConfig>["border"];
19
29
  export {};