@fastlabai/design-editor 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/theme.css

@@ -1,4 +1,547 @@
+.\!container {
+  width: 100% !important;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .\!container {
+    max-width: 640px !important;
+  }
+
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .\!container {
+    max-width: 768px !important;
+  }
+
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .\!container {
+    max-width: 1024px !important;
+  }
+
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .\!container {
+    max-width: 1280px !important;
+  }
+
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\!container {
+    max-width: 1536px !important;
+  }
+
+  .container {
+    max-width: 1536px;
+  }
+}
+
+[data-de-root] .pointer-events-none {
+  pointer-events: none;
+}
+
+[data-de-root] .visible {
+  visibility: visible;
+}
+
+[data-de-root] .static {
+  position: static;
+}
+
+[data-de-root] .fixed {
+  position: fixed;
+}
+
+[data-de-root] .absolute {
+  position: absolute;
+}
+
+[data-de-root] .relative {
+  position: relative;
+}
+
+[data-de-root] .inset-0 {
+  inset: 0px;
+}
+
+[data-de-root] .bottom-\[66px\] {
+  bottom: 66px;
+}
+
+[data-de-root] .left-1\/2 {
+  left: 50%;
+}
+
+[data-de-root] .right-0 {
+  right: 0px;
+}
+
+[data-de-root] .top-1\/2 {
+  top: 50%;
+}
+
+[data-de-root] .top-\[-4px\] {
+  top: -4px;
+}
+
+[data-de-root] .top-\[56px\] {
+  top: 56px;
+}
+
+[data-de-root] .z-10 {
+  z-index: 10;
+}
+
+[data-de-root] .z-40 {
+  z-index: 40;
+}
+
+[data-de-root] .z-50 {
+  z-index: 50;
+}
+
+[data-de-root] .mx-\[-16px\] {
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+[data-de-root] .mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+[data-de-root] .ml-1 {
+  margin-left: 0.25rem;
+}
+
+[data-de-root] .mr-2 {
+  margin-right: 0.5rem;
+}
+
+[data-de-root] .mt-1 {
+  margin-top: 0.25rem;
+}
+
+[data-de-root] .mt-5 {
+  margin-top: 1.25rem;
+}
+
+[data-de-root] .mt-8 {
+  margin-top: 2rem;
+}
+
+[data-de-root] .block {
+  display: block;
+}
+
+[data-de-root] .inline-block {
+  display: inline-block;
+}
+
+[data-de-root] .flex {
+  display: flex;
+}
+
+[data-de-root] .grid {
+  display: grid;
+}
+
+[data-de-root] .hidden {
+  display: none;
+}
+
+[data-de-root] .h-\[3px\] {
+  height: 3px;
+}
+
+[data-de-root] .h-\[56px\] {
+  height: 56px;
+}
+
+[data-de-root] .h-\[66px\] {
+  height: 66px;
+}
+
+[data-de-root] .h-\[72px\] {
+  height: 72px;
+}
+
+[data-de-root] .h-\[78\%\] {
+  height: 78%;
+}
+
+[data-de-root] .h-\[85\%\] {
+  height: 85%;
+}
+
+[data-de-root] .h-full {
+  height: 100%;
+}
+
+[data-de-root] .w-\[22px\] {
+  width: 22px;
+}
+
+[data-de-root] .w-\[72px\] {
+  width: 72px;
+}
+
+[data-de-root] .w-\[78\%\] {
+  width: 78%;
+}
+
+[data-de-root] .w-\[85\%\] {
+  width: 85%;
+}
+
+[data-de-root] .w-full {
+  width: 100%;
+}
+
+[data-de-root] .flex-1 {
+  flex: 1 1 0%;
+}
+
+[data-de-root] .shrink-0 {
+  flex-shrink: 0;
+}
+
+[data-de-root] .-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  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));
+}
+
+[data-de-root] .-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  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));
+}
+
+[data-de-root] .\!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)) !important;
+}
+
+[data-de-root] .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));
+}
+
+[data-de-root] .animate-\[panelSlideIn_0\.2s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
+  animation: panelSlideIn 0.2s cubic-bezier(0.4,0,0.2,1);
+}
+
+[data-de-root] .cursor-pointer {
+  cursor: pointer;
+}
+
+[data-de-root] .select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+[data-de-root] .resize {
+  resize: both;
+}
+
+[data-de-root] .snap-x {
+  scroll-snap-type: x var(--tw-scroll-snap-strictness);
+}
+
+[data-de-root] .snap-start {
+  scroll-snap-align: start;
+}
+
+[data-de-root] .auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr);
+}
+
+[data-de-root] .grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+[data-de-root] .flex-row {
+  flex-direction: row;
+}
+
+[data-de-root] .flex-col {
+  flex-direction: column;
+}
+
+[data-de-root] .items-center {
+  align-items: center;
+}
+
+[data-de-root] .justify-center {
+  justify-content: center;
+}
+
+[data-de-root] .justify-between {
+  justify-content: space-between;
+}
+
+[data-de-root] .gap-1 {
+  gap: 0.25rem;
+}
+
+[data-de-root] .gap-2 {
+  gap: 0.5rem;
+}
+
+[data-de-root] .gap-\[3px\] {
+  gap: 3px;
+}
+
+[data-de-root] .overflow-hidden {
+  overflow: hidden;
+}
+
+[data-de-root] .overflow-x-auto {
+  overflow-x: auto;
+}
+
+[data-de-root] .overflow-y-auto {
+  overflow-y: auto;
+}
+
+[data-de-root] .whitespace-nowrap {
+  white-space: nowrap;
+}
+
+[data-de-root] .rounded-lg {
+  border-radius: 0.5rem;
+}
+
+[data-de-root] .rounded-xl {
+  border-radius: 0.75rem;
+}
+
+[data-de-root] .rounded-b-sm {
+  border-bottom-right-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+}
+
+[data-de-root] .border {
+  border-width: 1px;
+}
+
+[data-de-root] .border-none {
+  border-style: none;
+}
+
+[data-de-root] .border-\[var\(--color-border\)\] {
+  border-color: var(--color-border);
+}
+
+[data-de-root] .bg-\[color-mix\(in_srgb\2c var\(--color-text\)_5\%\2c transparent\)\] {
+  background-color: color-mix(in srgb,var(--color-text) 5%,transparent);
+}
+
+[data-de-root] .bg-black\/40 {
+  background-color: rgb(0 0 0 / 0.4);
+}
+
+[data-de-root] .bg-transparent {
+  background-color: transparent;
+}
+
+[data-de-root] .object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+[data-de-root] .px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+[data-de-root] .px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+[data-de-root] .px-\[10px\] {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+[data-de-root] .px-\[16px\] {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+[data-de-root] .py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+[data-de-root] .py-\[3px\] {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+[data-de-root] .py-\[4px\] {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+[data-de-root] .pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+[data-de-root] .pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+[data-de-root] .pt-4 {
+  padding-top: 1rem;
+}
+
+[data-de-root] .text-center {
+  text-align: center;
+}
+
+[data-de-root] .text-\[10px\] {
+  font-size: 10px;
+}
+
+[data-de-root] .text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+[data-de-root] .text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+[data-de-root] .font-bold {
+  font-weight: 700;
+}
+
+[data-de-root] .font-semibold {
+  font-weight: 600;
+}
+
+[data-de-root] .uppercase {
+  text-transform: uppercase;
+}
+
+[data-de-root] .capitalize {
+  text-transform: capitalize;
+}
+
+[data-de-root] .italic {
+  font-style: italic;
+}
+
+[data-de-root] .tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+[data-de-root] .text-\[var\(--color-text\)\] {
+  color: var(--color-text);
+}
+
+[data-de-root] .text-\[var\(--color-text-muted\)\] {
+  color: var(--color-text-muted);
+}
+
+[data-de-root] .text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+[data-de-root] .underline {
+  text-decoration-line: underline;
+}
+
+[data-de-root] .opacity-0 {
+  opacity: 0;
+}
+
+[data-de-root] .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 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+[data-de-root] .outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+[data-de-root] .outline {
+  outline-style: solid;
+}
+
+[data-de-root] .ring {
+  --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(3px + 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 #0000);
+}
+
+[data-de-root] .blur {
+  --tw-blur: blur(8px);
+  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);
+}
+
+[data-de-root] .drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  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);
+}
+
+[data-de-root] .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);
+}
+
+[data-de-root] .transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+[data-de-root] .transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+[data-de-root] .transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+[data-de-root] .transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+[data-de-root] .duration-200 {
+  transition-duration: 200ms;
+}
+
 /* @fastlabai/design-editor theme tokens */
+
 :root {
   --de-color-bg: #ffffff;
   --de-color-bg-elevated: #f5f5f7;
@@ -8,20 +551,23 @@
   --de-color-primary: #2563eb;
   --de-color-primary-fg: #ffffff;
   --de-color-danger: #dc2626;
-
+  /* Legacy component color aliases */
+  --color-bg: var(--de-color-bg);
+  --color-surface: var(--de-color-bg-elevated);
+  --color-text: var(--de-color-fg);
+  --color-text-muted: var(--de-color-fg-muted);
+  --color-border: var(--de-color-border);
+  --color-primary: var(--de-color-primary);
   --de-radius-sm: 4px;
   --de-radius-md: 8px;
   --de-radius-lg: 12px;
-
   --de-space-1: 4px;
   --de-space-2: 8px;
   --de-space-3: 12px;
   --de-space-4: 16px;
-
   --de-font-sm: 12px;
   --de-font-md: 14px;
   --de-font-lg: 16px;
-
   --de-shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
   --de-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
 }
@@ -34,9 +580,21 @@
   --de-color-border: #3f3f46;
 }
 
-.de-reset, .de-reset * { box-sizing: border-box; }
+.de-reset, .de-reset * {
+  box-sizing: border-box;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
 
 /* Button styles */
+
 .de-btn {
   display: inline-flex;
   align-items: center;
@@ -71,14 +629,22 @@
   padding: 0;
   width: var(--de-btn-height, 32px);
 }
-.de-btn[data-icon-only][data-size="sm"] { width: 24px; }
-.de-btn[data-icon-only][data-size="lg"] { width: 40px; }
+
+.de-btn[data-icon-only][data-size="sm"] {
+  width: 24px;
+}
+
+.de-btn[data-icon-only][data-size="lg"] {
+  width: 40px;
+}
 
 /* Variants */
+
 .de-btn[data-variant="primary"] {
   background: var(--de-color-primary);
   color: var(--de-color-primary-fg);
 }
+
 .de-btn[data-variant="primary"]:hover {
   filter: brightness(1.1);
 }
@@ -88,6 +654,7 @@
   color: var(--de-color-fg);
   border: 1px solid var(--de-color-border);
 }
