@vygruppen/spor-react 9.7.0 → 9.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -67,6 +67,7 @@ declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div",
67
67
 
68
68
  type RadioCardProps = UseRadioProps & BoxProps & {
69
69
  children: React.ReactNode;
70
+ /** Defaults to "base" */
70
71
  variant: "floating" | "base";
71
72
  };
72
73
  /**
@@ -116,7 +117,16 @@ declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"di
116
117
  type RadioCardGroupProps = RadioGroupProps$1 & {
117
118
  children: React.ReactNode;
118
119
  props?: RadioGroupProps$1;
120
+ /** Defaults to "row" */
119
121
  direction?: StackDirection;
122
+ /** Defaults to "base" */
123
+ variant?: string;
124
+ /** The name of the radio group */
125
+ name?: string;
126
+ /** The default value of the radio group */
127
+ defaultValue?: string;
128
+ /** The callback function to be called when the radio group value changes */
129
+ onChange?: (value: string) => void;
120
130
  };
121
131
  /**
122
132
  * Radio card groups are used to group several radio cards together.
@@ -156,6 +166,87 @@ type RadioCardGroupProps = RadioGroupProps$1 & {
156
166
  */
157
167
  declare const RadioCardGroup: ({ children, name, direction, onChange, defaultValue, variant, ...props }: RadioCardGroupProps) => React.JSX.Element;
158
168
 
169
+ type StaticCardProps = BoxProps & {
170
+ children: React.ReactNode;
171
+ /** Defaults to "white" */
172
+ colorScheme: "white" | "grey" | "green" | "orange" | "red" | "yellow" | "blue" | "darkBlue" | "darkGreen" | "darkYellow";
173
+ };
174
+ /**
175
+ * `StaticCard` is a component that renders a static card.
176
+ *
177
+ * The `StaticCard` component can be used to create a card that does not respond to user interactions.
178
+ * It can be rendered as any HTML element by specifying the `as` prop.
179
+ *
180
+ * The `colorScheme` prop can be used to control the color scheme of the card. It defaults to "white".
181
+ *
182
+ * Example usage:
183
+ *
184
+ * ```tsx
185
+ * <StaticCard>
186
+ * Content
187
+ * </StaticCard>
188
+ * ```
189
+ *
190
+ * To render the card as a different HTML element, specify the `as` prop:
191
+ *
192
+ * ```tsx
193
+ * <StaticCard as="section">
194
+ * This is now a <section /> element
195
+ * </StaticCard>
196
+ * ```
197
+ *
198
+ * To change the color scheme of the card, specify the `colorScheme` prop:
199
+ *
200
+ * ```tsx
201
+ * <StaticCard colorScheme="orange">
202
+ * An orange card
203
+ * </StaticCard>
204
+ * ```
205
+ *
206
+ * For a card with click functionality, use the `PressableCard` component.
207
+ *
208
+ * @see PressableCard
209
+ */
210
+ declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, StaticCardProps>;
211
+
212
+ type PressableCardProps = Omit<BoxProps, "as"> & {
213
+ /** Defaults to "base" */
214
+ variant: "floating" | "accent" | "base";
215
+ /** Defaults to "button" */
216
+ as: "button" | "a" | "label";
217
+ };
218
+ /**
219
+ * `PressableCard` is a component that renders a pressable card.
220
+ *
221
+ * The `PressableCard` component can be used to create a card that responds to user interactions.
222
+ * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
223
+ * If no `as` prop is provided, it defaults to a button.
224
+ *
225
+ * The `size` prop can be used to control the size of the card. It defaults to "sm".
226
+ * The `variant` prop can be used to control the style variant of the card. It defaults to "base".
227
+ *
228
+ * Example usage:
229
+ *
230
+ * ```tsx
231
+ * <PressableCard>
232
+ * Content
233
+ * </PressableCard>
234
+ * ```
235
+ *
236
+ * To render the card as a different HTML element, specify the `as` prop:
237
+ *
238
+ * ```tsx
239
+ * <PressableCard as="a">
240
+ * This is now a <a /> element
241
+ * </PressableCard>
242
+ * ```
243
+ *
244
+ * For a static card with other color schemes, use the `StaticCard` component.
245
+ *
246
+ * @see StaticCard
247
+ */
248
+ declare const PressableCard: ({ children, as, variant, ...props }: PressableCardProps) => React.JSX.Element;
249
+
159
250
  type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
