@moduix/react 2.0.0 → 2.2.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 (108) hide show
  1. package/README.md +100 -173
  2. package/dist/components/accordion/Accordion.css +47 -47
  3. package/dist/components/alert/Alert.css +62 -46
  4. package/dist/components/angle-slider/AngleSlider.css +65 -64
  5. package/dist/components/aspect-ratio/AspectRatio.css +2 -2
  6. package/dist/components/avatar/Avatar.css +26 -26
  7. package/dist/components/badge/Badge.css +34 -33
  8. package/dist/components/bleed/Bleed.css +13 -13
  9. package/dist/components/breadcrumbs/Breadcrumbs.css +29 -28
  10. package/dist/components/button/Button.css +81 -78
  11. package/dist/components/card/Card.css +46 -46
  12. package/dist/components/carousel/Carousel.css +57 -57
  13. package/dist/components/checkbox/Checkbox.css +40 -40
  14. package/dist/components/clipboard/Clipboard.css +68 -59
  15. package/dist/components/close-button/CloseButton.css +17 -17
  16. package/dist/components/collapsible/Collapsible.css +40 -38
  17. package/dist/components/color-picker/ColorPicker.css +162 -151
  18. package/dist/components/combobox/Combobox.css +120 -130
  19. package/dist/components/command-palette/CommandPalette.css +173 -177
  20. package/dist/components/command-palette/CommandPalette.module.js +0 -1
  21. package/dist/components/container/Container.css +12 -12
  22. package/dist/components/date-input/DateInput.css +41 -39
  23. package/dist/components/date-picker/DatePicker.css +181 -186
  24. package/dist/components/dialog/Dialog.css +84 -78
  25. package/dist/components/drawer/Drawer.css +126 -107
  26. package/dist/components/editable/Editable.css +64 -60
  27. package/dist/components/empty/Empty.css +25 -25
  28. package/dist/components/field/Field.css +46 -44
  29. package/dist/components/fieldset/Fieldset.css +22 -22
  30. package/dist/components/file-upload/FileUpload.css +128 -125
  31. package/dist/components/floating-panel/FloatingPanel.css +114 -110
  32. package/dist/components/floating-panel/FloatingPanel.d.ts +1 -1
  33. package/dist/components/heading/Heading.css +26 -26
  34. package/dist/components/highlight/Highlight.css +8 -8
  35. package/dist/components/hover-card/HoverCard.css +49 -47
  36. package/dist/components/image/Image.css +2 -2
  37. package/dist/components/image-cropper/ImageCropper.css +63 -56
  38. package/dist/components/input/Input.css +47 -46
  39. package/dist/components/input-group/InputGroup.css +71 -70
  40. package/dist/components/kbd/Kbd.css +16 -16
  41. package/dist/components/lightbox/Lightbox.css +80 -77
  42. package/dist/components/list/List.css +32 -32
  43. package/dist/components/listbox/Listbox.css +121 -116
  44. package/dist/components/marquee/Marquee.css +16 -16
  45. package/dist/components/menu/Menu.css +122 -118
  46. package/dist/components/native-select/NativeSelect.css +48 -42
  47. package/dist/components/number-input/NumberInput.css +62 -60
  48. package/dist/components/pagination/Pagination.css +35 -34
  49. package/dist/components/password-input/PasswordInput.css +60 -59
  50. package/dist/components/pin-input/PinInput.css +35 -35
  51. package/dist/components/popover/Popover.css +81 -76
  52. package/dist/components/progress-circular/ProgressCircular.css +20 -20
  53. package/dist/components/progress-linear/ProgressLinear.css +29 -28
  54. package/dist/components/qr-code/QrCode.css +39 -35
  55. package/dist/components/radio-group/RadioGroup.css +48 -48
  56. package/dist/components/rating-group/RatingGroup.css +30 -30
  57. package/dist/components/scroll-area/ScrollArea.css +34 -34
  58. package/dist/components/segment-group/SegmentGroup.css +37 -37
  59. package/dist/components/select/Select.css +137 -128
  60. package/dist/components/select/Select.d.ts +0 -5
  61. package/dist/components/select/Select.js +1 -9
  62. package/dist/components/select/Select.module.js +0 -1
  63. package/dist/components/separator/Separator.css +13 -13
  64. package/dist/components/sidebar/Sidebar.css +143 -142
  65. package/dist/components/signature-pad/SignaturePad.css +51 -50
  66. package/dist/components/skeleton/Skeleton.css +7 -5
  67. package/dist/components/slider/Slider.css +61 -59
  68. package/dist/components/spinner/Spinner.css +12 -12
  69. package/dist/components/split-button/SplitButton.css +12 -12
  70. package/dist/components/splitter/Splitter.css +63 -62
  71. package/dist/components/splitter/Splitter.js +2 -2
  72. package/dist/components/stack/Stack.css +4 -4
  73. package/dist/components/stack/Stack.js +3 -3
  74. package/dist/components/steps/Steps.css +89 -88
  75. package/dist/components/swap/Swap.css +7 -7
  76. package/dist/components/switch/Switch.css +59 -57
  77. package/dist/components/table/Table.css +58 -56
  78. package/dist/components/tabs/Tabs.css +64 -62
  79. package/dist/components/tag/Tag.css +45 -45
  80. package/dist/components/tags-input/TagsInput.css +93 -86
  81. package/dist/components/text/Text.css +23 -23
  82. package/dist/components/text/Text.js +1 -1
  83. package/dist/components/textarea/Textarea.css +27 -25
  84. package/dist/components/timer/Timer.css +38 -37
  85. package/dist/components/toast/Toast.css +94 -78
  86. package/dist/components/toggle/Toggle.css +66 -66
  87. package/dist/components/toggle-group/ToggleGroup.css +16 -16
  88. package/dist/components/tooltip/Tooltip.css +56 -52
  89. package/dist/components/tour/Tour.css +121 -117
  90. package/dist/components/tree-view/TreeView.css +91 -86
  91. package/dist/components/typeset/Typeset.css +317 -0
  92. package/dist/components/typeset/Typeset.d.ts +7 -0
  93. package/dist/components/typeset/Typeset.js +33 -0
  94. package/dist/components/typeset/Typeset.module.js +8 -0
  95. package/dist/index.d.ts +3 -1
  96. package/dist/index.js +3 -1
  97. package/dist/lib/moduix/presets/contrast.css +64 -0
  98. package/dist/lib/moduix/presets/dense.css +77 -0
  99. package/dist/lib/moduix/presets/soft.css +76 -0
  100. package/dist/lib/moduix/styles/reset.css +34 -1
  101. package/dist/lib/moduix/styles/style.css +230 -213
  102. package/dist/presets/contrast.d.ts +1 -0
  103. package/dist/presets/contrast.js +1 -0
  104. package/dist/presets/dense.d.ts +1 -0
  105. package/dist/presets/dense.js +1 -0
  106. package/dist/presets/soft.d.ts +1 -0
  107. package/dist/presets/soft.js +1 -0
  108. package/package.json +4 -1
