@rolemodel/optics 0.4.0 → 0.4.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.
@@ -19,6 +19,7 @@ What changed in this PR?
19
19
 
20
20
  - [ ] Have you updated any usage of changed tokens?
21
21
  - [ ] Have you updated the docs with any component changes?
22
+ - [ ] Have you updated the dependency graph with any component changes?
22
23
  - [ ] Have you run linters?
23
24
  - [ ] Have you run prettier?
24
25
  - [ ] Have you tried building the css?
@@ -29,6 +29,6 @@ jobs:
29
29
  with:
30
30
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
31
31
  BRANCH: gh-pages # The branch the action should deploy to.
32
- FOLDER: docs-build # The folder that the build-storybook script generates files.
32
+ FOLDER: storybook-static # The folder that the build-storybook script generates files.
33
33
  CLEAN: true # Automatically remove deleted files from the deploy branch
34
34
  TARGET_FOLDER: docs # The folder that we serve our Storybook files from
package/README.md CHANGED
@@ -61,6 +61,8 @@ Additional stories can be added using the following command, or copying an exist
61
61
  npm run generate
62
62
  ```
63
63
 
64
+ The visual graphic found on the Selective Imports page in the documentation is generated from the `tools/generate-graph.dot` file. You can preview and export a newer svg version of the graphic by using the `tintinweb.graphviz-interactive-preview` VSCode extension.
65
+
64
66
  ## License
65
67
 
66
68
  [MIT](LICENSE)
@@ -2097,32 +2097,38 @@ small {
2097
2097
  }
2098
2098
  }
2099
2099
 
2100
- .alert-notice, .alert-info, .alert-danger, .alert-warning {
2100
+ .alert-notice, .alert-info, .alert-danger,
2101
+ .alert-alert, .alert-warning {
2101
2102
  display: flex;
2102
2103
  align-items: center;
2103
2104
  padding: var(--op-space-x-small) var(--op-space-medium);
2104
2105
  border-radius: var(--op-radius-medium);
2105
2106
  gap: var(--op-space-small);
2106
2107
  }
2107
- .alert-notice .alert__icon, .alert-info .alert__icon, .alert-danger .alert__icon, .alert-warning .alert__icon {
2108
+ .alert-notice .alert__icon, .alert-info .alert__icon, .alert-danger .alert__icon,
2109
+ .alert-alert .alert__icon, .alert-warning .alert__icon {
2108
2110
  /* stylelint-disable scss/at-extend-no-missing-placeholder */
2109
2111
  /* stylelint-enable scss/at-extend-no-missing-placeholder */
2110
2112
  line-height: var(--op-line-height-dense);
2111
2113
  }
2112
- .alert-notice .alert__messages, .alert-info .alert__messages, .alert-danger .alert__messages, .alert-warning .alert__messages {
2114
+ .alert-notice .alert__messages, .alert-info .alert__messages, .alert-danger .alert__messages,
2115
+ .alert-alert .alert__messages, .alert-warning .alert__messages {
2113
2116
  display: flex;
2114
2117
  flex: 1;
2115
2118
  flex-direction: column;
2116
2119
  gap: var(--op-space-2x-small);
2117
2120
  }
2118
- .alert-notice .alert__title, .alert-info .alert__title, .alert-danger .alert__title, .alert-warning .alert__title {
2121
+ .alert-notice .alert__title, .alert-info .alert__title, .alert-danger .alert__title,
2122
+ .alert-alert .alert__title, .alert-warning .alert__title {
2119
2123
  font-size: var(--op-font-medium);
2120
2124
  font-weight: var(--op-font-weight-medium);
2121
2125
  }
2122
- .alert-notice .alert__description, .alert-info .alert__description, .alert-danger .alert__description, .alert-warning .alert__description {
2126
+ .alert-notice .alert__description, .alert-info .alert__description, .alert-danger .alert__description,
2127
+ .alert-alert .alert__description, .alert-warning .alert__description {
2123
2128
  font-size: var(--op-font-small);
2124
2129
  }
2125
- .alert--flash.alert-notice, .alert--flash.alert-info, .alert--flash.alert-danger, .alert--flash.alert-warning {
2130
+ .alert--flash.alert-notice, .alert--flash.alert-info, .alert--flash.alert-danger,
2131
+ .alert--flash.alert-alert, .alert--flash.alert-warning {
2126
2132
  position: fixed;
2127
2133
  z-index: var(--op-z-index-alert-group);
2128
2134
  top: var(--op-space-large);
@@ -2155,30 +2161,36 @@ small {
2155
2161
  color: var(--op-color-alerts-warning-on-base-alt);
2156
2162
  }
2157
2163
 
2158
- .alert-danger {
2164
+ .alert-danger,
2165
+ .alert-alert {
2159
2166
  background-color: var(--op-color-alerts-danger-plus-eight);
2160
2167
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
2161
2168
  color: var(--op-color-alerts-danger-on-plus-eight);
2162
2169
  /* stylelint-disable no-descending-specificity */
2163
2170
  /* stylelint-enable no-descending-specificity */
2164
2171
  }
2165
- .alert-danger .alert__title {
2172
+ .alert-danger .alert__title,
2173
+ .alert-alert .alert__title {
2166
2174
  color: var(--op-color-alerts-danger-on-plus-eight-alt);
2167
2175
  }
2168
- .alert-danger.alert--muted {
2176
+ .alert-danger.alert--muted,
2177
+ .alert-alert.alert--muted {
2169
2178
  background-color: var(--op-color-alerts-danger-plus-five);
2170
2179
  box-shadow: none;
2171
2180
  color: var(--op-color-alerts-danger-on-plus-five);
2172
2181
  }
2173
- .alert-danger.alert--muted .alert__title {
2182
+ .alert-danger.alert--muted .alert__title,
2183
+ .alert-alert.alert--muted .alert__title {
2174
2184
  color: var(--op-color-alerts-danger-on-plus-five-alt);
2175
2185
  }
2176
- .alert-danger.alert--filled {
2186
+ .alert-danger.alert--filled,
2187
+ .alert-alert.alert--filled {
2177
2188
  background-color: var(--op-color-alerts-danger-base);
2178
2189
  box-shadow: none;
2179
2190
  color: var(--op-color-alerts-danger-on-base);
2180
2191
  }
2181
- .alert-danger.alert--filled .alert__title {
2192
+ .alert-danger.alert--filled .alert__title,
2193
+ .alert-alert.alert--filled .alert__title {
2182
2194
  color: var(--op-color-alerts-danger-on-base-alt);
2183
2195
  }
2184
2196
 
@@ -2236,6 +2248,75 @@ small {
2236
2248
  color: var(--op-color-alerts-notice-on-base-alt);
2237
2249
  }
2238
2250
 
2251
+ .avatar {
2252
+ --_op-avatar-border-radius: var(--op-radius-circle);
2253
+ --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
2254
+ --_op-avatar-outer-border-color: var(--op-color-neutral-base);
2255
+ --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
2256
+ --_op-avatar-outer-border-width: var(--op-border-width-large);
2257
+ --_op-avatar-disabled-opacity: 0.4;
2258
+ --_op-avatar-hover-opacity: 0.2;
2259
+ --_op-avatar-size-small: 3.2rem;
2260
+ --_op-avatar-size-medium: 4rem;
2261
+ --_op-avatar-size-large: 5.6rem;
2262
+ --__op-avatar-size: var(--_op-avatar-size-large);
2263
+ position: relative;
2264
+ z-index: 1;
2265
+ display: block;
2266
+ overflow: hidden;
2267
+ width: var(--__op-avatar-size);
2268
+ height: var(--__op-avatar-size);
2269
+ border-radius: var(--_op-avatar-border-radius);
2270
+ }
2271
+ .avatar::before {
2272
+ position: absolute;
2273
+ z-index: 2;
2274
+ content: "";
2275
+ inset: 0;
2276
+ }
2277
+ .avatar::after {
2278
+ position: absolute;
2279
+ z-index: 3;
2280
+ border-radius: var(--_op-avatar-border-radius);
2281
+ box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color), inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
2282
+ content: "";
2283
+ inset: 0;
2284
+ }
2285
+ .avatar img {
2286
+ width: 100%;
2287
+ height: 100%;
2288
+ object-fit: cover;
2289
+ }
2290
+ .avatar--disabled.avatar {
2291
+ opacity: var(--_op-avatar-disabled-opacity);
2292
+ pointer-events: none;
2293
+ }
2294
+ .avatar:hover:not(div, .avatar--disabled) {
2295
+ --_op-avatar-inner-border-color: var(--op-color-primary-base);
2296
+ --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
2297
+ cursor: pointer;
2298
+ }
2299
+ .avatar:hover:not(div, .avatar--disabled)::before {
2300
+ background-color: var(--op-color-primary-base);
2301
+ opacity: var(--_op-avatar-hover-opacity);
2302
+ }
2303
+ .avatar:focus, .avatar:focus-visible, .avatar:focus-within {
2304
+ outline: none;
2305
+ }
2306
+ .avatar:focus-visible:not(.avatar--disabled) {
2307
+ --_op-avatar-outer-border-color: var(--op-color-primary-base);
2308
+ cursor: pointer;
2309
+ }
2310
+ .avatar--small.avatar {
2311
+ --__op-avatar-size: var(--_op-avatar-size-small);
2312
+ }
2313
+ .avatar--medium.avatar {
2314
+ --__op-avatar-size: var(--_op-avatar-size-medium);
2315
+ }
2316
+ .avatar--large.avatar {
2317
+ --__op-avatar-size: var(--_op-avatar-size-large);
2318
+ }
2319
+
2239
2320
  .badge-notice, .badge-info, .badge-danger, .badge-warning, .badge-primary, .badge {
2240
2321
  display: inline-flex;
2241
2322
  align-items: center;
@@ -2308,13 +2389,17 @@ small {
2308
2389
  --_op-btn-font-small: var(--op-font-x-small);
2309
2390
  --_op-btn-font-medium: var(--op-font-small);
2310
2391
  --_op-btn-font-large: var(--op-font-small);
2392
+ --_op-btn-padding-small: 0 var(--op-space-x-small);
2393
+ --_op-btn-padding-medium: 0 var(--op-space-small);
2394
+ --_op-btn-padding-large: 0 var(--op-space-small);
2311
2395
  --__op-btn-height: var(--_op-btn-height-large);
2312
2396
  --__op-btn-font-size: var(--_op-btn-font-large);
2397
+ --__op-btn-padding: var(--_op-btn-padding-large);
2313
2398
  display: inline-flex;
2314
2399
  min-height: var(--__op-btn-height);
2315
2400
  align-items: center;
2316
2401
  justify-content: center;
2317
- padding: 0 var(--op-space-small);
2402
+ padding: var(--__op-btn-padding);
2318
2403
  border-radius: var(--op-radius-medium);
2319
2404
  appearance: none;
2320
2405
  cursor: pointer;
@@ -2342,14 +2427,17 @@ small {
2342
2427
  .btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn {
2343
2428
  --__op-btn-height: var(--_op-btn-height-small);
2344
2429
  --__op-btn-font-size: var(--_op-btn-font-small);
2430
+ --__op-btn-padding: var(--_op-btn-padding-small);
2345
2431
  }
2346
2432
  .btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn {
2347
2433
  --__op-btn-height: var(--_op-btn-height-medium);
2348
2434
  --__op-btn-font-size: var(--_op-btn-font-medium);
2435
+ --__op-btn-padding: var(--_op-btn-padding-medium);
2349
2436
  }
2350
2437
  .btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
2351
2438
  --__op-btn-height: var(--_op-btn-height-large);
2352
2439
  --__op-btn-font-size: var(--_op-btn-font-large);
2440
+ --__op-btn-padding: var(--_op-btn-padding-large);
2353
2441
  }
2354
2442
  .btn--disabled.btn-warning, .btn--disabled.btn-delete, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-warning:disabled, .btn-delete:disabled, .btn-primary:disabled, .btn:disabled {
2355
2443
  opacity: 0.44;
@@ -2371,6 +2459,7 @@ small {
2371
2459
  .btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
2372
2460
  --__op-btn-height: var(--_op-btn-height-large);
2373
2461
  --__op-btn-font-size: var(--_op-btn-font-large);
2462
+ --__op-btn-padding: var(--_op-btn-padding-large);
2374
2463
  }
2375
2464
  }
2376
2465
 
@@ -2732,6 +2821,50 @@ small {
2732
2821
  justify-content: space-between;
2733
2822
  }
2734
2823
 
2824
+ .divider-vertical, .divider {
2825
+ --_op-divider-vertical-min-height: var(--op-space-large);
2826
+ --_op-divider-height-small: var(--op-border-width);
2827
+ --_op-divider-height-medium: var(--op-border-width-large);
2828
+ --_op-divider-height-large: var(--op-border-width-x-large);
2829
+ --_op-divider-padding-small: var(--op-space-2x-small);
2830
+ --_op-divider-padding-medium: var(--op-space-x-small);
2831
+ --_op-divider-padding-large: var(--op-space-medium);
2832
+ --__op-divider-height: var(--_op-divider-height-small);
2833
+ --__op-divider-padding: 0;
2834
+ background-color: var(--op-border-color);
2835
+ }
2836
+ .divider--small.divider-vertical, .divider--small.divider {
2837
+ --__op-divider-height: var(--_op-divider-height-small);
2838
+ }
2839
+ .divider--medium.divider-vertical, .divider--medium.divider {
2840
+ --__op-divider-height: var(--_op-divider-height-medium);
2841
+ }
2842
+ .divider--large.divider-vertical, .divider--large.divider {
2843
+ --__op-divider-height: var(--_op-divider-height-large);
2844
+ }
2845
+ .divider--spacing-small.divider-vertical, .divider--spacing-small.divider {
2846
+ --__op-divider-padding: var(--_op-divider-padding-small);
2847
+ }
2848
+ .divider--spacing-medium.divider-vertical, .divider--spacing-medium.divider {
2849
+ --__op-divider-padding: var(--_op-divider-padding-medium);
2850
+ }
2851
+ .divider--spacing-large.divider-vertical, .divider--spacing-large.divider {
2852
+ --__op-divider-padding: var(--_op-divider-padding-large);
2853
+ }
2854
+
2855
+ .divider {
2856
+ width: 100%;
2857
+ height: var(--__op-divider-height);
2858
+ margin: var(--__op-divider-padding) 0;
2859
+ }
2860
+
2861
+ .divider-vertical {
2862
+ width: var(--__op-divider-height);
2863
+ height: 100%;
2864
+ min-height: var(--_op-divider-vertical-min-height);
2865
+ margin: 0 var(--__op-divider-padding);
2866
+ }
2867
+
2735
2868
  .form-control {
2736
2869
  --_op-form-control-height-small: var(--op-input-height-small);
2737
2870
  --_op-form-control-height-medium: var(--op-input-height-medium);
@@ -3000,7 +3133,8 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3000
3133
  --op-mso-weight: var(--op-font-weight-semi-bold);
3001
3134
  }
3002
3135
 
3003
- .icon--weight-bold, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined, .alert-warning .alert__icon, .alert-danger .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
3136
+ .icon--weight-bold, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined, .alert-warning .alert__icon, .alert-danger .alert__icon,
3137
+ .alert-alert .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
3004
3138
  --op-mso-weight: var(--op-font-weight-bold);
3005
3139
  }
3006
3140
 
@@ -3021,7 +3155,8 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3021
3155
  --op-mso-optical-sizing: 20;
3022
3156
  }
3023
3157
 
3024
- .icon--large, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined, .alert-warning .alert__icon, .alert-danger .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
3158
+ .icon--large, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined, .alert-warning .alert__icon, .alert-danger .alert__icon,
3159
+ .alert-alert .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
3025
3160
  font-size: var(--op-font-large);
3026
3161
  --op-mso-optical-sizing: 40;
3027
3162
  }
@@ -3040,7 +3175,8 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3040
3175
  font-size: var(--op-font-small);
3041
3176
  --op-mso-optical-sizing: 20;
3042
3177
  }
3043
- .custom-icons.icon--large, .sidebar-primary .sidebar__content > * .custom-icons.material-symbols-outlined, .sidebar .sidebar__content > * .custom-icons.material-symbols-outlined, .alert-warning .custom-icons.alert__icon, .alert-danger .custom-icons.alert__icon, .alert-info .custom-icons.alert__icon, .alert-notice .custom-icons.alert__icon {
3178
+ .custom-icons.icon--large, .sidebar-primary .sidebar__content > * .custom-icons.material-symbols-outlined, .sidebar .sidebar__content > * .custom-icons.material-symbols-outlined, .alert-warning .custom-icons.alert__icon, .alert-danger .custom-icons.alert__icon,
3179
+ .alert-alert .custom-icons.alert__icon, .alert-info .custom-icons.alert__icon, .alert-notice .custom-icons.alert__icon {
3044
3180
  width: var(--op-font-large);
3045
3181
  height: var(--op-font-large);
3046
3182
  }
@@ -3183,6 +3319,25 @@ dialog.modal.modal--closing::backdrop {
3183
3319
  opacity: 0;
3184
3320
  }
3185
3321
 
3322
+ .pagination {
3323
+ display: flex;
3324
+ align-items: center;
3325
+ gap: 0;
3326
+ }
3327
+ .pagination .form-group {
3328
+ align-items: center;
3329
+ }
3330
+ .pagination .form-group .form-label {
3331
+ grid-column: 1;
3332
+ }
3333
+ .pagination .form-group .form-control {
3334
+ grid-column: 2;
3335
+ }
3336
+ .pagination .pagination__divider {
3337
+ height: 100%;
3338
+ padding: 0 var(--op-space-x-small);
3339
+ }
3340
+
3186
3341
  .sidebar-primary, .sidebar {
3187
3342
  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
3188
3343
  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
@@ -3433,4 +3588,102 @@ dialog.modal.modal--closing::backdrop {
3433
3588
  overflow-y: auto;
3434
3589
  }
3435
3590
 
3591
+ [data-tooltip-text] {
3592
+ --_op-tooltip-max-width: calc(5 * var(--op-space-3x-large));
3593
+ --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
3594
+ --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
3595
+ --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
3596
+ --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
3597
+ --_op-tooltip-tooltip-offset: var(--op-space-x-small);
3598
+ --_op-tooltip-tooltip-radius: var(--op-radius-medium);
3599
+ --_op-tooltip-tooltip-font-size: var(--op-font-small);
3600
+ position: relative;
3601
+ }
3602
+ [data-tooltip-text]::before, [data-tooltip-text]::after {
3603
+ opacity: 0;
3604
+ transition: var(--op-transition-tooltip);
3605
+ visibility: hidden;
3606
+ }
3607
+ [data-tooltip-text]::before {
3608
+ position: absolute;
3609
+ z-index: var(--op-z-index-tooltip);
3610
+ display: block;
3611
+ width: max-content;
3612
+ max-width: var(--_op-tooltip-max-width);
3613
+ padding: var(--_op-tooltip-padding);
3614
+ border-radius: var(--_op-tooltip-tooltip-radius);
3615
+ background-color: var(--_op-tooltip-background-color);
3616
+ color: var(--_op-tooltip-text-color);
3617
+ content: attr(data-tooltip-text);
3618
+ font-family: var(--op-font-family);
3619
+ font-size: var(--_op-tooltip-tooltip-font-size);
3620
+ overflow-wrap: break-word;
3621
+ pointer-events: none;
3622
+ text-align: center;
3623
+ white-space: normal;
3624
+ }
3625
+ [data-tooltip-text]::after {
3626
+ position: absolute;
3627
+ z-index: var(--op-z-index-tooltip);
3628
+ border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
3629
+ content: "";
3630
+ pointer-events: none;
3631
+ }
3632
+ [data-tooltip-text]:hover::before, [data-tooltip-text]:hover::after {
3633
+ opacity: 1;
3634
+ visibility: visible;
3635
+ }
3636
+ [data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::before, [data-tooltip-text]:not([data-tooltip-position])::after {
3637
+ left: 50%;
3638
+ transform: translateX(-50%);
3639
+ }
3640
+ [data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-text]:not([data-tooltip-position])::before {
3641
+ bottom: 100%;
3642
+ margin-bottom: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3643
+ }
3644
+ [data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::after {
3645
+ bottom: 100%;
3646
+ border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
3647
+ margin-bottom: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3648
+ }
3649
+ [data-tooltip-position=left][data-tooltip-text]::before, [data-tooltip-position=left][data-tooltip-text]::after {
3650
+ top: 50%;
3651
+ transform: translateY(-50%);
3652
+ }
3653
+ [data-tooltip-position=left][data-tooltip-text]::before {
3654
+ right: 100%;
3655
+ margin-right: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3656
+ }
3657
+ [data-tooltip-position=left][data-tooltip-text]::after {
3658
+ right: 100%;
3659
+ border-color: transparent transparent transparent var(--_op-tooltip-background-color);
3660
+ margin-right: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3661
+ }
3662
+ [data-tooltip-position=bottom][data-tooltip-text]::before, [data-tooltip-position=bottom][data-tooltip-text]::after {
3663
+ left: 50%;
3664
+ transform: translateX(-50%);
3665
+ }
3666
+ [data-tooltip-position=bottom][data-tooltip-text]::before {
3667
+ top: 100%;
3668
+ margin-top: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3669
+ }
3670
+ [data-tooltip-position=bottom][data-tooltip-text]::after {
3671
+ top: 100%;
3672
+ border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
3673
+ margin-top: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3674
+ }
3675
+ [data-tooltip-position=right][data-tooltip-text]::before, [data-tooltip-position=right][data-tooltip-text]::after {
3676
+ top: 50%;
3677
+ transform: translateY(-50%);
3678
+ }
3679
+ [data-tooltip-position=right][data-tooltip-text]::before {
3680
+ left: 100%;
3681
+ margin-left: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3682
+ }
3683
+ [data-tooltip-position=right][data-tooltip-text]::after {
3684
+ left: 100%;
3685
+ border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
3686
+ margin-left: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
3687
+ }
3688
+
3436
3689
  /*# sourceMappingURL=optics.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/modern-css-reset/dist/reset.css","../../src/core/tokens/base_tokens.scss","../../src/components/icon.scss","../../src/core/tokens/scale_color_tokens.scss","../../src/core/tokens/dark_mode_tokens.scss","../../src/core/base.scss","../../src/core/layout.scss","../../src/core/utilities.scss","../../src/components/alert.scss","../../src/components/badge.scss","../../src/components/button.scss","../../src/components/button_group.scss","../../src/components/card.scss","../../src/components/confirm-dialog.scss","../../src/components/form.scss","../../src/components/modal.scss","../../src/components/sidebar.scss","../../src/components/table.scss"],"names":[],"mappings":"AAAA;ACAQ;AACA;ACIA;AFJR;AAAA;AAAA;EAGE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AACA;EACE;IACC;;EAED;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;ACuNJ;AAAA;AAAA;AASA;AA5RE;AAAA;AAAA;AAAA;EAIA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAMA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAsDA;AAAA;AAAA;AAAA;EAIA;AAtDA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAIA;AAAA;AAAA;EAGA;EACA;AAYA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAOA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;;;AA0DF;EAGE;IACE;;EAIF;IACE;;EAIF;IACE;;EAIF;IACE;;;AEwGJ;AAxcE;AAAA;AAAA;AAAA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;;;ACOF;EACE;AA7cA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;IACA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAIA;IACA;IACA;IACA;IACA;;;AAuBF;AAndE;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;;;AC3bF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7FF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,WL2QkB;EK1QlB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AChCF;EACE;EACA,WN8RkB;EM7RlB;EACA;;;AAGF;EACE,WNuRiB;;;AMpRnB;EACE;;;AAGF;EACE;;;AAGF;EACE,WN0QmB;;;AMrQrB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAiCA;EACE;;AAGF;EAEE;IACE;;;;AAwCN;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;;;;ACniBR;EACE;EACA;EACA;EACA;EACA;;AAEA;AACE;AAGA;EAEA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EAGE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;ACnKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EA/BA;EACA;EACA;EACA;EA+BE;EACA;;AAGF;EAtCA;EACA;EACA;EACA;EAsCE;EACA;;;AAQJ;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;ACnFF;EAEE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EAEE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EAGE;;AAIF;EAtFF;IAuFI;IACA;;EAEA;IAGE;IACA;;;;AAKN;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAIJ;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;ACtSN;EACE;EACA;EACA;EAEA;EACA;;AAME;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;;AAKN;EACE;EACA;;;ACnDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AXsMA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EWjNE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AASN;EAGE;;;AC/DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AC7EJ;EAEE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EAEE;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAGE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAKN;EAEE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EAGA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAUA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAUJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;;AAUN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACE;AA0DA;;AAzDA;EACE;;AAEA;EAEE;;AAEA;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAGA;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAOR;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;AAGA;AAOA;;AANA;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;;;AZ3SN;AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;Aa3GF;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EAEE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAcJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AC7GN;EAGE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;AACE;AAGA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAKJ;EACE;;AAIF;EA1GA;EACA;;AA8GE;EADF;IA9GA;IACA;;;AAkHE;EALF;IAnIA;IACA;;EAGA;IACE;;EAEA;IAEE;IACA;IACA;IACA;IACA;IACA;;;AAgIJ;EAnHA;EACA;;AAIE;EAEE;EACA;EACA;;AA+GF;EADF;IAvHA;IACA;;EAIE;IAEE;IACA;IACA;;;AAmHF;EALF;IAlJA;IACA;;EAGA;IACE;;EAEA;IAEE;IACA;IACA;IACA;IACA;IACA;;;AA8IJ;EA5JA;EACA;;AAGA;EACE;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAkJJ;EArIA;EACA;;AAIE;EAEE;EACA;EACA;;;AAsIN;EAGE;EACA;EACA;;;AC/KF;EAGE;EACA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKA;EACE;EACA;;AAKF;EACE;EACA;;AAKJ;EACE;EACA;;AAIF;EACE;EACA;;;AAaF;EACE;EACA;;;AAQF;EACE;EACA;;;AAKJ;EAGE","file":"optics.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../node_modules/modern-css-reset/dist/reset.css","../../src/core/tokens/base_tokens.scss","../../src/components/icon.scss","../../src/core/tokens/scale_color_tokens.scss","../../src/core/tokens/dark_mode_tokens.scss","../../src/core/base.scss","../../src/core/layout.scss","../../src/core/utilities.scss","../../src/components/alert.scss","../../src/components/avatar.scss","../../src/components/badge.scss","../../src/components/button.scss","../../src/components/button_group.scss","../../src/components/card.scss","../../src/components/confirm-dialog.scss","../../src/components/divider.scss","../../src/components/form.scss","../../src/components/modal.scss","../../src/components/pagination.scss","../../src/components/sidebar.scss","../../src/components/table.scss","../../src/components/tooltip.scss"],"names":[],"mappings":"AAAA;ACAQ;AACA;ACIA;AFJR;AAAA;AAAA;EAGE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;EAEE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AACA;EACE;IACC;;EAED;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;ACuNJ;AAAA;AAAA;AASA;AA5RE;AAAA;AAAA;AAAA;EAIA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAMA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAsDA;AAAA;AAAA;AAAA;EAIA;AAtDA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAIA;AAAA;AAAA;EAGA;EACA;AAYA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAOA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;;;AA0DF;EAGE;IACE;;EAIF;IACE;;EAIF;IACE;;EAIF;IACE;;;AEwGJ;AAxcE;AAAA;AAAA;AAAA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;;;ACOF;EACE;AA7cA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;IACA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;IAGA;IACA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAIA;AAAA;AAAA;AAAA;IAIA;IACA;IACA;IACA;IACA;;;AAuBF;AAndE;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;EAGA;EACA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;;;AC3bF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7FF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,WL2QkB;EK1QlB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AChCF;EACE;EACA,WN8RkB;EM7RlB;EACA;;;AAGF;EACE,WNuRiB;;;AMpRnB;EACE;;;AAGF;EACE;;;AAGF;EACE,WN0QmB;;;AMrQrB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAiCA;EACE;;AAGF;EAEE;IACE;;;;AAwCN;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;;;;ACniBR;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AACE;AAGA;EAEA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EAGE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAMN;AAAA;EAIE;EACA;EACA;AAEA;AAIA;;AAHA;AAAA;EACE;;AAIF;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;;;AAKN;EAGE;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EAGE;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AC5KN;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;EAEA;;AAEA;EACE;EACA;;AAKJ;EAGE;;AAGF;EACE;EAEA;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;;AClFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EA/BA;EACA;EACA;EACA;EA+BE;EACA;;AAGF;EAtCA;EACA;EACA;EACA;EAsCE;EACA;;;AAQJ;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;ACnFF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EAEE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EAGE;;AAIF;EA7FF;IA8FI;IACA;;EAEA;IAGE;IACA;IACA;;;;AAKN;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAKN;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAIJ;EAGE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AC9SN;EACE;EACA;EACA;EAEA;EACA;;AAME;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;;AAKN;EACE;EACA;;;ACnDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AZsMA;AAAA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EYjNE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AASN;EAGE;;;AC/DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AC7EJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;;AAGA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EAGE;EACA;EACA;;;AAGF;EAGE;EACA;EACA;EACA;;;ACzDF;EAEE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EAEE;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAGE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAKN;EAEE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EAGA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAUA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAUJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;AAIA;;AAHA;EACE;;;AAUN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACE;AA0DA;;AAzDA;EACE;;AAEA;EAEE;;AAEA;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAGA;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;;AAOR;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;AAGA;AAOA;;AANA;AAAA;AAAA;AAAA;EAIE;;AAIF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;;;Ad3SN;AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EAEA;;;AAGF;AAAA;EACE;EAEA;;;AAGF;EACE;EAEA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EAEA;;AAGF;AAAA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;Ae3GF;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EAEE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAcJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;ACxJN;EACE;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAGF;EACE;;AAKJ;EACE;EACA;;;ACsBJ;EAGE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;AACE;AAGA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAKJ;EACE;;AAIF;EA1GA;EACA;;AA8GE;EADF;IA9GA;IACA;;;AAkHE;EALF;IAnIA;IACA;;EAGA;IACE;;EAEA;IAEE;IACA;IACA;IACA;IACA;IACA;;;AAgIJ;EAnHA;EACA;;AAIE;EAEE;EACA;EACA;;AA+GF;EADF;IAvHA;IACA;;EAIE;IAEE;IACA;IACA;;;AAmHF;EALF;IAlJA;IACA;;EAGA;IACE;;EAEA;IAEE;IACA;IACA;IACA;IACA;IACA;;;AA8IJ;EA5JA;EACA;;AAGA;EACE;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAkJJ;EArIA;EACA;;AAIE;EAEE;EACA;EACA;;;AAsIN;EAGE;EACA;EACA;;;ACjLF;EAGE;EACA;EACA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKA;EACE;EACA;;AAKF;EACE;EACA;;AAKJ;EACE;EACA;;AAIF;EACE;EACA;;;AAaF;EACE;EACA;;;AAQF;EACE;EACA;;;AAKJ;EAGE;;;ACvIF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIA;EAEE;EACA;;AAMF;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA","file":"optics.css"}
@@ -1,6 +1,3 @@
1
- // Core Tom Select Styles
2
- @import 'tom-select/dist/scss/tom-select';
3
-
4
1
  // By default $select-ns is "ts"
5
2
 
6
3
  // Design System Overrides
@@ -71,7 +71,9 @@
71
71
  }
72
72
  }
73
73
 
74
- .alert-danger {
74
+ // alert-alert is an alias for alert-danger. See Alert.mdx for reasoning.
75
+ .alert-danger,
76
+ .alert-alert {
75
77
  @extend %alert-global;
76
78
 
77
79
  background-color: var(--op-color-alerts-danger-plus-eight);
@@ -0,0 +1,96 @@
1
+ %avatar-global {
2
+ // Public API (allowed to be overridden)
3
+ --_op-avatar-border-radius: var(--op-radius-circle);
4
+ --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
5
+ --_op-avatar-outer-border-color: var(--op-color-neutral-base);
6
+ --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
7
+ --_op-avatar-outer-border-width: var(--op-border-width-large);
8
+ --_op-avatar-disabled-opacity: 0.4;
9
+ --_op-avatar-hover-opacity: 0.2;
10
+ --_op-avatar-size-small: 3.2rem;
11
+ --_op-avatar-size-medium: 4rem;
12
+ --_op-avatar-size-large: 5.6rem;
13
+
14
+ // Private API (don't touch these)
15
+ --__op-avatar-size: var(--_op-avatar-size-large);
16
+
17
+ position: relative;
18
+ z-index: 1;
19
+ display: block;
20
+ overflow: hidden;
21
+ width: var(--__op-avatar-size);
22
+ height: var(--__op-avatar-size);
23
+ border-radius: var(--_op-avatar-border-radius);
24
+
25
+ &::before {
26
+ position: absolute;
27
+ z-index: 2;
28
+ content: '';
29
+ inset: 0;
30
+ }
31
+
32
+ &::after {
33
+ position: absolute;
34
+ z-index: 3;
35
+ border-radius: var(--_op-avatar-border-radius);
36
+ box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color),
37
+ inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
38
+ content: '';
39
+ inset: 0;
40
+ }
41
+
42
+ img {
43
+ width: 100%;
44
+ height: 100%;
45
+ object-fit: cover;
46
+ }
47
+
48
+ // Disabled State
49
+ &.avatar--disabled {
50
+ opacity: var(--_op-avatar-disabled-opacity);
51
+ pointer-events: none;
52
+ }
53
+
54
+ // Hover State
55
+ &:hover:not(div, .avatar--disabled) {
56
+ --_op-avatar-inner-border-color: var(--op-color-primary-base);
57
+ --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
58
+
59
+ cursor: pointer;
60
+
61
+ &::before {
62
+ background-color: var(--op-color-primary-base);
63
+ opacity: var(--_op-avatar-hover-opacity);
64
+ }
65
+ }
66
+
67
+ // Focus State
68
+ &:focus,
69
+ &:focus-visible,
70
+ &:focus-within {
71
+ outline: none;
72
+ }
73
+
74
+ &:focus-visible:not(.avatar--disabled) {
75
+ --_op-avatar-outer-border-color: var(--op-color-primary-base);
76
+
77
+ cursor: pointer;
78
+ }
79
+
80
+ // Size Modifiers
81
+ &.avatar--small {
82
+ --__op-avatar-size: var(--_op-avatar-size-small);
83
+ }
84
+
85
+ &.avatar--medium {
86
+ --__op-avatar-size: var(--_op-avatar-size-medium);
87
+ }
88
+
89
+ &.avatar--large {
90
+ --__op-avatar-size: var(--_op-avatar-size-large);
91
+ }
92
+ }
93
+
94
+ .avatar {
95
+ @extend %avatar-global;
96
+ }
@@ -6,16 +6,20 @@
6
6
  --_op-btn-font-small: var(--op-font-x-small);
7
7
  --_op-btn-font-medium: var(--op-font-small);
8
8
  --_op-btn-font-large: var(--op-font-small);
9
+ --_op-btn-padding-small: 0 var(--op-space-x-small);
10
+ --_op-btn-padding-medium: 0 var(--op-space-small);
11
+ --_op-btn-padding-large: 0 var(--op-space-small);
9
12
 
10
13
  // Private API (don't touch these)
11
14
  --__op-btn-height: var(--_op-btn-height-large);
12
15
  --__op-btn-font-size: var(--_op-btn-font-large);
16
+ --__op-btn-padding: var(--_op-btn-padding-large);
13
17
 
14
18
  display: inline-flex;
15
19
  min-height: var(--__op-btn-height);
16
20
  align-items: center;
17
21
  justify-content: center;
18
- padding: 0 var(--op-space-small);
22
+ padding: var(--__op-btn-padding);
19
23
  border-radius: var(--op-radius-medium);
20
24
  appearance: none;
21
25
  cursor: pointer;
@@ -50,16 +54,19 @@
50
54
  &.btn--small {
51
55
  --__op-btn-height: var(--_op-btn-height-small);
52
56
  --__op-btn-font-size: var(--_op-btn-font-small);
57
+ --__op-btn-padding: var(--_op-btn-padding-small);
53
58
  }
54
59
 
55
60
  &.btn--medium {
56
61
  --__op-btn-height: var(--_op-btn-height-medium);
57
62
  --__op-btn-font-size: var(--_op-btn-font-medium);
63
+ --__op-btn-padding: var(--_op-btn-padding-medium);
58
64
  }
59
65
 
60
66
  &.btn--large {
61
67
  --__op-btn-height: var(--_op-btn-height-large);
62
68
  --__op-btn-font-size: var(--_op-btn-font-large);
69
+ --__op-btn-padding: var(--_op-btn-padding-large);
63
70
  }
64
71
 
65
72
  // Disabled Modifier
@@ -93,6 +100,7 @@
93
100
  &.btn--large {
94
101
  --__op-btn-height: var(--_op-btn-height-large);
95
102
  --__op-btn-font-size: var(--_op-btn-font-large);
103
+ --__op-btn-padding: var(--_op-btn-padding-large);
96
104
  }
97
105
  }
98
106
  }
@@ -0,0 +1,59 @@
1
+ %divider-global {
2
+ // Public API (allowed to be overridden)
3
+ --_op-divider-vertical-min-height: var(--op-space-large);
4
+ --_op-divider-height-small: var(--op-border-width);
5
+ --_op-divider-height-medium: var(--op-border-width-large);
6
+ --_op-divider-height-large: var(--op-border-width-x-large);
7
+ --_op-divider-padding-small: var(--op-space-2x-small);
8
+ --_op-divider-padding-medium: var(--op-space-x-small);
9
+ --_op-divider-padding-large: var(--op-space-medium);
10
+
11
+ // Private API (don't touch these)
12
+ --__op-divider-height: var(--_op-divider-height-small);
13
+ --__op-divider-padding: 0;
14
+
15
+ background-color: var(--op-border-color);
16
+
17
+ // Size Modifiers
18
+ &.divider--small {
19
+ --__op-divider-height: var(--_op-divider-height-small);
20
+ }
21
+
22
+ &.divider--medium {
23
+ --__op-divider-height: var(--_op-divider-height-medium);
24
+ }
25
+
26
+ &.divider--large {
27
+ --__op-divider-height: var(--_op-divider-height-large);
28
+ }
29
+
30
+ // Spacing Modifiers
31
+ &.divider--spacing-small {
32
+ --__op-divider-padding: var(--_op-divider-padding-small);
33
+ }
34
+
35
+ &.divider--spacing-medium {
36
+ --__op-divider-padding: var(--_op-divider-padding-medium);
37
+ }
38
+
39
+ &.divider--spacing-large {
40
+ --__op-divider-padding: var(--_op-divider-padding-large);
41
+ }
42
+ }
43
+
44
+ .divider {
45
+ @extend %divider-global;
46
+
47
+ width: 100%;
48
+ height: var(--__op-divider-height);
49
+ margin: var(--__op-divider-padding) 0;
50
+ }
51
+
52
+ .divider-vertical {
53
+ @extend %divider-global;
54
+
55
+ width: var(--__op-divider-height);
56
+ height: 100%;
57
+ min-height: var(--_op-divider-vertical-min-height);
58
+ margin: 0 var(--__op-divider-padding);
59
+ }
@@ -1,11 +1,15 @@
1
1
  @import 'alert';
2
+ @import 'avatar';
2
3
  @import 'badge';
3
4
  @import 'button';
4
5
  @import 'button_group';
5
6
  @import 'card';
6
7
  @import 'confirm-dialog';
8
+ @import 'divider';
7
9
  @import 'form';
8
10
  @import 'icon';
9
11
  @import 'modal';
12
+ @import 'pagination';
10
13
  @import 'sidebar';
11
14
  @import 'table';
15
+ @import 'tooltip';
@@ -0,0 +1,28 @@
1
+ %pagination-global {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 0;
5
+
6
+ // Showing Dropdown
7
+ .form-group {
8
+ align-items: center;
9
+
10
+ .form-label {
11
+ grid-column: 1;
12
+ }
13
+
14
+ .form-control {
15
+ grid-column: 2;
16
+ }
17
+ }
18
+
19
+ // ... Gap
20
+ .pagination__divider {
21
+ height: 100%;
22
+ padding: 0 var(--op-space-x-small);
23
+ }
24
+ }
25
+
26
+ .pagination {
27
+ @extend %pagination-global;
28
+ }
@@ -1,5 +1,3 @@
1
- // TODO: When we get a pagination component, add it to the table styles and docs for within a table footer
2
-
3
1
  %table-global {
4
2
  // Public API
5
3
  // Cells (for height, the appropriate variable is used when using the density modifiers)
@@ -0,0 +1,136 @@
1
+ %tooltip-global {
2
+ // Public API
3
+ --_op-tooltip-max-width: calc(5 * var(--op-space-3x-large));
4
+ --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
5
+ --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
6
+ --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
7
+ --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
8
+ --_op-tooltip-tooltip-offset: var(--op-space-x-small);
9
+ --_op-tooltip-tooltip-radius: var(--op-radius-medium);
10
+ --_op-tooltip-tooltip-font-size: var(--op-font-small);
11
+
12
+ position: relative;
13
+
14
+ &::before,
15
+ &::after {
16
+ opacity: 0;
17
+ transition: var(--op-transition-tooltip);
18
+ visibility: hidden;
19
+ }
20
+
21
+ &::before {
22
+ position: absolute;
23
+ z-index: var(--op-z-index-tooltip);
24
+ display: block;
25
+ width: max-content;
26
+ max-width: var(--_op-tooltip-max-width);
27
+ padding: var(--_op-tooltip-padding);
28
+ border-radius: var(--_op-tooltip-tooltip-radius);
29
+ background-color: var(--_op-tooltip-background-color);
30
+ color: var(--_op-tooltip-text-color);
31
+ content: attr(data-tooltip-text);
32
+ font-family: var(--op-font-family); // Makes tooltips on icons work
33
+ font-size: var(--_op-tooltip-tooltip-font-size);
34
+ overflow-wrap: break-word;
35
+ pointer-events: none;
36
+ text-align: center;
37
+ white-space: normal;
38
+ }
39
+
40
+ &::after {
41
+ position: absolute;
42
+ z-index: var(--op-z-index-tooltip);
43
+ border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
44
+ content: '';
45
+ pointer-events: none;
46
+ }
47
+
48
+ &:hover {
49
+ &::before,
50
+ &::after {
51
+ opacity: 1;
52
+ visibility: visible;
53
+ }
54
+ }
55
+
56
+ &[data-tooltip-position='top'],
57
+ &:not([data-tooltip-position]) {
58
+ &::before,
59
+ &::after {
60
+ left: 50%;
61
+ transform: translateX(-50%);
62
+ }
63
+
64
+ &::before {
65
+ bottom: 100%;
66
+ margin-bottom: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
67
+ }
68
+
69
+ &::after {
70
+ bottom: 100%;
71
+ border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
72
+ margin-bottom: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
73
+ }
74
+ }
75
+
76
+ &[data-tooltip-position='left'] {
77
+ &::before,
78
+ &::after {
79
+ top: 50%;
80
+ transform: translateY(-50%);
81
+ }
82
+
83
+ &::before {
84
+ right: 100%;
85
+ margin-right: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
86
+ }
87
+
88
+ &::after {
89
+ right: 100%;
90
+ border-color: transparent transparent transparent var(--_op-tooltip-background-color);
91
+ margin-right: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
92
+ }
93
+ }
94
+
95
+ &[data-tooltip-position='bottom'] {
96
+ &::before,
97
+ &::after {
98
+ left: 50%;
99
+ transform: translateX(-50%);
100
+ }
101
+
102
+ &::before {
103
+ top: 100%;
104
+ margin-top: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
105
+ }
106
+
107
+ &::after {
108
+ top: 100%;
109
+ border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
110
+ margin-top: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
111
+ }
112
+ }
113
+
114
+ &[data-tooltip-position='right'] {
115
+ &::before,
116
+ &::after {
117
+ top: 50%;
118
+ transform: translateY(-50%);
119
+ }
120
+
121
+ &::before {
122
+ left: 100%;
123
+ margin-left: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
124
+ }
125
+
126
+ &::after {
127
+ left: 100%;
128
+ border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
129
+ margin-left: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
130
+ }
131
+ }
132
+ }
133
+
134
+ [data-tooltip-text] {
135
+ @extend %tooltip-global;
136
+ }
@@ -1,10 +1,15 @@
1
1
  // 16Six Sidebar Example
2
- @mixin sidebar-16six-rail-global {
2
+ .icon--rotated-135 {
3
+ rotate: 135deg;
4
+ }
5
+
6
+ .icon--rotated-90 {
7
+ rotate: 90deg;
8
+ }
9
+
10
+ @mixin sidebar-rail-global {
3
11
  .sidebar__brand {
4
- svg {
5
- width: 100%;
6
- padding: 0 var(--op-space-small);
7
- }
12
+ justify-content: center;
8
13
 
9
14
  .sidebar__brand-label {
10
15
  display: none;
@@ -12,86 +17,52 @@
12
17
  }
13
18
  }
14
19
 
15
- @mixin sidebar-16six-drawer-global {
16
- .sidebar__item {
17
- border-radius: var(--op-radius-large);
18
- font-size: var(--op-font-small);
19
- }
20
- }
21
-
22
20
  .sidebar-16six {
23
21
  @extend %sidebar-global;
24
22
 
25
- --_op-sidebar-spacing: var(--op-space-x-small);
26
-
27
- // Normal
28
- --_op-sidebar-background-color: var(--op-color-primary-minus-five);
29
- --_op-sidebar-text-color: var(--op-color-primary-on-minus-five);
30
-
31
- // Active
32
- --_op-sidebar-icon-background-active-color: var(--op-color-primary-minus-three);
33
- --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-minus-three);
34
-
35
- // Hover
36
- --_op-sidebar-icon-background-hover-color: var(--op-color-primary-minus-three);
37
- --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-minus-three);
38
-
39
- gap: var(--op-space-x-large);
23
+ --_op-sidebar-background-color: hsl(256deg 66% 15%);
24
+ --_op-sidebar-text-color: hsl(26deg 100% 95%);
25
+ --_op-sidebar-border-color: hsl(26deg 100% 95%);
26
+ --_op-sidebar-rail-width: 6.4rem;
27
+ --_op-sidebar-drawer-width: 22.4rem;
28
+ --_op-sidebar-drawer-brand-width: calc(var(--op-space-3x-large) + (2 * var(--op-space-medium)));
29
+ --_op-sidebar-brand-spacing: var(--op-space-medium) var(--op-space-x-small);
30
+ --_op-sidebar-content-item-spacing: var(--op-space-x-small);
31
+ --_op-sidebar-spacing: 0 0 var(--op-space-x-small);
40
32
 
41
33
  .sidebar__brand {
42
34
  display: flex;
35
+ margin: 0;
43
36
  color: inherit;
44
- gap: var(--op-space-small);
37
+ gap: var(--op-space-medium);
45
38
  text-decoration: none;
46
39
 
47
40
  svg {
48
41
  width: var(--op-space-3x-large);
42
+ height: var(--op-space-3x-large);
49
43
  }
50
44
 
51
45
  .sidebar__brand-label {
52
46
  display: flex;
53
47
  flex-direction: column;
54
- gap: var(--op-space-4x-small);
48
+ font-size: var(--op-font-small);
55
49
  }
56
50
  }
57
51
 
58
- .sidebar__content {
59
- gap: var(--op-space-x-small);
60
- }
61
-
62
- .sidebar__item {
63
- .sidebar__item-icon {
64
- border-radius: var(--op-radius-large);
65
-
66
- &.sidebar__item-icon--rotated {
67
- rotate: 90deg;
68
- }
69
- }
52
+ .btn {
53
+ &.btn--no-border {
54
+ background-color: transparent;
55
+ box-shadow: none;
56
+ color: var(--_op-sidebar-text-color);
70
57
 
71
- &:hover,
72
- &.active {
73
- .sidebar__item-icon {
74
- --op-mso-weight: var(--op-font-weight-medium);
58
+ &.btn--active,
59
+ &:hover {
60
+ background-color: hsl(256deg 23% 32%);
75
61
  }
76
62
  }
77
63
  }
78
64
 
79
- // Modifiers
80
- &.sidebar--drawer:not(.sidebar--responsive) {
81
- @include sidebar-16six-drawer-global;
82
- }
83
-
84
- &.sidebar--drawer.sidebar--responsive {
85
- @media (width > $breakpoint-medium) {
86
- @include sidebar-16six-drawer-global;
87
- }
88
-
89
- @media (width <= $breakpoint-medium) {
90
- @include sidebar-16six-rail-global;
91
- }
92
- }
93
-
94
65
  &.sidebar--rail {
95
- @include sidebar-16six-rail-global;
66
+ @include sidebar-rail-global;
96
67
  }
97
68
  }
@@ -1,60 +1,40 @@
1
1
  // Domains Sidebar Example
2
- @mixin sidebar-domains-rail-global {
3
- .sidebar__brand {
4
- padding: 0 var(--_op-sidebar-spacing);
5
- }
6
- }
7
-
8
- @mixin sidebar-domains-drawer-global {
9
- .sidebar__content {
10
- padding: 0;
11
- }
12
-
13
- .sidebar__item {
14
- border-bottom-left-radius: 0;
15
- border-top-left-radius: 0;
16
- }
17
-
18
- .sidebar__section-divider {
19
- margin: var(--op-space-small) 0;
2
+ %btn-global {
3
+ &.btn--pill-right {
4
+ border-radius: 0 var(--op-radius-pill) var(--op-radius-pill) 0;
20
5
  }
21
6
  }
22
7
 
23
8
  .sidebar-domains {
24
9
  @extend %sidebar-global;
25
10
 
26
- // Normal
27
- --_op-sidebar-background-color: var(--op-color-background);
28
- --_op-sidebar-text-color: var(--op-color-on-background);
29
-
30
- // Active
31
- --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-seven);
32
- --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-seven);
33
-
34
- // Hover
35
- --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-seven);
36
- --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-seven);
11
+ --_op-sidebar-drawer-width: 28rem;
12
+ --_op-sidebar-content-spacing: 0;
13
+ --_op-sidebar-content-item-spacing: 0;
37
14
 
38
- .sidebar__brand {
39
- padding: 0 var(--op-space-4x-large);
40
- }
15
+ box-shadow: none;
41
16
 
42
- // Modifiers
43
- &.sidebar--drawer:not(.sidebar--responsive) {
44
- @include sidebar-domains-drawer-global;
45
- }
17
+ .btn {
18
+ &.btn--no-border {
19
+ box-shadow: none;
46
20
 
47
- &.sidebar--drawer.sidebar--responsive {
48
- @media (width > $breakpoint-medium) {
49
- @include sidebar-domains-drawer-global;
50
- }
21
+ &.btn--active {
22
+ background-color: var(--op-color-primary-plus-five);
23
+ color: var(--op-color-primary-on-plus-five);
24
+ }
51
25
 
52
- @media (width <= $breakpoint-medium) {
53
- @include sidebar-domains-rail-global;
26
+ &:hover:not(.btn--active) {
27
+ background-color: var(--op-color-neutral-plus-six);
28
+ box-shadow: none;
29
+ color: var(--op-color-neutral-on-plus-six);
30
+ }
54
31
  }
55
32
  }
56
33
 
57
- &.sidebar--rail {
58
- @include sidebar-domains-rail-global;
34
+ .sidebar__footer {
35
+ display: flex;
36
+ align-items: center;
37
+ padding-left: var(--op-space-large);
38
+ gap: var(--op-space-small);
59
39
  }
60
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolemodel/optics",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
5
5
  "main": "dist/scss/optics.scss",
6
6
  "scripts": {
@@ -42,8 +42,7 @@
42
42
  "@RoleModel:registry": "https://npm.pkg.github.com"
43
43
  },
44
44
  "dependencies": {
45
- "modern-css-reset": "^1.4.0",
46
- "tom-select": "^2.0.0"
45
+ "modern-css-reset": "^1.4.0"
47
46
  },
48
47
  "devDependencies": {
49
48
  "@babel/preset-env": "^7.21.5",
@@ -77,5 +76,13 @@
77
76
  "stylelint-config-standard-scss": "^6.1.0",
78
77
  "stylelint-prettier": "^2.0.0",
79
78
  "stylelint-scss": "^4.3.0"
79
+ },
80
+ "peerDependencies": {
81
+ "tom-select": "^2.0.0"
82
+ },
83
+ "peerDependenciesMeta": {
84
+ "tom-select": {
85
+ "optional": true
86
+ }
80
87
  }
81
88
  }