@obosbbl/grunnmuren-react 3.4.3 → 3.4.5

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 (13) hide show
  1. package/dist/__stories__/form-validation.stories.cjs +50 -39
  2. package/dist/__stories__/form-validation.stories.js +36 -25
  3. package/dist/__stories__/icons.stories.cjs +1 -1
  4. package/dist/__stories__/icons.stories.js +1 -1
  5. package/dist/__stories__/layout.stories.cjs +80 -45
  6. package/dist/__stories__/layout.stories.d.cts +2 -1
  7. package/dist/__stories__/layout.stories.d.ts +2 -1
  8. package/dist/__stories__/layout.stories.js +73 -39
  9. package/dist/__stories__/typography.stories.cjs +1 -1
  10. package/dist/__stories__/typography.stories.js +1 -1
  11. package/dist/index.d.mts +37 -9
  12. package/dist/index.mjs +175 -130
  13. package/package.json +13 -18
package/dist/__stories__/form-validation.stories.cjs CHANGED
@@ -2,13 +2,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
- var reactAriaComponents = require('react-aria-components');
5
+ var Form$1 = require('react-aria-components/Form');
6
6
  var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
7
7
  var cva = require('cva');
8
- var reactAria = require('react-aria');
8
+ var Button$1 = require('react-aria-components/Button');
9
+ var Link = require('react-aria-components/Link');
10
+ var slots = require('react-aria-components/slots');
11
+ var useProgressBar = require('react-aria/useProgressBar');
12
+ var I18nProvider = require('react-aria-components/I18nProvider');
13
+ var Group = require('react-aria-components/Group');
14
+ var Input = require('react-aria-components/Input');
15
+ var TextField$1 = require('react-aria-components/TextField');
16
+ require('react-aria-components/Header');
17
+ require('react-aria-components/ListBox');
18
+ var Text = require('react-aria-components/Text');
19
+ var FieldError = require('react-aria-components/FieldError');
20
+ var Label$1 = require('react-aria-components/Label');
9
21
 
10
22
  const formField = cva.cx('group flex flex-col gap-2');