package/dist/components/dialog/Dialog.css CHANGED
@@ -1,21 +1,22 @@
1
- @layer ui.components {
1
+ @layer moduix.components {
2
2
  ._9AixhG_trigger, ._9AixhG_closeTrigger {
3
3
  box-sizing: border-box;
4
- min-height: var(--dialog-control-height, var(--size-lg));
5
- padding: var(--dialog-control-padding-y, .5rem) var(--dialog-control-padding-x, .875rem);
6
- border: var(--dialog-control-border-width, var(--border-width-sm)) solid
7
- var(--dialog-control-border-color, var(--color-border));
8
- border-radius: var(--dialog-control-radius, var(--radius-md));
9
- background-color: var(--dialog-control-bg, var(--color-background));
10
- color: var(--dialog-control-color, var(--color-foreground));
4
+ min-height: var(--moduix-dialog-control-height, var(--moduix-size-md));
5
+ padding: var(--moduix-dialog-control-padding-y, var(--moduix-spacing-1))
6
+ var(--moduix-dialog-control-padding-x, var(--moduix-spacing-3-5));
7
+ border: var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)) solid
8
+ var(--moduix-dialog-control-border-color, var(--moduix-color-border));
9
+ border-radius: var(--moduix-dialog-control-radius, var(--moduix-radius-md));
10
+ background-color: var(--moduix-dialog-control-bg, var(--moduix-color-background));
11
+ color: var(--moduix-dialog-control-color, var(--moduix-color-foreground));
11
12
  font: inherit;
12
- font-size: var(--dialog-control-font-size, var(--text-md));
13
- line-height: var(--dialog-control-line-height, var(--line-height-text-md));
13
+ font-size: var(--moduix-dialog-control-font-size, var(--moduix-text-md));
14
+ line-height: var(--moduix-dialog-control-line-height, var(--moduix-line-height-text-md));
14
15
  cursor: pointer;
15
16
  user-select: none;
16
- transition: background-color var(--transition-default),
17
- border-color var(--transition-default),
18
- color var(--transition-default);
17
+ transition: background-color var(--moduix-transition-default),
18
+ border-color var(--moduix-transition-default),
19
+ color var(--moduix-transition-default);
19
20
  justify-content: center;
20
21
  align-items: center;
21
22
  margin: 0;
@@ -23,46 +24,48 @@
23
24
 
24
25
  @media (hover: hover) {
25
26
  &:hover {
26
- background-color: var(--dialog-control-bg-hover, var(--color-accent));
27
+ background-color: var(--moduix-dialog-control-bg-hover, var(--moduix-color-accent));
27
28
  }
28
29
  }
29
30
 
30
31
  &:focus-visible {
31
- outline: var(--dialog-focus-ring-width, var(--dialog-control-border-width, var(--border-width-sm)))
32
- solid var(--dialog-focus-ring-color, var(--color-ring));
33
- outline-offset: calc(var(--dialog-focus-ring-width, var(--dialog-control-border-width, var(--border-width-sm))) *
32
+ outline: var(--moduix-dialog-focus-ring-width, var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)))
33
+ solid var(--moduix-dialog-focus-ring-color, var(--moduix-color-ring));
34
+ outline-offset: calc(var(--moduix-dialog-focus-ring-width, var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm))) *
34
35
  -1);
