@umami/react-zen 0.63.0 → 0.65.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.
package/dist/index.css CHANGED
@@ -1,24 +1,25 @@
1
1
  /* virtual-css:css:fd9059b0b8139e56f974f8291736b4c8 */
2
- .Icon_icon__YWI0Z {
2
+ .Icon_icon__NzNmN {
3
3
  display: inline-block;
4
+ flex-shrink: 0;
4
5
  }
5
- .Icon_xs__ZjRhN {
6
+ .Icon_xs__MDhiY {
6
7
  width: 12px;
7
8
  height: 12px;
8
9
  }
9
- .Icon_sm__OGRmY {
10
+ .Icon_sm__ZWU0N {
10
11
  width: 16px;
11
12
  height: 16px;
12
13
  }
13
- .Icon_md__NTUzO {
14
+ .Icon_md__YTY3Y {
14
15
  width: 24px;
15
16
  height: 24px;
16
17
  }
17
- .Icon_lg__M2ZjZ {
18
+ .Icon_lg__ZGJlZ {
18
19
  width: 32px;
19
20
  height: 32px;
20
21
  }
21
- .Icon_xl__N2E1Y {
22
+ .Icon_xl__MDU3Y {
22
23
  width: 48px;
23
24
  height: 48px;
24
25
  }
@@ -2236,7 +2237,7 @@
2236
2237
  }
2237
2238
 
2238
2239
  /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
2239
- .Button_button__NmQ1Z {
2240
+ .Button_button__ZTY3M {
2240
2241
  display: flex;
2241
2242
  align-items: center;
2242
2243
  justify-content: center;
@@ -2255,85 +2256,85 @@
2255
2256
  line-height: 1.5;
2256
2257
  --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
2257
2258
  }
2258
- .Button_button__NmQ1Z:disabled {
2259
+ .Button_button__ZTY3M:disabled {
2259
2260
  color: var(--font-color-muted);
2260
2261
  pointer-events: none;
2261
2262
  }
2262
- .Button_button__NmQ1Z:hover {
2263
+ .Button_button__ZTY3M:hover {
2263
2264
  background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
2264
2265
  }
2265
- .Button_button__NmQ1Z[data-pressed] {
2266
+ .Button_button__ZTY3M[data-pressed] {
2266
2267
  background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
2267
2268
  }
2268
- .Button_button__NmQ1Z.Button_primary__OTA1N {
2269
+ .Button_button__ZTY3M.Button_primary__YzkyZ {
2269
2270
  color: var(--primary-font-color) !important;
2270
2271
  background: var(--primary-color);
2271
2272
  }
2272
- .Button_button__NmQ1Z.Button_primary__OTA1N:hover {
2273
+ .Button_button__ZTY3M.Button_primary__YzkyZ:hover {
2273
2274
  background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
2274
2275
  }
2275
- .Button_button__NmQ1Z.Button_primary__OTA1N[data-pressed] {
2276
+ .Button_button__ZTY3M.Button_primary__YzkyZ[data-pressed] {
2276
2277
  background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
2277
2278
  }
2278
- .Button_button__NmQ1Z.Button_primary__OTA1N:disabled {
2279
+ .Button_button__ZTY3M.Button_primary__YzkyZ:disabled {
2279
2280
  color: var(--primary-font-color);
2280
2281
  background: var(--base-color-9);
2281
2282
  }
2282
- .Button_button__NmQ1Z.Button_outline__M2Y2Y {
2283
- background: transparent;
2283
+ .Button_button__ZTY3M.Button_outline__OGU2Z {
2284
+ background: var(--background-color);
2284
2285
  border: var(--border);
2285
2286
  box-shadow: var(--box-shadow-1);
2286
2287
  }
2287
- .Button_button__NmQ1Z.Button_outline__M2Y2Y:hover {
2288
- background: var(--highlight-color);
2288
+ .Button_button__ZTY3M.Button_outline__OGU2Z:hover {
2289
+ border-color: var(--border-color-3);
2289
2290
  }
2290
- .Button_button__NmQ1Z.Button_outline__M2Y2Y[data-pressed] {
2291
- background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
2291
+ .Button_button__ZTY3M.Button_outline__OGU2Z[data-pressed] {
2292
+ background: var(--highlight-color);
2292
2293
  }
2293
- .Button_button__NmQ1Z.Button_quiet__ZWIxO {
2294
+ .Button_button__ZTY3M.Button_quiet__ZTliZ {
2294
2295
  background: transparent;
2295
2296
  }
2296
- .Button_button__NmQ1Z.Button_quiet__ZWIxO:hover {
2297
+ .Button_button__ZTY3M.Button_quiet__ZTliZ:hover {
2297
2298
  background: var(--highlight-color);
2298
2299
  }
2299
- .Button_button__NmQ1Z.Button_quiet__ZWIxO[data-pressed] {
2300
+ .Button_button__ZTY3M.Button_quiet__ZTliZ[data-pressed] {
2300
2301
  background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
2301
2302
  }
2302
- .Button_button__NmQ1Z.Button_danger__NmE2Y {
2303
+ .Button_button__ZTY3M.Button_danger__ZDc1M {
2303
2304
  color: var(--light-color);
2304
2305
  background: var(--danger-color);
2305
2306
  }
2306
- .Button_button__NmQ1Z.Button_danger__NmE2Y:hover {
2307
+ .Button_button__ZTY3M.Button_danger__ZDc1M:hover {
2307
2308
  background: color-mix(in srgb, var(--danger-color), 6% black);
2308
2309
  }
2309
- .Button_button__NmQ1Z.Button_danger__NmE2Y[data-pressed] {
2310
+ .Button_button__ZTY3M.Button_danger__ZDc1M[data-pressed] {
2310
2311
  background: color-mix(in srgb, var(--danger-color), 12% black);
2311
2312
  }
2312
- .Button_button__NmQ1Z.Button_danger__NmE2Y:disabled {
2313
+ .Button_button__ZTY3M.Button_danger__ZDc1M:disabled {
2313
2314
  color: var(--primary-font-color);
2314
2315
  background: var(--base-color-8);
2315
2316
  }
2316
- .Button_button__NmQ1Z.Button_sm__ZTRkN {
2317
+ .Button_button__ZTY3M.Button_sm__NzRiZ {
2317
2318
  font-size: calc(0.9 * var(--font-size));
2318
2319
  padding: calc(0.5 * var(--padding-y)) calc(0.75 * var(--padding-x));
2319
2320
  min-height: calc(0.9 * var(--button-height));
2320
2321
  }
2321
- .Button_button__NmQ1Z.Button_md__ZDE4Z {
2322
+ .Button_button__ZTY3M.Button_md__ZTZiM {
2322
2323
  font-size: var(--font-size);
2323
2324
  padding: var(--padding);
2324
2325
  min-height: var(--button-height);
2325
2326
  }
2326
- .Button_button__NmQ1Z.Button_lg__Yjk1O {
2327
+ .Button_button__ZTY3M.Button_lg__ODE0Z {
2327
2328
  font-size: calc(1.25 * var(--font-size));
2328
2329
  padding: var(--padding-y) calc(1.25 * var(--padding-x));
2329
2330
  min-height: calc(1.25 * var(--button-height));
2330
2331
  }
2331
- .Button_button__NmQ1Z.Button_xl__N2NkM {
2332
+ .Button_button__ZTY3M.Button_xl__NzE0M {
2332
2333
  font-size: calc(1.5 * var(--font-size));
2333
2334
  padding: calc(1.25 * var(--padding-y)) calc(1.25 * var(--padding-x));
2334
2335
  min-height: calc(1.5 * var(--button-height));
2335
2336
  }
2336
- body a.Button_button__NmQ1Z {
2337
+ body a.Button_button__ZTY3M {
2337
2338
  color: inherit;
2338
2339
  text-decoration: none;
2339
2340
  }
@@ -2601,15 +2602,17 @@ body a.Button_button__NmQ1Z {
2601
2602
  }
2602
2603
 
2603
2604
  /* virtual-css:css:642a816d71e0e4e5346089e7fb2bf78b */
2604
- .Block_block__MGVlZ {
2605
+ .Block_block__MmJiM {
2605
2606
  display: flex;
2606
2607
  flex-direction: row;
2607
2608
  align-items: center;
2608
2609
  font-size: var(--font-size);
2609
2610
  gap: var(--gap);
2610
2611
  padding: var(--padding);
2612
+ border: 1px solid transparent;
2611
2613
  border-radius: var(--border-radius);
2612
2614
  line-height: 1.5;
2615
+ min-height: calc((1.5 * var(--font-size)) + (2 * var(--padding-y)));
2613
2616
  }
2614
2617
 
2615
2618
  /* virtual-css:css:24928f94983bde06afba78ec92a4df4b */
@@ -2949,19 +2952,19 @@ body a.Button_button__NmQ1Z {
2949
2952
  }
2950
2953
 
2951
2954
  /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
2952
- .input_field__YjQxZ {
2955
+ .input_field__NGM0Z {
2953
2956
  position: relative;
2954
2957
  min-width: 240px;
2955
2958
  }
2956
- .input_field__YjQxZ,
2957
- .input_row__YjAxO {
2959
+ .input_field__NGM0Z,
2960
+ .input_row__NjY4Y {
2958
2961
  position: relative;
2959
2962
  }
2960
- .input_field__YjQxZ[data-readonly] .input_input__NjMwN,
2961
- .input_field__YjQxZ[data-disabled] .input_input__NjMwN {
2963
+ .input_field__NGM0Z[data-readonly] .input_input__MjUyM,
2964
+ .input_field__NGM0Z[data-disabled] .input_input__MjUyM {
2962
2965
  background: var(--base-color-4);
2963
2966
  }
2964
- .input_input__NjMwN {
2967
+ .input_input__MjUyM {
2965
2968
  font-size: var(--font-size);
2966
2969
  color: var(--font-color);
2967
2970
  border: var(--border);
@@ -2972,37 +2975,36 @@ body a.Button_button__NmQ1Z {
2972
2975
  line-height: 1.5rem;
2973
2976
  width: 100%;
2974
2977
  }
2975
- .input_input__NjMwN:focus {
2978
+ .input_input__MjUyM:focus {
2976
2979
  border-color: transparent;
2977
2980
  outline: var(--outline);
2978
2981
  }
2979
- .input_input__NjMwN::placeholder {
2982
+ .input_input__MjUyM::placeholder {
2980
2983
  color: var(--font-color-muted);
2981
2984
  }
2982
- .input_input__NjMwN:disabled {
2985
+ .input_input__MjUyM:disabled {
2983
2986
  color: var(--font-color-muted);
2984
2987
  }
2985
- .input_input__NjMwN::-webkit-search-cancel-button,
2986
- .input_input__NjMwN::-webkit-search-decoration {
2988
+ .input_input__MjUyM::-webkit-search-cancel-button,
2989
+ .input_input__MjUyM::-webkit-search-decoration {
2987
2990
  -webkit-appearance: none;
2988
2991
  }
2989
- .input_icon__OTVkO {
2992
+ .input_icon__ZjY5O {
2990
2993
  color: var(--font-color-muted);
2991
- background: var(--background-color);
2992
2994
  }
2993
- .input_icon__OTVkO:hover {
2995
+ .input_icon__ZjY5O:hover {
2994
2996
  color: var(--font-color);
2995
2997
  cursor: pointer;
2996
2998
  }
2997
2999
 
2998
3000
  /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
2999
- .TextField_allowCopy__NmUxY {
3001
+ .TextField_allowCopy__Y2RhY {
3000
3002
  padding-right: 32px;
3001
3003
  }
3002
- .TextField_icon__OTcxO {
3004
+ .TextField_icon__MWVlN {
3003
3005
  position: absolute;
3004
- top: var(--spacing-4);
3005
- right: var(--spacing-3);
3006
+ top: calc(var(--padding-y) + 4px);
3007
+ right: var(--padding-x);
3006
3008
  background: none;
3007
3009
  }
3008
3010
 
@@ -3083,7 +3085,7 @@ body a.Button_button__NmQ1Z {
3083
3085
  }
3084
3086
 
3085
3087
  /* virtual-css:css:e66162403f9946d7217dc462fee28120 */
3086
- .Dots_dots__NzQ0Z {
3088
+ .Dots_dots__YzQxM {
3087
3089
  position: relative;
3088
3090
  display: inline-flex;
3089
3091
  justify-content: center;
@@ -3091,21 +3093,21 @@ body a.Button_button__NmQ1Z {
3091
3093
  min-height: 50px;
3092
3094
  gap: 8px;
3093
3095
  }
3094
- .Dots_dot__MDk2Z {
3095
- width: 10px;
3096
- height: 10px;
3096
+ .Dots_dot__ZDdiZ {
3097
+ width: 8px;
3098
+ height: 8px;
3097
3099
  border-radius: 100%;
3098
3100
  background: color-mix(in srgb, var(--font-color), 50% transparent);
3099
- animation: Dots_dots-blink__M2M4Z 1.2s infinite;
3101
+ animation: Dots_dots-blink__NDE3Y 1.2s infinite;
3100
3102
  animation-fill-mode: both;
3101
3103
  }
3102
- .Dots_dot__MDk2Z:nth-child(2) {
3104
+ .Dots_dot__ZDdiZ:nth-child(2) {
3103
3105
  animation-delay: 0.2s;
3104
3106
  }
3105
- .Dots_dot__MDk2Z:nth-child(3) {
3107
+ .Dots_dot__ZDdiZ:nth-child(3) {
3106
3108
  animation-delay: 0.4s;
3107
3109
  }
3108
- @keyframes Dots_dots-blink__M2M4Z {
3110
+ @keyframes Dots_dots-blink__NDE3Y {
3109
3111
  0% {
3110
3112
  opacity: 0.2;
3111
3113
  }
@@ -3117,6 +3119,75 @@ body a.Button_button__NmQ1Z {
3117
3119
  }
3118
3120
  }
3119
3121
 
3122
+ /* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
3123
+ .Tooltip_tooltip__YmY4Z {
3124
+ forced-color-adjust: none;
3125
+ outline: none;
3126
+ }
3127
+ .Tooltip_bubble__MWE0N {
3128
+ color: var(--light-color);
3129
+ background: rgba(0, 0, 0, 0.8);
3130
+ padding: var(--padding);
3131
+ border-radius: var(--border-radius);
3132
+ }
3133
+ .Tooltip_tooltip__YmY4Z[data-placement=top] {
3134
+ margin-bottom: 8px;
3135
+ --origin: translateY(4px);
3136
+ }
3137
+ .Tooltip_tooltip__YmY4Z[data-placement=bottom] {
3138
+ margin-top: 8px;
3139
+ --origin: translateY(-4px);
3140
+ }
3141
+ .Tooltip_tooltip__YmY4Z[data-placement=bottom] .Tooltip_arrow__OGM1M svg {
3142
+ transform: rotate(180deg);
3143
+ }
3144
+ .Tooltip_tooltip__YmY4Z[data-placement=right] {
3145
+ margin-left: 8px;
3146
+ --origin: translateX(-4px);
3147
+ }
3148
+ .Tooltip_tooltip__YmY4Z[data-placement=right] .Tooltip_arrow__OGM1M svg {
3149
+ transform: rotate(90deg);
3150
+ }
3151
+ .Tooltip_tooltip__YmY4Z[data-placement=left] {
3152
+ margin-right: 8px;
3153
+ --origin: translateX(4px);
3154
+ }
3155
+ .Tooltip_tooltip__YmY4Z[data-placement=left] .Tooltip_arrow__OGM1M svg {
3156
+ transform: rotate(-90deg);
3157
+ }
3158
+ .Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M {
3159
+ width: 8px;
3160
+ height: 8px;
3161
+ }
3162
+ .Tooltip_tooltip__YmY4Z .Tooltip_arrow__OGM1M svg {
3163
+ display: block;
3164
+ fill: rgba(0, 0, 0, 0.8);
3165
+ }
3166
+ .Tooltip_tooltip__YmY4Z[data-entering] {
3167
+ animation: Tooltip_slide__MGVmY 200ms;
3168
+ }
3169
+ .Tooltip_tooltip__YmY4Z[data-exiting] {
3170
+ animation: Tooltip_slide__MGVmY 200ms reverse ease-in;
3171
+ }
3172
+ @keyframes Tooltip_slide__MGVmY {
3173
+ from {
3174
+ transform: var(--origin);
3175
+ opacity: 0;
3176
+ }
3177
+ to {
3178
+ transform: translateY(0);
3179
+ opacity: 1;
3180
+ }
3181
+ }
3182
+
3183
+ /* virtual-css:css:a37d08939f4c2e286eced2d454e614ea */
3184
+ .FloatingTooltip_floating__ZjM4N {
3185
+ position: fixed;
3186
+ pointer-events: none;
3187
+ z-index: 9999;
3188
+ transform: translate(-50%, calc(-100% - 10px));
3189
+ }
3190
+
3120
3191
  /* virtual-css:css:94870e251b7b77526d8ae103079be601 */
3121
3192
  .Heading_heading__MGIyZ {
3122
3193
  color: var(--heading-color);
@@ -3589,111 +3660,64 @@ body a.Button_button__NmQ1Z {
3589
3660
  cursor: pointer;
3590
3661
  }
3591
3662
 
3592
- /* virtual-css:css:34d15f1efb5cfdf86de5abea08f767ce */
3593
- .Tooltip_tooltip__NDBjM {
3594
- font-size: var(--font-size);
3595
- color: var(--light-color);
3596
- background: rgba(0, 0, 0, 0.8);
3597
- forced-color-adjust: none;
3598
- outline: none;
3599
- padding: var(--padding);
3600
- border-radius: var(--border-radius);
3601
- max-width: 150px;
3602
- transform: translate3d(0, 0, 0);
3603
- }
3604
- .Tooltip_tooltip__NDBjM[data-placement=top] {
3605
- margin-bottom: 8px;
3606
- --origin: translateY(4px);
3607
- }
3608
- .Tooltip_tooltip__NDBjM[data-placement=bottom] {
3609
- margin-top: 8px;
3610
- --origin: translateY(-4px);
3611
- }
3612
- .Tooltip_tooltip__NDBjM[data-placement=bottom] .Tooltip_arrow__NzM4M svg {
3613
- transform: rotate(180deg);
3614
- }
3615
- .Tooltip_tooltip__NDBjM[data-placement=right] {
3616
- margin-left: 8px;
3617
- --origin: translateX(-4px);
3618
- }
3619
- .Tooltip_tooltip__NDBjM[data-placement=right] .Tooltip_arrow__NzM4M svg {
3620
- transform: rotate(90deg);
3621
- }
3622
- .Tooltip_tooltip__NDBjM[data-placement=left] {
3623
- margin-right: 8px;
3624
- --origin: translateX(4px);
3625
- }
3626
- .Tooltip_tooltip__NDBjM[data-placement=left] .Tooltip_arrow__NzM4M svg {
3627
- transform: rotate(-90deg);
3628
- }
3629
- .Tooltip_tooltip__NDBjM .Tooltip_arrow__NzM4M svg {
3630
- display: block;
3631
- fill: rgba(0, 0, 0, 0.8);
3632
- }
3633
- .Tooltip_tooltip__NDBjM[data-entering] {
3634
- animation: Tooltip_slide__NzNkY 200ms;
3635
- }
3636
- .Tooltip_tooltip__NDBjM[data-exiting] {
3637
- animation: Tooltip_slide__NzNkY 200ms reverse ease-in;
3638
- }
3639
- @keyframes Tooltip_slide__NzNkY {
3640
- from {
3641
- transform: var(--origin);
3642
- opacity: 0;
3643
- }
3644
- to {
3645
- transform: translateY(0);
3646
- opacity: 1;
3647
- }
3648
- }
3649
-
3650
3663
  /* virtual-css:css:12d12fae43d9120371ddbb4f1c814f07 */
3651
- .SideNav_sidenav__NThiY {
3664
+ .SideNav_sidenav__NTNmY {
3652
3665
  height: 100%;
3653
3666
  font-size: var(--font-size);
3654
3667
  background-color: var(--base-color-1);
3655
3668
  border-right: 1px solid var(--border-color);
3656
3669
  width: 200px;
3670
+ transition: width 0.1s ease-out;
3671
+ overflow: hidden;
3657
3672
  }
3658
- .SideNav_header__YTM2M {
3673
+ .SideNav_header__NzhjN {
3659
3674
  display: flex;
3660
3675
  align-items: center;
3661
3676
  gap: var(--gap);
3662
3677
  padding: var(--padding);
3663
3678
  }
3664
- .SideNav_name__MWQ1M {
3679
+ .SideNav_name__ZWUxM {
3665
3680
  font-weight: var(--font-weight-bold);
3666
3681
  }
3667
- .SideNav_section__MTUyY {
3682
+ .SideNav_section__MmE3N {
3668
3683
  padding: var(--spacing-3);
3684
+ overflow: hidden;
3669
3685
  }
3670
- .SideNav_title__MTNlY {
3686
+ .SideNav_title__N2Y0O {
3671
3687
  font-weight: var(--font-weight-bold);
3672
3688
  }
3673
- .SideNav_content__OWM3N {
3689
+ .SideNav_content__MzA2M {
3674
3690
  display: grid;
3691
+ min-height: 40px;
3675
3692
  gap: var(--gap);
3693
+ overflow: hidden;
3676
3694
  }
3677
- .SideNav_item__YTE4Z {
3695
+ .SideNav_item__OGU5M {
3678
3696
  display: flex;
3679
3697
  align-items: center;
3680
3698
  justify-content: flex-start;
3681
3699
  width: 100%;
3700
+ min-height: 40px;
3682
3701
  color: var(--font-color-muted);
3683
3702
  gap: var(--gap);
3684
3703
  padding: var(--padding);
3685
3704
  cursor: pointer;
3705
+ white-space: nowrap;
3706
+ overflow: hidden;
3686
3707
  }
3687
- .SideNav_item__YTE4Z:hover {
3708
+ .SideNav_item__OGU5M:hover {
3688
3709
  color: var(--font-color);
3689
3710
  background-color: var(--base-color-2);
3690
3711
  }
3691
- .SideNav_collapsed__YWMzZ .SideNav_label__YzExN {
3692
- display: none;
3712
+ .SideNav_label__NjFiY {
3713
+ transition: opacity 0.3s;
3693
3714
  }
3694
- .SideNav_collapsed__YWMzZ {
3695
- width: 64px;
3696
- transition: width 0.3s ease-in-out;
3715
+ .SideNav_collapsed__NTBlM .SideNav_label__NjFiY {
3716
+ opacity: 0;
3717
+ }
3718
+ .SideNav_collapsed__NTBlM {
3719
+ width: 68px;
3720
+ transition: width 0.2s ease-in-out;
3697
3721
  }
3698
3722
 
3699
3723
  /* virtual-css:css:02d4c53a13519acb012573b18f89110d */
@@ -3788,34 +3812,32 @@ body a.Button_button__NmQ1Z {
3788
3812
  }
3789
3813
 
3790
3814
  /* virtual-css:css:25b38ea4838450cf917453747a735c4a */
3791
- .StatusLight_statuslight__MmJmM {
3792
- font-size: var(--font-size);
3793
- color: var(--font-color);
3815
+ .StatusLight_statuslight__MTliM {
3794
3816
  display: inline-flex;
3795
3817
  align-items: center;
3796
3818
  gap: 12px;
3797
3819
  }
3798
- .StatusLight_status__YTQ4M,
3799
- .StatusLight_bg__N2QyO {
3820
+ .StatusLight_status__MDNmO,
3821
+ .StatusLight_bg__MjVjN {
3800
3822
  width: 10px;
3801
3823
  height: 10px;
3802
3824
  border-radius: 100%;
3803
3825
  background: #fff;
3804
3826
  position: relative;
3805
3827
  }
3806
- .StatusLight_status__YTQ4M.StatusLight_success__Njk1N {
3828
+ .StatusLight_status__MDNmO.StatusLight_success__ZWI1N {
3807
3829
  background: var(--success-color);
3808
3830
  }
3809
- .StatusLight_status__YTQ4M.StatusLight_warning__YTEyN {
3831
+ .StatusLight_status__MDNmO.StatusLight_warning__YWRmM {
3810
3832
  background: var(--warning-color);
3811
3833
  }
3812
- .StatusLight_status__YTQ4M.StatusLight_error__MzdjZ {
3834
+ .StatusLight_status__MDNmO.StatusLight_error__NjdjM {
3813
3835
  background: var(--danger-color);
3814
3836
  }
3815
- .StatusLight_status__YTQ4M.StatusLight_active__YTdjM {
3837
+ .StatusLight_status__MDNmO.StatusLight_active__NGZiY {
3816
3838
  background: var(--active-color);
3817
3839
  }
3818
- .StatusLight_status__YTQ4M.StatusLight_inactive__ODZiY {
3840
+ .StatusLight_status__MDNmO.StatusLight_inactive__NDI0Z {
3819
3841
  background: var(--inactive-color);
3820
3842
  }
3821
3843
 
package/dist/index.d.ts CHANGED
@@ -5,10 +5,11 @@
5
5
  // ../../react-hook-form
6
6
  // ../../@/lib/types
7
7
  // ../../@/components/toast/Toaster
8
+ // ../../@/components/Tooltip
8
9
  // ../../@/components/Block
9
10
 
10
11
  declare module '@umami/react-zen' {
11
- import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger, RouterProvider } from 'react-aria-components';
12
+ import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger, RouterProvider, Focusable, Pressable } from 'react-aria-components';
12
13
  import { Form } from '@umami/react-zen/forms/Form';
13
14
  import { FormButtons } from '@umami/react-zen/forms/FormButtons';
14
15
  import { FormField } from '@umami/react-zen/forms/FormField';
@@ -39,6 +40,7 @@ declare module '@umami/react-zen' {
39
40
  import { DataTable, DataColumn } from '@umami/react-zen/DataTable';
40
41
  import { Dots } from '@umami/react-zen/Dots';
41
42
  import { Flexbox } from '@umami/react-zen/Flexbox';
43
+ import { FloatingTooltip } from '@umami/react-zen/FloatingTooltip';
42
44
  import { Grid } from '@umami/react-zen/Grid';
43
45
  import { Heading } from '@umami/react-zen/Heading';
44
46
  import { HoverTrigger } from '@umami/react-zen/HoverTrigger';
@@ -75,9 +77,9 @@ declare module '@umami/react-zen' {
75
77
  import { ThemeButton } from '@umami/react-zen/ThemeButton';
76
78
  import { Toggle } from '@umami/react-zen/Toggle';
77
79
  import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
78
- import { Tooltip } from '@umami/react-zen/Tooltip';
80
+ import { Tooltip, TooltipBubble } from '@umami/react-zen/Tooltip';
79
81
  import { ZenProvider } from '@umami/react-zen/ZenProvider';
80
- export { useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Block, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Form, FormButtons, FormField, FormResetButton, FormSubmitButton, Grid, NavBar, NavBarItem, Heading, HoverTrigger, Icon, Icons, Image, InlineEditField, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Modal, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, RouterProvider, SearchField, Select, SideNav, SideNavHeader, SideNavItem, SideNavSection, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toast, Toaster, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
82
+ export { useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Block, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, FloatingTooltip, Focusable, Form, FormButtons, FormField, FormResetButton, FormSubmitButton, Grid, NavBar, NavBarItem, Heading, HoverTrigger, Icon, Icons, Image, InlineEditField, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Modal, PasswordField, Popover, Pressable, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, RouterProvider, SearchField, Select, SideNav, SideNavHeader, SideNavItem, SideNavSection, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toast, Toaster, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, TooltipTrigger, ZenProvider, };
81
83
  }
82
84
 
83
85
  declare module '@umami/react-zen/forms/Form' {
@@ -280,11 +282,13 @@ declare module '@umami/react-zen/Blockquote' {
280
282
 
281
283
  declare module '@umami/react-zen/Box' {
282
284
  import { HTMLAttributes } from 'react';
283
- import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor } from '@/lib/types';
285
+ import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor, FontSize, FontWeight } from '@/lib/types';
284
286
  interface BoxProps extends HTMLAttributes<HTMLElement> {
285
287
  display?: Responsive<Display>;
286
288
  color?: FontColor;
287
289
  backgroundColor?: BackgroundColor;
290
+ fontSize?: Responsive<FontSize>;
291
+ fontWeight?: Responsive<FontWeight>;
288
292
  borderSize?: Responsive<BorderSize>;
289
293
  borderRadius?: Responsive<BorderRadius>;
290
294
  shadow?: Responsive<BoxShadow>;
@@ -329,7 +333,7 @@ declare module '@umami/react-zen/Box' {
329
333
  as?: string;
330
334
  asChild?: boolean;
331
335
  }
332
- function Box({ display, color, backgroundColor, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
336
+ function Box({ display, color, backgroundColor, fontSize, fontWeight, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
333
337
  export { Box };
334
338
  export type { BoxProps };
335
339
  }
@@ -485,6 +489,13 @@ declare module '@umami/react-zen/Flexbox' {
485
489
  export function Flexbox({ display, direction, wrap, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, className, style, children, ...props }: FlexboxProps): import("react").JSX.Element;
486
490
  }
487
491
 
492
+ declare module '@umami/react-zen/FloatingTooltip' {
493
+ import { TooltipBubbleProps } from '@/components/Tooltip';
494
+ export interface FloatingTooltipProps extends TooltipBubbleProps {
495
+ }
496
+ export function FloatingTooltip({ className, style, children, ...props }: FloatingTooltipProps): import("react").JSX.Element;
497
+ }
498
+
488
499
  declare module '@umami/react-zen/Grid' {
489
500
  import { GridDisplay, GridAutoFlow, Responsive, Spacing, GridTemplateRows, GridTemplateColumns, GridTemplateAreas, AlignContent, AlignItems, JustifyContent, JustifyItems } from '@/lib/types';
490
501
  import { BoxProps } from '@umami/react-zen/Box';
@@ -586,6 +597,7 @@ declare module '@umami/react-zen/Image' {
586
597
  declare module '@umami/react-zen/InlineEditField' {
587
598
  import { ReactNode } from 'react';
588
599
  interface InlineEditFieldProps {
600
+ name?: string;
589
601
  value: string;
590
602
  defaultEdit?: boolean;
591
603
  onChange?: (value: string) => void;
@@ -594,7 +606,7 @@ declare module '@umami/react-zen/InlineEditField' {
594
606
  className?: string;
595
607
  children?: ReactNode;
596
608
  }
597
- function InlineEditField({ value: defaultValue, defaultEdit, className, children, onChange, onCommit, onCancel, ...props }: InlineEditFieldProps): import("react").JSX.Element;
609
+ function InlineEditField({ name, value: defaultValue, defaultEdit, className, children, onChange, onCommit, onCancel, ...props }: InlineEditFieldProps): import("react").JSX.Element;
598
610
  export { InlineEditField };
599
611
  export type { InlineEditFieldProps };
600
612
  }
@@ -959,10 +971,18 @@ declare module '@umami/react-zen/ToggleGroup' {
959
971
  }
960
972
 
961
973
  declare module '@umami/react-zen/Tooltip' {
962
- import { TooltipProps } from 'react-aria-components';
963
- function Tooltip({ children, className, ...props }: TooltipProps): import("react").JSX.Element;
964
- export { Tooltip };
965
- export type { TooltipProps };
974
+ import { HTMLAttributes } from 'react';
975
+ import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
976
+ interface TooltipProps extends AriaTooltipProps {
977
+ showArrow?: boolean;
978
+ }
979
+ function Tooltip({ children, className, showArrow, ...props }: TooltipProps): import("react").JSX.Element;
980
+ interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
981
+ showArrow?: boolean;
982
+ }
983
+ function TooltipBubble({ showArrow, children, ...props }: TooltipBubbleProps): import("react").JSX.Element;
984
+ export { Tooltip, TooltipBubble };
985
+ export type { TooltipProps, TooltipBubbleProps };
966
986
  }
967
987
 
968
988
  declare module '@umami/react-zen/ZenProvider' {