160
251
  /**
161
252
  * The display variant of the accordion items.
@@ -532,64 +623,10 @@ type CardProps = Exclude<BoxProps, "size"> & {
532
623
  * </Card>
533
624
  * ```
534
625
  */
535
- declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
536
-
537
- /**
538
- * Renders a static card.
539
- *
540
- * The most basic version looks like this:
541
- *
542
- * ```tsx
543
- * <StaticCard colorScheme="white">
544
- * Content
545
- * </StaticCard>
546
- * ```
547
- *
548
- * Static cards can also be rendered as whatever DOM element you want – like a li (list item) or an article. You do this by specifying the `as` prop:
549
- *
550
- * ```tsx
551
- * <StaticCard colorScheme="green" as="section">
552
- * This is now a <section /> element
553
- * </StaticCard>
554
- * ```
555
- */
556
- declare const StaticCard: ({ colorScheme, ...props }: any) => React.JSX.Element;
557
-
558
- type PressableCardProps = Omit<BoxProps, "as"> & {
559
- variant: "floating" | "accent" | "base";
560
- size?: "sm" | "lg";
561
- as: "button" | "a" | "label";
562
- };
563
626
  /**
564
- * Renders a Pressable card.
565
- *
566
- * The most basic version looks like this:
567
- *
568
- * ```tsx
569
- * <PressableCard>
570
- * Content
571
- * </PressableCard>
572
- * ```
573
- *
574
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
575
- *
576
- * ```tsx
577
- * <PressableCard colorScheme="orange" size="lg">
578
- * A smaller card
579
- * </PressableCard>
580
- * ```
581
- *
582
- * Pressable cards can also be rendered as button, link or label – like a li (list item) or an article.
583
- * You do this by specifying the `as` prop. If no `as` is specified, button is chosen as default:
584
- *
585
- *
586
- * ```tsx
587
- * <PressableCard colorScheme="green" as="section">
588
- * This is now a <section /> element
589
- * </PressableCard>
590
- * ```
627
+ * @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
591
628
  */
592
- declare const PressableCard: ({ children, as, size, variant, ...props }: PressableCardProps) => React.JSX.Element;
629
+ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
593
630
 