11
- const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
23
+ const formFieldError = cva.cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');
12
24
  const input = cva.cva({
13
25
  base: [
14
26
  // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
@@ -17,7 +29,7 @@ const input = cva.cva({
17
29
  // Setting min-height to prevent the input from collapsing in Safari
18
30
  // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
19
31
  'box-content min-h-6 py-2.5',
20
- 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
32
+ 'rounded-md text-base leading-6 font-normal placeholder-[#727070] ring-1 ring-black outline-hidden',
21
33
  // invalid styles
22
34
  'group-data-invalid:ring-focus group-data-invalid:ring-red',
23
35
  // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -26,12 +38,12 @@ const input = cva.cva({
26
38
  variants: {
27
39
  // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
28
40
  focusModifier: {
29
- focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
30
- visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
41
+ focus: 'focus:ring-focus group-data-invalid:focus:ring-red group-data-invalid:focus:ring-3',
42
+ visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-red group-data-invalid:data-focus-visible:ring-3'
31
43
  },
32
44
  isGrouped: {
33
45
  false: 'px-3',
34
- true: '!ring-0 flex-1'
46
+ true: 'flex-1 ring-0!'
35
47
  }
36
48
  },
37
49
  defaultVariants: {
@@ -40,11 +52,11 @@ const input = cva.cva({
40
52
  }
41
53
  });
42
54
  const inputGroup = cva.cx([
43
- 'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
44
- 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
55
+ 'focus-within:ring-focus inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black',
56
+ 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-red group-data-invalid:focus-within:ring-3'
45
57
  ]);
46
58
  ({
47
- popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
59
+ popover: cva.cx('data-entering:fade-in data-exiting:fade-out data-entering:animate-in data-exiting:animate-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm'),
48
60
  // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
49
61
  listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
50
62
  chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
@@ -57,7 +69,7 @@ const animateIconVariants = cva.cva({
57
69
  left: 'hover:*:[svg]:motion-safe:-translate-x-1',
58
70
  down: 'hover:*:[svg]:motion-safe:translate-y-1',
59
71
  up: 'hover:*:[svg]:motion-safe:-translate-y-1',
60
- 'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
72
+ 'up-right': 'hover:*:[svg]:motion-safe:translate-x-0.5 hover:*:[svg]:motion-safe:-translate-y-0.5'
61
73
  }
62
74
  }
63
75
  });
@@ -73,7 +85,7 @@ const translations = {
73
85
  * Returns the locale set in `<GrunnmurenProvider />`
74
86
  */ function _useLocale() {
75
87
  // a small wrapper around react-arias useLocale with a simpler return type with only the locales that we actually support
76
- const locale = reactAriaComponents.useLocale();
88
+ const locale = I18nProvider.useLocale();
77
89
  return locale.locale;
78
90
  }
79
91
 
@@ -81,7 +93,7 @@ const translations = {
81
93
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
82
94
  */ const buttonVariants = cva.compose(animateIconVariants, cva.cva({
83
95
  base: [
84
- 'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
96
+ 'focus-visible:outline-focus-offset inline-flex min-h-[44px] cursor-pointer items-center justify-center rounded-lg font-medium whitespace-nowrap transition-colors duration-200'
85
97
  ],
86
98
  variants: {
87
99
  /**
@@ -105,7 +117,7 @@ const translations = {
105
117
  * When the button is without text, but with a single icon.
106
118
  * @default false
107
119
  */ isIconOnly: {
108
- true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
120
+ true: 'p-2 [&>svg]:size-7',
109
121
  false: 'gap-2.5 px-4 py-2'
110
122
  },
111
123
  // Make the content of the button transparent to hide it's content, but keep the button width
@@ -119,48 +131,48 @@ const translations = {
119
131
  color: 'blue',
120
132
  variant: 'primary',
121
133
  // Darken bg by 20% on hover. The color is manually crafted
122
- className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
134
+ className: 'bg-blue-dark hover:bg-blue text-white active:bg-[#0536A0] active:text-white **:[[role="progressbar"]]:text-white'
123
135
  },
124
136
  {
125
137
  color: 'blue',
126
138
  variant: 'secondary',
127
- className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
139
+ className: 'text-blue-dark hover:bg-blue hover:text-blue-dark **:[[role="progressbar"]]:text-blue-dark hover:border-transparent hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white'
128
140
  },
129
141
  {
130
142
  color: 'blue',
131
143
  variant: 'tertiary',
132
- className: '[&_[role="progressbar"]]:text-black'
144
+ className: '**:[[role="progressbar"]]:text-black'
133
145
  },
134
146
  {
135
147
  color: 'mint',
136
148
  variant: 'primary',
137
149
  // Darken bg by 20% on hover. The color is manually crafted
138
- className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
150
+ className: 'bg-mint active:[#9ddac6] text-black hover:bg-[#8dd4bd] **:[[role="progressbar"]]:text-black'
139
151
  },
140
152
  {
141
153
  color: 'mint',
142
154
  variant: 'secondary',
143
- className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
155
+ className: 'text-mint hover:bg-mint **:[[role="progressbar"]]:text-mint hover:text-black [&:hover_[role="progressbar"]]:text-black'
144
156
  },
145
157
  {
146
158
  color: 'mint',
147
159
  variant: 'tertiary',
148
- className: 'text-mint [&_[role="progressbar"]]:text-mint'
160
+ className: 'text-mint **:[[role="progressbar"]]:text-mint'
149
161
  },
150
162
  {
151
163
  color: 'white',
152
164
  variant: 'primary',
153
- className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
165
+ className: 'hover:bg-sky active:bg-sky-light bg-white text-black **:[[role="progressbar"]]:text-black'
154
166
  },
155
167
  {
156
168
  color: 'white',
157
169
  variant: 'secondary',
158
- className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
170
+ className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black **:[[role="progressbar"]]:text-white'
159
171
  },
160
172
  {
161
173
  color: 'white',
162
174
  variant: 'tertiary',
163
- className: 'text-white [&_[role="progressbar"]]:text-white'
175
+ className: 'text-white **:[[role="progressbar"]]:text-white'
164
176
  }
165
177
  ],
166
178
  defaultVariants: {
@@ -175,7 +187,7 @@ function isLinkProps(props) {
175
187
  return !!props.href;
176
188
  }
177
189
  function Button({ ref = null, ...props }) {
178
- [props, ref] = reactAriaComponents.useContextProps(props, ref, ButtonContext);
190
+ [props, ref] = slots.useContextProps(props, ref, ButtonContext);
179
191
  const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
180
192
  const className = buttonVariants({
181
193
  // Don't animate the icon when we're pending, as it affects the loading spinner
@@ -187,7 +199,7 @@ function Button({ ref = null, ...props }) {
187
199
  isPending
188
200
  });
189
201
  const locale = _useLocale();
190
- const { progressBarProps } = reactAria.useProgressBar({
202
+ const { progressBarProps } = useProgressBar.useProgressBar({
191
203
  isIndeterminate: true,
192
204
  'aria-label': translations.pending[locale]
193
205
  });
@@ -200,12 +212,12 @@ function Button({ ref = null, ...props }) {
200
212
  })
201
213
  ]
202
214
  }) : _children;
203
- return isLinkProps(restProps) ? /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Link, {
215
+ return isLinkProps(restProps) ? /*#__PURE__*/ jsxRuntime.jsx(Link.Link, {
204
216
  ...restProps,
205
217
  className: className,
206
218
  ref: ref,
207
219
  children: children
208
- }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Button, {
220
+ }) : /*#__PURE__*/ jsxRuntime.jsx(Button$1.Button, {
209
221
  ...restProps,
210
222
  className: className,
211
223
  isPending: isPending,
@@ -222,7 +234,7 @@ function InputAddonDivider() {
222
234
 
223
235
  function Description(props) {
224
236
  const { className, ...restProps } = props;
225
- return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Text, {
237
+ return /*#__PURE__*/ jsxRuntime.jsx(Text.Text, {
226
238
  ...restProps,
227
239
  className: cva.cx(className, 'description'),
228
240
  slot: "description"
@@ -231,7 +243,7 @@ function Description(props) {
231
243
 
232
244
  function ErrorMessage(props) {
233
245
  const { children, className, ...restProps } = props;
234
- return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Text, {
246
+ return /*#__PURE__*/ jsxRuntime.jsx(Text.Text, {
235
247
  ...restProps,
236
248
  className: cva.cx(className, formFieldError),
237
249
  slot: "errorMessage",
@@ -245,15 +257,15 @@ function ErrorMessage(props) {
245
257
  */ function ErrorMessageOrFieldError({ errorMessage }) {
246
258
  return errorMessage ? /*#__PURE__*/ jsxRuntime.jsx(ErrorMessage, {
247
259
  children: errorMessage
248
- }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.FieldError, {
260
+ }) : /*#__PURE__*/ jsxRuntime.jsx(FieldError.FieldError, {
249
261
  className: formFieldError
250
262
  });
251
263
  }
252
264
 
253
265
  function Label(props) {
254
266
  const { children, className, ...restProps } = props;
255
- return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Label, {
256
- className: cva.cx(className, 'font-medium leading-7'),
267
+ return /*#__PURE__*/ jsxRuntime.jsx(Label$1.Label, {
268
+ className: cva.cx(className, 'leading-7 font-medium'),
257
269
  ...restProps,
258
270
  children: children
259
271
  });
@@ -277,7 +289,7 @@ function TextField(props) {
277
289
  // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
278
290
  // which will override any built in validation
279
291
  const isInvalid = !!errorMessage || _isInvalid;
280
- return /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.TextField, {
292
+ return /*#__PURE__*/ jsxRuntime.jsxs(TextField$1.TextField, {
281
293
  ...restProps,
282
294
  className: cva.cx(className, formField),
283
295
  isInvalid: isInvalid,
@@ -288,14 +300,14 @@ function TextField(props) {
288
300
  description && /*#__PURE__*/ jsxRuntime.jsx(Description, {
289
301
  children: description
290
302
  }),
291
- leftAddon || rightAddon ? /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.Group, {
303
+ leftAddon || rightAddon ? /*#__PURE__*/ jsxRuntime.jsxs(Group.Group, {
292
304
  className: cva.cx(inputGroup, {
293
305
  'w-fit': !!size
294
306
  }),
295
307
  children: [
296
308
  leftAddon,
297
309
  withAddonDivider && leftAddon && /*#__PURE__*/ jsxRuntime.jsx(InputAddonDivider, {}),
298
- /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Input, {
310
+ /*#__PURE__*/ jsxRuntime.jsx(Input.Input, {
299
311
  className: inputVariants({
300
312
  textAlign,
301
313
  isGrouped: true,
@@ -307,7 +319,7 @@ function TextField(props) {
307
319
  withAddonDivider && rightAddon && /*#__PURE__*/ jsxRuntime.jsx(InputAddonDivider, {}),
308
320
  rightAddon
309
321
  ]
310
- }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Input, {
322
+ }) : /*#__PURE__*/ jsxRuntime.jsx(Input.Input, {
311
323
  className: inputVariants({
312
324
  textAlign,
313
325
  autoWidth: !!size
@@ -353,7 +365,7 @@ const Form = (props)=>{
353
365
  }, 0);
354
366
  }
355
367
  };
356
- return /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.Form, {
368
+ return /*#__PURE__*/ jsxRuntime.jsxs(Form$1.Form, {
357
369
  onSubmit: handleSubmit,
358
370
  className: "container-prose flex flex-col items-start gap-4",
359
371
  validationErrors: errors,
@@ -411,8 +423,7 @@ const RealtimeValidation = ()=>{
411
423
  /*#__PURE__*/ jsxRuntime.jsx("code", {
412
424
  children: "validate"
413
425
  }),
414
- " prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er",
415
- ' ',
426
+ " prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er ",
416
427
  /*#__PURE__*/ jsxRuntime.jsx("em", {
417
428
  children: "uncontrolled"
418
429
  }),
package/dist/__stories__/form-validation.stories.js CHANGED
@@ -1,12 +1,24 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { createContext, useState } from 'react';
3
- import { useLocale, useContextProps, Link, Button as Button$1, Text, FieldError, Label as Label$1, TextField as TextField$1, Group, Input, Form as Form$1 } from 'react-aria-components';
3
+ import { Form as Form$1 } from 'react-aria-components/Form';
4
4
  import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
5
5
  import { cx, cva, compose } from 'cva';
6
- import { useProgressBar } from 'react-aria';
6
+ import { Button as Button$1 } from 'react-aria-components/Button';
7
+ import { Link } from 'react-aria-components/Link';
8
+ import { useContextProps } from 'react-aria-components/slots';
9
+ import { useProgressBar } from 'react-aria/useProgressBar';
10
+ import { useLocale } from 'react-aria-components/I18nProvider';
11
+ import { Group } from 'react-aria-components/Group';
12
+ import { Input } from 'react-aria-components/Input';
13
+ import { TextField as TextField$1 } from 'react-aria-components/TextField';
14
+ import 'react-aria-components/Header';
15
+ import 'react-aria-components/ListBox';
16
+ import { Text } from 'react-aria-components/Text';
17
+ import { FieldError } from 'react-aria-components/FieldError';
18
+ import { Label as Label$1 } from 'react-aria-components/Label';
7
19
 
8
20
  const formField = cx('group flex flex-col gap-2');
9
- const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
21
+ const formFieldError = cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');
10
22
  const input = cva({
11
23
  base: [
12
24
  // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
@@ -15,7 +27,7 @@ const input = cva({
15
27
  // Setting min-height to prevent the input from collapsing in Safari
16
28
  // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
17
29
  'box-content min-h-6 py-2.5',
18
- 'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
30
+ 'rounded-md text-base leading-6 font-normal placeholder-[#727070] ring-1 ring-black outline-hidden',
19
31
  // invalid styles
20
32
  'group-data-invalid:ring-focus group-data-invalid:ring-red',
21
33
  // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -24,12 +36,12 @@ const input = cva({
24
36
  variants: {
25
37
  // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
26
38
  focusModifier: {
27
- focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
28
- visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
39
+ focus: 'focus:ring-focus group-data-invalid:focus:ring-red group-data-invalid:focus:ring-3',
40
+ visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-red group-data-invalid:data-focus-visible:ring-3'
29
41
  },
30
42
  isGrouped: {
31
43
  false: 'px-3',
32
- true: '!ring-0 flex-1'
44
+ true: 'flex-1 ring-0!'
33
45
  }
34
46
  },
35
47
  defaultVariants: {
@@ -38,11 +50,11 @@ const input = cva({
38
50
  }
39
51
  });
40
52
  const inputGroup = cx([
41
- 'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
42
- 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
53
+ 'focus-within:ring-focus inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black',
54
+ 'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-red group-data-invalid:focus-within:ring-3'
43
55
  ]);
44
56
  ({
45
- popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
57
+ popover: cx('data-entering:fade-in data-exiting:fade-out data-entering:animate-in data-exiting:animate-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm'),
46
58
  // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
47
59
  listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
48
60
  chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
@@ -55,7 +67,7 @@ const animateIconVariants = cva({
55
67
  left: 'hover:*:[svg]:motion-safe:-translate-x-1',
56
68
  down: 'hover:*:[svg]:motion-safe:translate-y-1',
57
69
  up: 'hover:*:[svg]:motion-safe:-translate-y-1',
58
- 'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
70
+ 'up-right': 'hover:*:[svg]:motion-safe:translate-x-0.5 hover:*:[svg]:motion-safe:-translate-y-0.5'
59
71
  }
60
72
  }
61
73
  });
@@ -79,7 +91,7 @@ const translations = {
79
91
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
80
92
  */ const buttonVariants = compose(animateIconVariants, cva({
81
93
  base: [
82
- 'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
94
+ 'focus-visible:outline-focus-offset inline-flex min-h-[44px] cursor-pointer items-center justify-center rounded-lg font-medium whitespace-nowrap transition-colors duration-200'
83
95
  ],
84
96
  variants: {
85
97
  /**
@@ -103,7 +115,7 @@ const translations = {
103
115
  * When the button is without text, but with a single icon.
104
116
  * @default false
105
117
  */ isIconOnly: {
106
- true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
118
+ true: 'p-2 [&>svg]:size-7',
107
119
  false: 'gap-2.5 px-4 py-2'
108
120
  },
109
121
  // Make the content of the button transparent to hide it's content, but keep the button width
@@ -117,48 +129,48 @@ const translations = {
117
129
  color: 'blue',
118
130
  variant: 'primary',
119
131
  // Darken bg by 20% on hover. The color is manually crafted
120
- className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
132
+ className: 'bg-blue-dark hover:bg-blue text-white active:bg-[#0536A0] active:text-white **:[[role="progressbar"]]:text-white'
121
133
  },
122
134
  {
123
135
  color: 'blue',
124
136
  variant: 'secondary',
125
- className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
137
+ className: 'text-blue-dark hover:bg-blue hover:text-blue-dark **:[[role="progressbar"]]:text-blue-dark hover:border-transparent hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white'
126
138
  },
127
139
  {
128
140
  color: 'blue',
129
141
  variant: 'tertiary',
130
- className: '[&_[role="progressbar"]]:text-black'
142
+ className: '**:[[role="progressbar"]]:text-black'
131
143
  },
132
144
  {
133
145
  color: 'mint',
134
146
  variant: 'primary',
135
147
  // Darken bg by 20% on hover. The color is manually crafted
136
- className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
148
+ className: 'bg-mint active:[#9ddac6] text-black hover:bg-[#8dd4bd] **:[[role="progressbar"]]:text-black'
137
149
  },
138
150
  {
139
151
  color: 'mint',
140
152
  variant: 'secondary',
141
- className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
153
+ className: 'text-mint hover:bg-mint **:[[role="progressbar"]]:text-mint hover:text-black [&:hover_[role="progressbar"]]:text-black'
142
154
  },
143
155
  {
144
156
  color: 'mint',
145
157
  variant: 'tertiary',
146
- className: 'text-mint [&_[role="progressbar"]]:text-mint'
158
+ className: 'text-mint **:[[role="progressbar"]]:text-mint'
147
159
  },
148
160
  {
149
161
  color: 'white',
150
162
  variant: 'primary',
151
- className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
163
+ className: 'hover:bg-sky active:bg-sky-light bg-white text-black **:[[role="progressbar"]]:text-black'
152
164
  },
153
165
  {
154
166
  color: 'white',
155
167
  variant: 'secondary',
156
- className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
168
+ className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black **:[[role="progressbar"]]:text-white'
157
169
  },
158
170
  {
159
171
  color: 'white',
160
172
  variant: 'tertiary',
161
- className: 'text-white [&_[role="progressbar"]]:text-white'
173
+ className: 'text-white **:[[role="progressbar"]]:text-white'
162
174
  }
163
175
  ],
164
176
  defaultVariants: {
@@ -251,7 +263,7 @@ function ErrorMessage(props) {
251
263
  function Label(props) {
252
264
  const { children, className, ...restProps } = props;
253
265
  return /*#__PURE__*/ jsx(Label$1, {
254
- className: cx(className, 'font-medium leading-7'),
266
+ className: cx(className, 'leading-7 font-medium'),
255
267
  ...restProps,
256
268
  children: children
257
269
  });
@@ -409,8 +421,7 @@ const RealtimeValidation = ()=>{
409
421
  /*#__PURE__*/ jsx("code", {
410
422
  children: "validate"
411
423
  }),
412
- " prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er",
413
- ' ',
424
+ " prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er ",
414
425
  /*#__PURE__*/ jsx("em", {
415
426
  children: "uncontrolled"
416
427
  }),
package/dist/__stories__/icons.stories.cjs CHANGED
@@ -28,7 +28,7 @@ const meta = {
28
28
  };
29
29
  const Icons = ()=>{
30
30
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
31
- className: "grid grid-cols-[repeat(auto-fill,_100px)] content-center justify-center gap-6",
31
+ className: "grid grid-cols-[repeat(auto-fill,100px)] content-center justify-center gap-6",
32
32
  children: Object.entries(icons__namespace).map(([iconName, Icon])=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
33
33
  children: [
34
34
  /*#__PURE__*/ jsxRuntime.jsx(Icon, {
package/dist/__stories__/icons.stories.js CHANGED
@@ -6,7 +6,7 @@ const meta = {
6
6
  };
7
7
  const Icons = ()=>{
8
8
  return /*#__PURE__*/ jsx("div", {
9
- className: "grid grid-cols-[repeat(auto-fill,_100px)] content-center justify-center gap-6",
9
+ className: "grid grid-cols-[repeat(auto-fill,100px)] content-center justify-center gap-6",
10
10
  children: Object.entries(icons).map(([iconName, Icon])=>/*#__PURE__*/ jsxs("div", {
11
11
  children: [
12
12
  /*#__PURE__*/ jsx(Icon, {