@delightui/components 0.1.65 → 0.1.67

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 (28) hide show
  1. package/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts +1 -1
  2. package/dist/cjs/components/atoms/Checkbox/Checkbox.types.d.ts +1 -1
  3. package/dist/cjs/components/atoms/RadioButton/RadioButton.d.ts +1 -1
  4. package/dist/cjs/components/atoms/RadioButton/RadioButton.types.d.ts +1 -1
  5. package/dist/cjs/components/molecules/Modal/Modal.types.d.ts +4 -0
  6. package/dist/cjs/components/organisms/SlideOutPanel/SlideOutPanel.d.ts +3 -0
  7. package/dist/cjs/components/organisms/SlideOutPanel/SlideOutPanel.types.d.ts +7 -0
  8. package/dist/cjs/components/organisms/SlideOutPanel/SlideOutPanelExample.d.ts +2 -0
  9. package/dist/cjs/components/organisms/SlideOutPanel/index.d.ts +3 -0
  10. package/dist/cjs/components/organisms/index.d.ts +2 -0
  11. package/dist/cjs/library.css +208 -12
  12. package/dist/cjs/library.js +3 -3
  13. package/dist/cjs/library.js.map +1 -1
  14. package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts +1 -1
  15. package/dist/esm/components/atoms/Checkbox/Checkbox.types.d.ts +1 -1
  16. package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts +1 -1
  17. package/dist/esm/components/atoms/RadioButton/RadioButton.types.d.ts +1 -1
  18. package/dist/esm/components/molecules/Modal/Modal.types.d.ts +4 -0
  19. package/dist/esm/components/organisms/SlideOutPanel/SlideOutPanel.d.ts +3 -0
  20. package/dist/esm/components/organisms/SlideOutPanel/SlideOutPanel.types.d.ts +7 -0
  21. package/dist/esm/components/organisms/SlideOutPanel/SlideOutPanelExample.d.ts +2 -0
  22. package/dist/esm/components/organisms/SlideOutPanel/index.d.ts +3 -0
  23. package/dist/esm/components/organisms/index.d.ts +2 -0
  24. package/dist/esm/library.css +208 -12
  25. package/dist/esm/library.js +3 -3
  26. package/dist/esm/library.js.map +1 -1
  27. package/dist/index.d.ts +18 -5
  28. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
2
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("./Checkbox.types").CheckboxSizeEnum;
5
5
  checked?: boolean;
@@ -1,7 +1,7 @@
1
1
  import type { InputHTMLAttributes } from 'react';
2
2
  export type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
3
3
  export type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
4
- export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
4
+ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
5
5
  /**
6
6
  * The label of the checkbox.
7
7
  */
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
2
+ declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("./RadioButton.types").RadioButtonSizeEnum;
5
5
  checked?: boolean;
@@ -1,7 +1,7 @@
1
1
  import type { InputHTMLAttributes } from 'react';
2
2
  export type RadioButtonSizeEnum = 'Small' | 'Medium' | 'Large';
3
3
  export type RadioButtonLabelAlignmentEnum = 'Left' | 'Right';
4
- export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
4
+ export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
5
5
  /**
6
6
  * The label of the radio button.
7
7
  */