35
36
  }
36
37
 
37
38
  &[data-disabled], &[disabled] {
38
39
  pointer-events: none;
39
- opacity: var(--opacity-disabled);
40
+ opacity: var(--moduix-opacity-disabled);
40
41
  }
41
42
  }
42
43
 
43
44
  ._9AixhG_backdrop {
44
- z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
45
- background-color: var(--dialog-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
45
+ z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
46
+ background-color: var(--moduix-dialog-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
46
47
  min-height: 100dvh;
47
- backdrop-filter: var(--backdrop-filter, blur(var(--dialog-backdrop-blur, 4px)));
48
+ backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-dialog-backdrop-blur, 4px)));
48
49
  position: fixed;
49
50
  inset: 0;
50
51
 
51
52
  &[data-state="open"] {
52
- animation: _9AixhG_dialog-backdrop-in var(--dialog-backdrop-transition, var(--transition-default));
53
+ animation: _9AixhG_dialog-backdrop-in
54
+ var(--moduix-dialog-backdrop-transition, var(--moduix-transition-default));
53
55
  }
54
56
 
55
57
  &[data-state="closed"] {
56
- animation: _9AixhG_dialog-backdrop-out var(--dialog-backdrop-transition, var(--transition-default));
58
+ animation: _9AixhG_dialog-backdrop-out
59
+ var(--moduix-dialog-backdrop-transition, var(--moduix-transition-default));
57
60
  }
58
61
  }
59
62
 
60
63
  ._9AixhG_positioner {
61
64
  box-sizing: border-box;
62
- z-index: calc(var(--z-modal) + var(--layer-index, 0));
65
+ z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
63
66
  overscroll-behavior: contain;
64
67
  scrollbar-gutter: stable both-edges;
65
- padding: var(--dialog-positioner-padding, var(--spacing-4));
68
+ padding: var(--moduix-dialog-positioner-padding, var(--moduix-spacing-4));
66
69
  place-items: center;
67
70
  display: grid;
68
71
  position: fixed;
@@ -72,20 +75,22 @@
72
75
 
73
76
  ._9AixhG_content {
74
77
  box-sizing: border-box;
75
- width: min(var(--dialog-width, 28rem),
76
- var(--dialog-max-width, calc(100vw - var(--spacing-8, 2rem))));
78
+ width: min(var(--moduix-dialog-width, 28rem),
79
+ var(--moduix-dialog-max-width, calc(100vw - var(--moduix-spacing-8, 2rem))));
77
80
  max-width: 100%;
78
- max-height: calc(100dvh - var(--spacing-8, 2rem));
79
- padding: var(--dialog-padding, var(--spacing-6));
80
- border: var(--dialog-border-width, var(--border-width-sm)) solid
81
- var(--dialog-border-color, var(--color-border));
82
- border-radius: var(--dialog-radius, var(--radius-lg));
83
- background-color: var(--dialog-bg, var(--color-popover));
84
- color: var(--dialog-color, var(--color-popover-foreground));
85
- box-shadow: var(--dialog-shadow, var(--shadow-lg));
81
+ max-height: calc(100dvh - var(--moduix-spacing-8, 2rem));
82
+ padding: var(--moduix-dialog-padding, var(--moduix-spacing-6));
83
+ border: var(--moduix-dialog-border-width, var(--moduix-border-width-sm)) solid
84
+ var(--moduix-dialog-border-color, var(--moduix-color-border));
85
+ border-radius: var(--moduix-dialog-radius, var(--moduix-radius-lg));
86
+ background-color: var(--moduix-dialog-bg, var(--moduix-color-popover));
87
+ color: var(--moduix-dialog-color, var(--moduix-color-popover-foreground));
88
+ box-shadow: var(--moduix-dialog-shadow, var(--moduix-shadow-lg));
86
89
  transform-origin: top;
87
- transition: scale var(--dialog-nested-transition, var(--dialog-transition, var(--transition-default))),
88
- translate var(--dialog-nested-transition, var(--dialog-transition, var(--transition-default)));
90
+ transition: scale
91
+ var(--moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default))),
92
+ translate
93
+ var(--moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)));
89
94
  outline: 0;
90
95
  position: relative;
91
96
  translate: 0;
@@ -95,19 +100,20 @@
95
100
  content: "";
96
101
  z-index: 1;
97
102
  border-radius: inherit;
98
- background-color: var(--dialog-nested-overlay-bg, #0000000d);
103
+ background-color: var(--moduix-dialog-nested-overlay-bg, #0000000d);
99
104
  opacity: 0;
100
105
  pointer-events: none;
101
106
  transition: opacity
102
- var(--dialog-nested-transition, var(--dialog-transition, var(--transition-default)));
107
+ var(--moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)));
103
108
  position: absolute;
104
109
  inset: 0;
105
110
  }
106
111
 
