@vonaffenfels/slate-editor 1.1.69 → 1.1.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/.babelrc +43 -43
  2. package/README.md +5 -5
  3. package/componentLoader.js +93 -93
  4. package/dist/BlockEditor.css +1871 -4
  5. package/dist/BlockEditor.js +3960 -336
  6. package/dist/Renderer.js +2081 -2
  7. package/dist/fromHTML.js +78 -1
  8. package/dist/index.css +1871 -4
  9. package/dist/index.js +4037 -336
  10. package/dist/toHTML.js +1689 -2
  11. package/dist/toText.js +1689 -2
  12. package/package.json +2 -2
  13. package/postcss.config.js +6 -6
  14. package/scss/demo.scss +148 -148
  15. package/scss/sidebarEditor.scss +181 -181
  16. package/scss/toolbar.scss +161 -161
  17. package/src/Blocks/EmptyBlock.js +11 -11
  18. package/src/Blocks/EmptyWrapper.js +4 -4
  19. package/src/Blocks/ErrorBoundary.js +40 -40
  20. package/src/Blocks/LayoutBlock.js +274 -274
  21. package/src/Blocks/LayoutSlot.js +90 -90
  22. package/src/CollapsableMenu/CollapsableMenu.js +48 -48
  23. package/src/Context/StorybookContext.js +6 -6
  24. package/src/ElementAutocomplete.js +133 -133
  25. package/src/Loader.js +137 -137
  26. package/src/Nodes/Default.js +158 -158
  27. package/src/Nodes/Leaf.js +54 -54
  28. package/src/Nodes/Text.js +97 -97
  29. package/src/ObjectId.js +3 -3
  30. package/src/Renderer.js +73 -73
  31. package/src/Serializer/Html.js +42 -42
  32. package/src/Serializer/Serializer.js +371 -371
  33. package/src/Serializer/Text.js +17 -17
  34. package/src/Serializer/ads.js +174 -174
  35. package/src/Serializer/index.js +3 -3
  36. package/src/SidebarEditor/AssetList.js +181 -181
  37. package/src/SidebarEditor/Fields/CloudinaryContentSelect.js +89 -89
  38. package/src/SidebarEditor/Fields/ColorPicker.js +89 -89
  39. package/src/SidebarEditor/Fields/ContentfulContentSelect.js +62 -62
  40. package/src/SidebarEditor/Fields/DateTime.js +55 -55
  41. package/src/SidebarEditor/Fields/MVP.js +66 -66
  42. package/src/SidebarEditor/Fields/MultiSelect.js +13 -13
  43. package/src/SidebarEditor/Fields/RemoteMultiSelect.js +40 -40
  44. package/src/SidebarEditor/Fields/RemoteSelect.js +39 -39
  45. package/src/SidebarEditor/Fields/Select.js +47 -47
  46. package/src/SidebarEditor/Fields/StreamSelect.js +15 -15
  47. package/src/SidebarEditor/Fields/Switch.js +34 -34
  48. package/src/SidebarEditor/Fields/Textarea.js +21 -21
  49. package/src/SidebarEditor/Resizable.js +85 -85
  50. package/src/Storybook.js +151 -151
  51. package/src/Toolbar/Align.js +64 -64
  52. package/src/Toolbar/Anchor.js +94 -94
  53. package/src/Toolbar/Block.js +135 -135
  54. package/src/Toolbar/Element.js +44 -44
  55. package/src/Toolbar/Formats.js +71 -71
  56. package/src/Toolbar/Insert.js +28 -28
  57. package/src/Toolbar/Layout.js +399 -399
  58. package/src/Toolbar/Link.js +164 -164
  59. package/src/Toolbar/Toolbar.js +235 -235
  60. package/src/Tools/Margin.js +51 -51
  61. package/src/Translation/TranslationToolbarButton.js +115 -115
  62. package/src/dev/draftToSlate.json +3147 -3147
  63. package/src/dev/index.css +2 -2
  64. package/src/dev/index.html +10 -10
  65. package/src/dev/index.js +4 -4
  66. package/src/dev/sampleValue1.json +4294 -4294
  67. package/src/dev/sampleValueValid.json +410 -410
  68. package/src/dev/testComponents/TestStory.js +74 -74
  69. package/src/dev/testComponents/TestStory.stories.js +216 -216
  70. package/src/dev/testComponents/TestStory2.js +74 -74
  71. package/src/dev/testComponents/TestStory2.stories.js +197 -197
  72. package/src/dev/testComponents/TestStory3.js +74 -74
  73. package/src/dev/testComponents/TestStory3.stories.js +197 -197
  74. package/src/dev/testSampleValue.json +746 -746
  75. package/src/fromHTML.js +4 -4
  76. package/src/helper/array.js +8 -8
  77. package/src/index.js +10 -10
  78. package/src/plugins/ListItem.js +48 -48
  79. package/src/plugins/SoftBreak.js +23 -23
  80. package/src/toHTML.js +6 -6
  81. package/src/toText.js +6 -6
  82. package/src/util/reduceContentfulResponse.js +64 -64
  83. package/src/util.js +19 -19
  84. package/storyLoader.js +47 -47
  85. package/tailwind.config.js +4 -4
  86. package/webpack.config.build.js +55 -55
  87. package/webpack.config.dev.js +60 -60
  88. package/webpack.config.js +130 -130
  89. package/webpack.config.watch.js +4 -4
  90. package/dist/BlockEditor.js.LICENSE.txt +0 -61
  91. package/dist/Renderer.js.LICENSE.txt +0 -15
  92. package/dist/index.js.LICENSE.txt +0 -69
  93. package/dist/toHTML.js.LICENSE.txt +0 -23
  94. package/dist/toText.js.LICENSE.txt +0 -23