594
631
  /**
595
632
  * A date picker component.
@@ -7148,42 +7185,6 @@ declare const theme: {
7148
7185
  };
7149
7186
  StaticCard: {
7150
7187
  baseStyle?: ((props: any) => {
7151
- backgroundColor: string;
7152
- color: string;
7153
- outlineWidth: string;
7154
- outlineColor: string;
7155
- outlineStyle: string;
7156
- outlineOffset: string;
7157
- _focusVisible: {
7158
- outlineWidth: string;
7159
- outlineColor: string;
7160
- outlineStyle: string;
7161
- outlineOffset: string;
7162
- };
7163
- appearance: string;
7164
- border: string;
7165
- overflow: string;
7166
- fontSize: string;
7167
- display: string;
7168
- borderRadius: string;
7169
- } | {
7170
- backgroundColor: string;
7171
- color: string;
7172
- outline: string;
7173
- outlineColor: string;
7174
- _focusVisible: {
7175
- outlineWidth: string;
7176
- outlineColor: string;
7177
- outlineStyle: string;
7178
- outlineOffset: string;
7179
- };
7180
- appearance: string;
7181
- border: string;
7182
- overflow: string;
7183
- fontSize: string;
7184
- display: string;
7185
- borderRadius: string;
7186
- } | {
7187
7188
  backgroundColor: string;
7188
7189
  color: string;
7189
7190
  _focusVisible: {
@@ -7227,649 +7228,106 @@ declare const theme: {
7227
7228
  } | undefined;
7228
7229
  };
7229
7230
  PressableCard: {
7230
- baseStyle?: ((props: any) => {
7231
- _hover: {
7232
- outline: string;
7233
- outlineColor: string;
7234
- backgroundColor: string;
7235
- } | {
7236
- _hover: {
7237
- backgroundColor: string;
7238
- };
7239
- _active: {
7240
- backgroundColor: string;
7241
- };
7242
- color: string;
7243
- backgroundColor: string;
7244
- };
7231
+ baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
7245
7232
  _disabled: {
7233
+ outline: string;
7246
7234
  pointerEvents: string;
7247
7235
  color: string;
7248
- outlineWidth: string;
7249
- outlineColor: string;
7250
- outlineStyle: string;
7251
- outlineOffset: string;
7252
- backgroundColor: string;
7253
- } | {
7254
- pointerEvents: string;
7255
- color: string;
7256
- outline: string;
7257
- outlineColor: string;
7258
7236
  backgroundColor: string;
7259
7237
  };
7260
- outline: string;
7261
- outlineColor: string;
7262
- backgroundColor: string;
7263
7238
  _focusVisible: {
7264
7239
  outlineWidth: string;
7265
7240
  outlineColor: string;
7266
7241
  outlineStyle: string;
7267
7242
  outlineOffset: string;
7268
7243
  };
7269
- color: string;
7270
- outlineWidth: string;
7271
- outlineStyle: string;
7272
- outlineOffset: string;
7273
7244
  appearance: string;
7274
7245
  border: string;
7275
7246
  overflow: string;
7276
7247
  fontSize: string;
7277
7248
  display: string;
7278
7249
  borderRadius: string;
7279
- } | {
7280
- _hover: {
7281
- outline: string;
7282
- outlineColor: string;
7283
- backgroundColor: string;
7284
- } | {
7250
+ }) | undefined;
7251
+ sizes?: {
7252
+ [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
7253
+ } | undefined;
7254
+ variants?: {
7255
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7285
7256
  _hover: {
7286
- backgroundColor: string;
7257
+ outlineWidth: string;
7258
+ outlineColor: string;
7259
+ outlineStyle: string;
7260
+ outlineOffset: string;
7261
+ } | {
7262
+ outline: string;
7263
+ outlineColor: string;
7287
7264
  };
7288
7265
  _active: {
7266
+ outlineWidth: string;
7267
+ outlineColor: string;
7268
+ outlineStyle: string;
7269
+ outlineOffset: string;
7270
+ backgroundColor: string;
7271
+ } | {
7272
+ outline: string;
7273
+ outlineColor: string;
7289
7274
  backgroundColor: string;
7290
7275
  };
7291
- color: string;
7292
- backgroundColor: string;
7293
- };
7294
- _disabled: {
7295
- pointerEvents: string;
7296
- color: string;
7297
7276
  outlineWidth: string;
7298
7277
  outlineColor: string;
7299
7278
  outlineStyle: string;
7300
7279
  outlineOffset: string;
7301
- backgroundColor: string;
7302
7280
  } | {
7303
- pointerEvents: string;
7304
- color: string;
7281
+ _hover: {
7282
+ outlineWidth: string;
7283
+ outlineColor: string;
7284
+ outlineStyle: string;
7285
+ outlineOffset: string;
7286
+ } | {
7287
+ outline: string;
7288
+ outlineColor: string;
7289
+ };
7290
+ _active: {
7291
+ outlineWidth: string;
7292
+ outlineColor: string;
7293
+ outlineStyle: string;
7294
+ outlineOffset: string;
7295
+ backgroundColor: string;
7296
+ } | {
7297
+ outline: string;
7298
+ outlineColor: string;
7299
+ backgroundColor: string;
7300
+ };
7305
7301
  outline: string;
7306
7302
  outlineColor: string;
7307
- backgroundColor: string;
7308
- };
7309
- _active: {
7310
- backgroundColor: string;
7311
- };
7312
- color: string;
7313
- backgroundColor: string;
7314
- _focusVisible: {
7315
- outlineWidth: string;
7316
- outlineColor: string;
7317
- outlineStyle: string;
7318
- outlineOffset: string;
7319
7303
  };
7320
- outline: string;
7321
- outlineColor: string;
7322
- outlineWidth: string;
7323
- outlineStyle: string;
7324
- outlineOffset: string;
7325
- appearance: string;
7326
- border: string;
7327
- overflow: string;
7328
- fontSize: string;
7329
- display: string;
7330
- borderRadius: string;
7331
- } | {
7332
- _hover: {
7333
- outline: string;
7334
- outlineColor: string;
7335
- backgroundColor: string;
7336
- } | {
7304
+ accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7305
+ boxShadow: string;
7337
7306
  _hover: {
7307
+ boxShadow: string;
7338
7308
  backgroundColor: string;
7339
7309
  };
7340
7310
  _active: {
7311
+ boxShadow: string;
7341
7312
  backgroundColor: string;
7342
7313
  };
7343
- color: string;
7344
- backgroundColor: string;
7345
- };
7346
- _disabled: {
7347
- pointerEvents: string;
7348
- color: string;
7349
- outlineWidth: string;
7350
- outlineColor: string;
7351
- outlineStyle: string;
7352
- outlineOffset: string;
7353
- backgroundColor: string;
7354
- } | {
7355
- pointerEvents: string;
7356
- color: string;
7357
- outline: string;
7358
- outlineColor: string;
7359
- backgroundColor: string;
7360
- };
7361
- outline: string;
7362
- outlineColor: string;
7363
- backgroundColor: string;
7364
- _focusVisible: {
7365
- outlineWidth: string;
7366
- outlineColor: string;
7367
- outlineStyle: string;
7368
- outlineOffset: string;
7369
- };
7370
- _active: {
7371
- backgroundColor: string;
7372
- };
7373
- color: string;
7374
- outlineWidth: string;
7375
- outlineStyle: string;
7376
- outlineOffset: string;
7377
- appearance: string;
7378
- border: string;
7379
- overflow: string;
7380
- fontSize: string;
7381
- display: string;
7382
- borderRadius: string;
7383
- } | {
7384
- _hover: {
7385
- outline: string;
7386
- outlineColor: string;
7387
- backgroundColor: string;
7388
- } | {
7389
- _hover: {
7390
- backgroundColor: string;
7391
- };
7392
- _active: {
7393
- backgroundColor: string;
7394
- };
7395
- color: string;
7396
- backgroundColor: string;
7397
- };
7398
- _disabled: {
7399
- pointerEvents: string;
7400
- color: string;
7401
- outlineWidth: string;
7402
- outlineColor: string;
7403
- outlineStyle: string;
7404
- outlineOffset: string;
7405
- backgroundColor: string;
7406
- } | {
7407
- pointerEvents: string;
7408
- color: string;
7409
- outline: string;
7410
- outlineColor: string;
7411
- backgroundColor: string;
7412
- };
7413
- _active: {
7414
- backgroundColor: string;
7415
- };
7416
- color: string;
7417
- backgroundColor: string;
7418
- _focusVisible: {
7419
- outlineWidth: string;
7420
- outlineColor: string;
7421
- outlineStyle: string;
7422
- outlineOffset: string;
7423
- };
7424
- outlineWidth: string;
7425
- outlineColor: string;
7426
- outlineStyle: string;
7427
- outlineOffset: string;
7428
- appearance: string;
7429
- border: string;
7430
- overflow: string;
7431
- fontSize: string;
7432
- display: string;
7433
- borderRadius: string;
7434
- } | {
7435
- _hover: {
7436
- outline: string;
7437
- outlineColor: string;
7438
- backgroundColor: string;
7439
- } | {
7440
- _hover: {
7441
- backgroundColor: string;
7442
- };
7443
- _active: {
7444
- backgroundColor: string;
7445
- };
7446
- color: string;
7447
- backgroundColor: string;
7448
- };
7449
- _disabled: {
7450
- pointerEvents: string;
7451
- color: string;
7452
- outlineWidth: string;
7453
- outlineColor: string;
7454
- outlineStyle: string;
7455
- outlineOffset: string;
7456
- backgroundColor: string;
7457
- } | {
7458
- pointerEvents: string;
7459
- color: string;
7460
- outline: string;
7461
- outlineColor: string;
7462
- backgroundColor: string;
7463
- };
7464
- outline: string;
7465
- outlineColor: string;
7466
- backgroundColor: string;
7467
- _focusVisible: {
7468
- outlineWidth: string;
7469
- outlineColor: string;
7470
- outlineStyle: string;
7471
- outlineOffset: string;
7472
- };
7473
- color: string;
7474
- appearance: string;
7475
- border: string;
7476
- overflow: string;
7477
- fontSize: string;
7478
- display: string;
7479
- borderRadius: string;
7480
- } | {
7481
- _hover: {
7482
- outline: string;
7483
- outlineColor: string;
7484
- backgroundColor: string;
7485
- } | {
7486
- _hover: {
7487
- backgroundColor: string;
7488
- };
7489
- _active: {
7490
- backgroundColor: string;
7491
- };
7492
- color: string;
7493
- backgroundColor: string;
7494
- };
7495
- _disabled: {
7496
- pointerEvents: string;
7497
- color: string;
7498
- outlineWidth: string;
7499
- outlineColor: string;
7500
- outlineStyle: string;
7501
- outlineOffset: string;
7502
- backgroundColor: string;
7503
- } | {
7504
- pointerEvents: string;
7505
- color: string;
7506
- outline: string;
7507
- outlineColor: string;
7508
- backgroundColor: string;
7509
- };
7510
- _active: {
7511
- backgroundColor: string;
7512
- };
7513
- color: string;
7514
- backgroundColor: string;
7515
- _focusVisible: {
7516
- outlineWidth: string;
7517
- outlineColor: string;
7518
- outlineStyle: string;
7519
- outlineOffset: string;
7520
- };
7521
- outline: string;
7522
- outlineColor: string;
7523
- appearance: string;
7524
- border: string;
7525
- overflow: string;
7526
- fontSize: string;
7527
- display: string;
7528
- borderRadius: string;
7529
- } | {
7530
- _hover: {
7531
- outline: string;
7532
- outlineColor: string;
7533
- backgroundColor: string;
7534
- } | {
7535
- _hover: {
7536
- backgroundColor: string;
7537
- };
7538
- _active: {
7539
- backgroundColor: string;
7540
- };
7541
- color: string;
7542
- backgroundColor: string;
7543
- };
7544
- _disabled: {
7545
- pointerEvents: string;
7546
- color: string;
7547
- outlineWidth: string;
7548
- outlineColor: string;
7549
- outlineStyle: string;
7550
- outlineOffset: string;
7551
- backgroundColor: string;
7552
- } | {
7553
- pointerEvents: string;
7554
- color: string;
7555
- outline: string;
7556
- outlineColor: string;
7557
- backgroundColor: string;
7558
- };
7559
- outline: string;
7560
- outlineColor: string;
7561
- backgroundColor: string;
7562
- _focusVisible: {
7563
- outlineWidth: string;
7564
- outlineColor: string;
7565
- outlineStyle: string;
7566
- outlineOffset: string;
7567
- };
7568
- _active: {
7569
- backgroundColor: string;
7570
- };
7571
- color: string;
7572
- appearance: string;
7573
- border: string;
7574
- overflow: string;
7575
- fontSize: string;
7576
- display: string;
7577
- borderRadius: string;
7578
- } | {
7579
- _hover: {
7580
- outline: string;
7581
- outlineColor: string;
7582
- backgroundColor: string;
7583
- } | {
7584
- _hover: {
7585
- backgroundColor: string;
7586
- };
7587
- _active: {
7588
- backgroundColor: string;
7589
- };
7590
- color: string;
7591
- backgroundColor: string;
7592
- };
7593
- _disabled: {
7594
- pointerEvents: string;
7595
- color: string;
7596
- outlineWidth: string;
7597
- outlineColor: string;
7598
- outlineStyle: string;
7599
- outlineOffset: string;
7600
- backgroundColor: string;
7601
- } | {
7602
- pointerEvents: string;
7603
- color: string;
7604
- outline: string;
7605
- outlineColor: string;
7606
7314
  backgroundColor: string;
7607
7315
  };
7608
- _active: {
7609
- backgroundColor: string;
7610
- };
7611
- color: string;
7612
- backgroundColor: string;
7613
- _focusVisible: {
7614
- outlineWidth: string;
7615
- outlineColor: string;
7616
- outlineStyle: string;
7617
- outlineOffset: string;
7618
- };
7619
- outline: string;
7620
- outlineColor: string;
7621
- appearance: string;
7622
- border: string;
7623
- overflow: string;
7624
- fontSize: string;
7625
- display: string;
7626
- borderRadius: string;
7627
- } | {
7628
- _hover: {
7629
- outline: string;
7630
- outlineColor: string;
7631
- backgroundColor: string;
7632
- } | {
7633
- _hover: {
7634
- backgroundColor: string;
7635
- };
7636
- _active: {
7637
- backgroundColor: string;
7638
- };
7639
- color: string;
7640
- backgroundColor: string;
7641
- };
7642
- _disabled: {
7643
- pointerEvents: string;
7644
- color: string;
7645
- outlineWidth: string;
7646
- outlineColor: string;
7647
- outlineStyle: string;
7648
- outlineOffset: string;
7649
- backgroundColor: string;
7650
- } | {
7651
- pointerEvents: string;
7652
- color: string;
7653
- outline: string;
7654
- outlineColor: string;
7655
- backgroundColor: string;
7656
- };
7657
- outline: string;
7658
- outlineColor: string;
7659
- backgroundColor: string;
7660
- _focusVisible: {
7661
- outlineWidth: string;
7662
- outlineColor: string;
7663
- outlineStyle: string;
7664
- outlineOffset: string;
7665
- };
7666
- _active: {
7667
- backgroundColor: string;
7668
- };
7669
- color: string;
7670
- appearance: string;
7671
- border: string;
7672
- overflow: string;
7673
- fontSize: string;
7674
- display: string;
7675
- borderRadius: string;
7676
- } | {
7677
- _hover: {
7678
- outline: string;
7679
- outlineColor: string;
7680
- backgroundColor: string;
7681
- } | {
7682
- _hover: {
7683
- backgroundColor: string;
7684
- };
7685
- _active: {
7686
- backgroundColor: string;
7687
- };
7688
- color: string;
7689
- backgroundColor: string;
7690
- };
7691
- _disabled: {
7692
- pointerEvents: string;
7693
- color: string;
7694
- outlineWidth: string;
7695
- outlineColor: string;
7696
- outlineStyle: string;
7697
- outlineOffset: string;
7698
- backgroundColor: string;
7699
- } | {
7700
- pointerEvents: string;
7701
- color: string;
7702
- outline: string;
7703
- outlineColor: string;
7704
- backgroundColor: string;
7705
- };
7706
- _active: {
7707
- backgroundColor: string;
7708
- };
7709
- color: string;
7710
- backgroundColor: string;
7711
- _focusVisible: {
7712
- outlineWidth: string;
7713
- outlineColor: string;
7714
- outlineStyle: string;
7715
- outlineOffset: string;
7716
- };
7717
- outline: string;
7718
- outlineColor: string;
7719
- appearance: string;
7720
- border: string;
7721
- overflow: string;
7722
- fontSize: string;
7723
- display: string;
7724
- borderRadius: string;
7725
- } | {
7726
- _hover: {
7727
- outline: string;
7728
- outlineColor: string;
7729
- backgroundColor: string;
7730
- } | {
7731
- _hover: {
7732
- backgroundColor: string;
7733
- };
7734
- _active: {
7735
- backgroundColor: string;
7736
- };
7737
- color: string;
7738
- backgroundColor: string;
7739
- };
7740
- _disabled: {
7741
- pointerEvents: string;
7742
- color: string;
7743
- outlineWidth: string;
7744
- outlineColor: string;
7745
- outlineStyle: string;
7746
- outlineOffset: string;
7747
- backgroundColor: string;
7748
- } | {
7749
- pointerEvents: string;
7750
- color: string;
7751
- outline: string;
7752
- outlineColor: string;
7753
- backgroundColor: string;
7754
- };
7755
- outline: string;
7756
- outlineColor: string;
7757
- backgroundColor: string;
7758
- _focusVisible: {
7759
- outlineWidth: string;
7760
- outlineColor: string;
7761
- outlineStyle: string;
7762
- outlineOffset: string;
7763
- };
7764
- _active: {
7765
- backgroundColor: string;
7766
- };
7767
- color: string;
7768
- appearance: string;
7769
- border: string;
7770
- overflow: string;
7771
- fontSize: string;
7772
- display: string;
7773
- borderRadius: string;
7774
- } | {
7775
- _hover: {
7776
- outline: string;
7777
- outlineColor: string;
7778
- backgroundColor: string;
7779
- } | {
7780
- _hover: {
7781
- backgroundColor: string;
7782
- };
7783
- _active: {
7784
- backgroundColor: string;
7785
- };
7786
- color: string;
7787
- backgroundColor: string;
7788
- };
7789
- _disabled: {
7790
- pointerEvents: string;
7791
- color: string;
7792
- outlineWidth: string;
7793
- outlineColor: string;
7794
- outlineStyle: string;
7795
- outlineOffset: string;
7796
- backgroundColor: string;
7797
- } | {
7798
- pointerEvents: string;
7799
- color: string;
7800
- outline: string;
7801
- outlineColor: string;
7802
- backgroundColor: string;
7803
- };
7804
- _active: {
7805
- backgroundColor: string;
7806
- };
7807
- color: string;
7808
- backgroundColor: string;
7809
- _focusVisible: {
7810
- outlineWidth: string;
7811
- outlineColor: string;
7812
- outlineStyle: string;
7813
- outlineOffset: string;
7814
- };
7815
- appearance: string;
7816
- border: string;
7817
- overflow: string;
7818
- fontSize: string;
7819
- display: string;
7820
- borderRadius: string;
7821
- }) | undefined;
7822
- sizes?: {
7823
- sm: {
7824
- boxShadow: string;
7825
- _hover: {
7826
- boxShadow: string;
7827
- };
7828
- _active: {
7829
- boxShadow: string;
7830
- };
7831
- };
7832
- lg: {
7316
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7833
7317
  boxShadow: string;
7834
7318
  _hover: {
7835
7319
  boxShadow: string;
7836
- };
7837
- _active: {
7838
- boxShadow: string;
7839
- };
7840
- };
7841
- } | undefined;
7842
- variants?: {
7843
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7844
- _hover: {
7845
- backgroundColor: string;
7846
- };
7847
- _active: {
7848
- backgroundColor: string;
7849
- };
7850
- backgroundColor: string;
7851
- };
7852
- accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7853
- _hover: {
7854
- backgroundColor: string;
7855
- };
7856
- _active: {
7857
- backgroundColor: string;
7858
- };
7859
- backgroundColor: string;
7860
- };
7861
- floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7862
- _hover: {
7863
7320
  backgroundColor: string;
7864
7321
  };
7865
7322
  _active: {
7323
+ boxShadow: string;
7866
7324
  backgroundColor: string;
7867
7325
  };
7868
7326
  backgroundColor: string;
7869
7327
  };
7870
7328
  } | undefined;
7871
7329
  defaultProps?: {
7872
- size?: "sm" | "lg" | undefined;
7330
+ size?: string | number | undefined;
7873
7331
  variant?: "base" | "floating" | "accent" | undefined;
7874
7332
  colorScheme?: string | undefined;
7875
7333
  } | undefined;
@@ -9959,4 +9417,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
9959
9417
  **/
9960
9418
  declare function slugify(text: string | string[], maxLength?: number): string;
9961
9419
 
9962
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
9420
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };