anchor_view_components 0.20.1 → 0.21.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +14 -0
  3. data/app/assets/builds/anchor-view-components.css +1 -1
  4. data/app/assets/images/icons/search.svg +5 -0
  5. data/app/assets/stylesheets/components/button.css +1 -1
  6. data/app/components/anchor/action_menu_component.html.erb +8 -10
  7. data/app/components/anchor/action_menu_component.rb +15 -6
  8. data/app/components/anchor/autocomplete_component.html.erb +6 -7
  9. data/app/components/anchor/autocomplete_component.rb +29 -8
  10. data/app/components/anchor/badge_component.html.erb +3 -6
  11. data/app/components/anchor/badge_component.rb +0 -10
  12. data/app/components/anchor/banner_component.html.erb +1 -7
  13. data/app/components/anchor/banner_component.rb +0 -10
  14. data/app/components/anchor/button_component.html.erb +9 -17
  15. data/app/components/anchor/button_component.rb +7 -21
  16. data/app/components/anchor/component.rb +22 -5
  17. data/app/components/anchor/dialog_component.html.erb +3 -4
  18. data/app/components/anchor/icon_component.html.erb +1 -3
  19. data/app/components/anchor/icon_component.rb +1 -1
  20. data/app/components/anchor/loading_indicator_component.html.erb +3 -4
  21. data/app/components/anchor/logo_component.html.erb +1 -4
  22. data/app/components/anchor/logo_component.rb +1 -1
  23. data/app/components/anchor/panel/body_component.html.erb +3 -5
  24. data/app/components/anchor/panel_component.html.erb +3 -1
  25. data/app/components/anchor/popover_component.html.erb +3 -7
  26. data/app/components/anchor/popover_controller.ts +21 -15
  27. data/app/components/anchor/prose_component.html.erb +5 -4
  28. data/app/components/anchor/side_nav_component.html.erb +8 -9
  29. data/app/components/anchor/side_nav_component.rb +4 -1
  30. data/app/components/anchor/tab_bar/tab_component.html.erb +8 -6
  31. data/app/components/anchor/tab_bar/tab_component.rb +2 -2
  32. data/app/components/anchor/tab_bar_component.html.erb +3 -4
  33. data/app/components/anchor/tab_bar_component.rb +3 -2
  34. data/app/components/anchor/table_component.rb +1 -1
  35. data/app/components/anchor/text_component.html.erb +1 -6
  36. data/app/components/anchor/text_component.rb +5 -14
  37. data/app/components/anchor/toast_component.html.erb +5 -8
  38. data/app/components/anchor/toast_component.rb +4 -12
  39. data/app/components/anchor/toast_controller.ts +5 -1
  40. data/app/helpers/anchor/fetch_or_fallback_helper.rb +26 -0
  41. data/app/helpers/anchor/form_builder.rb +14 -0
  42. data/app/helpers/anchor/view_helper.rb +10 -0
  43. data/lib/anchor/view_components/version.rb +1 -1
  44. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 26f407ed0f511827c3627b111f3a64a52764f003248ea206aaac3f3902ceb65c
4
- data.tar.gz: a266da369857e596d2e89dc239e8645a49cd0b03011dc1209d6ed43597e91a4a
3
+ metadata.gz: aa8ed5782253afbdd9c586a20076e73a93784b107cd167a1f852968d219662b4
4
+ data.tar.gz: 0d60fc67b91e6ed2e40e785d738156de5f13c22514eda27822baa9c563fc7ddc
5
5
  SHA512:
6
- metadata.gz: 358b6150a5bf00924ab8ff87f18fe6ce7726e2ce71a96a9dab897f478696c261fd64fbe9608ed25fb4ba5a5c51c2ea937e97a4e1b054bc5e93e87e157945d598
7
- data.tar.gz: 8672cde3365dc8492b26067dc05da0cae85a515355c417154695c1c5399f8b9de0e4222ab069ef1b332cc0f589304bb6bc78bdf1ed0f305f1ccce8998b235366
6
+ metadata.gz: 835be6c05e42acc4b702c38eee985f6a790f9b3693578fef3d70945d00717ab83b7bd9c371eaacfb6aecd094dcbc512a91f4b1fcd92b024a56fc3751f5631bea
7
+ data.tar.gz: f7c6b681b721e9965722a7402f841e75cf9ebf6d4e9d62b9215df995e8790e9e1478e535103a56543158e324ea59565f4f4efed9164a51464910793af91b66d5
data/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.21.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 39044e0: Add search icon
8
+ - c701e81: Pass all unused component arguments to wrapping tag as HTML attributes
9
+
10
+ ### Patch Changes
11
+
12
+ - 2ac2ce1: Prevent text wrapping in Buttons
13
+ - c5d7bae: Popover position updates on resize and scroll
14
+ - 6f2f74c: Fix toast display across browser navigations
15
+ - fe7b209: Set form_builder template to ActionView::Base
16
+
3
17
  ## 0.20.1
4
18
 
5
19
  ### Patch Changes