@@ -47,6 +47,10 @@ export type ModalProps = {
47
47
  * @default false
48
48
  */
49
49
  disableBackdropDismiss?: boolean;
50
+ /**
51
+ * provide a way to override the styling
52
+ */
53
+ 'component-variant'?: string;
50
54
  /**
51
55
  * Additional CSS class names to apply to the modal.
52
56
  */
@@ -0,0 +1,3 @@
1
+ import { SlideOutPanelProps } from './SlideOutPanel.types';
2
+ declare const SlideOutPanel: (props: SlideOutPanelProps) => import("react").JSX.Element;
3
+ export default SlideOutPanel;
@@ -0,0 +1,7 @@
1
+ import { ModalProps } from '../../molecules';
2
+ export type SlideOutPanelSizeEnum = 'Small' | 'Medium' | 'Large';
3
+ export type SlideOutPanelDirectionEnum = 'Top' | 'Left' | 'Bottom' | 'Right';
4
+ export type SlideOutPanelProps = Omit<ModalProps, 'size' | 'header' | 'footer' | 'component-variant'> & {
5
+ size?: SlideOutPanelSizeEnum;
6
+ direction?: SlideOutPanelDirectionEnum;
7
+ };
@@ -0,0 +1,2 @@
1
+ declare const SlideOutPanelExample: () => import("react").JSX.Element;
2
+ export default SlideOutPanelExample;
@@ -0,0 +1,3 @@
1
+ import SlideOutPanel from './SlideOutPanel';
2
+ export * from './SlideOutPanel.types';
3
+ export default SlideOutPanel;
@@ -14,6 +14,7 @@ export { default as TableBody } from './Table/TableBody';
14
14
  export { default as Tabs } from './Tabs';
15
15
  export { default as TabItem } from './Tabs/TabItem';
16
16
  export { default as TabContent } from './Tabs/TabContent';
17
+ export { default as SlideOutPanel } from './SlideOutPanel';
17
18
  export * from './Dropzone';
18
19
  export * from './DropzoneContent';
19
20
  export * from './Form';
@@ -26,3 +27,4 @@ export * from './Table/TableBody';
26
27
  export * from './Tabs';
27
28
  export * from './Tabs/TabItem';
28
29
  export * from './Tabs/TabContent';
30
+ export * from './SlideOutPanel';
@@ -557,9 +557,27 @@
557
557
  display: inline-flex;
558
558
  align-items: center;
559
559
  gap: var(--toggle-row-gap) var(--toggle-column-gap);
560
+ color: var(--toggle-color);
560
561
  height: var(--toggle-height);
562
+ min-height: var(--toggle-min-height);
563
+ max-height: var(--toggle-max-height);
561
564
  width: var(--toggle-width);
562
- color: var(--toggle-color);
565
+ min-width: var(--toggle-min-width);
566
+ max-width: var(--toggle-max-width);
567
+ padding-top: var(--toggle-padding-top);
568
+ padding-left: var(--toggle-padding-left);
569
+ padding-bottom: var(--toggle-padding-bottom);
570
+ padding-right: var(--toggle-padding-right);
571
+ border-bottom-width: var(--toggle-border-bottom-width);
572
+ border-left-width: var(--toggle-border-left-width);
573
+ border-right-width: var(--toggle-border-right-width);
574
+ border-top-width: var(--toggle-border-top-width);
575
+ border-style: var(--toggle-border-style);
576
+ border-color: var(--toggle-border-color);
577
+ border-top-left-radius: var(--toggle-border-top-left-radius);
578
+ border-top-right-radius: var(--toggle-border-top-right-radius);
579
+ border-bottom-right-radius: var(--toggle-border-bottom-right-radius);
580
+ border-bottom-left-radius: var(--toggle-border-bottom-left-radius);
563
581
  }