107
112
  &[data-has-nested] {
108
- scale: calc(1 - var(--dialog-nested-scale-step, .05) * var(--nested-layer-count, 0));
113
+ scale: calc(1 - var(--moduix-dialog-nested-scale-step, .05) * var(--nested-layer-count, 0));
109
114
  translate: 0
110
- calc(var(--dialog-nested-translate-step, var(--spacing-10)) * var(--nested-layer-count, 0));
115
+ calc(var(--moduix-dialog-nested-translate-step, var(--moduix-spacing-10)) *
116
+ var(--nested-layer-count, 0));
111
117
 
112
118
  &:after {
113
119
  opacity: 1;
@@ -116,20 +122,20 @@
116
122
 
117
123
  &[data-state="open"] {
118
124
  animation: _9AixhG_dialog-content-in
119
- var(--dialog-transition, var(--popup-motion-duration, var(--duration-normal))
120
- var(--popup-motion-easing, var(--ease-in-out)));
125
+ var(--moduix-dialog-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
126
+ var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
121
127
  }
122
128
 
123
129
  &[data-state="closed"] {
124
130
  animation: _9AixhG_dialog-content-out
125
- var(--dialog-transition, var(--popup-motion-duration, var(--duration-normal))
126
- var(--popup-motion-easing, var(--ease-in-out)));
131
+ var(--moduix-dialog-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
132
+ var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
127
133
  }
128
134
  }
129
135
 
130
136
  ._9AixhG_header {
131
137
  align-items: start;
132
- gap: var(--dialog-header-gap, var(--spacing-1));
138
+ gap: var(--moduix-dialog-header-gap, var(--moduix-spacing-1));
133
139
  grid-template-columns: minmax(0, 1fr) auto;
134
140
  display: grid;
135
141
 
@@ -148,17 +154,17 @@
148
154
  }
149
155
 
150
156
  ._9AixhG_title {
151
- color: var(--dialog-title-color, var(--dialog-color, var(--color-popover-foreground)));
152
- font-size: var(--dialog-title-font-size, var(--text-lg));
153
- font-weight: var(--dialog-title-font-weight, var(--weight-semibold));
154
- line-height: var(--dialog-title-line-height, var(--line-height-text-lg));
157
+ color: var(--moduix-dialog-title-color, var(--moduix-dialog-color, var(--moduix-color-popover-foreground)));
158
+ font-size: var(--moduix-dialog-title-font-size, var(--moduix-text-lg));
159
+ font-weight: var(--moduix-dialog-title-font-weight, var(--moduix-weight-semibold));
160
+ line-height: var(--moduix-dialog-title-line-height, var(--moduix-line-height-text-lg));
155
161
  margin: 0;
156
162
  }
157
163
 
158
164
  ._9AixhG_description, ._9AixhG_body {
159
- color: var(--dialog-description-color, var(--dialog-muted-color, var(--color-muted-foreground)));
160
- font-size: var(--dialog-description-font-size, var(--text-md));
161
- line-height: var(--dialog-description-line-height, var(--line-height-text-md));
165
+ color: var(--moduix-dialog-description-color, var(--moduix-dialog-muted-color, var(--moduix-color-muted-foreground)));
166
+ font-size: var(--moduix-dialog-description-font-size, var(--moduix-text-md));
167
+ line-height: var(--moduix-dialog-description-line-height, var(--moduix-line-height-text-md));
162
168
  }
163
169
 
164
170
  ._9AixhG_description {
@@ -166,60 +172,60 @@
166
172
  }
167
173
 
168
174
  ._9AixhG_body {
169
- margin: var(--dialog-content-margin, var(--spacing-4) 0 0);
175
+ margin: var(--moduix-dialog-content-margin, var(--moduix-spacing-4) 0 0);
170
176
  }
171
177
 
172
178
  ._9AixhG_footer {
173
179
  justify-content: flex-end;
174
- gap: var(--dialog-footer-gap, var(--spacing-2));
175
- margin-top: var(--dialog-footer-margin-top, var(--spacing-6));
180
+ gap: var(--moduix-dialog-footer-gap, var(--moduix-spacing-2));
181
+ margin-top: var(--moduix-dialog-footer-margin-top, var(--moduix-spacing-6));
176
182
  display: flex;
177
183
  }
178
184
 
179
185
  ._9AixhG_closeIcon {
180
- --close-button-size: var(--dialog-close-icon-size, 1.75rem);
181
- --close-button-radius: var(--dialog-close-icon-radius, var(--radius-md));
182
- --close-button-color: var(--dialog-close-icon-color, var(--dialog-muted-color, var(--color-muted-foreground)));
183
- --close-button-color-hover: var(--dialog-close-icon-color-hover, var(--dialog-close-icon-color, var(--dialog-color, var(--color-popover-foreground))));
184
- --close-button-bg: var(--dialog-close-icon-bg, transparent);
185
- --close-button-bg-hover: var(--dialog-close-icon-bg-hover, var(--color-accent));
186
- --close-button-focus-ring-color: var(--dialog-close-icon-focus-ring-color, var(--dialog-focus-ring-color, var(--color-ring)));
187
- --close-button-icon-size: var(--dialog-close-icon-glyph-size, .75rem);
186
+ --moduix-close-button-size: var(--moduix-dialog-close-icon-size, var(--moduix-spacing-7));
187
+ --moduix-close-button-radius: var(--moduix-dialog-close-icon-radius, var(--moduix-radius-md));
188
+ --moduix-close-button-color: var(--moduix-dialog-close-icon-color, var(--moduix-dialog-muted-color, var(--moduix-color-muted-foreground)));
189
+ --moduix-close-button-color-hover: var(--moduix-dialog-close-icon-color-hover, var(--moduix-dialog-close-icon-color, var(--moduix-dialog-color, var(--moduix-color-popover-foreground))));
190
+ --moduix-close-button-bg: var(--moduix-dialog-close-icon-bg, transparent);
191
+ --moduix-close-button-bg-hover: var(--moduix-dialog-close-icon-bg-hover, var(--moduix-color-accent));
192
+ --moduix-close-button-focus-ring-color: var(--moduix-dialog-close-icon-focus-ring-color, var(--moduix-dialog-focus-ring-color, var(--moduix-color-ring)));
193
+ --moduix-close-button-icon-size: var(--moduix-dialog-close-icon-glyph-size, var(--moduix-spacing-3));
188
194
  z-index: 2;
189
195
  position: absolute;
190
- inset-block-start: var(--dialog-close-icon-inset-block-start, var(--spacing-4));
191
- inset-inline-end: var(--dialog-close-icon-inset-inline-end, var(--spacing-4));
196
+ inset-block-start: var(--moduix-dialog-close-icon-inset-block-start, var(--moduix-spacing-4));
197
+ inset-inline-end: var(--moduix-dialog-close-icon-inset-inline-end, var(--moduix-spacing-4));
192
198
  }
193
199
 
194
200
  @keyframes _9AixhG_dialog-backdrop-in {
195
201
  from {
196
- opacity: var(--dialog-backdrop-starting-opacity, 0);
197
- backdrop-filter: var(--dialog-backdrop-starting-blur, none);
202
+ opacity: var(--moduix-dialog-backdrop-starting-opacity, 0);
203
+ backdrop-filter: var(--moduix-dialog-backdrop-starting-blur, none);
198
204
  }
199
205
  }
200
206
 
201
207
  @keyframes _9AixhG_dialog-backdrop-out {
202
208
  to {
203
- opacity: var(--dialog-backdrop-ending-opacity, 0);
204
- backdrop-filter: var(--dialog-backdrop-ending-blur, none);
209
+ opacity: var(--moduix-dialog-backdrop-ending-opacity, 0);
210
+ backdrop-filter: var(--moduix-dialog-backdrop-ending-blur, none);
205
211
  }
206
212
  }
207
213
 
208
214
  @keyframes _9AixhG_dialog-content-in {
209
215
  from {
210
- opacity: var(--dialog-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
211
- translate: var(--dialog-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
212
- var(--dialog-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
213
- scale: var(--dialog-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
216
+ opacity: var(--moduix-dialog-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
217
+ translate: var(--moduix-dialog-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
218
+ var(--moduix-dialog-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
219
+ scale: var(--moduix-dialog-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
214
220
  }
215
221
  }
216
222
 
217
223
  @keyframes _9AixhG_dialog-content-out {
218
224
  to {
219
- opacity: var(--dialog-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
220
- translate: var(--dialog-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
221
- var(--dialog-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
222
- scale: var(--dialog-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
225
+ opacity: var(--moduix-dialog-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
226
+ translate: var(--moduix-dialog-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
227
+ var(--moduix-dialog-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
228
+ scale: var(--moduix-dialog-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
223
229
  }
224
230
  }
225
231
  }