+
 .de-btn[data-variant="secondary"]:hover {
   background: var(--de-color-border);
 }
@@ -96,6 +663,7 @@
   background: transparent;
   color: var(--de-color-fg);
 }
+
 .de-btn[data-variant="ghost"]:hover {
   background: var(--de-color-bg-elevated);
 }
@@ -105,6 +673,7 @@
   color: var(--de-color-danger);
   border: 1px solid var(--de-color-danger);
 }
+
 .de-btn[data-variant="danger"]:hover {
   background: var(--de-color-danger);
   color: var(--de-color-bg);
@@ -116,15 +685,19 @@
 }
 
 /* Slider styles */
+
 .de-slider-root {
   position: relative;
   display: flex;
   align-items: center;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   touch-action: none;
   width: 100%;
   height: 20px;
 }
+
 .de-slider-track {
   background-color: var(--de-color-border);
   position: relative;
@@ -132,12 +705,14 @@
   border-radius: 9999px;
   height: 4px;
 }
+
 .de-slider-range {
   position: absolute;
   background-color: var(--de-color-primary);
   border-radius: 9999px;
   height: 100%;
 }
+
 .de-slider-thumb {
   display: block;
   width: 16px;
@@ -147,15 +722,18 @@
   box-shadow: var(--de-shadow-sm);
   border-radius: 10px;
 }
+
 .de-slider-thumb:hover {
   background-color: var(--de-color-bg-elevated);
 }
+
 .de-slider-thumb:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--de-color-bg), 0 0 0 4px var(--de-color-primary);
 }
 
 /* Input styles */
+
 .de-input {
   box-sizing: border-box;
   width: 100%;
@@ -169,22 +747,26 @@
   font-family: inherit;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
+
 .de-input:focus {
   outline: none;
   border-color: var(--de-color-primary);
   box-shadow: 0 0 0 1px var(--de-color-primary);
 }
+
 .de-input:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background: var(--de-color-bg-elevated);
 }
+
 .de-input[data-size="sm"] {
   height: 24px;
   font-size: var(--de-font-sm);
 }
 
 /* Popover styles */