@@ -1,4 +1,1871 @@
1
- .toolbar{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3);display:none;flex-direction:row;justify-content:space-between;font-family:Arial,sans-serif;padding:5px;position:absolute;z-index:500}.toolbar.toolbar-static{display:block;position:fixed;width:100%;max-width:100%;top:0px;left:0px}.toolbar.active{display:block}.toolbar .toolbar-btns{display:flex;align-items:center}.toolbar .toolbar-btn{border-radius:3px;color:#000;cursor:pointer;font-weight:bold;margin-right:5px;padding:5px 7px;z-index:500;position:relative;display:block}.toolbar .toolbar-btn.active{background-color:rgba(0,0,0,.3)}.toolbar .toolbar-btn:last-child{margin-right:0px}.toolbar .toolbar-btn:hover,.toolbar .toolbar-btn:active{background-color:rgba(0,0,0,.2)}.toolbar .toolbar-btn:hover .toolbar-btn-config,.toolbar .toolbar-btn:active .toolbar-btn-config{display:block}.toolbar .toolbar-btn .toolbar-btn-config{position:absolute;top:28px;left:0px;display:none;background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3);padding:5px 7px}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner{display:flex;flex-direction:column}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row{min-width:250px;padding:5px 7px;display:flex;flex-direction:row}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-label{flex-grow:0;padding:0 7px 0 0}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input{flex-grow:1}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input{padding:5px;border:1px solid gray;background-color:#fff;color:#000}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input[type=checkbox]:checked{color:#fff;background-color:#000}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-btn{display:flex;flex-grow:1;border:1px solid #000}.toolbar .toolbar-btn-expand{z-index:500;display:block;max-height:28px;overflow:hidden}.toolbar .toolbar-btn-expand .toolbar-btn-expand-inner{display:flex;flex-direction:column}.toolbar .toolbar-btn-expand .toolbar-btn-expand-inner .toolbar-btn.active{order:-1}.toolbar .toolbar-btn-expand:hover{overflow:visible}.toolbar .toolbar-btn-expand:hover .toolbar-btn-expand-inner{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3)}.toolbar .toolbar-btn-expand-right{z-index:500;display:block;max-height:28px;overflow:hidden}.toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner{left:100%;display:flex;flex-direction:column}.toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner .toolbar-btn.active{order:-1}.toolbar .toolbar-btn-expand-right:hover{overflow:visible}.toolbar .toolbar-btn-expand-right:hover .toolbar-btn-expand-inner{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3)}
2
- .storybook-element-wrapper{max-width:100vw;width:100%;margin-left:auto;margin-right:auto}.storybook-element{display:inline-block;width:100%}.storybook-element .storybook-element-component-overlay{display:none;width:100%;height:100%;position:absolute;z-index:20;background-color:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#000;font-size:1em;align-items:center;justify-content:center;content-visibility:auto;outline:3px dashed #036fe3}.storybook-element.storybook-element-missing-attributes .storybook-element-component-overlay{display:flex;outline:3px dashed red}.storybook-element.storybook-inline{display:inline-block}.storybook-element.storybook-inline .options-toolbar{display:inline-block}.storybook-element.storybook-inline .options-toolbar .options-container{padding:.15em}.storybook-element.storybook-inline .options-toolbar .options-container .options-container-option{width:16px}.storybook-element.storybook-inline .storybook-element-component{display:inline-block}.storybook-element.storybook-inline .storybook-element-component .editor-empty-element{min-width:220px;min-height:10px;padding:.15em}.storybook-element.storybook-inline .storybook-element-component-overlay{font-size:.75em;min-width:220px;text-align:center}.storybook-element.storybook-element-float-left{float:left}.storybook-element.storybook-element-float-right{float:right}.storybook-element .storybook-element-component{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;position:relative}.storybook-element .storybook-element-component:hover .storybook-element-component-overlay{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;cursor:pointer}.storybook-element .storybook-element-component .editor-empty-element{display:block;background-color:#42000b;color:#fff;border:1px solid #000;min-height:40px;padding:2em;min-width:100%}.storybook-element .storybook-element-component .editor-empty-element.editor-select-element{background-color:#555}.storybook-element .storybook-element-component.storybook-inline .editor-empty-element{min-height:20px;min-width:100px}.storybook-element .storybook-element-component .storybook-element-display:empty{display:block;background-color:red;border:1px solid #000;min-height:30px;min-width:100px}.storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty{display:block;background-color:red;border:1px solid #000;color:#fff;font-weight:bold;font-size:110%;padding:10px;min-height:30px;min-width:100px;position:relative}.storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty::after{position:absolute;top:0px;left:0px;content:attr(data-content)}.storybook-element .storybook-element-error{background-color:red;padding:15px;font-size:18px;font-weight:bold;min-height:100px;min-width:100px}@container (min-width: 100px){.storybook-element-component-overlay{font-size:2em}}
3
- *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--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,samp,pre{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:baseline}sub{bottom:-0.25em}sup{top:-0.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}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:rgba(0,0,0,0);background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{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}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::before,::after{--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: rgb(59 130 246 / 0.5);--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: }::backdrop{--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: rgb(59 130 246 / 0.5);--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: }.container{width:100%}@media(min-width: 640px){.container{max-width:640px}}@media(min-width: 768px){.container{max-width:768px}}@media(min-width: 1024px){.container{max-width:1024px}}@media(min-width: 1280px){.container{max-width:1280px}}@media(min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0px}.right-0{right:0px}.top-0{top:0px}.top-\[80px\]{top:80px}.z-50{z-index:50}.z-\[999999\]{z-index:999999}.m-2{margin:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-16{margin-left:4rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mr-16{margin-right:4rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-\[3px\]{margin-top:3px}.block{display:block}.inline-block{display:inline-block}.\!inline{display:inline !important}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-full{height:100%}.max-h-\[28px\]{max-height:28px}.max-h-full{max-height:100%}.\!w-auto{width:auto !important}.w-11{width:2.75rem}.w-5{width:1.25rem}.w-52{width:13rem}.w-full{width:100%}.min-w-\[28px\]{min-width:28px}.min-w-\[32px\]{min-width:32px}.max-w-\[150px\]{max-width:150px}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.translate-x-0{--tw-translate-x: 0px;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))}.translate-x-5{--tw-translate-x: 1.25rem;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))}.transform{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))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.\!border-0{border-width:0px !important}.border{border-width:1px}.border-2{border-width:2px}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-transparent{border-color:rgba(0,0,0,0)}.\!bg-green-600{--tw-bg-opacity: 1 !important;background-color:rgb(22 163 74/var(--tw-bg-opacity)) !important}.bg-\[\#036fe3\]{--tw-bg-opacity: 1;background-color:rgb(3 111 227/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.\!p-1{padding:.25rem !important}.p-2{padding:.5rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.pr-2{padding-right:.5rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.\!text-sm{font-size:.875rem !important;line-height:1.25rem !important}.\!text-xl{font-size:1.25rem !important;line-height:1.75rem !important}.\!text-xs{font-size:.75rem !important;line-height:1rem !important}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.italic{font-style:italic}.\!leading-\[18px\]{line-height:18px !important}.\!text-red-500{--tw-text-opacity: 1 !important;color:rgb(239 68 68/var(--tw-text-opacity)) !important}.\!text-white{--tw-text-opacity: 1 !important;color:rgb(255 255 255/var(--tw-text-opacity)) !important}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.ring-0{--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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.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(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.block-editor-wrapper{position:relative;display:flex;height:100%;max-height:100%;max-width:100%;width:100%}.block-editor-wrapper .slate-editor-element-selected:not(.storybook-element-missing-attributes) .storybook-element-component{outline:2px dashed #61a2e9}.block-editor-wrapper.storybook-active .slate-editor{display:none;overflow:hidden}.block-editor-wrapper .storybook-target{display:block;height:100%;left:0px;position:fixed;top:0px;width:100%;z-index:1000}.block-editor-wrapper .storybook-target:empty{display:none}.block-editor-wrapper .storybook-target .storybook-frame{height:100%;width:100%}.block-editor-wrapper .storybook-target .storybook-frame iframe{height:100%;width:100%}.block-editor-wrapper .slate-editor{width:100%;height:100%;z-index:100;overflow-y:auto;padding:45px 0 0 0;position:relative}.block-editor-wrapper .slate-editor .editor-empty-element{display:block !important}.block-editor-wrapper .slate-editor p[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor p[data-slate-node=element]:after{font-size:16px;content:"P";color:#cecece;position:absolute;left:-20px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h1[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h1[data-slate-node=element]:after{content:"h1";font-size:26px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h2[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h2[data-slate-node=element]:after{content:"h2";font-size:24px;color:#cecece;position:absolute;left:-30px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h3[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h3[data-slate-node=element]:after{content:"h3";font-size:20px;color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h4[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h4[data-slate-node=element]:after{content:"h4";font-size:16px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h5[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h5[data-slate-node=element]:after{content:"h5";font-size:14px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h6[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h6[data-slate-node=element]:after{content:"h6";font-size:12px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor .arrow-list{list-style-type:"🠆" !important}.block-editor-wrapper .slate-editor .arrow-list li::before{content:none !important}.block-editor-wrapper .slate-editor div[data-slate-editor=true]{height:100%}.block-editor-wrapper .slate-editor .align-left{text-align:left}.block-editor-wrapper .slate-editor .align-right{text-align:right}.block-editor-wrapper .slate-editor .align-center{text-align:center}.block-editor-wrapper .slate-editor .align-justify{text-align:justify}.block-editor-wrapper .slate-editor .block-align-left{display:inline-block;float:left;margin-right:15px}.block-editor-wrapper .slate-editor .block-align-undefined{display:inline-block}.block-editor-wrapper .slate-editor .block-align-right{display:inline-block;float:right;margin-left:15px}.block-editor-wrapper .options-wrapper{font-family:Arial,sans-serif;position:relative;color:#161616}.block-editor-wrapper .options-wrapper:hover .options-container{display:flex}.block-editor-wrapper .options-wrapper .options-toolbar{justify-content:space-between;display:flex;background-color:#ebebeb;padding:.25em}.block-editor-wrapper .options-wrapper .options-container{display:flex;flex-direction:row;justify-content:flex-end;position:relative;z-index:200;padding:.25em}.block-editor-wrapper .options-wrapper .options-container .options-container-option{cursor:pointer;width:26px;margin-right:.25em}.block-editor-wrapper .options-wrapper .options-container .options-container-option>svg{width:100%}.block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-expand-text{width:100px}.block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-delete{color:red}.block-editor-wrapper .options-wrapper .options-container.options-container-right{self-align:flex-end}.block-editor-wrapper .layout-slot-option-padding{position:relative;width:26px;height:26px;display:inline-block}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item{background-color:#000;display:block;position:absolute;cursor:pointer}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item:hover{background-color:#61a2e9;z-index:10}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item.active{background-color:#3490f3;z-index:10}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-top{height:20%;width:100%;top:0;left:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-right{height:100%;width:20%;right:0;top:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-bottom{height:20%;width:100%;bottom:0;left:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-left{height:100%;width:20%;top:0;left:0}.block-editor-wrapper .layout-block-grid{display:grid}.block-editor-wrapper .layout-block-flex{display:flex}.block-editor-wrapper .layout-block.article-width{width:44.4444444444%}.block-editor-wrapper .layout-block.site-width{width:66.6666666667%}.block-editor-wrapper .layout-block .layout-slot{display:flex;flex-direction:column;position:relative;outline:1px dashed gray}.block-editor-wrapper .layout-block .layout-slot .storybook-element-component{display:block}.block-editor-wrapper .layout-block .layout-slot .layout-slot-content{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options{background-color:gray;color:#fff;font-size:24px;padding:10px;display:flex;flex-direction:row;justify-content:space-between}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-option{text-transform:uppercase;display:inline-block}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-name{text-transform:uppercase;display:inline-block}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-fill{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-auto{flex-grow:0;width:auto}@media only screen and (max-width: 360px){.block-editor-wrapper .layout-block{grid-template-columns:1fr}}.button{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;width:100%;padding:8px .75rem !important;color:#fff !important;border:1px solid #036fe3 !important;transition:all 100ms ease-in-out;background-color:#036fe3 !important;font-size:.875rem !important;border-radius:4px !important}.button:hover{background-color:#0275f0 !important}.button:active{background-color:#0262c9 !important}.button.button--secondary{color:#036fe3 !important;border:1px solid #036fe3 !important;background-color:rgba(0,0,0,0) !important}.button.button--secondary:hover{background-color:#036fe3 !important;color:#fff !important}.button.button--secondary:active{background-color:#0262c9 !important;color:#fff !important}.button.button--tertiary{color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important}.button.button--tertiary:hover{background-color:#f8f8f8 !important}.button.button--tertiary:active{background-color:#ededed !important}.resizable.enabled .resizable-left{max-width:calc(100vw - 300px)}.resizable .resizable-left{scrollbar-width:none;max-width:100vw;position:relative}.resizable .resizable-right{scrollbar-width:none;max-width:calc(100vw - 300px);position:relative}.resizable .resizable-x-handle{cursor:ew-resize;content:"";position:absolute;height:100%;width:10px;text-align:center;top:0;left:-2px;background-color:rgba(0,0,0,0)}.hover\:\!bg-green-700:hover{--tw-bg-opacity: 1 !important;background-color:rgb(21 128 61/var(--tw-bg-opacity)) !important}.focus\:outline-none:focus{outline:2px solid rgba(0,0,0,0);outline-offset:2px}@media(min-width: 768px){.md\:ml-4{margin-left:1rem}.md\:mr-4{margin-right:1rem}.md\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.md\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}}
4
- #sidebar-editor-wrapper{padding-top:45px;height:100%;flex-basis:400px;flex-shrink:0}#sidebar-editor{display:flex;flex-direction:column;background-color:#f7f9fa;max-height:100%;height:100%;overflow-y:auto;padding:16px}#sidebar-editor *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important}#sidebar-editor p,#sidebar-editor label,#sidebar-editor b,#sidebar-editor span{color:#5a657c}#sidebar-editor label{margin:0 0 2px 0 !important}#sidebar-editor input[type=text],#sidebar-editor input[type=time],#sidebar-editor input[type=date],#sidebar-editor input[type=number],#sidebar-editor input[type=color],#sidebar-editor input[type=datetime-local],#sidebar-editor input[type=search],#sidebar-editor select,#sidebar-editor textarea{display:block;font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important;width:100% !important;padding:8px .75rem !important}#sidebar-editor textarea{height:42px;max-height:200px}#sidebar-editor input[type=color]{padding:4px !important}#sidebar-editor input[type=range]{display:block;width:100%}#sidebar-editor input[type=radio],#sidebar-editor input[type=checkbox]{margin-right:8px;margin-left:4px}#sidebar-editor option[disabled]{color:rgba(0,0,0,.3)}#sidebar-editor .inline-check-wrapper{display:inline-block;margin-right:8px}#sidebar-editor details{display:block;font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important;width:100% !important;padding:16px !important}#sidebar-editor summary{cursor:pointer}#sidebar-editor .disabled{opacity:.4;cursor:not-allowed !important}#sidebar-editor .icon-button{display:inline-block;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px;filter:none !important;width:auto !important;text-align:center}#sidebar-editor .icon-button:not(.disabled):hover{background-color:#f8f8f8 !important}#sidebar-editor .icon-button:not(.disabled):active{background-color:#ededed !important}#sidebar-editor .icon-button-group{display:inline-flex;border-radius:6px !important;overflow:hidden;border:1px solid #cfd9e0 !important}#sidebar-editor .icon-button-group .icon-button{border-radius:0 !important;border:none !important;border-right:1px solid #cfd9e0 !important}#sidebar-editor .icon-button-group .icon-button:last-child{border:none !important}#sidebar-editor .message{font-size:.875rem;padding:16px;border-radius:4px}#sidebar-editor .message.message--negative{background-color:rgba(238,26,26,.2)}#sidebar-editor .collapsable-menu{background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px;z-index:2;overflow:hidden}#sidebar-editor .collapsable-menu-item{color:#5a657c !important}#sidebar-editor .collapsable-menu-item:not(.disabled):hover{background-color:#f8f8f8 !important}#sidebar-editor .collapsable-menu-item:not(.disabled):active{background-color:#ededed !important}
1
+ .toolbar {
2
+ background-color: rgba(255, 255, 255, 0.95);
3
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
4
+ display: none;
5
+ flex-direction: row;
6
+ justify-content: space-between;
7
+ font-family: Arial, sans-serif;
8
+ padding: 5px;
9
+ position: absolute;
10
+ z-index: 500;
11
+ }
12
+ .toolbar.toolbar-static {
13
+ display: block;
14
+ position: fixed;
15
+ width: 100%;
16
+ max-width: 100%;
17
+ top: 0px;
18
+ left: 0px;
19
+ }
20
+ .toolbar.active {
21
+ display: block;
22
+ }
23
+ .toolbar .toolbar-btns {
24
+ display: flex;
25
+ align-items: center;
26
+ }
27
+ .toolbar .toolbar-btn {
28
+ border-radius: 3px;
29
+ color: black;
30
+ cursor: pointer;
31
+ font-weight: bold;
32
+ margin-right: 5px;
33
+ padding: 5px 7px;
34
+ z-index: 500;
35
+ position: relative;
36
+ display: block;
37
+ }
38
+ .toolbar .toolbar-btn.active {
39
+ background-color: rgba(0, 0, 0, 0.3);
40
+ }
41
+ .toolbar .toolbar-btn:last-child {
42
+ margin-right: 0px;
43
+ }
44
+ .toolbar .toolbar-btn:hover, .toolbar .toolbar-btn:active {
45
+ background-color: rgba(0, 0, 0, 0.2);
46
+ }
47
+ .toolbar .toolbar-btn:hover .toolbar-btn-config, .toolbar .toolbar-btn:active .toolbar-btn-config {
48
+ display: block;
49
+ }
50
+ .toolbar .toolbar-btn .toolbar-btn-config {
51
+ position: absolute;
52
+ top: 28px;
53
+ left: 0px;
54
+ display: none;
55
+ background-color: rgba(255, 255, 255, 0.95);
56
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
57
+ padding: 5px 7px;
58
+ }
59
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner {
60
+ display: flex;
61
+ flex-direction: column;
62
+ }
63
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row {
64
+ min-width: 250px;
65
+ padding: 5px 7px;
66
+ display: flex;
67
+ flex-direction: row;
68
+ }
69
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-label {
70
+ flex-grow: 0;
71
+ padding: 0 7px 0 0;
72
+ }
73
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input {
74
+ flex-grow: 1;
75
+ }
76
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input {
77
+ padding: 5px;
78
+ border: 1px solid grey;
79
+ background-color: white;
80
+ color: black;
81
+ }
82
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input[type=checkbox]:checked {
83
+ color: white;
84
+ background-color: black;
85
+ }
86
+ .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-btn {
87
+ display: flex;
88
+ flex-grow: 1;
89
+ border: 1px solid black;
90
+ }
91
+ .toolbar .toolbar-btn-expand {
92
+ z-index: 500;
93
+ display: block;
94
+ max-height: 28px;
95
+ overflow: hidden;
96
+ }
97
+ .toolbar .toolbar-btn-expand .toolbar-btn-expand-inner {
98
+ display: flex;
99
+ flex-direction: column;
100
+ }
101
+ .toolbar .toolbar-btn-expand .toolbar-btn-expand-inner .toolbar-btn.active {
102
+ order: -1;
103
+ }
104
+ .toolbar .toolbar-btn-expand:hover {
105
+ overflow: visible;
106
+ }
107
+ .toolbar .toolbar-btn-expand:hover .toolbar-btn-expand-inner {
108
+ background-color: rgba(255, 255, 255, 0.95);
109
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
110
+ }
111
+ .toolbar .toolbar-btn-expand-right {
112
+ z-index: 500;
113
+ display: block;
114
+ max-height: 28px;
115
+ overflow: hidden;
116
+ }
117
+ .toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner {
118
+ left: 100%;
119
+ display: flex;
120
+ flex-direction: column;
121
+ }
122
+ .toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner .toolbar-btn.active {
123
+ order: -1;
124
+ }
125
+ .toolbar .toolbar-btn-expand-right:hover {
126
+ overflow: visible;
127
+ }
128
+ .toolbar .toolbar-btn-expand-right:hover .toolbar-btn-expand-inner {
129
+ background-color: rgba(255, 255, 255, 0.95);
130
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
131
+ }
132
+ .storybook-element-wrapper {
133
+ max-width: 100vw;
134
+ width: 100%;
135
+ margin-left: auto;
136
+ margin-right: auto;
137
+ }
138
+
139
+ .storybook-element {
140
+ display: inline-block;
141
+ width: 100%;
142
+ }
143
+ .storybook-element .storybook-element-component-overlay {
144
+ display: none;
145
+ width: 100%;
146
+ height: 100%;
147
+ position: absolute;
148
+ z-index: 20;
149
+ background-color: rgba(255, 255, 255, 0.7);
150
+ -webkit-backdrop-filter: blur(4px);
151
+ backdrop-filter: blur(4px);
152
+ color: black;
153
+ font-size: 1em;
154
+ align-items: center;
155
+ justify-content: center;
156
+ content-visibility: auto;
157
+ outline: 3px dashed #036fe3;
158
+ }
159
+ .storybook-element.storybook-element-missing-attributes .storybook-element-component-overlay {
160
+ display: flex;
161
+ outline: 3px dashed #ff0000;
162
+ }
163
+ .storybook-element.storybook-inline {
164
+ display: inline-block;
165
+ }
166
+ .storybook-element.storybook-inline .options-toolbar {
167
+ display: inline-block;
168
+ }
169
+ .storybook-element.storybook-inline .options-toolbar .options-container {
170
+ padding: 0.15em;
171
+ }
172
+ .storybook-element.storybook-inline .options-toolbar .options-container .options-container-option {
173
+ width: 16px;
174
+ }
175
+ .storybook-element.storybook-inline .storybook-element-component {
176
+ display: inline-block;
177
+ }
178
+ .storybook-element.storybook-inline .storybook-element-component .editor-empty-element {
179
+ min-width: 220px;
180
+ min-height: 10px;
181
+ padding: 0.15em;
182
+ }
183
+ .storybook-element.storybook-inline .storybook-element-component-overlay {
184
+ font-size: 0.75em;
185
+ min-width: 220px;
186
+ text-align: center;
187
+ }
188
+ .storybook-element.storybook-element-float-left {
189
+ float: left;
190
+ }
191
+ .storybook-element.storybook-element-float-right {
192
+ float: right;
193
+ }
194
+ .storybook-element .storybook-element-component {
195
+ -webkit-user-select: none;
196
+ -moz-user-select: none;
197
+ user-select: none;
198
+ display: block;
199
+ position: relative;
200
+ }
201
+ .storybook-element .storybook-element-component:hover .storybook-element-component-overlay {
202
+ -webkit-user-select: none;
203
+ -moz-user-select: none;
204
+ user-select: none;
205
+ display: flex;
206
+ cursor: pointer;
207
+ }
208
+ .storybook-element .storybook-element-component .editor-empty-element {
209
+ display: block;
210
+ background-color: #42000b;
211
+ color: white;
212
+ border: 1px solid black;
213
+ min-height: 40px;
214
+ padding: 2em;
215
+ min-width: 100%;
216
+ }
217
+ .storybook-element .storybook-element-component .editor-empty-element.editor-select-element {
218
+ background-color: #555555;
219
+ }
220
+ .storybook-element .storybook-element-component.storybook-inline .editor-empty-element {
221
+ min-height: 20px;
222
+ min-width: 100px;
223
+ }
224
+ .storybook-element .storybook-element-component .storybook-element-display:empty {
225
+ display: block;
226
+ background-color: red;
227
+ border: 1px solid black;
228
+ min-height: 30px;
229
+ min-width: 100px;
230
+ }
231
+ .storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty {
232
+ display: block;
233
+ background-color: red;
234
+ border: 1px solid black;
235
+ color: white;
236
+ font-weight: bold;
237
+ font-size: 110%;
238
+ padding: 10px;
239
+ min-height: 30px;
240
+ min-width: 100px;
241
+ position: relative;
242
+ }
243
+ .storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty::after {
244
+ position: absolute;
245
+ top: 0px;
246
+ left: 0px;
247
+ content: attr(data-content);
248
+ }
249
+ .storybook-element .storybook-element-error {
250
+ background-color: red;
251
+ padding: 15px;
252
+ font-size: 18px;
253
+ font-weight: bold;
254
+ min-height: 100px;
255
+ min-width: 100px;
256
+ }
257
+
258
+ @container (min-width: 100px) {
259
+ .storybook-element-component-overlay {
260
+ font-size: 2em;
261
+ }
262
+ }
263
+ @charset "UTF-8";
264
+ /*
265
+ ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
266
+ */ /*
267
+ 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
268
+ 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
269
+ */
270
+ *,
271
+ ::before,
272
+ ::after {
273
+ box-sizing: border-box; /* 1 */
274
+ border-width: 0; /* 2 */
275
+ border-style: solid; /* 2 */
276
+ border-color: #e5e7eb; /* 2 */
277
+ }
278
+
279
+ ::before,
280
+ ::after {
281
+ --tw-content: "";
282
+ }
283
+
284
+ /*
285
+ 1. Use a consistent sensible line-height in all browsers.
286
+ 2. Prevent adjustments of font size after orientation changes in iOS.
287
+ 3. Use a more readable tab size.
288
+ 4. Use the user's configured `sans` font-family by default.
289
+ 5. Use the user's configured `sans` font-feature-settings by default.
290
+ 6. Use the user's configured `sans` font-variation-settings by default.
291
+ */
292
+ html {
293
+ line-height: 1.5; /* 1 */
294
+ -webkit-text-size-adjust: 100%; /* 2 */
295
+ -moz-tab-size: 4; /* 3 */
296
+ -o-tab-size: 4;
297
+ tab-size: 4; /* 3 */
298
+ 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"; /* 4 */
299
+ font-feature-settings: normal; /* 5 */
300
+ font-variation-settings: normal; /* 6 */
301
+ }
302
+
303
+ /*
304
+ 1. Remove the margin in all browsers.
305
+ 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
306
+ */
307
+ body {
308
+ margin: 0; /* 1 */
309
+ line-height: inherit; /* 2 */
310
+ }
311
+
312
+ /*
313
+ 1. Add the correct height in Firefox.
314
+ 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
315
+ 3. Ensure horizontal rules are visible by default.
316
+ */
317
+ hr {
318
+ height: 0; /* 1 */
319
+ color: inherit; /* 2 */
320
+ border-top-width: 1px; /* 3 */
321
+ }
322
+
323
+ /*
324
+ Add the correct text decoration in Chrome, Edge, and Safari.
325
+ */
326
+ abbr:where([title]) {
327
+ -webkit-text-decoration: underline dotted;
328
+ text-decoration: underline dotted;
329
+ }
330
+
331
+ /*
332
+ Remove the default font size and weight for headings.
333
+ */
334
+ h1,
335
+ h2,
336
+ h3,
337
+ h4,
338
+ h5,
339
+ h6 {
340
+ font-size: inherit;
341
+ font-weight: inherit;
342
+ }
343
+
344
+ /*
345
+ Reset links to optimize for opt-in styling instead of opt-out.
346
+ */
347
+ a {
348
+ color: inherit;
349
+ text-decoration: inherit;
350
+ }
351
+
352
+ /*
353
+ Add the correct font weight in Edge and Safari.
354
+ */
355
+ b,
356
+ strong {
357
+ font-weight: bolder;
358
+ }
359
+
360
+ /*
361
+ 1. Use the user's configured `mono` font family by default.
362
+ 2. Correct the odd `em` font sizing in all browsers.
363
+ */
364
+ code,
365
+ kbd,
366
+ samp,
367
+ pre {
368
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
369
+ font-size: 1em; /* 2 */
370
+ }
371
+
372
+ /*
373
+ Add the correct font size in all browsers.
374
+ */
375
+ small {
376
+ font-size: 80%;
377
+ }
378
+
379
+ /*
380
+ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
381
+ */
382
+ sub,
383
+ sup {
384
+ font-size: 75%;
385
+ line-height: 0;
386
+ position: relative;
387
+ vertical-align: baseline;
388
+ }
389
+
390
+ sub {
391
+ bottom: -0.25em;
392
+ }
393
+
394
+ sup {
395
+ top: -0.5em;
396
+ }
397
+
398
+ /*
399
+ 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
400
+ 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
401
+ 3. Remove gaps between table borders by default.
402
+ */
403
+ table {
404
+ text-indent: 0; /* 1 */
405
+ border-color: inherit; /* 2 */
406
+ border-collapse: collapse; /* 3 */
407
+ }
408
+
409
+ /*
410
+ 1. Change the font styles in all browsers.
411
+ 2. Remove the margin in Firefox and Safari.
412
+ 3. Remove default padding in all browsers.
413
+ */
414
+ button,
415
+ input,
416
+ optgroup,
417
+ select,
418
+ textarea {
419
+ font-family: inherit; /* 1 */
420
+ font-feature-settings: inherit; /* 1 */
421
+ font-variation-settings: inherit; /* 1 */
422
+ font-size: 100%; /* 1 */
423
+ font-weight: inherit; /* 1 */
424
+ line-height: inherit; /* 1 */
425
+ color: inherit; /* 1 */
426
+ margin: 0; /* 2 */
427
+ padding: 0; /* 3 */
428
+ }
429
+
430
+ /*
431
+ Remove the inheritance of text transform in Edge and Firefox.
432
+ */
433
+ button,
434
+ select {
435
+ text-transform: none;
436
+ }
437
+
438
+ /*
439
+ 1. Correct the inability to style clickable types in iOS and Safari.
440
+ 2. Remove default button styles.
441
+ */
442
+ button,
443
+ [type=button],
444
+ [type=reset],
445
+ [type=submit] {
446
+ -webkit-appearance: button; /* 1 */
447
+ background-color: transparent; /* 2 */
448
+ background-image: none; /* 2 */
449
+ }
450
+
451
+ /*
452
+ Use the modern Firefox focus style for all focusable elements.
453
+ */
454
+ :-moz-focusring {
455
+ outline: auto;
456
+ }
457
+
458
+ /*
459
+ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
460
+ */
461
+ :-moz-ui-invalid {
462
+ box-shadow: none;
463
+ }
464
+
465
+ /*
466
+ Add the correct vertical alignment in Chrome and Firefox.
467
+ */
468
+ progress {
469
+ vertical-align: baseline;
470
+ }
471
+
472
+ /*
473
+ Correct the cursor style of increment and decrement buttons in Safari.
474
+ */
475
+ ::-webkit-inner-spin-button,
476
+ ::-webkit-outer-spin-button {
477
+ height: auto;
478
+ }
479
+
480
+ /*
481
+ 1. Correct the odd appearance in Chrome and Safari.
482
+ 2. Correct the outline style in Safari.
483
+ */
484
+ [type=search] {
485
+ -webkit-appearance: textfield; /* 1 */
486
+ outline-offset: -2px; /* 2 */
487
+ }
488
+
489
+ /*
490
+ Remove the inner padding in Chrome and Safari on macOS.
491
+ */
492
+ ::-webkit-search-decoration {
493
+ -webkit-appearance: none;
494
+ }
495
+
496
+ /*
497
+ 1. Correct the inability to style clickable types in iOS and Safari.
498
+ 2. Change font properties to `inherit` in Safari.
499
+ */
500
+ ::-webkit-file-upload-button {
501
+ -webkit-appearance: button; /* 1 */
502
+ font: inherit; /* 2 */
503
+ }
504
+
505
+ /*
506
+ Add the correct display in Chrome and Safari.
507
+ */
508
+ summary {
509
+ display: list-item;
510
+ }
511
+
512
+ /*
513
+ Removes the default spacing and border for appropriate elements.
514
+ */
515
+ blockquote,
516
+ dl,
517
+ dd,
518
+ h1,
519
+ h2,
520
+ h3,
521
+ h4,
522
+ h5,
523
+ h6,
524
+ hr,
525
+ figure,
526
+ p,
527
+ pre {
528
+ margin: 0;
529
+ }
530
+
531
+ fieldset {
532
+ margin: 0;
533
+ padding: 0;
534
+ }
535
+
536
+ legend {
537
+ padding: 0;
538
+ }
539
+
540
+ ol,
541
+ ul,
542
+ menu {
543
+ list-style: none;
544
+ margin: 0;
545
+ padding: 0;
546
+ }
547
+
548
+ /*
549
+ Reset default styling for dialogs.
550
+ */
551
+ dialog {
552
+ padding: 0;
553
+ }
554
+
555
+ /*
556
+ Prevent resizing textareas horizontally by default.
557
+ */
558
+ textarea {
559
+ resize: vertical;
560
+ }
561
+
562
+ /*
563
+ 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
564
+ 2. Set the default placeholder color to the user's configured gray 400 color.
565
+ */
566
+ input::-moz-placeholder, textarea::-moz-placeholder {
567
+ opacity: 1; /* 1 */
568
+ color: #9ca3af; /* 2 */
569
+ }
570
+
571
+ input::placeholder,
572
+ textarea::placeholder {
573
+ opacity: 1; /* 1 */
574
+ color: #9ca3af; /* 2 */
575
+ }
576
+
577
+ /*
578
+ Set the default cursor for buttons.
579
+ */
580
+ button,
581
+ [role=button] {
582
+ cursor: pointer;
583
+ }
584
+
585
+ /*
586
+ Make sure disabled buttons don't get the pointer cursor.
587
+ */
588
+ :disabled {
589
+ cursor: default;
590
+ }
591
+
592
+ /*
593
+ 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
594
+ 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
595
+ This can trigger a poorly considered lint error in some tools but is included by design.
596
+ */
597
+ img,
598
+ svg,
599
+ video,
600
+ canvas,
601
+ audio,
602
+ iframe,
603
+ embed,
604
+ object {
605
+ display: block; /* 1 */
606
+ vertical-align: middle; /* 2 */
607
+ }
608
+
609
+ /*
610
+ Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
611
+ */
612
+ img,
613
+ video {
614
+ max-width: 100%;
615
+ height: auto;
616
+ }
617
+
618
+ /* Make elements with the HTML hidden attribute stay hidden by default */
619
+ [hidden] {
620
+ display: none;
621
+ }
622
+
623
+ *, ::before, ::after {
624
+ --tw-border-spacing-x: 0;
625
+ --tw-border-spacing-y: 0;
626
+ --tw-translate-x: 0;
627
+ --tw-translate-y: 0;
628
+ --tw-rotate: 0;
629
+ --tw-skew-x: 0;
630
+ --tw-skew-y: 0;
631
+ --tw-scale-x: 1;
632
+ --tw-scale-y: 1;
633
+ --tw-pan-x: ;
634
+ --tw-pan-y: ;
635
+ --tw-pinch-zoom: ;
636
+ --tw-scroll-snap-strictness: proximity;
637
+ --tw-gradient-from-position: ;
638
+ --tw-gradient-via-position: ;
639
+ --tw-gradient-to-position: ;
640
+ --tw-ordinal: ;
641
+ --tw-slashed-zero: ;
642
+ --tw-numeric-figure: ;
643
+ --tw-numeric-spacing: ;
644
+ --tw-numeric-fraction: ;
645
+ --tw-ring-inset: ;
646
+ --tw-ring-offset-width: 0px;
647
+ --tw-ring-offset-color: #fff;
648
+ --tw-ring-color: rgb(59 130 246 / 0.5);
649
+ --tw-ring-offset-shadow: 0 0 #0000;
650
+ --tw-ring-shadow: 0 0 #0000;
651
+ --tw-shadow: 0 0 #0000;
652
+ --tw-shadow-colored: 0 0 #0000;
653
+ --tw-blur: ;
654
+ --tw-brightness: ;
655
+ --tw-contrast: ;
656
+ --tw-grayscale: ;
657
+ --tw-hue-rotate: ;
658
+ --tw-invert: ;
659
+ --tw-saturate: ;
660
+ --tw-sepia: ;
661
+ --tw-drop-shadow: ;
662
+ --tw-backdrop-blur: ;
663
+ --tw-backdrop-brightness: ;
664
+ --tw-backdrop-contrast: ;
665
+ --tw-backdrop-grayscale: ;
666
+ --tw-backdrop-hue-rotate: ;
667
+ --tw-backdrop-invert: ;
668
+ --tw-backdrop-opacity: ;
669
+ --tw-backdrop-saturate: ;
670
+ --tw-backdrop-sepia: ;
671
+ }
672
+
673
+ ::backdrop {
674
+ --tw-border-spacing-x: 0;
675
+ --tw-border-spacing-y: 0;
676
+ --tw-translate-x: 0;
677
+ --tw-translate-y: 0;
678
+ --tw-rotate: 0;
679
+ --tw-skew-x: 0;
680
+ --tw-skew-y: 0;
681
+ --tw-scale-x: 1;
682
+ --tw-scale-y: 1;
683
+ --tw-pan-x: ;
684
+ --tw-pan-y: ;
685
+ --tw-pinch-zoom: ;
686
+ --tw-scroll-snap-strictness: proximity;
687
+ --tw-gradient-from-position: ;
688
+ --tw-gradient-via-position: ;
689
+ --tw-gradient-to-position: ;
690
+ --tw-ordinal: ;
691
+ --tw-slashed-zero: ;
692
+ --tw-numeric-figure: ;
693
+ --tw-numeric-spacing: ;
694
+ --tw-numeric-fraction: ;
695
+ --tw-ring-inset: ;
696
+ --tw-ring-offset-width: 0px;
697
+ --tw-ring-offset-color: #fff;
698
+ --tw-ring-color: rgb(59 130 246 / 0.5);
699
+ --tw-ring-offset-shadow: 0 0 #0000;
700
+ --tw-ring-shadow: 0 0 #0000;
701
+ --tw-shadow: 0 0 #0000;
702
+ --tw-shadow-colored: 0 0 #0000;
703
+ --tw-blur: ;
704
+ --tw-brightness: ;
705
+ --tw-contrast: ;
706
+ --tw-grayscale: ;
707
+ --tw-hue-rotate: ;
708
+ --tw-invert: ;
709
+ --tw-saturate: ;
710
+ --tw-sepia: ;
711
+ --tw-drop-shadow: ;
712
+ --tw-backdrop-blur: ;
713
+ --tw-backdrop-brightness: ;
714
+ --tw-backdrop-contrast: ;
715
+ --tw-backdrop-grayscale: ;
716
+ --tw-backdrop-hue-rotate: ;
717
+ --tw-backdrop-invert: ;
718
+ --tw-backdrop-opacity: ;
719
+ --tw-backdrop-saturate: ;
720
+ --tw-backdrop-sepia: ;
721
+ }
722
+
723
+ .container {
724
+ width: 100%;
725
+ }
726
+
727
+ @media (min-width: 640px) {
728
+ .container {
729
+ max-width: 640px;
730
+ }
731
+ }
732
+ @media (min-width: 768px) {
733
+ .container {
734
+ max-width: 768px;
735
+ }
736
+ }
737
+ @media (min-width: 1024px) {
738
+ .container {
739
+ max-width: 1024px;
740
+ }
741
+ }
742
+ @media (min-width: 1280px) {
743
+ .container {
744
+ max-width: 1280px;
745
+ }
746
+ }
747
+ @media (min-width: 1536px) {
748
+ .container {
749
+ max-width: 1536px;
750
+ }
751
+ }
752
+ .pointer-events-none {
753
+ pointer-events: none;
754
+ }
755
+
756
+ .collapse {
757
+ visibility: collapse;
758
+ }
759
+
760
+ .static {
761
+ position: static;
762
+ }
763
+
764
+ .fixed {
765
+ position: fixed;
766
+ }
767
+
768
+ .absolute {
769
+ position: absolute;
770
+ }
771
+
772
+ .relative {
773
+ position: relative;
774
+ }
775
+
776
+ .sticky {
777
+ position: sticky;
778
+ }
779
+
780
+ .left-0 {
781
+ left: 0px;
782
+ }
783
+
784
+ .right-0 {
785
+ right: 0px;
786
+ }
787
+
788
+ .top-0 {
789
+ top: 0px;
790
+ }
791
+
792
+ .top-\[80px\] {
793
+ top: 80px;
794
+ }
795
+
796
+ .z-50 {
797
+ z-index: 50;
798
+ }
799
+
800
+ .z-\[999999\] {
801
+ z-index: 999999;
802
+ }
803
+
804
+ .m-2 {
805
+ margin: 0.5rem;
806
+ }
807
+
808
+ .mx-2 {
809
+ margin-left: 0.5rem;
810
+ margin-right: 0.5rem;
811
+ }
812
+
813
+ .mx-auto {
814
+ margin-left: auto;
815
+ margin-right: auto;
816
+ }
817
+
818
+ .my-2 {
819
+ margin-top: 0.5rem;
820
+ margin-bottom: 0.5rem;
821
+ }
822
+
823
+ .my-4 {
824
+ margin-top: 1rem;
825
+ margin-bottom: 1rem;
826
+ }
827
+
828
+ .mb-1 {
829
+ margin-bottom: 0.25rem;
830
+ }
831
+
832
+ .mb-16 {
833
+ margin-bottom: 4rem;
834
+ }
835
+
836
+ .mb-2 {
837
+ margin-bottom: 0.5rem;
838
+ }
839
+
840
+ .mb-4 {
841
+ margin-bottom: 1rem;
842
+ }
843
+
844
+ .ml-16 {
845
+ margin-left: 4rem;
846
+ }
847
+
848
+ .ml-2 {
849
+ margin-left: 0.5rem;
850
+ }
851
+
852
+ .ml-4 {
853
+ margin-left: 1rem;
854
+ }
855
+
856
+ .mr-1 {
857
+ margin-right: 0.25rem;
858
+ }
859
+
860
+ .mr-16 {
861
+ margin-right: 4rem;
862
+ }
863
+
864
+ .mr-2 {
865
+ margin-right: 0.5rem;
866
+ }
867
+
868
+ .mr-4 {
869
+ margin-right: 1rem;
870
+ }
871
+
872
+ .mt-1 {
873
+ margin-top: 0.25rem;
874
+ }
875
+
876
+ .mt-16 {
877
+ margin-top: 4rem;
878
+ }
879
+
880
+ .mt-2 {
881
+ margin-top: 0.5rem;
882
+ }
883
+
884
+ .mt-4 {
885
+ margin-top: 1rem;
886
+ }
887
+
888
+ .mt-\[3px\] {
889
+ margin-top: 3px;
890
+ }
891
+
892
+ .block {
893
+ display: block;
894
+ }
895
+
896
+ .inline-block {
897
+ display: inline-block;
898
+ }
899
+
900
+ .\!inline {
901
+ display: inline !important;
902
+ }
903
+
904
+ .inline {
905
+ display: inline;
906
+ }
907
+
908
+ .flex {
909
+ display: flex;
910
+ }
911
+
912
+ .inline-flex {
913
+ display: inline-flex;
914
+ }
915
+
916
+ .table {
917
+ display: table;
918
+ }
919
+
920
+ .grid {
921
+ display: grid;
922
+ }
923
+
924
+ .contents {
925
+ display: contents;
926
+ }
927
+
928
+ .list-item {
929
+ display: list-item;
930
+ }
931
+
932
+ .h-5 {
933
+ height: 1.25rem;
934
+ }
935
+
936
+ .h-6 {
937
+ height: 1.5rem;
938
+ }
939
+
940
+ .h-full {
941
+ height: 100%;
942
+ }
943
+
944
+ .max-h-\[28px\] {
945
+ max-height: 28px;
946
+ }
947
+
948
+ .max-h-full {
949
+ max-height: 100%;
950
+ }
951
+
952
+ .\!w-auto {
953
+ width: auto !important;
954
+ }
955
+
956
+ .w-11 {
957
+ width: 2.75rem;
958
+ }
959
+
960
+ .w-5 {
961
+ width: 1.25rem;
962
+ }
963
+
964
+ .w-52 {
965
+ width: 13rem;
966
+ }
967
+
968
+ .w-full {
969
+ width: 100%;
970
+ }
971
+
972
+ .min-w-\[28px\] {
973
+ min-width: 28px;
974
+ }
975
+
976
+ .min-w-\[32px\] {
977
+ min-width: 32px;
978
+ }
979
+
980
+ .max-w-\[150px\] {
981
+ max-width: 150px;
982
+ }
983
+
984
+ .shrink-0 {
985
+ flex-shrink: 0;
986
+ }
987
+
988
+ .grow {
989
+ flex-grow: 1;
990
+ }
991
+
992
+ .translate-x-0 {
993
+ --tw-translate-x: 0px;
994
+ 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));
995
+ }
996
+
997
+ .translate-x-5 {
998
+ --tw-translate-x: 1.25rem;
999
+ 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));
1000
+ }
1001
+
1002
+ .transform {
1003
+ 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));
1004
+ }
1005
+
1006
+ .cursor-pointer {
1007
+ cursor: pointer;
1008
+ }
1009
+
1010
+ .select-none {
1011
+ -webkit-user-select: none;
1012
+ -moz-user-select: none;
1013
+ user-select: none;
1014
+ }
1015
+
1016
+ .grid-cols-1 {
1017
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1018
+ }
1019
+
1020
+ .grid-cols-2 {
1021
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1022
+ }
1023
+
1024
+ .grid-cols-3 {
1025
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1026
+ }
1027
+
1028
+ .grid-cols-4 {
1029
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1030
+ }
1031
+
1032
+ .grid-cols-5 {
1033
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1034
+ }
1035
+
1036
+ .flex-col {
1037
+ flex-direction: column;
1038
+ }
1039
+
1040
+ .items-center {
1041
+ align-items: center;
1042
+ }
1043
+
1044
+ .justify-end {
1045
+ justify-content: flex-end;
1046
+ }
1047
+
1048
+ .justify-center {
1049
+ justify-content: center;
1050
+ }
1051
+
1052
+ .gap-2 {
1053
+ gap: 0.5rem;
1054
+ }
1055
+
1056
+ .gap-4 {
1057
+ gap: 1rem;
1058
+ }
1059
+
1060
+ .space-x-4 > :not([hidden]) ~ :not([hidden]) {
1061
+ --tw-space-x-reverse: 0;
1062
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
1063
+ margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
1064
+ }
1065
+
1066
+ .space-y-8 > :not([hidden]) ~ :not([hidden]) {
1067
+ --tw-space-y-reverse: 0;
1068
+ margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
1069
+ margin-bottom: calc(2rem * var(--tw-space-y-reverse));
1070
+ }
1071
+
1072
+ .overflow-hidden {
1073
+ overflow: hidden;
1074
+ }
1075
+
1076
+ .overflow-scroll {
1077
+ overflow: scroll;
1078
+ }
1079
+
1080
+ .overflow-y-auto {
1081
+ overflow-y: auto;
1082
+ }
1083
+
1084
+ .truncate {
1085
+ overflow: hidden;
1086
+ text-overflow: ellipsis;
1087
+ white-space: nowrap;
1088
+ }
1089
+
1090
+ .rounded-full {
1091
+ border-radius: 9999px;
1092
+ }
1093
+
1094
+ .rounded-md {
1095
+ border-radius: 0.375rem;
1096
+ }
1097
+
1098
+ .\!border-0 {
1099
+ border-width: 0px !important;
1100
+ }
1101
+
1102
+ .border {
1103
+ border-width: 1px;
1104
+ }
1105
+
1106
+ .border-2 {
1107
+ border-width: 2px;
1108
+ }
1109
+
1110
+ .border-black {
1111
+ --tw-border-opacity: 1;
1112
+ border-color: rgb(0 0 0/var(--tw-border-opacity));
1113
+ }
1114
+
1115
+ .border-transparent {
1116
+ border-color: transparent;
1117
+ }
1118
+
1119
+ .\!bg-green-600 {
1120
+ --tw-bg-opacity: 1 !important;
1121
+ background-color: rgb(22 163 74/var(--tw-bg-opacity)) !important;
1122
+ }
1123
+
1124
+ .bg-\[\#036fe3\] {
1125
+ --tw-bg-opacity: 1;
1126
+ background-color: rgb(3 111 227/var(--tw-bg-opacity));
1127
+ }
1128
+
1129
+ .bg-gray-200 {
1130
+ --tw-bg-opacity: 1;
1131
+ background-color: rgb(229 231 235/var(--tw-bg-opacity));
1132
+ }
1133
+
1134
+ .bg-green-500 {
1135
+ --tw-bg-opacity: 1;
1136
+ background-color: rgb(34 197 94/var(--tw-bg-opacity));
1137
+ }
1138
+
1139
+ .bg-white {
1140
+ --tw-bg-opacity: 1;
1141
+ background-color: rgb(255 255 255/var(--tw-bg-opacity));
1142
+ }
1143
+
1144
+ .\!p-1 {
1145
+ padding: 0.25rem !important;
1146
+ }
1147
+
1148
+ .p-2 {
1149
+ padding: 0.5rem;
1150
+ }
1151
+
1152
+ .p-4 {
1153
+ padding: 1rem;
1154
+ }
1155
+
1156
+ .px-4 {
1157
+ padding-left: 1rem;
1158
+ padding-right: 1rem;
1159
+ }
1160
+
1161
+ .px-8 {
1162
+ padding-left: 2rem;
1163
+ padding-right: 2rem;
1164
+ }
1165
+
1166
+ .py-2 {
1167
+ padding-top: 0.5rem;
1168
+ padding-bottom: 0.5rem;
1169
+ }
1170
+
1171
+ .py-4 {
1172
+ padding-top: 1rem;
1173
+ padding-bottom: 1rem;
1174
+ }
1175
+
1176
+ .pb-2 {
1177
+ padding-bottom: 0.5rem;
1178
+ }
1179
+
1180
+ .pr-2 {
1181
+ padding-right: 0.5rem;
1182
+ }
1183
+
1184
+ .pt-1 {
1185
+ padding-top: 0.25rem;
1186
+ }
1187
+
1188
+ .pt-2 {
1189
+ padding-top: 0.5rem;
1190
+ }
1191
+
1192
+ .\!text-sm {
1193
+ font-size: 0.875rem !important;
1194
+ line-height: 1.25rem !important;
1195
+ }
1196
+
1197
+ .\!text-xl {
1198
+ font-size: 1.25rem !important;
1199
+ line-height: 1.75rem !important;
1200
+ }
1201
+
1202
+ .\!text-xs {
1203
+ font-size: 0.75rem !important;
1204
+ line-height: 1rem !important;
1205
+ }
1206
+
1207
+ .text-lg {
1208
+ font-size: 1.125rem;
1209
+ line-height: 1.75rem;
1210
+ }
1211
+
1212
+ .text-sm {
1213
+ font-size: 0.875rem;
1214
+ line-height: 1.25rem;
1215
+ }
1216
+
1217
+ .font-bold {
1218
+ font-weight: 700;
1219
+ }
1220
+
1221
+ .italic {
1222
+ font-style: italic;
1223
+ }
1224
+
1225
+ .\!leading-\[18px\] {
1226
+ line-height: 18px !important;
1227
+ }
1228
+
1229
+ .\!text-red-500 {
1230
+ --tw-text-opacity: 1 !important;
1231
+ color: rgb(239 68 68/var(--tw-text-opacity)) !important;
1232
+ }
1233
+
1234
+ .\!text-white {
1235
+ --tw-text-opacity: 1 !important;
1236
+ color: rgb(255 255 255/var(--tw-text-opacity)) !important;
1237
+ }
1238
+
1239
+ .text-black {
1240
+ --tw-text-opacity: 1;
1241
+ color: rgb(0 0 0/var(--tw-text-opacity));
1242
+ }
1243
+
1244
+ .text-white {
1245
+ --tw-text-opacity: 1;
1246
+ color: rgb(255 255 255/var(--tw-text-opacity));
1247
+ }
1248
+
1249
+ .shadow {
1250
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1251
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1252
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
1253
+ }
1254
+
1255
+ .ring-0 {
1256
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1257
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1258
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));
1259
+ }
1260
+
1261
+ .filter {
1262
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1263
+ }
1264
+
1265
+ .transition {
1266
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1267
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1268
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1269
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1270
+ transition-duration: 150ms;
1271
+ }
1272
+
1273
+ .duration-100 {
1274
+ transition-duration: 100ms;
1275
+ }
1276
+
1277
+ .ease-in-out {
1278
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1279
+ }
1280
+
1281
+ .block-editor-wrapper {
1282
+ position: relative;
1283
+ display: flex;
1284
+ height: 100%;
1285
+ max-height: 100%;
1286
+ max-width: 100%;
1287
+ width: 100%;
1288
+ }
1289
+ .block-editor-wrapper .slate-editor-element-selected:not(.storybook-element-missing-attributes) .storybook-element-component {
1290
+ outline: 2px dashed #61a2e9;
1291
+ }
1292
+ .block-editor-wrapper.storybook-active .slate-editor {
1293
+ display: none;
1294
+ overflow: hidden;
1295
+ }
1296
+ .block-editor-wrapper .storybook-target {
1297
+ display: block;
1298
+ height: 100%;
1299
+ left: 0px;
1300
+ position: fixed;
1301
+ top: 0px;
1302
+ width: 100%;
1303
+ z-index: 1000;
1304
+ }
1305
+ .block-editor-wrapper .storybook-target:empty {
1306
+ display: none;
1307
+ }
1308
+ .block-editor-wrapper .storybook-target .storybook-frame {
1309
+ height: 100%;
1310
+ width: 100%;
1311
+ }
1312
+ .block-editor-wrapper .storybook-target .storybook-frame iframe {
1313
+ height: 100%;
1314
+ width: 100%;
1315
+ }
1316
+ .block-editor-wrapper .slate-editor {
1317
+ width: 100%;
1318
+ height: 100%;
1319
+ z-index: 100;
1320
+ overflow-y: auto;
1321
+ padding: 45px 0 0 0;
1322
+ position: relative;
1323
+ }
1324
+ .block-editor-wrapper .slate-editor .editor-empty-element {
1325
+ display: block !important;
1326
+ }
1327
+ .block-editor-wrapper .slate-editor p[data-slate-node=element] {
1328
+ position: relative;
1329
+ }
1330
+ .block-editor-wrapper .slate-editor p[data-slate-node=element]:after {
1331
+ font-size: 16px;
1332
+ content: "P";
1333
+ color: #CECECE;
1334
+ position: absolute;
1335
+ left: -20px;
1336
+ text-transform: uppercase;
1337
+ top: 0;
1338
+ -webkit-user-select: none;
1339
+ -moz-user-select: none;
1340
+ user-select: none;
1341
+ }
1342
+ .block-editor-wrapper .slate-editor h1[data-slate-node=element] {
1343
+ position: relative;
1344
+ }
1345
+ .block-editor-wrapper .slate-editor h1[data-slate-node=element]:after {
1346
+ content: "h1";
1347
+ font-size: 26px;
1348
+ color: #CECECE;
1349
+ position: absolute;
1350
+ left: -36px;
1351
+ text-transform: uppercase;
1352
+ top: 6px;
1353
+ -webkit-user-select: none;
1354
+ -moz-user-select: none;
1355
+ user-select: none;
1356
+ }
1357
+ .block-editor-wrapper .slate-editor h2[data-slate-node=element] {
1358
+ position: relative;
1359
+ }
1360
+ .block-editor-wrapper .slate-editor h2[data-slate-node=element]:after {
1361
+ content: "h2";
1362
+ font-size: 24px;
1363
+ color: #CECECE;
1364
+ position: absolute;
1365
+ left: -30px;
1366
+ text-transform: uppercase;
1367
+ top: 0;
1368
+ -webkit-user-select: none;
1369
+ -moz-user-select: none;
1370
+ user-select: none;
1371
+ }
1372
+ .block-editor-wrapper .slate-editor h3[data-slate-node=element] {
1373
+ position: relative;
1374
+ }
1375
+ .block-editor-wrapper .slate-editor h3[data-slate-node=element]:after {
1376
+ content: "h3";
1377
+ font-size: 20px;
1378
+ color: #CECECE;
1379
+ position: absolute;
1380
+ left: -26px;
1381
+ text-transform: uppercase;
1382
+ top: 0;
1383
+ -webkit-user-select: none;
1384
+ -moz-user-select: none;
1385
+ user-select: none;
1386
+ }
1387
+ .block-editor-wrapper .slate-editor h4[data-slate-node=element] {
1388
+ position: relative;
1389
+ }
1390
+ .block-editor-wrapper .slate-editor h4[data-slate-node=element]:after {
1391
+ content: "h4";
1392
+ font-size: 16px;
1393
+ color: #CECECE;
1394
+ position: absolute;
1395
+ left: -36px;
1396
+ text-transform: uppercase;
1397
+ top: 0;
1398
+ -webkit-user-select: none;
1399
+ -moz-user-select: none;
1400
+ user-select: none;
1401
+ }
1402
+ .block-editor-wrapper .slate-editor h5[data-slate-node=element] {
1403
+ position: relative;
1404
+ }
1405
+ .block-editor-wrapper .slate-editor h5[data-slate-node=element]:after {
1406
+ content: "h5";
1407
+ font-size: 14px;
1408
+ color: #CECECE;
1409
+ position: absolute;
1410
+ left: -36px;
1411
+ text-transform: uppercase;
1412
+ top: 0;
1413
+ -webkit-user-select: none;
1414
+ -moz-user-select: none;
1415
+ user-select: none;
1416
+ }
1417
+ .block-editor-wrapper .slate-editor h6[data-slate-node=element] {
1418
+ position: relative;
1419
+ }
1420
+ .block-editor-wrapper .slate-editor h6[data-slate-node=element]:after {
1421
+ content: "h6";
1422
+ font-size: 12px;
1423
+ color: #CECECE;
1424
+ position: absolute;
1425
+ left: -36px;
1426
+ text-transform: uppercase;
1427
+ top: 0;
1428
+ -webkit-user-select: none;
1429
+ -moz-user-select: none;
1430
+ user-select: none;
1431
+ }
1432
+ .block-editor-wrapper .slate-editor .arrow-list {
1433
+ list-style-type: "🠆" !important;
1434
+ }
1435
+ .block-editor-wrapper .slate-editor .arrow-list li::before {
1436
+ content: none !important;
1437
+ }
1438
+ .block-editor-wrapper .slate-editor div[data-slate-editor=true] {
1439
+ height: 100%;
1440
+ }
1441
+ .block-editor-wrapper .slate-editor .align-left {
1442
+ text-align: left;
1443
+ }
1444
+ .block-editor-wrapper .slate-editor .align-right {
1445
+ text-align: right;
1446
+ }
1447
+ .block-editor-wrapper .slate-editor .align-center {
1448
+ text-align: center;
1449
+ }
1450
+ .block-editor-wrapper .slate-editor .align-justify {
1451
+ text-align: justify;
1452
+ }
1453
+ .block-editor-wrapper .slate-editor .block-align-left {
1454
+ display: inline-block;
1455
+ float: left;
1456
+ margin-right: 15px;
1457
+ }
1458
+ .block-editor-wrapper .slate-editor .block-align-undefined {
1459
+ display: inline-block;
1460
+ }
1461
+ .block-editor-wrapper .slate-editor .block-align-right {
1462
+ display: inline-block;
1463
+ float: right;
1464
+ margin-left: 15px;
1465
+ }
1466
+ .block-editor-wrapper .options-wrapper {
1467
+ font-family: Arial, sans-serif;
1468
+ position: relative;
1469
+ color: #161616;
1470
+ }
1471
+ .block-editor-wrapper .options-wrapper:hover .options-container {
1472
+ display: flex;
1473
+ }
1474
+ .block-editor-wrapper .options-wrapper .options-toolbar {
1475
+ justify-content: space-between;
1476
+ display: flex;
1477
+ background-color: rgb(235, 235, 235);
1478
+ padding: 0.25em;
1479
+ }
1480
+ .block-editor-wrapper .options-wrapper .options-container {
1481
+ display: flex;
1482
+ flex-direction: row;
1483
+ justify-content: flex-end;
1484
+ position: relative;
1485
+ z-index: 200;
1486
+ padding: 0.25em;
1487
+ }
1488
+ .block-editor-wrapper .options-wrapper .options-container .options-container-option {
1489
+ cursor: pointer;
1490
+ width: 26px;
1491
+ margin-right: 0.25em;
1492
+ }
1493
+ .block-editor-wrapper .options-wrapper .options-container .options-container-option > svg {
1494
+ width: 100%;
1495
+ }
1496
+ .block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-expand-text {
1497
+ width: 100px;
1498
+ }
1499
+ .block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-delete {
1500
+ color: red;
1501
+ }
1502
+ .block-editor-wrapper .options-wrapper .options-container.options-container-right {
1503
+ self-align: flex-end;
1504
+ }
1505
+ .block-editor-wrapper .layout-slot-option-padding {
1506
+ position: relative;
1507
+ width: 26px;
1508
+ height: 26px;
1509
+ display: inline-block;
1510
+ }
1511
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item {
1512
+ background-color: black;
1513
+ display: block;
1514
+ position: absolute;
1515
+ cursor: pointer;
1516
+ }
1517
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item:hover {
1518
+ background-color: #61a2e9;
1519
+ z-index: 10;
1520
+ }
1521
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item.active {
1522
+ background-color: #3490f3;
1523
+ z-index: 10;
1524
+ }
1525
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-top {
1526
+ height: 20%;
1527
+ width: 100%;
1528
+ top: 0;
1529
+ left: 0;
1530
+ }
1531
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-right {
1532
+ height: 100%;
1533
+ width: 20%;
1534
+ right: 0;
1535
+ top: 0;
1536
+ }
1537
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-bottom {
1538
+ height: 20%;
1539
+ width: 100%;
1540
+ bottom: 0;
1541
+ left: 0;
1542
+ }
1543
+ .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-left {
1544
+ height: 100%;
1545
+ width: 20%;
1546
+ top: 0;
1547
+ left: 0;
1548
+ }
1549
+ .block-editor-wrapper .layout-block-grid {
1550
+ display: grid;
1551
+ }
1552
+ .block-editor-wrapper .layout-block-flex {
1553
+ display: flex;
1554
+ }
1555
+ .block-editor-wrapper .layout-block.article-width {
1556
+ width: 44.4444444444%;
1557
+ }
1558
+ .block-editor-wrapper .layout-block.site-width {
1559
+ width: 66.6666666667%;
1560
+ }
1561
+ .block-editor-wrapper .layout-block .layout-slot {
1562
+ display: flex;
1563
+ flex-direction: column;
1564
+ position: relative;
1565
+ outline: 1px dashed grey;
1566
+ }
1567
+ .block-editor-wrapper .layout-block .layout-slot .storybook-element-component {
1568
+ display: block;
1569
+ }
1570
+ .block-editor-wrapper .layout-block .layout-slot .layout-slot-content {
1571
+ flex-grow: 1;
1572
+ }
1573
+ .block-editor-wrapper .layout-block .layout-slot .layout-slot-options {
1574
+ background-color: grey;
1575
+ color: white;
1576
+ font-size: 24px;
1577
+ padding: 10px;
1578
+ display: flex;
1579
+ flex-direction: row;
1580
+ justify-content: space-between;
1581
+ }
1582
+ .block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-option {
1583
+ text-transform: uppercase;
1584
+ display: inline-block;
1585
+ }
1586
+ .block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-name {
1587
+ text-transform: uppercase;
1588
+ display: inline-block;
1589
+ }
1590
+ .block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-fill {
1591
+ flex-grow: 1;
1592
+ }
1593
+ .block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-auto {
1594
+ flex-grow: 0;
1595
+ width: auto;
1596
+ }
1597
+ @media only screen and (max-width: 360px) {
1598
+ .block-editor-wrapper .layout-block {
1599
+ grid-template-columns: 1fr;
1600
+ }
1601
+ }
1602
+
1603
+ .button {
1604
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
1605
+ width: 100%;
1606
+ padding: 8px 0.75rem !important;
1607
+ color: #FFFFFF !important;
1608
+ border: 1px solid #036fe3 !important;
1609
+ transition: all 100ms ease-in-out;
1610
+ background-color: #036fe3 !important;
1611
+ font-size: 0.875rem !important;
1612
+ border-radius: 4px !important;
1613
+ }
1614
+
1615
+ .button:hover {
1616
+ background-color: #0275F0 !important;
1617
+ }
1618
+
1619
+ .button:active {
1620
+ background-color: #0262C9 !important;
1621
+ }
1622
+
1623
+ .button.button--secondary {
1624
+ color: #036fe3 !important;
1625
+ border: 1px solid #036fe3 !important;
1626
+ background-color: transparent !important;
1627
+ }
1628
+
1629
+ .button.button--secondary:hover {
1630
+ background-color: #036fe3 !important;
1631
+ color: #FFFFFF !important;
1632
+ }
1633
+
1634
+ .button.button--secondary:active {
1635
+ background-color: #0262C9 !important;
1636
+ color: #FFFFFF !important;
1637
+ }
1638
+
1639
+ .button.button--tertiary {
1640
+ color: rgb(90, 101, 124) !important;
1641
+ background-color: white !important;
1642
+ border: 1px solid #cfd9e0 !important;
1643
+ }
1644
+
1645
+ .button.button--tertiary:hover {
1646
+ background-color: rgb(248, 248, 248) !important;
1647
+ }
1648
+
1649
+ .button.button--tertiary:active {
1650
+ background-color: rgb(237, 237, 237) !important;
1651
+ }
1652
+
1653
+ .resizable.enabled .resizable-left {
1654
+ max-width: calc(100vw - 300px);
1655
+ }
1656
+ .resizable .resizable-left {
1657
+ scrollbar-width: none;
1658
+ max-width: 100vw;
1659
+ position: relative;
1660
+ }
1661
+ .resizable .resizable-right {
1662
+ scrollbar-width: none;
1663
+ max-width: calc(100vw - 300px);
1664
+ position: relative;
1665
+ }
1666
+ .resizable .resizable-x-handle {
1667
+ cursor: ew-resize;
1668
+ content: "";
1669
+ position: absolute;
1670
+ height: 100%;
1671
+ width: 10px;
1672
+ text-align: center;
1673
+ top: 0;
1674
+ left: -2px;
1675
+ background-color: transparent;
1676
+ }
1677
+
1678
+ .hover\:\!bg-green-700:hover {
1679
+ --tw-bg-opacity: 1 !important;
1680
+ background-color: rgb(21 128 61/var(--tw-bg-opacity)) !important;
1681
+ }
1682
+
1683
+ .focus\:outline-none:focus {
1684
+ outline: 2px solid transparent;
1685
+ outline-offset: 2px;
1686
+ }
1687
+
1688
+ @media (min-width: 768px) {
1689
+ .md\:ml-4 {
1690
+ margin-left: 1rem;
1691
+ }
1692
+ .md\:mr-4 {
1693
+ margin-right: 1rem;
1694
+ }
1695
+ .md\:grid-cols-1 {
1696
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1697
+ }
1698
+ .md\:grid-cols-2 {
1699
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1700
+ }
1701
+ .md\:grid-cols-3 {
1702
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1703
+ }
1704
+ .md\:grid-cols-4 {
1705
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1706
+ }
1707
+ .md\:grid-cols-5 {
1708
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1709
+ }
1710
+ .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
1711
+ --tw-space-x-reverse: 0;
1712
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
1713
+ margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
1714
+ }
1715
+ }
1716
+ #sidebar-editor-wrapper {
1717
+ padding-top: 45px;
1718
+ height: 100%;
1719
+ flex-basis: 400px;
1720
+ flex-shrink: 0;
1721
+ }
1722
+
1723
+ #sidebar-editor {
1724
+ display: flex;
1725
+ flex-direction: column;
1726
+ background-color: rgb(247, 249, 250);
1727
+ max-height: 100%;
1728
+ height: 100%;
1729
+ overflow-y: auto;
1730
+ padding: 16px;
1731
+ /* button[data-test-id="cf-ui-button"] span {
1732
+ color: #036fe3 !important;
1733
+ }
1734
+
1735
+ button[data-test-id="cf-ui-button"] svg {
1736
+ fill: #036fe3 !important;
1737
+ }
1738
+
1739
+ button[data-test-id="cf-ui-button"]:hover span {
1740
+ color: #FFFFFF !important;
1741
+ }
1742
+
1743
+ button[data-test-id="cf-ui-button"]:hover svg {
1744
+ fill: #FFFFFF !important;
1745
+ } */
1746
+ }
1747
+ #sidebar-editor * {
1748
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
1749
+ }
1750
+ #sidebar-editor p, #sidebar-editor label, #sidebar-editor b, #sidebar-editor span {
1751
+ color: rgb(90, 101, 124);
1752
+ }
1753
+ #sidebar-editor label {
1754
+ margin: 0 0 2px 0 !important;
1755
+ }
1756
+ #sidebar-editor input[type=text],
1757
+ #sidebar-editor input[type=time],
1758
+ #sidebar-editor input[type=date],
1759
+ #sidebar-editor input[type=number],
1760
+ #sidebar-editor input[type=color],
1761
+ #sidebar-editor input[type=datetime-local],
1762
+ #sidebar-editor input[type=search],
1763
+ #sidebar-editor select,
1764
+ #sidebar-editor textarea {
1765
+ display: block;
1766
+ font-size: 0.875rem !important;
1767
+ color: rgb(90, 101, 124) !important;
1768
+ background-color: white !important;
1769
+ border: 1px solid #cfd9e0 !important;
1770
+ border-radius: 6px !important;
1771
+ box-shadow: none !important;
1772
+ filter: none !important;
1773
+ width: 100% !important;
1774
+ padding: 8px 0.75rem !important;
1775
+ }
1776
+ #sidebar-editor textarea {
1777
+ height: 42px;
1778
+ max-height: 200px;
1779
+ }
1780
+ #sidebar-editor input[type=color] {
1781
+ padding: 4px !important;
1782
+ }
1783
+ #sidebar-editor input[type=range] {
1784
+ display: block;
1785
+ width: 100%;
1786
+ }
1787
+ #sidebar-editor input[type=radio],
1788
+ #sidebar-editor input[type=checkbox] {
1789
+ margin-right: 8px;
1790
+ margin-left: 4px;
1791
+ }
1792
+ #sidebar-editor option[disabled] {
1793
+ color: rgba(0, 0, 0, 0.3);
1794
+ }
1795
+ #sidebar-editor .inline-check-wrapper {
1796
+ display: inline-block;
1797
+ margin-right: 8px;
1798
+ }
1799
+ #sidebar-editor details {
1800
+ display: block;
1801
+ font-size: 0.875rem !important;
1802
+ color: rgb(90, 101, 124) !important;
1803
+ background-color: white !important;
1804
+ border: 1px solid #cfd9e0 !important;
1805
+ border-radius: 6px !important;
1806
+ box-shadow: none !important;
1807
+ filter: none !important;
1808
+ width: 100% !important;
1809
+ padding: 16px !important;
1810
+ }
1811
+ #sidebar-editor summary {
1812
+ cursor: pointer;
1813
+ }
1814
+ #sidebar-editor .disabled {
1815
+ opacity: 0.4;
1816
+ cursor: not-allowed !important;
1817
+ }
1818
+ #sidebar-editor .icon-button {
1819
+ display: inline-block;
1820
+ color: rgb(90, 101, 124) !important;
1821
+ background-color: white !important;
1822
+ border: 1px solid #cfd9e0 !important;
1823
+ border-radius: 6px;
1824
+ filter: none !important;
1825
+ width: auto !important;
1826
+ text-align: center;
1827
+ }
1828
+ #sidebar-editor .icon-button:not(.disabled):hover {
1829
+ background-color: rgb(248, 248, 248) !important;
1830
+ }
1831
+ #sidebar-editor .icon-button:not(.disabled):active {
1832
+ background-color: rgb(237, 237, 237) !important;
1833
+ }
1834
+ #sidebar-editor .icon-button-group {
1835
+ display: inline-flex;
1836
+ border-radius: 6px !important;
1837
+ overflow: hidden;
1838
+ border: 1px solid #cfd9e0 !important;
1839
+ }
1840
+ #sidebar-editor .icon-button-group .icon-button {
1841
+ border-radius: 0 !important;
1842
+ border: none !important;
1843
+ border-right: 1px solid #cfd9e0 !important;
1844
+ }
1845
+ #sidebar-editor .icon-button-group .icon-button:last-child {
1846
+ border: none !important;
1847
+ }
1848
+ #sidebar-editor .message {
1849
+ font-size: 0.875rem;
1850
+ padding: 16px;
1851
+ border-radius: 4px;
1852
+ }
1853
+ #sidebar-editor .message.message--negative {
1854
+ background-color: rgba(238, 26, 26, 0.2);
1855
+ }
1856
+ #sidebar-editor .collapsable-menu {
1857
+ background-color: white !important;
1858
+ border: 1px solid #cfd9e0 !important;
1859
+ border-radius: 6px;
1860
+ z-index: 2;
1861
+ overflow: hidden;
1862
+ }
1863
+ #sidebar-editor .collapsable-menu-item {
1864
+ color: rgb(90, 101, 124) !important;
1865
+ }
1866
+ #sidebar-editor .collapsable-menu-item:not(.disabled):hover {
1867
+ background-color: rgb(248, 248, 248) !important;
1868
+ }
1869
+ #sidebar-editor .collapsable-menu-item:not(.disabled):active {
1870
+ background-color: rgb(237, 237, 237) !important;
1871
+ }