@@ -1 +1 @@
1
- /*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;border:initial solid;border-color:initial;-o-border-image:initial;border-image:initial;background-color:canvas;color:initial;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}@supports not (background-color:canvas){[popover]{background-color:#fff;color:#000}}@supports (width:-moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset:0){[popover]{top:0;left:0;right:0;bottom:0}}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.form-input,.form-multiselect,.form-select,.form-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}.form-input::-moz-placeholder,.form-textarea::-moz-placeholder{color:#6b7280;opacity:1}.form-input::placeholder,.form-textarea::placeholder{color:#6b7280;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em}.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}.prose{color:#101112;max-width:65ch}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:.875rem;line-height:1rem}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.action-menu-item>*{display:block;width:100%;padding:.25rem .75rem;text-align:left}.btn{display:inline-flex;height:2.5rem;align-items:center;gap:.5rem;border-radius:.25rem;border-width:1px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-left:1.25rem;padding-right:1.25rem;font-size:.75rem;line-height:1rem;font-weight:600;text-decoration-line:none}.btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.btn:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-primary:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.btn-primary:disabled{pointer-events:none;border-color:rgb(235 237 240/var(--tw-border-opacity));background-color:rgb(235 237 240/var(--tw-bg-opacity));color:rgb(156 161 165/var(--tw-text-opacity))}.btn-critical,.btn-primary:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.btn-critical{border-color:rgb(191 47 29/var(--tw-border-opacity));background-color:rgb(191 47 29/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.btn-critical:hover{--tw-border-opacity:1;border-color:rgb(148 38 25/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(148 38 25/var(--tw-bg-opacity))}.btn-critical:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(235 237 240/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-text{color:rgb(39 110 241/var(--tw-text-opacity))}.btn-text,.btn-text:hover{border-color:#0000;background-color:initial;--tw-text-opacity:1}.btn-text:hover{color:rgb(30 84 183/var(--tw-text-opacity))}.btn-text:disabled{pointer-events:none;border-color:#0000;--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-small{height:1.75rem;padding-right:.75rem}.btn-small,.btn-with-starting-icon{padding-left:.75rem}.btn-with-ending-icon{padding-right:.75rem}.btn-full-width{width:100%;justify-content:center}.toast{align-items:center}.toast>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.toast{border-radius:.25rem;padding:1rem;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.toast.\:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.toast:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-left-full{left:-100%}.-top-full{top:-100%}.bottom-0{bottom:0}.right-0{right:0}.z-10{z-index:10}.m-0{margin:0}.m-\[3px\]{margin:3px}.mx-2{margin-left:.5rem;margin-right:.5rem}.\!ml-10{margin-left:2.5rem!important}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[500\/341\]{aspect-ratio:500/341}.aspect-\[500\/81\]{aspect-ratio:500/81}.aspect-\[72\/58\]{aspect-ratio:72/58}.aspect-square{aspect-ratio:1/1}.h-5{height:1.25rem}.h-\[120px\]{height:120px}.h-full{height:100%}.max-h-\[100dvh\]{max-height:100dvh}.max-h-\[200px\]{max-height:200px}.max-h-full{max-height:100%}.min-h-\[100dvh\]{min-height:100dvh}.min-h-\[40px\]{min-height:40px}.w-12{width:3rem}.w-5{width:1.25rem}.w-\[15rem\]{width:15rem}.w-\[18px\]{width:18px}.w-\[198px\]{width:198px}.w-\[36rem\]{width:36rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-full{max-width:100%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.resize-none{resize:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-white\/10>:not([hidden])~:not([hidden]){border-color:#ffffff1a}.self-end{align-self:flex-end}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-grey-40{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.border-grey-60{--tw-border-opacity:1;border-color:rgb(127 131 135/var(--tw-border-opacity))}.border-subdued{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.bg-critical-subdued{--tw-bg-opacity:1;background-color:rgb(255 222 217/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-informational-subdued{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.bg-success-subdued{--tw-bg-opacity:1;background-color:rgb(218 240 227/var(--tw-bg-opacity))}.bg-teal{--tw-bg-opacity:1;background-color:rgb(28 73 87/var(--tw-bg-opacity))}.bg-warning-subdued{--tw-bg-opacity:1;background-color:rgb(255 242 217/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/\[\.05\]{background-color:#ffffff0d}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity))}.bg-\[length\:16px_16px\]{background-size:16px 16px}.bg-\[8px_center\]{background-position:8px}.bg-no-repeat{background-repeat:no-repeat}.p-0{padding:0}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-6{padding-bottom:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:1.75rem}.text-3xl{font-size:2rem;line-height:2.5rem}.text-4xl{font-size:2.5rem;line-height:3rem}.text-base{font-size:.875rem;line-height:1rem}.text-lg{font-size:1rem;line-height:1.25rem}.text-sm{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.text-coral{--tw-text-opacity:1;color:rgb(242 170 106/var(--tw-text-opacity))}.text-critical{--tw-text-opacity:1;color:rgb(191 47 29/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-grey-100{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-grey-50{--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-secondary{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.text-teal{--tw-text-opacity:1;color:rgb(28 73 87/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/60{color:#fff9}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[inset_0_-1px\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_-1px\]{--tw-shadow:inset 0 -1px;--tw-shadow-colored:inset 0 -1px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-gray-400{--tw-shadow-color:#9ca3af;--tw-shadow:var(--tw-shadow-colored)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.backdrop\:bg-grey-100\/50::backdrop{background-color:#10111280}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);left:0;right:0}.after\:-bottom-1:after{content:var(--tw-content);bottom:-.25rem}.after\:block:after{content:var(--tw-content);display:block}.after\:h-1:after{content:var(--tw-content);height:.25rem}.after\:bg-blue-500:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.checked\:border-blue-50:checked{--tw-border-opacity:1;border-color:rgb(39 110 241/var(--tw-border-opacity))}.checked\:bg-gradient-radial:checked{background-image:radial-gradient(var(--tw-gradient-stops))}.checked\:from-blue-50:checked{--tw-gradient-from:#276ef1 var(--tw-gradient-from-position);--tw-gradient-to:#276ef100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.checked\:from-\[50\%\]:checked{--tw-gradient-from-position:50%}.checked\:to-transparent:checked{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.checked\:to-\[54\%\]:checked{--tw-gradient-to-position:54%}.focus-within\:bg-grey-10:focus-within{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-grey-80:hover{--tw-border-opacity:1;border-color:rgb(70 73 77/var(--tw-border-opacity))}.hover\:bg-grey-10:hover{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:bg-white\/\[\.05\]:hover{background-color:#ffffff0d}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-grey-70:hover{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.checked\:hover\:border-blue-60:hover:checked{--tw-border-opacity:1;border-color:rgb(30 84 183/var(--tw-border-opacity))}.checked\:hover\:from-blue-60:hover:checked{--tw-gradient-from:#1e54b7 var(--tw-gradient-from-position);--tw-gradient-to:#1e54b700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.checked\:hover\:from-\[50\%\]:hover:checked{--tw-gradient-from-position:50%}.checked\:hover\:to-transparent:hover:checked{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.checked\:hover\:to-\[54\%\]:hover:checked{--tw-gradient-to-position:54%}.focus\:no-underline:focus{text-decoration-line:none}.disabled\:border-grey-40:disabled,.disabled\:checked\:border-grey-40:checked:disabled{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.disabled\:checked\:from-grey-40:checked:disabled{--tw-gradient-from:#babec3 var(--tw-gradient-from-position);--tw-gradient-to:#babec300 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.disabled\:checked\:from-\[50\%\]:checked:disabled{--tw-gradient-from-position:50%}.disabled\:checked\:to-transparent:checked:disabled{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.disabled\:checked\:to-\[54\%\]:checked:disabled{--tw-gradient-to-position:54%}.aria-readonly\:border-grey-40[aria-readonly=true],.aria-readonly\:checked\:border-grey-40:checked[aria-readonly=true]{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.aria-readonly\:checked\:from-grey-40:checked[aria-readonly=true]{--tw-gradient-from:#babec3 var(--tw-gradient-from-position);--tw-gradient-to:#babec300 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.aria-readonly\:checked\:from-\[50\%\]:checked[aria-readonly=true]{--tw-gradient-from-position:50%}.aria-readonly\:checked\:to-transparent:checked[aria-readonly=true]{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.aria-readonly\:checked\:to-\[54\%\]:checked[aria-readonly=true]{--tw-gradient-to-position:54%}.group[aria-expanded][data-empty=true][data-loading=false] .group-aria-\[expanded\]\[data-empty\=\'true\'\]\[data-loading\=\'false\'\]\:block,.group[aria-expanded][data-loading=true] .group-aria-\[expanded\]\[data-loading\=\'true\'\]\:block{display:block}.group[data-empty=true] .group-data-\[empty\=\'true\'\]\:hidden,.group[data-loading=true] .group-data-\[loading\=\'true\'\]\:hidden{display:none}.popover-open\:block:popover-open{display:block}.\[\&\>\[aria-selected\=\'true\'\]\]\:bg-blue-20>[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.\[\&\>li\]\:cursor-pointer>li{cursor:pointer}.\[\&\>li\]\:px-3>li{padding-left:.75rem;padding-right:.75rem}.\[\&\>li\]\:py-2>li{padding-top:.5rem;padding-bottom:.5rem}.\[\&\[readonly\]\]\:border-grey-40[readonly]{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.\[\&\[readonly\]\]\:bg-grey-10[readonly]{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.\[\&\[readonly\]\]\:shadow-none[readonly]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.side-nav-open .\[\.side-nav-open_\&\]\:w-\[3\.5rem\]{width:3.5rem}.side-nav-open .\[\.side-nav-open_\&\]\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.side-nav-open .\[\.side-nav-open_\&\]\:px-4{padding-left:1rem;padding-right:1rem}.side-nav-open .\[\.side-nav-open_\&\]\:opacity-0{opacity:0}
1
+ /*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;border:initial solid;border-color:initial;-o-border-image:initial;border-image:initial;background-color:canvas;color:initial;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}@supports not (background-color:canvas){[popover]{background-color:#fff;color:#000}}@supports (width:-moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset:0){[popover]{top:0;left:0;right:0;bottom:0}}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.form-input,.form-multiselect,.form-select,.form-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}.form-input::-moz-placeholder,.form-textarea::-moz-placeholder{color:#6b7280;opacity:1}.form-input::placeholder,.form-textarea::placeholder{color:#6b7280;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em}.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}.prose{color:#101112;max-width:65ch}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:.875rem;line-height:1rem}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.action-menu-item>*{display:block;width:100%;padding:.25rem .75rem;text-align:left}.btn{display:inline-flex;height:2.5rem;align-items:center;gap:.5rem;white-space:nowrap;border-radius:.25rem;border-width:1px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-left:1.25rem;padding-right:1.25rem;font-size:.75rem;line-height:1rem;font-weight:600;text-decoration-line:none}.btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.btn:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-primary:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.btn-primary:disabled{pointer-events:none;border-color:rgb(235 237 240/var(--tw-border-opacity));background-color:rgb(235 237 240/var(--tw-bg-opacity));color:rgb(156 161 165/var(--tw-text-opacity))}.btn-critical,.btn-primary:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.btn-critical{border-color:rgb(191 47 29/var(--tw-border-opacity));background-color:rgb(191 47 29/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.btn-critical:hover{--tw-border-opacity:1;border-color:rgb(148 38 25/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(148 38 25/var(--tw-bg-opacity))}.btn-critical:disabled{pointer-events:none;--tw-border-opacity:1;border-color:rgb(235 237 240/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-text{color:rgb(39 110 241/var(--tw-text-opacity))}.btn-text,.btn-text:hover{border-color:#0000;background-color:initial;--tw-text-opacity:1}.btn-text:hover{color:rgb(30 84 183/var(--tw-text-opacity))}.btn-text:disabled{pointer-events:none;border-color:#0000;--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.btn-small{height:1.75rem;padding-right:.75rem}.btn-small,.btn-with-starting-icon{padding-left:.75rem}.btn-with-ending-icon{padding-right:.75rem}.btn-full-width{width:100%;justify-content:center}.toast{align-items:center}.toast>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.toast{border-radius:.25rem;padding:1rem;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.toast.\:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.toast:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-left-full{left:-100%}.-top-full{top:-100%}.bottom-0{bottom:0}.right-0{right:0}.z-10{z-index:10}.m-0{margin:0}.m-\[3px\]{margin:3px}.mx-2{margin-left:.5rem;margin-right:.5rem}.\!ml-10{margin-left:2.5rem!important}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[500\/341\]{aspect-ratio:500/341}.aspect-\[500\/81\]{aspect-ratio:500/81}.aspect-\[72\/58\]{aspect-ratio:72/58}.aspect-square{aspect-ratio:1/1}.h-5{height:1.25rem}.h-\[120px\]{height:120px}.h-full{height:100%}.max-h-\[100dvh\]{max-height:100dvh}.max-h-\[200px\]{max-height:200px}.max-h-full{max-height:100%}.min-h-\[100dvh\]{min-height:100dvh}.min-h-\[40px\]{min-height:40px}.w-12{width:3rem}.w-5{width:1.25rem}.w-\[15rem\]{width:15rem}.w-\[18px\]{width:18px}.w-\[198px\]{width:198px}.w-\[36rem\]{width:36rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-full{max-width:100%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.resize-none{resize:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-white\/10>:not([hidden])~:not([hidden]){border-color:#ffffff1a}.self-end{align-self:flex-end}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-grey-40{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.border-grey-60{--tw-border-opacity:1;border-color:rgb(127 131 135/var(--tw-border-opacity))}.border-subdued{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.bg-critical-subdued{--tw-bg-opacity:1;background-color:rgb(255 222 217/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-informational-subdued{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.bg-success-subdued{--tw-bg-opacity:1;background-color:rgb(218 240 227/var(--tw-bg-opacity))}.bg-teal{--tw-bg-opacity:1;background-color:rgb(28 73 87/var(--tw-bg-opacity))}.bg-warning-subdued{--tw-bg-opacity:1;background-color:rgb(255 242 217/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/\[\.05\]{background-color:#ffffff0d}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity))}.bg-\[length\:16px_16px\]{background-size:16px 16px}.bg-\[8px_center\]{background-position:8px}.bg-no-repeat{background-repeat:no-repeat}.p-0{padding:0}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-6{padding-bottom:1.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:1.75rem}.text-3xl{font-size:2rem;line-height:2.5rem}.text-4xl{font-size:2.5rem;line-height:3rem}.text-base{font-size:.875rem;line-height:1rem}.text-lg{font-size:1rem;line-height:1.25rem}.text-sm{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.text-coral{--tw-text-opacity:1;color:rgb(242 170 106/var(--tw-text-opacity))}.text-critical{--tw-text-opacity:1;color:rgb(191 47 29/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-grey-100{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-grey-50{--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-secondary{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.text-teal{--tw-text-opacity:1;color:rgb(28 73 87/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/60{color:#fff9}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[inset_0_-1px\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_-1px\]{--tw-shadow:inset 0 -1px;--tw-shadow-colored:inset 0 -1px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-gray-400{--tw-shadow-color:#9ca3af;--tw-shadow:var(--tw-shadow-colored)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.backdrop\:bg-grey-100\/50::backdrop{background-color:#10111280}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);left:0;right:0}.after\:-bottom-1:after{content:var(--tw-content);bottom:-.25rem}.after\:block:after{content:var(--tw-content);display:block}.after\:h-1:after{content:var(--tw-content);height:.25rem}.after\:bg-blue-500:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.checked\:border-blue-50:checked{--tw-border-opacity:1;border-color:rgb(39 110 241/var(--tw-border-opacity))}.checked\:bg-gradient-radial:checked{background-image:radial-gradient(var(--tw-gradient-stops))}.checked\:from-blue-50:checked{--tw-gradient-from:#276ef1 var(--tw-gradient-from-position);--tw-gradient-to:#276ef100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.checked\:from-\[50\%\]:checked{--tw-gradient-from-position:50%}.checked\:to-transparent:checked{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.checked\:to-\[54\%\]:checked{--tw-gradient-to-position:54%}.focus-within\:bg-grey-10:focus-within{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-grey-80:hover{--tw-border-opacity:1;border-color:rgb(70 73 77/var(--tw-border-opacity))}.hover\:bg-grey-10:hover{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:bg-white\/\[\.05\]:hover{background-color:#ffffff0d}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-grey-70:hover{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.checked\:hover\:border-blue-60:hover:checked{--tw-border-opacity:1;border-color:rgb(30 84 183/var(--tw-border-opacity))}.checked\:hover\:from-blue-60:hover:checked{--tw-gradient-from:#1e54b7 var(--tw-gradient-from-position);--tw-gradient-to:#1e54b700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.checked\:hover\:from-\[50\%\]:hover:checked{--tw-gradient-from-position:50%}.checked\:hover\:to-transparent:hover:checked{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.checked\:hover\:to-\[54\%\]:hover:checked{--tw-gradient-to-position:54%}.focus\:no-underline:focus{text-decoration-line:none}.disabled\:border-grey-40:disabled,.disabled\:checked\:border-grey-40:checked:disabled{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.disabled\:checked\:from-grey-40:checked:disabled{--tw-gradient-from:#babec3 var(--tw-gradient-from-position);--tw-gradient-to:#babec300 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.disabled\:checked\:from-\[50\%\]:checked:disabled{--tw-gradient-from-position:50%}.disabled\:checked\:to-transparent:checked:disabled{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.disabled\:checked\:to-\[54\%\]:checked:disabled{--tw-gradient-to-position:54%}.aria-readonly\:border-grey-40[aria-readonly=true],.aria-readonly\:checked\:border-grey-40:checked[aria-readonly=true]{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.aria-readonly\:checked\:from-grey-40:checked[aria-readonly=true]{--tw-gradient-from:#babec3 var(--tw-gradient-from-position);--tw-gradient-to:#babec300 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.aria-readonly\:checked\:from-\[50\%\]:checked[aria-readonly=true]{--tw-gradient-from-position:50%}.aria-readonly\:checked\:to-transparent:checked[aria-readonly=true]{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.aria-readonly\:checked\:to-\[54\%\]:checked[aria-readonly=true]{--tw-gradient-to-position:54%}.group[aria-expanded][data-empty=true][data-loading=false] .group-aria-\[expanded\]\[data-empty\=\'true\'\]\[data-loading\=\'false\'\]\:block,.group[aria-expanded][data-loading=true] .group-aria-\[expanded\]\[data-loading\=\'true\'\]\:block{display:block}.group[data-empty=true] .group-data-\[empty\=\'true\'\]\:hidden,.group[data-loading=true] .group-data-\[loading\=\'true\'\]\:hidden{display:none}.popover-open\:block:popover-open{display:block}.\[\&\>\[aria-selected\=\'true\'\]\]\:bg-blue-20>[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.\[\&\>li\]\:cursor-pointer>li{cursor:pointer}.\[\&\>li\]\:px-3>li{padding-left:.75rem;padding-right:.75rem}.\[\&\>li\]\:py-2>li{padding-top:.5rem;padding-bottom:.5rem}.\[\&\[readonly\]\]\:border-grey-40[readonly]{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.\[\&\[readonly\]\]\:bg-grey-10[readonly]{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.\[\&\[readonly\]\]\:shadow-none[readonly]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.side-nav-open .\[\.side-nav-open_\&\]\:w-\[3\.5rem\]{width:3.5rem}.side-nav-open .\[\.side-nav-open_\&\]\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.side-nav-open .\[\.side-nav-open_\&\]\:px-4{padding-left:1rem;padding-right:1rem}.side-nav-open .\[\.side-nav-open_\&\]\:opacity-0{opacity:0}
@@ -0,0 +1,5 @@
1
+ <!-- Source: Iconoir, added via `bin/add_icon` -->
2
+ <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <path d="M17 17L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .btn {
3
- @apply inline-flex items-center gap-2 rounded bg-white hover:bg-gray-100 border h-10 px-5 text-sm font-semibold no-underline;
3
+ @apply inline-flex items-center gap-2 rounded bg-white hover:bg-gray-100 border h-10 px-5 text-sm font-semibold no-underline whitespace-nowrap;
4
4
  @apply disabled:border-subdued disabled:text-tertiary disabled:pointer-events-none;
5
5
  }
6
6
 
@@ -1,12 +1,8 @@
1
- <%= anchor_popover(
2
- id: menu_id,
3
- classes: class_names(
4
- "px-0 py-1 border border-solid border-grey-40 shadow",
5
- menu_classes,
6
- )
7
- ) do |popover| %>
1
+ <%= anchor_popover(**merge_options(wrapper_options,
2
+ class: "px-0 py-1 border border-solid border-grey-40 shadow",
3
+ )) do |popover| %>
8
4
  <% if show_button? %>
9
- <% popover.with_trigger do %>
5
+ <% popover.with_trigger do %>
10
6
  <%= show_button %>
11
7
  <% end %>
12
8
  <% end %>
@@ -15,8 +11,10 @@
15
11
  <% items.each do |item| %>
16
12
  <%= tag.li(
17
13
  item,
18
- class: "action-menu-item whitespace-nowrap hover:bg-grey-10",
19
- data: { testid: "action-menu-item" }
14
+ **merge_options(item_options,
15
+ class: "action-menu-item whitespace-nowrap hover:bg-grey-10",
16
+ data: { testid: "action-menu-item" },
17
+ )
20
18
  ) %>
21
19
  <% end %>
22
20
  </ul>
@@ -3,7 +3,7 @@ module Anchor
3
3
  renders_one :show_button, lambda { |**kwargs|
4
4
  ButtonComponent.new(
5
5
  **popover_trigger_attributes(
6
- popovertarget: menu_id,
6
+ popovertarget: wrapper_options[:id],
7
7
  data: { testid: "action-menu-btn" }
8
8
  ),
9
9
  **kwargs
@@ -11,16 +11,25 @@ module Anchor
11
11
  }
12
12
  renders_many :items
13
13
 
14
- def initialize(menu_classes: "", **kwargs)
15
- @menu_id = self.class.generate_id
16
- @menu_classes = menu_classes
14
+ def initialize(menu_classes: nil, item_options: {}, **kwargs)
15
+ if menu_classes
16
+ deprecate(
17
+ arg: :menu_classes,
18
+ options: :menu_options,
19
+ key: :class,
20
+ value: menu_classes,
21
+ caller:
22
+ )
23
+ classes = class_names(menu_classes, menu_options[:class])
24
+ end
25
+ @item_options = item_options
17
26
 
18
- super
27
+ super(id: self.class.generate_id, class: classes, **kwargs)
19
28
  end
20
29
 
21
30
  private
22
31
 
23
- attr_reader :menu_id, :menu_classes
32
+ attr_reader :item_options
24
33
 
25
34
  def render?
26
35
  items.present?
@@ -6,14 +6,13 @@
6
6
  >
7
7
  <%= form_builder.input(
8
8
  "#{name}_search".to_sym,
9
- input_html: {
9
+ input_html: merge_options(input_options, {
10
10
  data: {
11
11
  autocomplete_target: "input",
12
12
  autocomplete_min_length_value: 0,
13
13
  action: "click->autocomplete#onInputClick",
14
- }.merge(input_data),
15
- readonly:,
16
- }
14
+ },
15
+ })
17
16
  ) %>
18
17
  <div class="hidden">
19
18
  <%= form_builder.input(
@@ -22,15 +21,15 @@
22
21
  data: { autocomplete_target: "hidden" }
23
22
  }) %>
24
23
  </div>
25
- <%= tag.ul(
24
+ <%= tag.ul(**merge_options(list_options, {
26
25
  class: class_names(
27
26
  list_box_classes,
28
27
  "group-data-[empty='true']:hidden group-data-[loading='true']:hidden [&>li]:py-2 [&>li]:px-3 [&>li]:cursor-pointer [&>[aria-selected='true']]:bg-blue-20",
29
28
  ),
30
29
  data: {
31
30
  autocomplete_target: "results",
32
- }.merge(list_data),
33
- ) %>
31
+ }
32
+ })) %>
34
33
  <div class="<%= list_box_classes %> text-center text-gray-500 hidden group-aria-[expanded][data-empty='true'][data-loading='false']:block">
35
34
  <%= t(".no_options") %>
36
35
  </div>
@@ -19,18 +19,39 @@ module Anchor
19
19
  form_builder:,
20
20
  name:,
21
21
  src:,
22
- readonly: false,
23
- input_data: {},
24
- list_data: {}
22
+ input_options: {},
23
+ list_options: {},
24
+ input_data: nil,
25
+ list_data: nil,
26
+ **kwargs
25
27
  )
26
28
  @form_builder = form_builder
27
29
  @name = name
28
- @readonly = readonly
29
- @input_data = input_data
30
- @list_data = list_data
30
+ @input_options = input_options
31
+ @list_options = list_options
31
32
  @src = src
33
+ if input_data
34
+ deprecate(
35
+ arg: :input_data,
36
+ options: :input_options,
37
+ key: :data,
38
+ value: input_data,
39
+ caller:
40
+ )
41
+ input_options[:data] = input_data
42
+ end
43
+ if list_data
44
+ deprecate(
45
+ arg: :list_data,
46
+ options: :list_options,
47
+ key: :data,
48
+ value: list_data,
49
+ caller:
50
+ )
51
+ list_options[:data] = list_data
52
+ end
32
53
 
33
- super
54
+ super(**kwargs)
34
55
  end
35
56
 
36
57
  def list_box_classes
@@ -39,6 +60,6 @@ module Anchor
39
60
 
40
61
  private
41
62
 
42
- attr_reader :form_builder, :name, :readonly, :input_data, :list_data, :src
63
+ attr_reader :form_builder, :name, :input_options, :list_options, :src
43
64
  end
44
65
  end
@@ -1,8 +1,5 @@
1
- <%= tag.span(
2
- class: class_names(
3
- "inline-block px-2 py-0.5 rounded-full text-xs",
4
- variant,
5
- ),
6
- ) do %>
1
+ <%= tag.span(**merge_options(wrapper_options, {
2
+ class: "inline-block px-2 py-0.5 rounded-full text-xs",
3
+ })) do %>
7
4
  <%= content %>
8
5
  <% end %>
@@ -10,18 +10,8 @@ module Anchor
10
10
  }.freeze
11
11
  VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
12
12
 
13
- def initialize(variant: VARIANT_DEFAULT)
14
- @variant = VARIANT_MAPPINGS[
15
- fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
16
- ]
17
-
18
- super
19
- end
20
-
21
13
  private
22
14
 
23
- attr_reader :variant
24
-
25
15
  def render?
26
16
  content.present?
27
17
  end
@@ -1,9 +1,3 @@
1
- <%= tag.div(
2
- class: class_names(
3
- "px-4 py-3 rounded",
4
- variant,
5
- classes,
6
- ),
7
- ) do %>
1
+ <%= tag.div(**merge_options(wrapper_options, { class: "px-4 py-3 rounded" })) do %>
8
2
  <%= content %>
9
3
  <% end %>
@@ -10,18 +10,8 @@ module Anchor
10
10
  }.freeze
11
11
  VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
12
12
 
13
- def initialize(variant: VARIANT_DEFAULT, **kwargs)
14
- @variant = VARIANT_MAPPINGS[
15
- fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
16
- ]
17
-
18
- super
19
- end
20
-
21
13
  private
22
14
 
23
- attr_reader :variant
24
-
25
15
  def render?
26
16
  content.present?
27
17
  end
@@ -1,22 +1,14 @@
1
1
  <%= content_tag(
2
2
  tag,
3
- type: type,
4
- href: href,
5
- data: data,
6
- disabled: disabled,
7
- title: title,
8
- form: form,
9
- popovertarget: popovertarget,
10
- popovertargetaction: popovertargetaction,
11
- id: id,
12
- class: class_names(
13
- size,
14
- variant,
15
- classes,
16
- "btn-with-starting-icon" => starting_icon?,
17
- "btn-with-ending-icon" => ending_icon?,
18
- "btn-full-width" => full_width,
19
- ),
3
+ **merge_options(wrapper_options, {
4
+ class: class_names(
5
+ size,
6
+ variant,
7
+ "btn-with-starting-icon" => starting_icon?,
8
+ "btn-with-ending-icon" => ending_icon?,
9
+ "btn-full-width" => full_width,
10
+ ),
11
+ }),
20
12
  ) do %>
21
13
  <%= starting_icon if starting_icon? %>
22
14
 
@@ -39,16 +39,10 @@ module Anchor
39
39
  def initialize(
40
40
  tag: TAG_DEFAULT,
41
41
  type: TYPE_DEFAULT,
42
- href: nil,
43
42
  size: SIZE_DEFAULT,
44
- variant: VARIANT_DEFAULT,
45
- form: nil,
46
- popovertarget: nil,
47
- popovertargetaction: nil,
43
+ href: nil,
48
44
  disabled: false,
49
45
  full_width: false,
50
- title: nil,
51
- id: nil,
52
46
  **kwargs
53
47
  )
54
48
  @tag = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
@@ -57,26 +51,18 @@ module Anchor
57
51
  TYPE_OPTIONS, type, TYPE_DEFAULT
58
52
  )
59
53
  end
60
- @href = href if @tag == :a
61
54
  @size = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
62
- @variant = VARIANT_MAPPINGS[
63
- fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
64
- ]
65
- @form = form
66
- @popovertarget = popovertarget
67
- @popovertargetaction = popovertargetaction
68
- @disabled = disabled unless @tag == :a
69
55
  @full_width = full_width
70
- @title = title
71
- @id = id
72
-
73
- super
56
+ super(**kwargs.merge(
57
+ href: @tag == :a ? href : nil,
58
+ disabled: @tag == :a ? nil : disabled,
59
+ type: @type
60
+ ).compact)
74
61
  end
75
62
 
76
63
  private
77
64
 
78
- attr_reader :tag, :type, :href, :size, :variant, :form, :popovertarget,
79
- :popovertargetaction, :disabled, :full_width, :title, :id
65
+ attr_reader :size, :tag, :full_width, :variant
80
66
 
81
67
  def render?
82
68
  content.present?
@@ -7,16 +7,33 @@ module Anchor
7
7
  "#{base_name}-#{SecureRandom.uuid}"
8
8
  end
9
9
 
10
- def initialize(classes: nil, data: {}, id: nil, **kwargs)
11
- @classes = classes
12
- @data = data
13
- @id = id
10
+ def initialize(**kwargs)
11
+ classes = add_variant_classes_if_available(
12
+ classes: [*kwargs.delete(:classes), *kwargs.delete(:class)],
13
+ variant: kwargs[:variant]
14
+ )
15
+ @wrapper_options = kwargs.merge(class: classes)
14
16
 
15
17
  super
16
18
  end
17
19
 
18
20
  private
19
21
 
20
- attr_reader :classes, :data, :id
22
+ attr_reader :wrapper_options
23
+
24
+ def deprecate(arg:, key:, value:, caller:, options: nil)
25
+ if options.nil?
26
+ ActiveSupport::Deprecation.warn(
27
+ "#{arg} is deprecated. Use #{key}: #{value.inspect} instead.",
28
+ caller
29
+ )
30
+ else
31
+ ActiveSupport::Deprecation.warn(
32
+ "#{arg} is deprecated. " \
33
+ "Use #{options}: { #{key}: #{value.inspect}, ... } instead.",
34
+ caller
35
+ )
36
+ end
37
+ end
21
38
  end
22
39
  end
@@ -1,14 +1,13 @@
1
1
  <%= show_button if show_button? %>
2
2
 
3
- <%= tag.dialog(
3
+ <%= tag.dialog(**merge_options(wrapper_options, {
4
4
  aria: { labelledby: title_id },
5
- class: class_names("w-[36rem] rounded-lg p-0 bg-white shadow-lg backdrop:bg-grey-100/50", classes),
5
+ class: "w-[36rem] rounded-lg p-0 bg-white shadow-lg backdrop:bg-grey-100/50",
6
6
  data: {
7
7
  controller: "dialog",
8
8
  testid: title_id,
9
9
  },
10
- id: id,
11
- ) do %>
10
+ })) do %>
12
11
  <header class="p-6 flex gap-4 justify-between items-center">
13
12
  <%= render Anchor::TextComponent.new(
14
13
  variant: :heading_2xl,
@@ -1,6 +1,4 @@
1
1
  <%= anchor_svg(
2
2
  "icons/#{icon}",
3
- aria: { hidden: true },
4
- class: classes,
5
- data: data,
3
+ **merge_options(wrapper_options, { aria: { hidden: true } }),
6
4
  ) %>
@@ -3,7 +3,7 @@ module Anchor
3
3
  def initialize(icon:, **kwargs)
4
4
  @icon = icon
5
5
 
6
- super
6
+ super(**kwargs)
7
7
  end
8
8
 
9
9
  private
@@ -1,7 +1,6 @@
1
1
  <%= tag.span t(".label"), class: "sr-only" %>
2
2
 
3
- <%= anchor_icon(
3
+ <%= anchor_icon(**merge_options(wrapper_options,
4
+ class: class_names(wrapper_options[:class], "text-grey-100 animate-spin"),
4
5
  icon: "loading-indicator",
5
- classes: "text-grey-100 animate-spin",
6
- data: data,
7
- ) %>
6
+ )) %>
@@ -1,7 +1,4 @@
1
- <%= tag.div(
2
- class: classes,
3
- data: data,
4
- ) do %>
1
+ <%= tag.div(wrapper_options) do %>
5
2
  <%= tag.div(
6
3
  class: class_names(
7
4
  "w-fit max-w-full",
@@ -35,7 +35,7 @@ module Anchor
35
35
  ]
36
36
  @variant_aspect_ratio = VARIANT_ASPECT_RATIO_MAPPINGS[variant]
37
37
 
38
- super
38
+ super(**kwargs)
39
39
  end
40
40
 
41
41
  private
@@ -1,8 +1,6 @@
1
- <%= tag.div(
2
- class: class_names(
3
- "p-6",
4
- classes
5
- )
1
+ <%= tag.div(**wrapper_options.except(:class).merge({
2
+ class: class_names("p-6", wrapper_options[:class]),
3
+ }),
6
4
  ) do %>
7
5
  <%= content %>
8
6
  <% end %>
@@ -1,4 +1,6 @@
1
- <%= tag.div(class: class_names("border border-subdued", classes)) do %>
1
+ <%= tag.div(**merge_options(wrapper_options,
2
+ class: "border border-subdued",
3
+ )) do %>
2
4
  <%= header %>
3
5
 
4
6
  <% if active? %>
@@ -4,15 +4,11 @@
4
4
  ) do %>
5
5
  <%= trigger if trigger? %>
6
6
 
7
- <%= tag.div(
8
- class: class_names(
9
- "absolute -left-full -top-full m-0 bg-white rounded border border-subdued popover-open:block",
10
- classes
11
- ),
7
+ <%= tag.div(**merge_options(wrapper_options,
8
+ class: "absolute -left-full -top-full m-0 bg-white rounded border border-subdued popover-open:block",
12
9
  data: { action: "toggle->popover#positionPopover" },
13
- id:,
14
10
  popover: "auto",
15
- ) do %>
11
+ )) do %>
16
12
  <%= content %>
17
13
  <% end %>
18
14
  <% end %>
@@ -1,5 +1,5 @@
1
1
  import { Controller } from "@hotwired/stimulus";
2
- import { computePosition, autoPlacement, offset } from "@floating-ui/dom";
2
+ import { computePosition, autoPlacement, offset, autoUpdate } from "@floating-ui/dom";
3
3
 
4
4
  export default class extends Controller<HTMLDivElement> {
5
5
  static targets = ["button"];
@@ -7,20 +7,26 @@ export default class extends Controller<HTMLDivElement> {
7
7
  declare readonly buttonTarget: HTMLButtonElement;
8
8
 
9
9
  positionPopover = (event: { target: HTMLDivElement }): void => {
10
+ const trigger = this.buttonTarget
10
11
  const popover = event.target;
11
- computePosition(this.buttonTarget, popover, {
12
- placement: "bottom-start",
13
- middleware: [
14
- autoPlacement({
15
- allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"],
16
- }),
17
- offset(4)
18
- ],
19
- }).then(({ x, y }) => {
20
- Object.assign(popover.style, {
21
- left: `${x}px`,
22
- top: `${y}px`,
23
- });
24
- });
12
+
13
+ const updatePosition = () => {
14
+ computePosition(trigger, popover, {
15
+ placement: "bottom-start",
16
+ middleware: [
17
+ autoPlacement({
18
+ allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"],
19
+ }),
20
+ offset(4)
21
+ ],
22
+ }).then(({ x, y }) => {
23
+ Object.assign(popover.style, {
24
+ left: `${x}px`,
25
+ top: `${y}px`,
26
+ });
27
+ })
28
+ };
29
+
30
+ autoUpdate(trigger, popover, updatePosition);
25
31
  };
26
32
  }
@@ -1,8 +1,9 @@
1
1
  <%= tag.div(
2
2
  content,
3
- class: class_names(
4
- "prose",
5
- classes,
3
+ **wrapper_options.except(:class).merge(
4
+ class: class_names(
5
+ "prose",
6
+ wrapper_options[:class],
7
+ ),
6
8
  ),
7
- data: data
8
9
  ) %>
@@ -1,20 +1,19 @@
1
- <%= tag.div(
2
- class: "flex min-h-[100dvh] max-h-[100dvh] overflow-hidden",
1
+ <%= tag.div(**merge_options(wrapper_options, {
2
+ class: "flex min-h-[100dvh] max-h-[100dvh] overflow-hidden",
3
3
  data: {
4
4
  controller: "toggle",
5
5
  toggle_toggle_class: "side-nav-open",
6
6
  toggle_initial_label_value: t(".hide_nav"),
7
7
  toggle_intermediate_label_value: t(".show_nav"),
8
- },
9
- ) do %>
10
- <%= tag.header(
8
+ }
9
+ })) do %>
10
+ <%= tag.header(**merge_options(sidebar_options, {
11
11
  class: class_names(
12
12
  "flex flex-shrink-0 w-[15rem] relative",
13
13
  "[.side-nav-open_&]:w-[3.5rem] transition-[width] duration-500",
14
- classes
15
14
  ),
16
- data: { testid: "side-nav" }
17
- ) do %>
15
+ data: { testid: "side-nav" },
16
+ })) do %>
18
17
  <%= tag.div(
19
18
  class: class_names(
20
19
  "bg-teal text-white w-[15rem] flex flex-col divide-y divide-solid divide-white/10 duration-500",
@@ -58,7 +57,7 @@
58
57
  ),
59
58
  data: { toggle_target: "inertify" },
60
59
  ) do %>
61
- <%= render Anchor::ActionMenuComponent.new(classes: "py-4", menu_classes: "ml-4 w-[198px]") do |c| %>
60
+ <%= render Anchor::ActionMenuComponent.new(classes: "py-4", menu_options: { class: "ml-4 w-[198px]" }) do |c| %>
62
61
  <% c.with_show_button(
63
62
  classes: "text-lg text-white w-full hover:text-white hover:bg-white/[.05] px-6 justify-between rounded-none",
64
63
  full_width: true,
@@ -8,18 +8,21 @@ module Anchor
8
8
  apps_button_text:,
9
9
  nav_items:,
10
10
  employee:,
11
+ sidebar_options: {},
11
12
  **kwargs
12
13
  )
13
14
  @apps = apps
14
15
  @apps_button_text = apps_button_text
15
16
  @nav_items = nav_items
16
17
  @employee = employee
18
+ @sidebar_options = sidebar_options
17
19
 
18
20
  super
19
21
  end
20
22
 
21
23
  private
22
24
 
23
- attr_reader :apps, :apps_button_text, :employee, :nav_items
25
+ attr_reader :apps, :apps_button_text, :employee, :nav_items,
26
+ :sidebar_options
24
27
  end
25
28
  end
@@ -1,11 +1,13 @@
1
1
  <%= link_to(
2
2
  content,
3
3
  href,
4
- aria: {
5
- current: { page: active }
6
- },
7
- class: class_names(
8
- "inline-block px-5 py-4 text-sm font-semibold relative text-gray-600 hover:text-gray-900",
9
- "text-gray-900 after:block after:bg-blue-500 after:h-1 after:absolute after:-bottom-1 after:inset-x-0" => active,
4
+ **merge_options(wrapper_options,
5
+ aria: {
6
+ current: { page: active }
7
+ },
8
+ class: class_names(
9
+ "inline-block px-5 py-4 text-sm font-semibold relative text-gray-600 hover:text-gray-900",
10
+ "text-gray-900 after:block after:bg-blue-500 after:h-1 after:absolute after:-bottom-1 after:inset-x-0" => active,
11
+ )
10
12
  )
11
13
  ) %>
@@ -1,11 +1,11 @@
1
1
  module Anchor
2
2
  module TabBar
3
3
  class TabComponent < Component
4
- def initialize(href:, active: false)
4
+ def initialize(href:, active: false, **kwargs)
5
5
  @href = href
6
6
  @active = active
7
7
 
8
- super
8
+ super(**kwargs)
9
9
  end
10
10
 
11
11
  private
@@ -1,7 +1,6 @@
1
- <%= tag.nav(
2
- aria: { label: label },
3
- class: class_names("shadow-[inset_0_-1px] shadow-gray-400 pb-1", classes),
4
- ) do %>
1
+ <%= tag.nav(**merge_options(wrapper_options,
2
+ class: "shadow-[inset_0_-1px] shadow-gray-400 pb-1",
3
+ )) do %>
5
4
  <ul class="flex">
6
5
  <% tabs.each do |tab| %>
7
6
  <%= tag.li tab %>
@@ -3,9 +3,10 @@ module Anchor
3
3
  renders_many :tabs, TabBar::TabComponent
4
4
 
5
5
  def initialize(label:, **kwargs)
6
- @label = label
6
+ aria = kwargs.delete(:aria) || {}
7
+ aria[:label] = label
7
8
 
8
- super
9
+ super(**kwargs, aria:)
9
10
  end
10
11
 
11
12
  private
@@ -23,7 +23,7 @@ module Anchor
23
23
  @caption = caption
24
24
  @paginate = paginate
25
25
 
26
- super
26
+ super()
27
27
  end
28
28
 
29
29
  private
@@ -1,8 +1,3 @@
1
- <%= content_tag(
2
- tag,
3
- class: class_names(variant, classes),
4
- id: id,
5
- data: data
6
- ) do %>
1
+ <%= content_tag(tag, **wrapper_options) do %>
7
2
  <%= content %>
8
3
  <% end %>
@@ -3,7 +3,7 @@ module Anchor
3
3
  TAG_DEFAULT = :p
4
4
 
5
5
  VARIANT_DEFAULT = :body_base
6
- VARIANT_MAPPING = {
6
+ VARIANT_MAPPINGS = {
7
7
  body_lg: "text-lg",
8
8
  body_base: "text-base",
9
9
  body_sm: "text-sm",
@@ -16,25 +16,16 @@ module Anchor
16
16
  subheading_sm: "text-sm font-bold leading-4 uppercase",
17
17
  subheading_xs: "text-xs font-bold leading-4 uppercase",
18
18
  }.freeze
19
- VARIANT_OPTIONS = VARIANT_MAPPING.keys
19
+ VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
20
20
 
21
- def initialize(
22
- variant: VARIANT_DEFAULT,
23
- tag: TAG_DEFAULT,
24
- **kwargs
25
- )
26
- @variant = VARIANT_MAPPING[
27
- fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
28
- ]
21
+ def initialize(tag: TAG_DEFAULT, **kwargs)
29
22
  @tag = tag
30
- @id = id
31
-
32
- super
23
+ super(**kwargs)
33
24
  end
34
25
 
35
26
  private
36
27
 
37
- attr_reader :variant, :tag, :id
28
+ attr_reader :tag
38
29
 
39
30
  def render?
40
31
  content.present?
@@ -1,12 +1,9 @@
1
1
  <%= tag.div(
2
- class: class_names(
3
- "toast",
4
- variant,
5
- ),
6
- data: { controller: "toast" },
7
- id: id,
8
- popover: "manual",
9
- role:,
2
+ **merge_options(wrapper_options, {
3
+ class: "toast",
4
+ data: { controller: "toast" },
5
+ popover: "manual",
6
+ })
10
7
  ) do %>
11
8
  <% if icon? %>
12
9
  <%= icon %>
@@ -14,22 +14,14 @@ module Anchor
14
14
  }.freeze
15
15
  VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
16
16
 
17
- def initialize(
18
- id: self.class.generate_id,
19
- role: :alert,
20
- variant: VARIANT_DEFAULT
21
- )
22
- @variant = VARIANT_MAPPINGS[
23
- fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
24
- ]
25
- @role = role
26
-
27
- super
17
+ def initialize(id: self.class.generate_id, **kwargs)
18
+ @id = id
19
+ super(**kwargs, id:)
28
20
  end
29
21
 
30
22
  private
31
23
 
32
- attr_reader :variant, :role, :id
24
+ attr_reader :id
33
25
 
34
26
  def render?
35
27
  content.present?
@@ -15,7 +15,11 @@ export default class extends Controller<HTMLDivElement> {
15
15
  }, this.showDelayValue);
16
16
 
17
17
  setTimeout(() => {
18
- this.element.hidePopover();
18
+ this.element.remove();
19
19
  }, this.hideDelayValue);
20
20
  }
21
+
22
+ disconnect(): void {
23
+ this.element.remove();
24
+ }
21
25
  }
@@ -16,5 +16,31 @@ module Anchor
16
16
  fallback
17
17
  end
18
18
  end
19
+
20
+ private
21
+
22
+ def add_variant_classes_if_available(classes:, variant:)
23
+ if supports_variants?
24
+ variant ||= self.class::VARIANT_DEFAULT
25
+
26
+ variant_class = self.class::VARIANT_MAPPINGS[
27
+ fetch_or_fallback(
28
+ self.class::VARIANT_OPTIONS,
29
+ variant,
30
+ self.class::VARIANT_DEFAULT
31
+ )
32
+ ]
33
+
34
+ [variant_class, *classes]
35
+ else
36
+ classes
37
+ end
38
+ end
39
+
40
+ def supports_variants?
41
+ self.class.const_defined?(:VARIANT_MAPPINGS) \
42
+ && self.class.const_defined?(:VARIANT_DEFAULT) \
43
+ && self.class.const_defined?(:VARIANT_OPTIONS)
44
+ end
19
45
  end
20
46
  end
@@ -2,6 +2,16 @@ module Anchor
2
2
  class FormBuilder < ActionView::Helpers::FormBuilder
3
3
  delegate :concat, :content_tag, :render, to: :@template
4
4
 
5
+ def initialize(object_name, object, template, options, &)
6
+ super(
7
+ object_name,
8
+ object,
9
+ view_component?(template) ? template.helpers : template,
10
+ options,
11
+ &
12
+ )
13
+ end
14
+
5
15
  def error_message_for(attribute, options = {})
6
16
  render ErrorMessageComponent.new(
7
17
  form_builder: self,
@@ -113,5 +123,9 @@ module Anchor
113
123
  def i18n_label(attribute)
114
124
  object.class.human_attribute_name attribute
115
125
  end
126
+
127
+ def view_component?(template)
128
+ template.is_a? ViewComponent::Base
129
+ end
116
130
  end
117
131
  end
@@ -67,6 +67,7 @@ module Anchor
67
67
  file = ::Anchor::ViewComponents::SvgResolver.resolve(name)
68
68
  doc = Nokogiri::HTML::DocumentFragment.parse(file)
69
69
  svg = doc.at_css "svg"
70
+ attributes[:class] = class_names(attributes[:class])
70
71
 
71
72
  attributes.each_pair do |key, value|
72
73
  svg[key] = value
@@ -89,5 +90,14 @@ module Anchor
89
90
  popovertarget:,
90
91
  }
91
92
  end
93
+
94
+ def merge_options(original, new)
95
+ original.except(:class, :data, :aria).merge(
96
+ aria: original.fetch(:aria, {}).merge(new.delete(:aria) || {}),
97
+ class: class_names(original[:class], new.delete(:class)),
98
+ data: original.fetch(:data, {}).merge(new.delete(:data) || {}),
99
+ **new
100
+ )
101
+ end
92
102
  end
93
103
  end
@@ -1,5 +1,5 @@
1
1
  module Anchor
2
2
  module ViewComponents
3
- VERSION = "0.20.1".freeze
3
+ VERSION = "0.21.0".freeze
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: anchor_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.20.1
4
+ version: 0.21.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Buoy Software
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-09-26 00:00:00.000000000 Z
11
+ date: 2023-10-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -63,6 +63,7 @@ files:
63
63
  - app/assets/images/icons/nav-arrow-down.svg
64
64
  - app/assets/images/icons/nav-arrow-left.svg
65
65
  - app/assets/images/icons/nav-arrow-right.svg
66
+ - app/assets/images/icons/search.svg
66
67
  - app/assets/images/icons/warning-triangle.svg
67
68
  - app/assets/stylesheets/anchor-view-components.tailwind.css
68
69
  - app/assets/stylesheets/components/action-menu.css