+
 .de-popover-content {
   border-radius: var(--de-radius-md);
   padding: var(--de-space-3);
@@ -197,6 +779,7 @@
   will-change: transform, opacity;
   z-index: 1000;
 }
+
 .de-popover-arrow {
   fill: var(--de-color-bg);
   stroke: var(--de-color-border);
@@ -204,6 +787,7 @@
 }
 
 /* Tooltip styles */
+
 .de-tooltip-content {
   border-radius: var(--de-radius-sm);
   padding: var(--de-space-1) var(--de-space-2);
@@ -212,17 +796,21 @@
   color: var(--de-color-bg);
   background-color: var(--de-color-fg);
   box-shadow: var(--de-shadow-sm);
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   animation-duration: 200ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
   z-index: 1000;
 }
+
 .de-tooltip-arrow {
   fill: var(--de-color-fg);
 }
 
 /* Select styles */
+
 .de-select-trigger {
   display: inline-flex;
   align-items: center;
@@ -238,11 +826,13 @@
   border: 1px solid var(--de-color-border);
   cursor: pointer;
 }
+
 .de-select-trigger:focus {
   outline: none;
   border-color: var(--de-color-primary);
   box-shadow: 0 0 0 1px var(--de-color-primary);
 }
+
 .de-select-content {
   overflow: hidden;
   background-color: var(--de-color-bg);
@@ -251,9 +841,11 @@
   box-shadow: var(--de-shadow-md);
   z-index: 1000;
 }
+
 .de-select-viewport {
   padding: var(--de-space-1);
 }
+
 .de-select-item {
   font-size: var(--de-font-md);
   line-height: 1;
@@ -264,14 +856,18 @@
   height: 32px;
   padding: 0 var(--de-space-3);
   position: relative;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   cursor: pointer;
 }
+
 .de-select-item[data-highlighted] {
   outline: none;
   background-color: var(--de-color-primary);
   color: var(--de-color-primary-fg);
 }
+
 .de-select-item-indicator {
   position: absolute;
   left: 0;
@@ -280,3 +876,115 @@
   align-items: center;
   justify-content: center;
 }
+
+[data-de-root] .focus-within\:border-\[var\(--color-primary\)\]:focus-within {
+  border-color: var(--color-primary);
+}
+
+[data-de-root] .hover\:text-\[var\(--color-primary\)\]:hover {
+  color: var(--color-primary);
+}
+
+[data-de-root] :is(.group:hover .group-hover\:opacity-100) {
+  opacity: 1;
+}
+
+@media (min-width: 768px) {
+  [data-de-root] .md\:relative {
+    position: relative;
+  }
+
+  [data-de-root] .md\:bottom-0 {
+    bottom: 0px;
+  }
+
+  [data-de-root] .md\:left-auto {
+    left: auto;
+  }
+
+  [data-de-root] .md\:right-\[-1px\] {
+    right: -1px;
+  }
+
+  [data-de-root] .md\:top-0 {
+    top: 0px;
+  }
+
+  [data-de-root] .md\:top-1\/2 {
+    top: 50%;
+  }
+
+  [data-de-root] .md\:z-auto {
+    z-index: auto;
+  }
+
+  [data-de-root] .md\:inline {
+    display: inline;
+  }
+
+  [data-de-root] .md\:hidden {
+    display: none;
+  }
+
+  [data-de-root] .md\:h-\[22px\] {
+    height: 22px;
+  }
+
+  [data-de-root] .md\:h-auto {
+    height: auto;
+  }
+
+  [data-de-root] .md\:w-\[200px\] {
+    width: 200px;
+  }
+
+  [data-de-root] .md\:w-\[230px\] {
+    width: 230px;
+  }
+
+  [data-de-root] .md\:w-\[3px\] {
+    width: 3px;
+  }
+
+  [data-de-root] .md\:w-\[62px\] {
+    width: 62px;
+  }
+
+  [data-de-root] .md\:-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));
+  }
+
+  [data-de-root] .md\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    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));
+  }
+
+  [data-de-root] .md\:flex-col {
+    flex-direction: column;
+  }
+
+  [data-de-root] .md\:overflow-visible {
+    overflow: visible;
+  }
+
+  [data-de-root] .md\:rounded-b-none {
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  [data-de-root] .md\:rounded-l-sm {
+    border-top-left-radius: 0.125rem;
+    border-bottom-left-radius: 0.125rem;
+  }
+
+  [data-de-root] .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  [data-de-root] .md\:py-\[10px\] {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}