564
582
  .Toggle-module_toggle__gOwa0 .Toggle-module_input__aAn85 {
565
583
  position: absolute;
@@ -4011,7 +4029,7 @@ span.flatpickr-weekday {
4011
4029
  letter-spacing: var(--table-letter-spacing);
4012
4030
  line-height: var(--table-line-height);
4013
4031
  table-layout: auto;
4014
- border-collapse: collapse;
4032
+ border-collapse: separate;
4015
4033
  display: table;
4016
4034
  overflow: auto;
4017
4035
  }
@@ -4249,6 +4267,104 @@ span.flatpickr-weekday {
4249
4267
  .TabContent-module_tabContent__3-qqV {
4250
4268
  display: flex;
4251
4269
  }
4270
+ .SlideOutPanel-module_slideOutPanel__eBr9a {
4271
+ display: flex;
4272
+ position: fixed;
4273
+ transform: none;
4274
+ transform: initial;
4275
+ opacity: 0;
4276
+ transition: transform 0.3s ease, opacity 0.3s ease;
4277
+ padding-top: calc(var(--slide-out-panel-padding-top) - var(--slide-out-panel-border-top-width));
4278
+ padding-bottom: calc(var(--slide-out-panel-padding-bottom) - var(--slide-out-panel-border-bottom-width));
4279
+ padding-left: calc(var(--slide-out-panel-padding-left) - var(--slide-out-panel-border-left-width));
4280
+ padding-right: calc(var(--slide-out-panel-padding-right) - var(--slide-out-panel-border-right-width));
4281
+ row-gap: var(--slide-out-panel-row-gap);
4282
+ -moz-column-gap: var(--slide-out-panel-column-gap);
4283
+ column-gap: var(--slide-out-panel-column-gap);
4284
+ border-top-width: var(--slide-out-panel-border-top-width);
4285
+ border-bottom-width: var(--slide-out-panel-border-bottom-width);
4286
+ border-left-width: var(--slide-out-panel-border-left-width);
4287
+ border-right-width: var(--slide-out-panel-border-right-width);
4288
+ border-style: var(--slide-out-panel-border-style);
4289
+ border-color: var(--slide-out-panel-border-color);
4290
+ border-top-left-radius: var(--slide-out-panel-border-top-left-radius);
4291
+ border-top-right-radius: var(--slide-out-panel-border-top-right-radius);
4292
+ border-bottom-right-radius: var(--slide-out-panel-border-bottom-right-radius);
4293
+ border-bottom-left-radius: var(--slide-out-panel-border-bottom-left-radius);
4294
+ outline-width: var(--slide-out-panel-outline-width);
4295
+ outline-style: var(--slide-out-panel-outline-style);
4296
+ outline-color: var(--slide-out-panel-outline-color);
4297
+ background-color: var(--slide-out-panel-background-color);
4298
+ color: var(--slide-out-panel-color);
4299
+ }
4300
+
4301
+ .SlideOutPanel-module_slideOutPanel--right__I8eTm {
4302
+ top: 0;
4303
+ right: -100%;
4304
+ left: auto;
4305
+ left: initial;
4306
+ height: 100vh;
4307
+ }
4308
+
4309
+ .SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_open__Q-ONw {
4310
+ right: 0;
4311
+ opacity: 1;
4312
+ }
4313
+
4314
+ .SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_slideOutPanel--large__7RHyd {
4315
+ width: var(--slide-out-panel-width);
4316
+ }
4317
+
4318
+ .SlideOutPanel-module_slideOutPanel--left__oBPI2 {
4319
+ top: 0;
4320
+ right: auto;
4321
+ right: initial;
4322
+ left: -100%;
4323
+ height: 100vh;
4324
+ }
4325
+
4326
+ .SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_open__Q-ONw {
4327
+ left: 0;
4328
+ opacity: 1;
4329
+ }
4330
+
4331
+ .SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_slideOutPanel--large__7RHyd {
4332
+ width: var(--slide-out-panel-width);
4333
+ }
4334
+
4335
+ .SlideOutPanel-module_slideOutPanel--top__4e54e {
4336
+ top: -100%;
4337
+ left: 0;
4338
+ bottom: auto;
4339
+ bottom: initial;
4340
+ width: 100vw;
4341
+ }
4342
+
4343
+ .SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_open__Q-ONw {
4344
+ top: 0;
4345
+ opacity: 1;
4346
+ }
4347
+
4348
+ .SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_slideOutPanel--large__7RHyd {
4349
+ height: var(--slide-out-panel-height);
4350
+ }
4351
+
4352
+ .SlideOutPanel-module_slideOutPanel--bottom__E3bRO {
4353
+ top: auto;
4354
+ top: initial;
4355
+ left: 0;
4356
+ bottom: -100%;
4357
+ width: 100vw;
4358
+ }
4359
+
4360
+ .SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_open__Q-ONw {
4361
+ bottom: 0;
4362
+ opacity: 1;
4363
+ }
4364
+
4365
+ .SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_slideOutPanel--large__7RHyd {
4366
+ height: var(--slide-out-panel-height);
4367
+ }
4252
4368
 
4253
4369
  [data-theme='dark'] [component-variant^="text-"], [data-theme='light'] [component-variant^="text-"] {
4254
4370
  --text-opacity: 1;
@@ -18074,45 +18190,77 @@ span.flatpickr-weekday {
18074
18190
  }
18075
18191
  [data-theme='dark'] [component-variant="toggle-unselected"], [data-theme='light'] [component-variant="toggle-unselected"] {
18076
18192
  --toggle-width: 100%;
18193
+ --toggle-color: var(--text-primary);
18194
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18195
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18196
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18197
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18198
+ --toggle-padding-left: var(--spacing-space-3);
18199
+ --toggle-padding-right: var(--spacing-space-3);
18200
+ --toggle-padding-top: var(--spacing-space-3);
18201
+ --toggle-padding-bottom: var(--spacing-space-3);
18077
18202
  --toggle-row-gap: var(--spacing-space-5);
18078
18203
  --toggle-column-gap: var(--spacing-space-5);
18079
18204
  --toggle-font-family: var(--font-family-body);
18080
18205
  --toggle-font-size: var(--font-size-body-small);
18081
18206
  --toggle-font-weight: var(--font-weight-regular);
18082
- --toggle-color: var(--text-primary);
18083
18207
  --toggle-line-height: var(--line-height-body-small);
18084
18208
  --toggle-paragraph-spacing: 0px;
18085
18209
  --toggle-paragraph-indent: 0px
18086
18210
  }
18087
18211
  [data-theme='dark'] [component-variant="toggle-unselected"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:hover:not(:disabled):not([disabled]) {
18212
+ --toggle-color: var(--text-primary);
18213
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18214
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18215
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18216
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18217
+ --toggle-padding-left: var(--spacing-space-3);
18218
+ --toggle-padding-right: var(--spacing-space-3);
18219
+ --toggle-padding-top: var(--spacing-space-3);
18220
+ --toggle-padding-bottom: var(--spacing-space-3);
18088
18221
  --toggle-row-gap: var(--spacing-space-5);
18089
18222
  --toggle-column-gap: var(--spacing-space-5);
18090
18223
  --toggle-font-family: var(--font-family-body);
18091
18224
  --toggle-font-size: var(--font-size-body-small);
18092
18225
  --toggle-font-weight: var(--font-weight-regular);
18093
- --toggle-color: var(--text-primary);
18094
18226
  --toggle-line-height: var(--line-height-body-small);
18095
18227
  --toggle-paragraph-spacing: 0px;
18096
18228
  --toggle-paragraph-indent: 0px
18097
18229
  }
18098
18230
  [data-theme='dark'] [component-variant="toggle-unselected"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-unselected"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:active:not(:disabled):not([disabled]) {
18231
+ --toggle-color: var(--text-primary);
18232
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18233
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18234
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18235
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18236
+ --toggle-padding-left: var(--spacing-space-3);
18237
+ --toggle-padding-right: var(--spacing-space-3);
18238
+ --toggle-padding-top: var(--spacing-space-3);
18239
+ --toggle-padding-bottom: var(--spacing-space-3);
18099
18240
  --toggle-row-gap: var(--spacing-space-5);
18100
18241
  --toggle-column-gap: var(--spacing-space-5);
18101
18242
  --toggle-font-family: var(--font-family-body);
18102
18243
  --toggle-font-size: var(--font-size-body-small);
18103
18244
  --toggle-font-weight: var(--font-weight-regular);
18104
- --toggle-color: var(--text-primary);
18105
18245
  --toggle-line-height: var(--line-height-body-small);
18106
18246
  --toggle-paragraph-spacing: 0px;
18107
18247
  --toggle-paragraph-indent: 0px
18108
18248
  }
18109
18249
  [data-theme='dark'] [component-variant="toggle-unselected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-unselected"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:focus-visible:not(:disabled):not([disabled]) {
18250
+ --toggle-color: var(--text-primary);
18251
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18252
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18253
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18254
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18255
+ --toggle-padding-left: var(--spacing-space-3);
18256
+ --toggle-padding-right: var(--spacing-space-3);
18257
+ --toggle-padding-top: var(--spacing-space-3);
18258
+ --toggle-padding-bottom: var(--spacing-space-3);
18110
18259
  --toggle-row-gap: var(--spacing-space-5);
18111
18260
  --toggle-column-gap: var(--spacing-space-5);
18112
18261
  --toggle-font-family: var(--font-family-body);
18113
18262
  --toggle-font-size: var(--font-size-body-small);
18114
18263
  --toggle-font-weight: var(--font-weight-regular);
18115
- --toggle-color: var(--text-primary);
18116
18264
  --toggle-line-height: var(--line-height-body-small);
18117
18265
  --toggle-paragraph-spacing: 0px;
18118
18266
  --toggle-paragraph-indent: 0px
@@ -18121,57 +18269,97 @@ span.flatpickr-weekday {
18121
18269
  [data-theme='light'] [component-variant="toggle-unselected"][disabled],
18122
18270
  [data-theme='dark'] [component-variant="toggle-unselected"]:disabled,
18123
18271
  [data-theme='light'] [component-variant="toggle-unselected"]:disabled {
18272
+ --toggle-color: var(--text-primary);
18273
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18274
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18275
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18276
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18277
+ --toggle-padding-left: var(--spacing-space-3);
18278
+ --toggle-padding-right: var(--spacing-space-3);
18279
+ --toggle-padding-top: var(--spacing-space-3);
18280
+ --toggle-padding-bottom: var(--spacing-space-3);
18124
18281
  --toggle-row-gap: var(--spacing-space-5);
18125
18282
  --toggle-column-gap: var(--spacing-space-5);
18126
18283
  --toggle-font-family: var(--font-family-body);
18127
18284
  --toggle-font-size: var(--font-size-body-small);
18128
18285
  --toggle-font-weight: var(--font-weight-regular);
18129
- --toggle-color: var(--text-primary);
18130
18286
  --toggle-line-height: var(--line-height-body-small);
18131
18287
  --toggle-paragraph-spacing: 0px;
18132
18288
  --toggle-paragraph-indent: 0px
18133
18289
  }
18134
18290
  [data-theme='dark'] [component-variant="toggle-selected"], [data-theme='light'] [component-variant="toggle-selected"] {
18135
18291
  --toggle-width: 100%;
18292
+ --toggle-color: var(--text-primary);
18293
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18294
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18295
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18296
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18297
+ --toggle-padding-left: var(--spacing-space-3);
18298
+ --toggle-padding-right: var(--spacing-space-3);
18299
+ --toggle-padding-top: var(--spacing-space-3);
18300
+ --toggle-padding-bottom: var(--spacing-space-3);
18136
18301
  --toggle-row-gap: var(--spacing-space-5);
18137
18302
  --toggle-column-gap: var(--spacing-space-5);
18138
18303
  --toggle-font-family: var(--font-family-body);
18139
18304
  --toggle-font-size: var(--font-size-body-small);
18140
18305
  --toggle-font-weight: var(--font-weight-regular);
18141
- --toggle-color: var(--text-primary);
18142
18306
  --toggle-line-height: var(--line-height-body-small);
18143
18307
  --toggle-paragraph-spacing: 0px;
18144
18308
  --toggle-paragraph-indent: 0px
18145
18309
  }
18146
18310
  [data-theme='dark'] [component-variant="toggle-selected"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:hover:not(:disabled):not([disabled]) {
18311
+ --toggle-color: var(--text-primary);
18312
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18313
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18314
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18315
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18316
+ --toggle-padding-left: var(--spacing-space-3);
18317
+ --toggle-padding-right: var(--spacing-space-3);
18318
+ --toggle-padding-top: var(--spacing-space-3);
18319
+ --toggle-padding-bottom: var(--spacing-space-3);
18147
18320
  --toggle-row-gap: var(--spacing-space-5);
18148
18321
  --toggle-column-gap: var(--spacing-space-5);
18149
18322
  --toggle-font-family: var(--font-family-body);
18150
18323
  --toggle-font-size: var(--font-size-body-small);
18151
18324
  --toggle-font-weight: var(--font-weight-regular);
18152
- --toggle-color: var(--text-primary);
18153
18325
  --toggle-line-height: var(--line-height-body-small);
18154
18326
  --toggle-paragraph-spacing: 0px;
18155
18327
  --toggle-paragraph-indent: 0px
18156
18328
  }
18157
18329
  [data-theme='dark'] [component-variant="toggle-selected"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-selected"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:active:not(:disabled):not([disabled]) {
18330
+ --toggle-color: var(--text-primary);
18331
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18332
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18333
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18334
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18335
+ --toggle-padding-left: var(--spacing-space-3);
18336
+ --toggle-padding-right: var(--spacing-space-3);
18337
+ --toggle-padding-top: var(--spacing-space-3);
18338
+ --toggle-padding-bottom: var(--spacing-space-3);
18158
18339
  --toggle-row-gap: var(--spacing-space-5);
18159
18340
  --toggle-column-gap: var(--spacing-space-5);
18160
18341
  --toggle-font-family: var(--font-family-body);
18161
18342
  --toggle-font-size: var(--font-size-body-small);
18162
18343
  --toggle-font-weight: var(--font-weight-regular);
18163
- --toggle-color: var(--text-primary);
18164
18344
  --toggle-line-height: var(--line-height-body-small);
18165
18345
  --toggle-paragraph-spacing: 0px;
18166
18346
  --toggle-paragraph-indent: 0px
18167
18347
  }
18168
18348
  [data-theme='dark'] [component-variant="toggle-selected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-selected"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:focus-visible:not(:disabled):not([disabled]) {
18349
+ --toggle-color: var(--text-primary);
18350
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18351
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18352
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18353
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18354
+ --toggle-padding-left: var(--spacing-space-3);
18355
+ --toggle-padding-right: var(--spacing-space-3);
18356
+ --toggle-padding-top: var(--spacing-space-3);
18357
+ --toggle-padding-bottom: var(--spacing-space-3);
18169
18358
  --toggle-row-gap: var(--spacing-space-5);
18170
18359
  --toggle-column-gap: var(--spacing-space-5);
18171
18360
  --toggle-font-family: var(--font-family-body);
18172
18361
  --toggle-font-size: var(--font-size-body-small);
18173
18362
  --toggle-font-weight: var(--font-weight-regular);
18174
- --toggle-color: var(--text-primary);
18175
18363
  --toggle-line-height: var(--line-height-body-small);
18176
18364
  --toggle-paragraph-spacing: 0px;
18177
18365
  --toggle-paragraph-indent: 0px
@@ -18180,12 +18368,20 @@ span.flatpickr-weekday {
18180
18368
  [data-theme='light'] [component-variant="toggle-selected"][disabled],
18181
18369
  [data-theme='dark'] [component-variant="toggle-selected"]:disabled,
18182
18370
  [data-theme='light'] [component-variant="toggle-selected"]:disabled {
18371
+ --toggle-color: var(--text-primary);
18372
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18373
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18374
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18375
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18376
+ --toggle-padding-left: var(--spacing-space-3);
18377
+ --toggle-padding-right: var(--spacing-space-3);
18378
+ --toggle-padding-top: var(--spacing-space-3);
18379
+ --toggle-padding-bottom: var(--spacing-space-3);
18183
18380
  --toggle-row-gap: var(--spacing-space-5);
18184
18381
  --toggle-column-gap: var(--spacing-space-5);
18185
18382
  --toggle-font-family: var(--font-family-body);
18186
18383
  --toggle-font-size: var(--font-size-body-small);
18187
18384
  --toggle-font-weight: var(--font-weight-regular);
18188
- --toggle-color: var(--text-primary);
18189
18385
  --toggle-line-height: var(--line-height-body-small);
18190
18386
  --toggle-paragraph-spacing: 0px;
18191
18387
  --toggle-paragraph-indent: 0px