@mieweb/forms-editor 1.2.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +46 -46
  2. package/dist/index.js +950 -941
  3. package/dist/index.js.map +1 -1
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -5,32 +5,32 @@
5
5
  if (!document.querySelector('#questionnaire-editor-styles')) {
6
6
  const style = document.createElement('style');
7
7
  style.id = 'questionnaire-editor-styles';
8
- style.textContent = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');\n@layer properties;\n:root, :host {\n --mie-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n monospace;\n --mie-color-red-50: oklch(97.1% 0.013 17.38);\n --mie-color-red-100: oklch(93.6% 0.032 17.717);\n --mie-color-red-200: oklch(88.5% 0.062 18.334);\n --mie-color-red-300: oklch(80.8% 0.114 19.571);\n --mie-color-red-600: oklch(57.7% 0.245 27.325);\n --mie-color-red-700: oklch(50.5% 0.213 27.518);\n --mie-color-orange-50: oklch(98% 0.016 73.684);\n --mie-color-orange-500: oklch(70.5% 0.213 47.604);\n --mie-color-orange-600: oklch(64.6% 0.222 41.116);\n --mie-color-orange-700: oklch(55.3% 0.195 38.402);\n --mie-color-blue-50: oklch(97% 0.014 254.604);\n --mie-color-blue-100: oklch(93.2% 0.032 255.585);\n --mie-color-blue-200: oklch(88.2% 0.059 254.128);\n --mie-color-blue-300: oklch(80.9% 0.105 251.813);\n --mie-color-blue-400: oklch(70.7% 0.165 254.624);\n --mie-color-blue-500: oklch(62.3% 0.214 259.815);\n --mie-color-blue-600: oklch(54.6% 0.245 262.881);\n --mie-color-blue-700: oklch(48.8% 0.243 264.376);\n --mie-color-blue-800: oklch(42.4% 0.199 265.638);\n --mie-color-blue-900: oklch(37.9% 0.146 265.522);\n --mie-color-slate-50: oklch(98.4% 0.003 247.858);\n --mie-color-slate-200: oklch(92.9% 0.013 255.508);\n --mie-color-slate-300: oklch(86.9% 0.022 252.894);\n --mie-color-slate-400: oklch(70.4% 0.04 256.788);\n --mie-color-slate-500: oklch(55.4% 0.046 257.417);\n --mie-color-slate-600: oklch(44.6% 0.043 257.281);\n --mie-color-slate-700: oklch(37.2% 0.044 257.287);\n --mie-color-slate-900: oklch(20.8% 0.042 265.755);\n --mie-color-gray-50: oklch(98.5% 0.002 247.839);\n --mie-color-gray-100: oklch(96.7% 0.003 264.542);\n --mie-color-gray-200: oklch(92.8% 0.006 264.531);\n --mie-color-gray-300: oklch(87.2% 0.01 258.338);\n --mie-color-gray-400: oklch(70.7% 0.022 261.325);\n --mie-color-gray-500: oklch(55.1% 0.027 264.364);\n --mie-color-gray-600: oklch(44.6% 0.03 256.802);\n --mie-color-gray-700: oklch(37.3% 0.034 259.733);\n --mie-color-gray-800: oklch(27.8% 0.033 256.848);\n --mie-color-gray-900: oklch(21% 0.034 264.665);\n --mie-color-black: #000;\n --mie-color-white: #fff;\n --mie-spacing: 0.25rem;\n --mie-container-md: 28rem;\n --mie-container-xl: 36rem;\n --mie-container-4xl: 56rem;\n --mie-container-7xl: 80rem;\n --mie-text-xs: 0.75rem;\n --mie-text-xs--line-height: calc(1 / 0.75);\n --mie-text-sm: 0.875rem;\n --mie-text-sm--line-height: calc(1.25 / 0.875);\n --mie-text-base: 1rem;\n --mie-text-base--line-height: calc(1.5 / 1);\n --mie-text-lg: 1.125rem;\n --mie-text-lg--line-height: calc(1.75 / 1.125);\n --mie-text-xl: 1.25rem;\n --mie-text-xl--line-height: calc(1.75 / 1.25);\n --mie-text-2xl: 1.5rem;\n --mie-text-2xl--line-height: calc(2 / 1.5);\n --mie-font-weight-light: 300;\n --mie-font-weight-normal: 400;\n --mie-font-weight-medium: 500;\n --mie-font-weight-semibold: 600;\n --mie-font-weight-bold: 700;\n --mie-tracking-wide: 0.025em;\n --mie-leading-relaxed: 1.625;\n --mie-radius-md: 0.375rem;\n --mie-radius-lg: 0.5rem;\n --mie-radius-xl: 0.75rem;\n --mie-radius-2xl: 1rem;\n --mie-default-transition-duration: 150ms;\n --mie-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --mie-font-titillium: \"Titillium Web\", sans-serif;\n}\n.mie\\:pointer-events-none {\n pointer-events: none;\n}\n.mie\\:absolute {\n position: absolute;\n}\n.mie\\:fixed {\n position: fixed;\n}\n.mie\\:relative {\n position: relative;\n}\n.mie\\:sticky {\n position: sticky;\n}\n.mie\\:inset-0 {\n inset: calc(var(--mie-spacing) * 0);\n}\n.mie\\:top-0 {\n top: calc(var(--mie-spacing) * 0);\n}\n.mie\\:top-1\\/2 {\n top: calc(1/2 * 100%);\n}\n.mie\\:top-2 {\n top: calc(var(--mie-spacing) * 2);\n}\n.mie\\:top-3 {\n top: calc(var(--mie-spacing) * 3);\n}\n.mie\\:top-11 {\n top: calc(var(--mie-spacing) * 11);\n}\n.mie\\:right-0 {\n right: calc(var(--mie-spacing) * 0);\n}\n.mie\\:right-2 {\n right: calc(var(--mie-spacing) * 2);\n}\n.mie\\:right-3 {\n right: calc(var(--mie-spacing) * 3);\n}\n.mie\\:bottom-0 {\n bottom: calc(var(--mie-spacing) * 0);\n}\n.mie\\:bottom-5 {\n bottom: calc(var(--mie-spacing) * 5);\n}\n.mie\\:bottom-full {\n bottom: 100%;\n}\n.mie\\:-left-2 {\n left: calc(var(--mie-spacing) * -2);\n}\n.mie\\:left-0 {\n left: calc(var(--mie-spacing) * 0);\n}\n.mie\\:left-5 {\n left: calc(var(--mie-spacing) * 5);\n}\n.mie\\:z-10 {\n z-index: 10;\n}\n.mie\\:z-20 {\n z-index: 20;\n}\n.mie\\:z-40 {\n z-index: 40;\n}\n.mie\\:z-50 {\n z-index: 50;\n}\n.mie\\:z-9999 {\n z-index: 9999;\n}\n.mie\\:m-0 {\n margin: calc(var(--mie-spacing) * 0);\n}\n.mie\\:-mx-6 {\n margin-inline: calc(var(--mie-spacing) * -6);\n}\n.mie\\:mx-4 {\n margin-inline: calc(var(--mie-spacing) * 4);\n}\n.mie\\:mx-auto {\n margin-inline: auto;\n}\n.mie\\:my-2 {\n margin-block: calc(var(--mie-spacing) * 2);\n}\n.mie\\:my-9 {\n margin-block: calc(var(--mie-spacing) * 9);\n}\n.mie\\:-mt-6 {\n margin-top: calc(var(--mie-spacing) * -6);\n}\n.mie\\:mt-1 {\n margin-top: calc(var(--mie-spacing) * 1);\n}\n.mie\\:mt-2 {\n margin-top: calc(var(--mie-spacing) * 2);\n}\n.mie\\:mt-3 {\n margin-top: calc(var(--mie-spacing) * 3);\n}\n.mie\\:mt-4 {\n margin-top: calc(var(--mie-spacing) * 4);\n}\n.mie\\:mr-2 {\n margin-right: calc(var(--mie-spacing) * 2);\n}\n.mie\\:mb-1 {\n margin-bottom: calc(var(--mie-spacing) * 1);\n}\n.mie\\:mb-1\\.5 {\n margin-bottom: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:mb-2 {\n margin-bottom: calc(var(--mie-spacing) * 2);\n}\n.mie\\:mb-3 {\n margin-bottom: calc(var(--mie-spacing) * 3);\n}\n.mie\\:mb-4 {\n margin-bottom: calc(var(--mie-spacing) * 4);\n}\n.mie\\:mb-6 {\n margin-bottom: calc(var(--mie-spacing) * 6);\n}\n.mie\\:ml-2 {\n margin-left: calc(var(--mie-spacing) * 2);\n}\n.mie\\:ml-auto {\n margin-left: auto;\n}\n.mie\\:block {\n display: block;\n}\n.mie\\:flex {\n display: flex;\n}\n.mie\\:grid {\n display: grid;\n}\n.mie\\:hidden {\n display: none;\n}\n.mie\\:inline-flex {\n display: inline-flex;\n}\n.mie\\:h-1 {\n height: calc(var(--mie-spacing) * 1);\n}\n.mie\\:h-3 {\n height: calc(var(--mie-spacing) * 3);\n}\n.mie\\:h-3\\.5 {\n height: calc(var(--mie-spacing) * 3.5);\n}\n.mie\\:h-4 {\n height: calc(var(--mie-spacing) * 4);\n}\n.mie\\:h-5 {\n height: calc(var(--mie-spacing) * 5);\n}\n.mie\\:h-6 {\n height: calc(var(--mie-spacing) * 6);\n}\n.mie\\:h-7 {\n height: calc(var(--mie-spacing) * 7);\n}\n.mie\\:h-8 {\n height: calc(var(--mie-spacing) * 8);\n}\n.mie\\:h-9 {\n height: calc(var(--mie-spacing) * 9);\n}\n.mie\\:h-10 {\n height: calc(var(--mie-spacing) * 10);\n}\n.mie\\:h-11 {\n height: calc(var(--mie-spacing) * 11);\n}\n.mie\\:h-12 {\n height: calc(var(--mie-spacing) * 12);\n}\n.mie\\:h-24 {\n height: calc(var(--mie-spacing) * 24);\n}\n.mie\\:h-72 {\n height: calc(var(--mie-spacing) * 72);\n}\n.mie\\:h-auto {\n height: auto;\n}\n.mie\\:h-fit {\n height: fit-content;\n}\n.mie\\:h-full {\n height: 100%;\n}\n.mie\\:max-h-32 {\n max-height: calc(var(--mie-spacing) * 32);\n}\n.mie\\:max-h-48 {\n max-height: calc(var(--mie-spacing) * 48);\n}\n.mie\\:max-h-56 {\n max-height: calc(var(--mie-spacing) * 56);\n}\n.mie\\:max-h-60 {\n max-height: calc(var(--mie-spacing) * 60);\n}\n.mie\\:max-h-64 {\n max-height: calc(var(--mie-spacing) * 64);\n}\n.mie\\:max-h-75 {\n max-height: calc(var(--mie-spacing) * 75);\n}\n.mie\\:max-h-\\[60vh\\] {\n max-height: 60vh;\n}\n.mie\\:max-h-\\[calc\\(100svh-13rem\\)\\] {\n max-height: calc(100svh - 13rem);\n}\n.mie\\:max-h-\\[calc\\(100svh-24rem\\)\\] {\n max-height: calc(100svh - 24rem);\n}\n.mie\\:max-h-none {\n max-height: none;\n}\n.mie\\:max-h-screen {\n max-height: 100vh;\n}\n.mie\\:min-h-10 {\n min-height: calc(var(--mie-spacing) * 10);\n}\n.mie\\:min-h-24 {\n min-height: calc(var(--mie-spacing) * 24);\n}\n.mie\\:min-h-64 {\n min-height: calc(var(--mie-spacing) * 64);\n}\n.mie\\:w-1\\/2 {\n width: calc(1/2 * 100%);\n}\n.mie\\:w-3 {\n width: calc(var(--mie-spacing) * 3);\n}\n.mie\\:w-3\\.5 {\n width: calc(var(--mie-spacing) * 3.5);\n}\n.mie\\:w-3\\/4 {\n width: calc(3/4 * 100%);\n}\n.mie\\:w-4 {\n width: calc(var(--mie-spacing) * 4);\n}\n.mie\\:w-5 {\n width: calc(var(--mie-spacing) * 5);\n}\n.mie\\:w-6 {\n width: calc(var(--mie-spacing) * 6);\n}\n.mie\\:w-7 {\n width: calc(var(--mie-spacing) * 7);\n}\n.mie\\:w-8 {\n width: calc(var(--mie-spacing) * 8);\n}\n.mie\\:w-9 {\n width: calc(var(--mie-spacing) * 9);\n}\n.mie\\:w-12 {\n width: calc(var(--mie-spacing) * 12);\n}\n.mie\\:w-20 {\n width: calc(var(--mie-spacing) * 20);\n}\n.mie\\:w-32 {\n width: calc(var(--mie-spacing) * 32);\n}\n.mie\\:w-fit {\n width: fit-content;\n}\n.mie\\:w-full {\n width: 100%;\n}\n.mie\\:w-px {\n width: 1px;\n}\n.mie\\:max-w-4xl {\n max-width: var(--mie-container-4xl);\n}\n.mie\\:max-w-7xl {\n max-width: var(--mie-container-7xl);\n}\n.mie\\:max-w-\\[80vw\\] {\n max-width: 80vw;\n}\n.mie\\:max-w-full {\n max-width: 100%;\n}\n.mie\\:max-w-md {\n max-width: var(--mie-container-md);\n}\n.mie\\:max-w-xl {\n max-width: var(--mie-container-xl);\n}\n.mie\\:min-w-0 {\n min-width: calc(var(--mie-spacing) * 0);\n}\n.mie\\:min-w-\\[44px\\] {\n min-width: 44px;\n}\n.mie\\:flex-1 {\n flex: 1;\n}\n.mie\\:shrink-0 {\n flex-shrink: 0;\n}\n.mie\\:-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.mie\\:scale-105 {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n}\n.mie\\:rotate-180 {\n rotate: 180deg;\n}\n.mie\\:cursor-not-allowed {\n cursor: not-allowed;\n}\n.mie\\:cursor-pointer {\n cursor: pointer;\n}\n.mie\\:touch-manipulation {\n touch-action: manipulation;\n}\n.mie\\:resize-y {\n resize: vertical;\n}\n.mie\\:appearance-none {\n appearance: none;\n}\n.mie\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.mie\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.mie\\:flex-col {\n flex-direction: column;\n}\n.mie\\:flex-wrap {\n flex-wrap: wrap;\n}\n.mie\\:items-center {\n align-items: center;\n}\n.mie\\:items-end {\n align-items: flex-end;\n}\n.mie\\:items-start {\n align-items: flex-start;\n}\n.mie\\:justify-between {\n justify-content: space-between;\n}\n.mie\\:justify-center {\n justify-content: center;\n}\n.mie\\:justify-end {\n justify-content: flex-end;\n}\n.mie\\:justify-evenly {\n justify-content: space-evenly;\n}\n.mie\\:justify-start {\n justify-content: flex-start;\n}\n.mie\\:gap-0 {\n gap: calc(var(--mie-spacing) * 0);\n}\n.mie\\:gap-1 {\n gap: calc(var(--mie-spacing) * 1);\n}\n.mie\\:gap-1\\.5 {\n gap: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:gap-2 {\n gap: calc(var(--mie-spacing) * 2);\n}\n.mie\\:gap-3 {\n gap: calc(var(--mie-spacing) * 3);\n}\n.mie\\:gap-4 {\n gap: calc(var(--mie-spacing) * 4);\n}\n.mie\\:space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mie\\:overflow-auto {\n overflow: auto;\n}\n.mie\\:overflow-hidden {\n overflow: hidden;\n}\n.mie\\:overflow-visible {\n overflow: visible;\n}\n.mie\\:overflow-y-auto {\n overflow-y: auto;\n}\n.mie\\:rounded {\n border-radius: 0.25rem;\n}\n.mie\\:rounded-2xl {\n border-radius: var(--mie-radius-2xl);\n}\n.mie\\:rounded-full {\n border-radius: calc(infinity * 1px);\n}\n.mie\\:rounded-lg {\n border-radius: var(--mie-radius-lg);\n}\n.mie\\:rounded-md {\n border-radius: var(--mie-radius-md);\n}\n.mie\\:rounded-xl {\n border-radius: var(--mie-radius-xl);\n}\n.mie\\:rounded-t-2xl {\n border-top-left-radius: var(--mie-radius-2xl);\n border-top-right-radius: var(--mie-radius-2xl);\n}\n.mie\\:rounded-t-lg {\n border-top-left-radius: var(--mie-radius-lg);\n border-top-right-radius: var(--mie-radius-lg);\n}\n.mie\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n}\n.mie\\:border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n}\n.mie\\:border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n}\n.mie\\:border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n}\n.mie\\:border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n}\n.mie\\:border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n}\n.mie\\:border-black\\/10 {\n border-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-black) 10%, transparent);\n }\n}\n.mie\\:border-black\\/15 {\n border-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-black) 15%, transparent);\n }\n}\n.mie\\:border-black\\/20 {\n border-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-black) 20%, transparent);\n }\n}\n.mie\\:border-blue-200 {\n border-color: var(--mie-color-blue-200);\n}\n.mie\\:border-blue-300 {\n border-color: var(--mie-color-blue-300);\n}\n.mie\\:border-blue-400 {\n border-color: var(--mie-color-blue-400);\n}\n.mie\\:border-blue-600 {\n border-color: var(--mie-color-blue-600);\n}\n.mie\\:border-gray-100 {\n border-color: var(--mie-color-gray-100);\n}\n.mie\\:border-gray-200 {\n border-color: var(--mie-color-gray-200);\n}\n.mie\\:border-gray-300 {\n border-color: var(--mie-color-gray-300);\n}\n.mie\\:border-orange-500 {\n border-color: var(--mie-color-orange-500);\n}\n.mie\\:border-red-200 {\n border-color: var(--mie-color-red-200);\n}\n.mie\\:border-red-300 {\n border-color: var(--mie-color-red-300);\n}\n.mie\\:border-slate-200 {\n border-color: var(--mie-color-slate-200);\n}\n.mie\\:border-slate-300 {\n border-color: var(--mie-color-slate-300);\n}\n.mie\\:border-transparent {\n border-color: transparent;\n}\n.mie\\:bg-black\\/5 {\n background-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-black) 5%, transparent);\n }\n}\n.mie\\:bg-black\\/30 {\n background-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-black) 30%, transparent);\n }\n}\n.mie\\:bg-black\\/50 {\n background-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-black) 50%, transparent);\n }\n}\n.mie\\:bg-blue-50 {\n background-color: var(--mie-color-blue-50);\n}\n.mie\\:bg-blue-100 {\n background-color: var(--mie-color-blue-100);\n}\n.mie\\:bg-blue-400 {\n background-color: var(--mie-color-blue-400);\n}\n.mie\\:bg-blue-500 {\n background-color: var(--mie-color-blue-500);\n}\n.mie\\:bg-blue-600 {\n background-color: var(--mie-color-blue-600);\n}\n.mie\\:bg-gray-50 {\n background-color: var(--mie-color-gray-50);\n}\n.mie\\:bg-gray-100 {\n background-color: var(--mie-color-gray-100);\n}\n.mie\\:bg-gray-200 {\n background-color: var(--mie-color-gray-200);\n}\n.mie\\:bg-gray-300 {\n background-color: var(--mie-color-gray-300);\n}\n.mie\\:bg-gray-700 {\n background-color: var(--mie-color-gray-700);\n}\n.mie\\:bg-orange-50 {\n background-color: var(--mie-color-orange-50);\n}\n.mie\\:bg-orange-500 {\n background-color: var(--mie-color-orange-500);\n}\n.mie\\:bg-red-50 {\n background-color: var(--mie-color-red-50);\n}\n.mie\\:bg-red-100 {\n background-color: var(--mie-color-red-100);\n}\n.mie\\:bg-slate-50 {\n background-color: var(--mie-color-slate-50);\n}\n.mie\\:bg-transparent {\n background-color: transparent;\n}\n.mie\\:bg-white {\n background-color: var(--mie-color-white);\n}\n.mie\\:bg-linear-to-br {\n --tw-gradient-position: to bottom right;\n @supports (background-image: linear-gradient(in lab, red, red)) {\n --tw-gradient-position: to bottom right in oklab;\n }\n background-image: linear-gradient(var(--tw-gradient-stops));\n}\n.mie\\:bg-linear-to-r {\n --tw-gradient-position: to right;\n @supports (background-image: linear-gradient(in lab, red, red)) {\n --tw-gradient-position: to right in oklab;\n }\n background-image: linear-gradient(var(--tw-gradient-stops));\n}\n.mie\\:from-blue-50 {\n --tw-gradient-from: var(--mie-color-blue-50);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:from-gray-50 {\n --tw-gradient-from: var(--mie-color-gray-50);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:to-gray-50 {\n --tw-gradient-to: var(--mie-color-gray-50);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:to-gray-100 {\n --tw-gradient-to: var(--mie-color-gray-100);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:object-contain {\n object-fit: contain;\n}\n.mie\\:p-0 {\n padding: calc(var(--mie-spacing) * 0);\n}\n.mie\\:p-1 {\n padding: calc(var(--mie-spacing) * 1);\n}\n.mie\\:p-1\\.5 {\n padding: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:p-2 {\n padding: calc(var(--mie-spacing) * 2);\n}\n.mie\\:p-3 {\n padding: calc(var(--mie-spacing) * 3);\n}\n.mie\\:p-4 {\n padding: calc(var(--mie-spacing) * 4);\n}\n.mie\\:p-6 {\n padding: calc(var(--mie-spacing) * 6);\n}\n.mie\\:p-8 {\n padding: calc(var(--mie-spacing) * 8);\n}\n.mie\\:px-0 {\n padding-inline: calc(var(--mie-spacing) * 0);\n}\n.mie\\:px-0\\.5 {\n padding-inline: calc(var(--mie-spacing) * 0.5);\n}\n.mie\\:px-2 {\n padding-inline: calc(var(--mie-spacing) * 2);\n}\n.mie\\:px-2\\.5 {\n padding-inline: calc(var(--mie-spacing) * 2.5);\n}\n.mie\\:px-3 {\n padding-inline: calc(var(--mie-spacing) * 3);\n}\n.mie\\:px-4 {\n padding-inline: calc(var(--mie-spacing) * 4);\n}\n.mie\\:px-6 {\n padding-inline: calc(var(--mie-spacing) * 6);\n}\n.mie\\:px-8 {\n padding-inline: calc(var(--mie-spacing) * 8);\n}\n.mie\\:py-0\\.5 {\n padding-block: calc(var(--mie-spacing) * 0.5);\n}\n.mie\\:py-1 {\n padding-block: calc(var(--mie-spacing) * 1);\n}\n.mie\\:py-1\\.5 {\n padding-block: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:py-2 {\n padding-block: calc(var(--mie-spacing) * 2);\n}\n.mie\\:py-2\\.5 {\n padding-block: calc(var(--mie-spacing) * 2.5);\n}\n.mie\\:py-3 {\n padding-block: calc(var(--mie-spacing) * 3);\n}\n.mie\\:py-4 {\n padding-block: calc(var(--mie-spacing) * 4);\n}\n.mie\\:py-5 {\n padding-block: calc(var(--mie-spacing) * 5);\n}\n.mie\\:py-10 {\n padding-block: calc(var(--mie-spacing) * 10);\n}\n.mie\\:pt-1 {\n padding-top: calc(var(--mie-spacing) * 1);\n}\n.mie\\:pt-2 {\n padding-top: calc(var(--mie-spacing) * 2);\n}\n.mie\\:pt-3 {\n padding-top: calc(var(--mie-spacing) * 3);\n}\n.mie\\:pt-4 {\n padding-top: calc(var(--mie-spacing) * 4);\n}\n.mie\\:pt-6 {\n padding-top: calc(var(--mie-spacing) * 6);\n}\n.mie\\:pr-10 {\n padding-right: calc(var(--mie-spacing) * 10);\n}\n.mie\\:pr-16 {\n padding-right: calc(var(--mie-spacing) * 16);\n}\n.mie\\:pb-2 {\n padding-bottom: calc(var(--mie-spacing) * 2);\n}\n.mie\\:pb-4 {\n padding-bottom: calc(var(--mie-spacing) * 4);\n}\n.mie\\:pb-8 {\n padding-bottom: calc(var(--mie-spacing) * 8);\n}\n.mie\\:pl-32 {\n padding-left: calc(var(--mie-spacing) * 32);\n}\n.mie\\:text-center {\n text-align: center;\n}\n.mie\\:text-left {\n text-align: left;\n}\n.mie\\:font-mono {\n font-family: var(--mie-font-mono);\n}\n.mie\\:font-titillium {\n font-family: var(--mie-font-titillium);\n}\n.mie\\:text-base {\n font-size: var(--mie-text-base);\n line-height: var(--tw-leading, var(--mie-text-base--line-height));\n}\n.mie\\:text-lg {\n font-size: var(--mie-text-lg);\n line-height: var(--tw-leading, var(--mie-text-lg--line-height));\n}\n.mie\\:text-sm {\n font-size: var(--mie-text-sm);\n line-height: var(--tw-leading, var(--mie-text-sm--line-height));\n}\n.mie\\:text-xl {\n font-size: var(--mie-text-xl);\n line-height: var(--tw-leading, var(--mie-text-xl--line-height));\n}\n.mie\\:text-xs {\n font-size: var(--mie-text-xs);\n line-height: var(--tw-leading, var(--mie-text-xs--line-height));\n}\n.mie\\:leading-relaxed {\n --tw-leading: var(--mie-leading-relaxed);\n line-height: var(--mie-leading-relaxed);\n}\n.mie\\:font-bold {\n --tw-font-weight: var(--mie-font-weight-bold);\n font-weight: var(--mie-font-weight-bold);\n}\n.mie\\:font-light {\n --tw-font-weight: var(--mie-font-weight-light);\n font-weight: var(--mie-font-weight-light);\n}\n.mie\\:font-medium {\n --tw-font-weight: var(--mie-font-weight-medium);\n font-weight: var(--mie-font-weight-medium);\n}\n.mie\\:font-normal {\n --tw-font-weight: var(--mie-font-weight-normal);\n font-weight: var(--mie-font-weight-normal);\n}\n.mie\\:font-semibold {\n --tw-font-weight: var(--mie-font-weight-semibold);\n font-weight: var(--mie-font-weight-semibold);\n}\n.mie\\:tracking-wide {\n --tw-tracking: var(--mie-tracking-wide);\n letter-spacing: var(--mie-tracking-wide);\n}\n.mie\\:wrap-break-word {\n overflow-wrap: break-word;\n}\n.mie\\:whitespace-nowrap {\n white-space: nowrap;\n}\n.mie\\:whitespace-pre-line {\n white-space: pre-line;\n}\n.mie\\:text-blue-500 {\n color: var(--mie-color-blue-500);\n}\n.mie\\:text-blue-600 {\n color: var(--mie-color-blue-600);\n}\n.mie\\:text-blue-800 {\n color: var(--mie-color-blue-800);\n}\n.mie\\:text-blue-900 {\n color: var(--mie-color-blue-900);\n}\n.mie\\:text-gray-300 {\n color: var(--mie-color-gray-300);\n}\n.mie\\:text-gray-400 {\n color: var(--mie-color-gray-400);\n}\n.mie\\:text-gray-500 {\n color: var(--mie-color-gray-500);\n}\n.mie\\:text-gray-600 {\n color: var(--mie-color-gray-600);\n}\n.mie\\:text-gray-700 {\n color: var(--mie-color-gray-700);\n}\n.mie\\:text-gray-800 {\n color: var(--mie-color-gray-800);\n}\n.mie\\:text-gray-900 {\n color: var(--mie-color-gray-900);\n}\n.mie\\:text-orange-700 {\n color: var(--mie-color-orange-700);\n}\n.mie\\:text-red-600 {\n color: var(--mie-color-red-600);\n}\n.mie\\:text-red-700 {\n color: var(--mie-color-red-700);\n}\n.mie\\:text-slate-400 {\n color: var(--mie-color-slate-400);\n}\n.mie\\:text-slate-500 {\n color: var(--mie-color-slate-500);\n}\n.mie\\:text-slate-600 {\n color: var(--mie-color-slate-600);\n}\n.mie\\:text-slate-700 {\n color: var(--mie-color-slate-700);\n}\n.mie\\:text-slate-900 {\n color: var(--mie-color-slate-900);\n}\n.mie\\:text-white {\n color: var(--mie-color-white);\n}\n.mie\\:uppercase {\n text-transform: uppercase;\n}\n.mie\\:italic {\n font-style: italic;\n}\n.mie\\:opacity-0 {\n opacity: 0%;\n}\n.mie\\:opacity-50 {\n opacity: 50%;\n}\n.mie\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:ring-blue-500 {\n --tw-ring-color: var(--mie-color-blue-500);\n}\n.mie\\:ring-offset-2 {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n}\n.mie\\:transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n}\n.mie\\:outline-none {\n --tw-outline-style: none;\n outline-style: none;\n}\n.mie\\:select-none {\n -webkit-user-select: none;\n user-select: none;\n}\n.mie\\:hover\\:flex {\n &:hover {\n @media (hover: hover) {\n display: flex;\n }\n }\n}\n.mie\\:hover\\:scale-105 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n}\n.mie\\:hover\\:border-blue-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--mie-color-blue-300);\n }\n }\n}\n.mie\\:hover\\:border-blue-400 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--mie-color-blue-400);\n }\n }\n}\n.mie\\:hover\\:border-gray-400 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--mie-color-gray-400);\n }\n }\n}\n.mie\\:hover\\:bg-black\\/5 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-black) 5%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:bg-blue-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-blue-50);\n }\n }\n}\n.mie\\:hover\\:bg-blue-500 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-blue-500);\n }\n }\n}\n.mie\\:hover\\:bg-blue-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-blue-600);\n }\n }\n}\n.mie\\:hover\\:bg-blue-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-blue-700);\n }\n }\n}\n.mie\\:hover\\:bg-gray-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-gray-200);\n }\n }\n}\n.mie\\:hover\\:bg-gray-300 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-gray-300);\n }\n }\n}\n.mie\\:hover\\:bg-orange-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-orange-600);\n }\n }\n}\n.mie\\:hover\\:bg-red-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-red-50);\n }\n }\n}\n.mie\\:hover\\:bg-red-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-red-200);\n }\n }\n}\n.mie\\:hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-slate-50);\n }\n }\n}\n.mie\\:hover\\:bg-white {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-white);\n }\n }\n}\n.mie\\:hover\\:from-blue-100 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-from: var(--mie-color-blue-100);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n}\n.mie\\:hover\\:to-gray-100 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-to: var(--mie-color-gray-100);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n}\n.mie\\:hover\\:text-blue-600 {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-blue-600);\n }\n }\n}\n.mie\\:hover\\:text-blue-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-blue-700);\n }\n }\n}\n.mie\\:hover\\:text-red-600 {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-red-600);\n }\n }\n}\n.mie\\:hover\\:text-red-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-red-700);\n }\n }\n}\n.mie\\:hover\\:text-slate-900 {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-slate-900);\n }\n }\n}\n.mie\\:hover\\:shadow {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n.mie\\:hover\\:ring-2 {\n &:hover {\n @media (hover: hover) {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n.mie\\:hover\\:ring-gray-300 {\n &:hover {\n @media (hover: hover) {\n --tw-ring-color: var(--mie-color-gray-300);\n }\n }\n}\n.mie\\:focus\\:border-blue-400 {\n &:focus {\n border-color: var(--mie-color-blue-400);\n }\n}\n.mie\\:focus\\:ring-1 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n}\n.mie\\:focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n}\n.mie\\:focus\\:ring-blue-400 {\n &:focus {\n --tw-ring-color: var(--mie-color-blue-400);\n }\n}\n.mie\\:focus\\:ring-blue-500 {\n &:focus {\n --tw-ring-color: var(--mie-color-blue-500);\n }\n}\n.mie\\:focus\\:ring-slate-500 {\n &:focus {\n --tw-ring-color: var(--mie-color-slate-500);\n }\n}\n.mie\\:focus\\:ring-offset-2 {\n &:focus {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n}\n.mie\\:focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n}\n.mie\\:disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n}\n.mie\\:disabled\\:opacity-40 {\n &:disabled {\n opacity: 40%;\n }\n}\n.mie\\:disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n}\n.mie\\:sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n.mie\\:md\\:mt-4 {\n @media (width >= 48rem) {\n margin-top: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:md\\:w-80 {\n @media (width >= 48rem) {\n width: calc(var(--mie-spacing) * 80);\n }\n}\n.mie\\:md\\:max-w-\\[75vw\\] {\n @media (width >= 48rem) {\n max-width: 75vw;\n }\n}\n.mie\\:md\\:flex-row {\n @media (width >= 48rem) {\n flex-direction: row;\n }\n}\n.mie\\:md\\:px-6 {\n @media (width >= 48rem) {\n padding-inline: calc(var(--mie-spacing) * 6);\n }\n}\n.mie\\:lg\\:mt-6 {\n @media (width >= 64rem) {\n margin-top: calc(var(--mie-spacing) * 6);\n }\n}\n.mie\\:lg\\:block {\n @media (width >= 64rem) {\n display: block;\n }\n}\n.mie\\:lg\\:flex {\n @media (width >= 64rem) {\n display: flex;\n }\n}\n.mie\\:lg\\:hidden {\n @media (width >= 64rem) {\n display: none;\n }\n}\n.mie\\:lg\\:h-4 {\n @media (width >= 64rem) {\n height: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:max-h-\\[calc\\(100dvh-11rem\\)\\] {\n @media (width >= 64rem) {\n max-height: calc(100dvh - 11rem);\n }\n}\n.mie\\:lg\\:max-h-\\[calc\\(100dvh-20rem\\)\\] {\n @media (width >= 64rem) {\n max-height: calc(100dvh - 20rem);\n }\n}\n.mie\\:lg\\:w-4 {\n @media (width >= 64rem) {\n width: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:w-72 {\n @media (width >= 64rem) {\n width: calc(var(--mie-spacing) * 72);\n }\n}\n.mie\\:lg\\:w-90 {\n @media (width >= 64rem) {\n width: calc(var(--mie-spacing) * 90);\n }\n}\n.mie\\:lg\\:max-w-full {\n @media (width >= 64rem) {\n max-width: 100%;\n }\n}\n.mie\\:lg\\:grid-cols-2 {\n @media (width >= 64rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n.mie\\:lg\\:flex-row {\n @media (width >= 64rem) {\n flex-direction: row;\n }\n}\n.mie\\:lg\\:items-center {\n @media (width >= 64rem) {\n align-items: center;\n }\n}\n.mie\\:lg\\:justify-center {\n @media (width >= 64rem) {\n justify-content: center;\n }\n}\n.mie\\:lg\\:gap-2 {\n @media (width >= 64rem) {\n gap: calc(var(--mie-spacing) * 2);\n }\n}\n.mie\\:lg\\:gap-3 {\n @media (width >= 64rem) {\n gap: calc(var(--mie-spacing) * 3);\n }\n}\n.mie\\:lg\\:px-3 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--mie-spacing) * 3);\n }\n}\n.mie\\:lg\\:px-4 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:px-6 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--mie-spacing) * 6);\n }\n}\n.mie\\:lg\\:py-2 {\n @media (width >= 64rem) {\n padding-block: calc(var(--mie-spacing) * 2);\n }\n}\n.mie\\:lg\\:pr-2 {\n @media (width >= 64rem) {\n padding-right: calc(var(--mie-spacing) * 2);\n }\n}\n.mie\\:lg\\:pb-4 {\n @media (width >= 64rem) {\n padding-bottom: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:text-2xl {\n @media (width >= 64rem) {\n font-size: var(--mie-text-2xl);\n line-height: var(--tw-leading, var(--mie-text-2xl--line-height));\n }\n}\n.mie\\:lg\\:text-sm {\n @media (width >= 64rem) {\n font-size: var(--mie-text-sm);\n line-height: var(--tw-leading, var(--mie-text-sm--line-height));\n }\n}\n@layer base {\n .qb-editor-root, .qb-editor-root *, .qb-editor-root *::before, .qb-editor-root *::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n }\n}\ndiv:focus-visible, button:focus-visible {\n outline: none;\n}\n.mie\\:custom-scrollbar::-webkit-scrollbar {\n width: 4px;\n}\n.mie\\:custom-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n}\n.mie\\:custom-scrollbar::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: 9999px;\n transition: background 0.2s;\n}\n.mie\\:custom-scrollbar:hover::-webkit-scrollbar-thumb {\n background: #d1d5db;\n}\n.mie\\:custom-scrollbar {\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n.mie\\:custom-scrollbar:hover {\n scrollbar-color: #d1d5db transparent;\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n }\n }\n}\n";
8
+ style.textContent = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');\n@layer properties;\n:root, :host {\n --mie-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n monospace;\n --mie-color-blue-500: oklch(62.3% 0.214 259.815);\n --mie-color-blue-600: oklch(54.6% 0.245 262.881);\n --mie-color-gray-200: oklch(92.8% 0.006 264.531);\n --mie-color-gray-900: oklch(21% 0.034 264.665);\n --mie-color-white: #fff;\n --mie-spacing: 0.25rem;\n --mie-container-md: 28rem;\n --mie-container-xl: 36rem;\n --mie-container-4xl: 56rem;\n --mie-container-7xl: 80rem;\n --mie-text-xs: 0.75rem;\n --mie-text-xs--line-height: calc(1 / 0.75);\n --mie-text-sm: 0.875rem;\n --mie-text-sm--line-height: calc(1.25 / 0.875);\n --mie-text-base: 1rem;\n --mie-text-base--line-height: calc(1.5 / 1);\n --mie-text-lg: 1.125rem;\n --mie-text-lg--line-height: calc(1.75 / 1.125);\n --mie-text-xl: 1.25rem;\n --mie-text-xl--line-height: calc(1.75 / 1.25);\n --mie-font-weight-light: 300;\n --mie-font-weight-normal: 400;\n --mie-font-weight-medium: 500;\n --mie-font-weight-semibold: 600;\n --mie-tracking-wide: 0.025em;\n --mie-leading-relaxed: 1.625;\n --mie-radius-md: 0.375rem;\n --mie-radius-lg: 0.5rem;\n --mie-radius-xl: 0.75rem;\n --mie-radius-2xl: 1rem;\n --mie-default-transition-duration: 150ms;\n --mie-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --mie-font-titillium: \"Titillium Web\", sans-serif;\n --mie-color-mieprimary: #3b82f6;\n --mie-color-miesecondary: #6b7280;\n --mie-color-mieaccent: #10b981;\n --mie-color-miedanger: #ef4444;\n --mie-color-miewarning: #f97316;\n --mie-color-miesurface: #ffffff;\n --mie-color-mieborder: #e5e7eb;\n --mie-color-mieborderinactive: #9ca3af;\n --mie-color-mietext: #111827;\n --mie-color-mietextsecondary: #f8fafc;\n --mie-color-mietextmuted: #6b7280;\n --mie-color-miebackground: #f9fafb;\n --mie-color-miebackgroundsecondary: #f3f4f6;\n --mie-color-miebackgroundhover: #eceef1;\n --mie-color-mieoverlay: rgba(0, 0, 0, 0.5);\n}\n.mie\\:pointer-events-none {\n pointer-events: none;\n}\n.mie\\:absolute {\n position: absolute;\n}\n.mie\\:fixed {\n position: fixed;\n}\n.mie\\:relative {\n position: relative;\n}\n.mie\\:sticky {\n position: sticky;\n}\n.mie\\:inset-0 {\n inset: calc(var(--mie-spacing) * 0);\n}\n.mie\\:top-0 {\n top: calc(var(--mie-spacing) * 0);\n}\n.mie\\:top-1\\/2 {\n top: calc(1/2 * 100%);\n}\n.mie\\:top-2 {\n top: calc(var(--mie-spacing) * 2);\n}\n.mie\\:top-3 {\n top: calc(var(--mie-spacing) * 3);\n}\n.mie\\:top-11 {\n top: calc(var(--mie-spacing) * 11);\n}\n.mie\\:right-0 {\n right: calc(var(--mie-spacing) * 0);\n}\n.mie\\:right-2 {\n right: calc(var(--mie-spacing) * 2);\n}\n.mie\\:right-3 {\n right: calc(var(--mie-spacing) * 3);\n}\n.mie\\:bottom-0 {\n bottom: calc(var(--mie-spacing) * 0);\n}\n.mie\\:bottom-5 {\n bottom: calc(var(--mie-spacing) * 5);\n}\n.mie\\:bottom-full {\n bottom: 100%;\n}\n.mie\\:-left-2 {\n left: calc(var(--mie-spacing) * -2);\n}\n.mie\\:left-0 {\n left: calc(var(--mie-spacing) * 0);\n}\n.mie\\:left-5 {\n left: calc(var(--mie-spacing) * 5);\n}\n.mie\\:z-10 {\n z-index: 10;\n}\n.mie\\:z-20 {\n z-index: 20;\n}\n.mie\\:z-40 {\n z-index: 40;\n}\n.mie\\:z-50 {\n z-index: 50;\n}\n.mie\\:z-9999 {\n z-index: 9999;\n}\n.mie\\:m-0 {\n margin: calc(var(--mie-spacing) * 0);\n}\n.mie\\:-mx-6 {\n margin-inline: calc(var(--mie-spacing) * -6);\n}\n.mie\\:mx-4 {\n margin-inline: calc(var(--mie-spacing) * 4);\n}\n.mie\\:mx-auto {\n margin-inline: auto;\n}\n.mie\\:my-2 {\n margin-block: calc(var(--mie-spacing) * 2);\n}\n.mie\\:my-9 {\n margin-block: calc(var(--mie-spacing) * 9);\n}\n.mie\\:-mt-6 {\n margin-top: calc(var(--mie-spacing) * -6);\n}\n.mie\\:mt-1 {\n margin-top: calc(var(--mie-spacing) * 1);\n}\n.mie\\:mt-2 {\n margin-top: calc(var(--mie-spacing) * 2);\n}\n.mie\\:mt-3 {\n margin-top: calc(var(--mie-spacing) * 3);\n}\n.mie\\:mt-4 {\n margin-top: calc(var(--mie-spacing) * 4);\n}\n.mie\\:mb-1 {\n margin-bottom: calc(var(--mie-spacing) * 1);\n}\n.mie\\:mb-1\\.5 {\n margin-bottom: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:mb-2 {\n margin-bottom: calc(var(--mie-spacing) * 2);\n}\n.mie\\:mb-3 {\n margin-bottom: calc(var(--mie-spacing) * 3);\n}\n.mie\\:mb-4 {\n margin-bottom: calc(var(--mie-spacing) * 4);\n}\n.mie\\:mb-6 {\n margin-bottom: calc(var(--mie-spacing) * 6);\n}\n.mie\\:ml-2 {\n margin-left: calc(var(--mie-spacing) * 2);\n}\n.mie\\:ml-auto {\n margin-left: auto;\n}\n.mie\\:block {\n display: block;\n}\n.mie\\:flex {\n display: flex;\n}\n.mie\\:grid {\n display: grid;\n}\n.mie\\:hidden {\n display: none;\n}\n.mie\\:inline-flex {\n display: inline-flex;\n}\n.mie\\:h-1 {\n height: calc(var(--mie-spacing) * 1);\n}\n.mie\\:h-3 {\n height: calc(var(--mie-spacing) * 3);\n}\n.mie\\:h-3\\.5 {\n height: calc(var(--mie-spacing) * 3.5);\n}\n.mie\\:h-4 {\n height: calc(var(--mie-spacing) * 4);\n}\n.mie\\:h-5 {\n height: calc(var(--mie-spacing) * 5);\n}\n.mie\\:h-6 {\n height: calc(var(--mie-spacing) * 6);\n}\n.mie\\:h-7 {\n height: calc(var(--mie-spacing) * 7);\n}\n.mie\\:h-8 {\n height: calc(var(--mie-spacing) * 8);\n}\n.mie\\:h-10 {\n height: calc(var(--mie-spacing) * 10);\n}\n.mie\\:h-11 {\n height: calc(var(--mie-spacing) * 11);\n}\n.mie\\:h-12 {\n height: calc(var(--mie-spacing) * 12);\n}\n.mie\\:h-24 {\n height: calc(var(--mie-spacing) * 24);\n}\n.mie\\:h-72 {\n height: calc(var(--mie-spacing) * 72);\n}\n.mie\\:h-auto {\n height: auto;\n}\n.mie\\:h-fit {\n height: fit-content;\n}\n.mie\\:h-full {\n height: 100%;\n}\n.mie\\:max-h-32 {\n max-height: calc(var(--mie-spacing) * 32);\n}\n.mie\\:max-h-48 {\n max-height: calc(var(--mie-spacing) * 48);\n}\n.mie\\:max-h-56 {\n max-height: calc(var(--mie-spacing) * 56);\n}\n.mie\\:max-h-60 {\n max-height: calc(var(--mie-spacing) * 60);\n}\n.mie\\:max-h-64 {\n max-height: calc(var(--mie-spacing) * 64);\n}\n.mie\\:max-h-75 {\n max-height: calc(var(--mie-spacing) * 75);\n}\n.mie\\:max-h-\\[60vh\\] {\n max-height: 60vh;\n}\n.mie\\:max-h-\\[calc\\(100svh-13rem\\)\\] {\n max-height: calc(100svh - 13rem);\n}\n.mie\\:max-h-\\[calc\\(100svh-24rem\\)\\] {\n max-height: calc(100svh - 24rem);\n}\n.mie\\:max-h-none {\n max-height: none;\n}\n.mie\\:max-h-screen {\n max-height: 100vh;\n}\n.mie\\:min-h-10 {\n min-height: calc(var(--mie-spacing) * 10);\n}\n.mie\\:min-h-24 {\n min-height: calc(var(--mie-spacing) * 24);\n}\n.mie\\:min-h-64 {\n min-height: calc(var(--mie-spacing) * 64);\n}\n.mie\\:w-1\\/2 {\n width: calc(1/2 * 100%);\n}\n.mie\\:w-3 {\n width: calc(var(--mie-spacing) * 3);\n}\n.mie\\:w-3\\.5 {\n width: calc(var(--mie-spacing) * 3.5);\n}\n.mie\\:w-3\\/4 {\n width: calc(3/4 * 100%);\n}\n.mie\\:w-4 {\n width: calc(var(--mie-spacing) * 4);\n}\n.mie\\:w-5 {\n width: calc(var(--mie-spacing) * 5);\n}\n.mie\\:w-6 {\n width: calc(var(--mie-spacing) * 6);\n}\n.mie\\:w-7 {\n width: calc(var(--mie-spacing) * 7);\n}\n.mie\\:w-8 {\n width: calc(var(--mie-spacing) * 8);\n}\n.mie\\:w-12 {\n width: calc(var(--mie-spacing) * 12);\n}\n.mie\\:w-20 {\n width: calc(var(--mie-spacing) * 20);\n}\n.mie\\:w-32 {\n width: calc(var(--mie-spacing) * 32);\n}\n.mie\\:w-fit {\n width: fit-content;\n}\n.mie\\:w-full {\n width: 100%;\n}\n.mie\\:w-px {\n width: 1px;\n}\n.mie\\:max-w-4xl {\n max-width: var(--mie-container-4xl);\n}\n.mie\\:max-w-7xl {\n max-width: var(--mie-container-7xl);\n}\n.mie\\:max-w-\\[80vw\\] {\n max-width: 80vw;\n}\n.mie\\:max-w-full {\n max-width: 100%;\n}\n.mie\\:max-w-md {\n max-width: var(--mie-container-md);\n}\n.mie\\:max-w-xl {\n max-width: var(--mie-container-xl);\n}\n.mie\\:min-w-0 {\n min-width: calc(var(--mie-spacing) * 0);\n}\n.mie\\:min-w-\\[44px\\] {\n min-width: 44px;\n}\n.mie\\:flex-1 {\n flex: 1;\n}\n.mie\\:shrink-0 {\n flex-shrink: 0;\n}\n.mie\\:-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n}\n.mie\\:scale-105 {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n}\n.mie\\:rotate-180 {\n rotate: 180deg;\n}\n.mie\\:cursor-not-allowed {\n cursor: not-allowed;\n}\n.mie\\:cursor-pointer {\n cursor: pointer;\n}\n.mie\\:touch-manipulation {\n touch-action: manipulation;\n}\n.mie\\:resize-y {\n resize: vertical;\n}\n.mie\\:appearance-none {\n appearance: none;\n}\n.mie\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.mie\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.mie\\:flex-col {\n flex-direction: column;\n}\n.mie\\:flex-wrap {\n flex-wrap: wrap;\n}\n.mie\\:items-center {\n align-items: center;\n}\n.mie\\:items-end {\n align-items: flex-end;\n}\n.mie\\:items-start {\n align-items: flex-start;\n}\n.mie\\:justify-between {\n justify-content: space-between;\n}\n.mie\\:justify-center {\n justify-content: center;\n}\n.mie\\:justify-end {\n justify-content: flex-end;\n}\n.mie\\:justify-evenly {\n justify-content: space-evenly;\n}\n.mie\\:justify-start {\n justify-content: flex-start;\n}\n.mie\\:gap-0 {\n gap: calc(var(--mie-spacing) * 0);\n}\n.mie\\:gap-1 {\n gap: calc(var(--mie-spacing) * 1);\n}\n.mie\\:gap-1\\.5 {\n gap: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:gap-2 {\n gap: calc(var(--mie-spacing) * 2);\n}\n.mie\\:gap-3 {\n gap: calc(var(--mie-spacing) * 3);\n}\n.mie\\:gap-4 {\n gap: calc(var(--mie-spacing) * 4);\n}\n.mie\\:space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--mie-spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--mie-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n}\n.mie\\:truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mie\\:overflow-auto {\n overflow: auto;\n}\n.mie\\:overflow-hidden {\n overflow: hidden;\n}\n.mie\\:overflow-visible {\n overflow: visible;\n}\n.mie\\:overflow-y-auto {\n overflow-y: auto;\n}\n.mie\\:rounded {\n border-radius: 0.25rem;\n}\n.mie\\:rounded-2xl {\n border-radius: var(--mie-radius-2xl);\n}\n.mie\\:rounded-full {\n border-radius: calc(infinity * 1px);\n}\n.mie\\:rounded-lg {\n border-radius: var(--mie-radius-lg);\n}\n.mie\\:rounded-md {\n border-radius: var(--mie-radius-md);\n}\n.mie\\:rounded-xl {\n border-radius: var(--mie-radius-xl);\n}\n.mie\\:rounded-t-2xl {\n border-top-left-radius: var(--mie-radius-2xl);\n border-top-right-radius: var(--mie-radius-2xl);\n}\n.mie\\:rounded-t-lg {\n border-top-left-radius: var(--mie-radius-lg);\n border-top-right-radius: var(--mie-radius-lg);\n}\n.mie\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n}\n.mie\\:border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n}\n.mie\\:border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n}\n.mie\\:border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n}\n.mie\\:border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n}\n.mie\\:border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n}\n.mie\\:border-gray-200 {\n border-color: var(--mie-color-gray-200);\n}\n.mie\\:border-mieborder {\n border-color: var(--mie-color-mieborder);\n}\n.mie\\:border-mieborderinactive {\n border-color: var(--mie-color-mieborderinactive);\n}\n.mie\\:border-miedanger\\/30 {\n border-color: var(--mie-color-miedanger);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-miedanger) 30%, transparent);\n }\n}\n.mie\\:border-miedanger\\/50 {\n border-color: var(--mie-color-miedanger);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-miedanger) 50%, transparent);\n }\n}\n.mie\\:border-mieprimary {\n border-color: var(--mie-color-mieprimary);\n}\n.mie\\:border-mieprimary\\/30 {\n border-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-mieprimary) 30%, transparent);\n }\n}\n.mie\\:border-mieprimary\\/50 {\n border-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-mieprimary) 50%, transparent);\n }\n}\n.mie\\:border-miewarning {\n border-color: var(--mie-color-miewarning);\n}\n.mie\\:border-transparent {\n border-color: transparent;\n}\n.mie\\:bg-blue-500 {\n background-color: var(--mie-color-blue-500);\n}\n.mie\\:bg-miebackground {\n background-color: var(--mie-color-miebackground);\n}\n.mie\\:bg-miebackgroundsecondary {\n background-color: var(--mie-color-miebackgroundsecondary);\n}\n.mie\\:bg-mieborder {\n background-color: var(--mie-color-mieborder);\n}\n.mie\\:bg-miedanger\\/10 {\n background-color: var(--mie-color-miedanger);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-miedanger) 10%, transparent);\n }\n}\n.mie\\:bg-mieoverlay {\n background-color: var(--mie-color-mieoverlay);\n}\n.mie\\:bg-mieprimary {\n background-color: var(--mie-color-mieprimary);\n}\n.mie\\:bg-mieprimary\\/10 {\n background-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-mieprimary) 10%, transparent);\n }\n}\n.mie\\:bg-mieprimary\\/20 {\n background-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-mieprimary) 20%, transparent);\n }\n}\n.mie\\:bg-miesurface {\n background-color: var(--mie-color-miesurface);\n}\n.mie\\:bg-mietext {\n background-color: var(--mie-color-mietext);\n}\n.mie\\:bg-miewarning {\n background-color: var(--mie-color-miewarning);\n}\n.mie\\:bg-miewarning\\/10 {\n background-color: var(--mie-color-miewarning);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-miewarning) 10%, transparent);\n }\n}\n.mie\\:bg-transparent {\n background-color: transparent;\n}\n.mie\\:bg-white {\n background-color: var(--mie-color-white);\n}\n.mie\\:bg-linear-to-br {\n --tw-gradient-position: to bottom right;\n @supports (background-image: linear-gradient(in lab, red, red)) {\n --tw-gradient-position: to bottom right in oklab;\n }\n background-image: linear-gradient(var(--tw-gradient-stops));\n}\n.mie\\:from-miebackground {\n --tw-gradient-from: var(--mie-color-miebackground);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:from-mieprimary\\/10 {\n --tw-gradient-from: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--mie-color-mieprimary) 10%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:to-miebackground {\n --tw-gradient-to: var(--mie-color-miebackground);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:to-mieborder\\/30 {\n --tw-gradient-to: var(--mie-color-mieborder);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-to: color-mix(in oklab, var(--mie-color-mieborder) 30%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n}\n.mie\\:object-contain {\n object-fit: contain;\n}\n.mie\\:p-0 {\n padding: calc(var(--mie-spacing) * 0);\n}\n.mie\\:p-1 {\n padding: calc(var(--mie-spacing) * 1);\n}\n.mie\\:p-1\\.5 {\n padding: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:p-2 {\n padding: calc(var(--mie-spacing) * 2);\n}\n.mie\\:p-3 {\n padding: calc(var(--mie-spacing) * 3);\n}\n.mie\\:p-4 {\n padding: calc(var(--mie-spacing) * 4);\n}\n.mie\\:p-6 {\n padding: calc(var(--mie-spacing) * 6);\n}\n.mie\\:p-8 {\n padding: calc(var(--mie-spacing) * 8);\n}\n.mie\\:px-0 {\n padding-inline: calc(var(--mie-spacing) * 0);\n}\n.mie\\:px-0\\.5 {\n padding-inline: calc(var(--mie-spacing) * 0.5);\n}\n.mie\\:px-2 {\n padding-inline: calc(var(--mie-spacing) * 2);\n}\n.mie\\:px-2\\.5 {\n padding-inline: calc(var(--mie-spacing) * 2.5);\n}\n.mie\\:px-3 {\n padding-inline: calc(var(--mie-spacing) * 3);\n}\n.mie\\:px-4 {\n padding-inline: calc(var(--mie-spacing) * 4);\n}\n.mie\\:px-6 {\n padding-inline: calc(var(--mie-spacing) * 6);\n}\n.mie\\:px-8 {\n padding-inline: calc(var(--mie-spacing) * 8);\n}\n.mie\\:py-0\\.5 {\n padding-block: calc(var(--mie-spacing) * 0.5);\n}\n.mie\\:py-1 {\n padding-block: calc(var(--mie-spacing) * 1);\n}\n.mie\\:py-1\\.5 {\n padding-block: calc(var(--mie-spacing) * 1.5);\n}\n.mie\\:py-2 {\n padding-block: calc(var(--mie-spacing) * 2);\n}\n.mie\\:py-2\\.5 {\n padding-block: calc(var(--mie-spacing) * 2.5);\n}\n.mie\\:py-3 {\n padding-block: calc(var(--mie-spacing) * 3);\n}\n.mie\\:py-4 {\n padding-block: calc(var(--mie-spacing) * 4);\n}\n.mie\\:py-5 {\n padding-block: calc(var(--mie-spacing) * 5);\n}\n.mie\\:py-10 {\n padding-block: calc(var(--mie-spacing) * 10);\n}\n.mie\\:pt-1 {\n padding-top: calc(var(--mie-spacing) * 1);\n}\n.mie\\:pt-2 {\n padding-top: calc(var(--mie-spacing) * 2);\n}\n.mie\\:pt-3 {\n padding-top: calc(var(--mie-spacing) * 3);\n}\n.mie\\:pt-4 {\n padding-top: calc(var(--mie-spacing) * 4);\n}\n.mie\\:pt-6 {\n padding-top: calc(var(--mie-spacing) * 6);\n}\n.mie\\:pr-10 {\n padding-right: calc(var(--mie-spacing) * 10);\n}\n.mie\\:pr-16 {\n padding-right: calc(var(--mie-spacing) * 16);\n}\n.mie\\:pb-2 {\n padding-bottom: calc(var(--mie-spacing) * 2);\n}\n.mie\\:pb-4 {\n padding-bottom: calc(var(--mie-spacing) * 4);\n}\n.mie\\:pb-8 {\n padding-bottom: calc(var(--mie-spacing) * 8);\n}\n.mie\\:pl-32 {\n padding-left: calc(var(--mie-spacing) * 32);\n}\n.mie\\:text-center {\n text-align: center;\n}\n.mie\\:text-left {\n text-align: left;\n}\n.mie\\:font-mono {\n font-family: var(--mie-font-mono);\n}\n.mie\\:font-titillium {\n font-family: var(--mie-font-titillium);\n}\n.mie\\:text-base {\n font-size: var(--mie-text-base);\n line-height: var(--tw-leading, var(--mie-text-base--line-height));\n}\n.mie\\:text-lg {\n font-size: var(--mie-text-lg);\n line-height: var(--tw-leading, var(--mie-text-lg--line-height));\n}\n.mie\\:text-sm {\n font-size: var(--mie-text-sm);\n line-height: var(--tw-leading, var(--mie-text-sm--line-height));\n}\n.mie\\:text-xl {\n font-size: var(--mie-text-xl);\n line-height: var(--tw-leading, var(--mie-text-xl--line-height));\n}\n.mie\\:text-xs {\n font-size: var(--mie-text-xs);\n line-height: var(--tw-leading, var(--mie-text-xs--line-height));\n}\n.mie\\:leading-relaxed {\n --tw-leading: var(--mie-leading-relaxed);\n line-height: var(--mie-leading-relaxed);\n}\n.mie\\:font-light {\n --tw-font-weight: var(--mie-font-weight-light);\n font-weight: var(--mie-font-weight-light);\n}\n.mie\\:font-medium {\n --tw-font-weight: var(--mie-font-weight-medium);\n font-weight: var(--mie-font-weight-medium);\n}\n.mie\\:font-normal {\n --tw-font-weight: var(--mie-font-weight-normal);\n font-weight: var(--mie-font-weight-normal);\n}\n.mie\\:font-semibold {\n --tw-font-weight: var(--mie-font-weight-semibold);\n font-weight: var(--mie-font-weight-semibold);\n}\n.mie\\:tracking-wide {\n --tw-tracking: var(--mie-tracking-wide);\n letter-spacing: var(--mie-tracking-wide);\n}\n.mie\\:wrap-break-word {\n overflow-wrap: break-word;\n}\n.mie\\:whitespace-nowrap {\n white-space: nowrap;\n}\n.mie\\:whitespace-pre-line {\n white-space: pre-line;\n}\n.mie\\:text-gray-900 {\n color: var(--mie-color-gray-900);\n}\n.mie\\:text-mieborder {\n color: var(--mie-color-mieborder);\n}\n.mie\\:text-miedanger {\n color: var(--mie-color-miedanger);\n}\n.mie\\:text-mieprimary {\n color: var(--mie-color-mieprimary);\n}\n.mie\\:text-miesurface {\n color: var(--mie-color-miesurface);\n}\n.mie\\:text-mietext {\n color: var(--mie-color-mietext);\n}\n.mie\\:text-mietextmuted {\n color: var(--mie-color-mietextmuted);\n}\n.mie\\:text-mietextmuted\\/50 {\n color: var(--mie-color-mietextmuted);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--mie-color-mietextmuted) 50%, transparent);\n }\n}\n.mie\\:text-mietextmuted\\/70 {\n color: var(--mie-color-mietextmuted);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--mie-color-mietextmuted) 70%, transparent);\n }\n}\n.mie\\:text-mietextsecondary {\n color: var(--mie-color-mietextsecondary);\n}\n.mie\\:text-miewarning {\n color: var(--mie-color-miewarning);\n}\n.mie\\:uppercase {\n text-transform: uppercase;\n}\n.mie\\:italic {\n font-style: italic;\n}\n.mie\\:accent-mieprimary {\n accent-color: var(--mie-color-mieprimary);\n}\n.mie\\:opacity-0 {\n opacity: 0%;\n}\n.mie\\:opacity-50 {\n opacity: 50%;\n}\n.mie\\:shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n.mie\\:ring-mieprimary {\n --tw-ring-color: var(--mie-color-mieprimary);\n}\n.mie\\:ring-offset-2 {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n}\n.mie\\:transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--mie-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--mie-default-transition-duration));\n}\n.mie\\:duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n}\n.mie\\:outline-none {\n --tw-outline-style: none;\n outline-style: none;\n}\n.mie\\:select-none {\n -webkit-user-select: none;\n user-select: none;\n}\n.mie\\:group-hover\\:text-mietextsecondary {\n &:is(:where(.mie\\:group):hover *) {\n @media (hover: hover) {\n color: var(--mie-color-mietextsecondary);\n }\n }\n}\n.mie\\:placeholder\\:text-mietextmuted {\n &::placeholder {\n color: var(--mie-color-mietextmuted);\n }\n}\n.mie\\:hover\\:flex {\n &:hover {\n @media (hover: hover) {\n display: flex;\n }\n }\n}\n.mie\\:hover\\:scale-105 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n}\n.mie\\:hover\\:border-mieprimary {\n &:hover {\n @media (hover: hover) {\n border-color: var(--mie-color-mieprimary);\n }\n }\n}\n.mie\\:hover\\:border-mieprimary\\/50 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--mie-color-mieprimary) 50%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:border-mietextmuted {\n &:hover {\n @media (hover: hover) {\n border-color: var(--mie-color-mietextmuted);\n }\n }\n}\n.mie\\:hover\\:bg-blue-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-blue-600);\n }\n }\n}\n.mie\\:hover\\:bg-miebackground {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-miebackground);\n }\n }\n}\n.mie\\:hover\\:bg-miebackgroundhover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-miebackgroundhover);\n }\n }\n}\n.mie\\:hover\\:bg-mieborder {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-mieborder);\n }\n }\n}\n.mie\\:hover\\:bg-miedanger\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-miedanger);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-miedanger) 10%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:bg-miedanger\\/20 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-miedanger);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-miedanger) 20%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:bg-mieprimary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-mieprimary);\n }\n }\n}\n.mie\\:hover\\:bg-mieprimary\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-mieprimary) 10%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:bg-mieprimary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-mieprimary) 80%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:bg-mieprimary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-mieprimary) 90%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:bg-miesurface {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-miesurface);\n }\n }\n}\n.mie\\:hover\\:bg-miewarning\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--mie-color-miewarning);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--mie-color-miewarning) 90%, transparent);\n }\n }\n }\n}\n.mie\\:hover\\:from-mieprimary\\/20 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-from: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--mie-color-mieprimary) 20%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n}\n.mie\\:hover\\:to-miebackground {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-to: var(--mie-color-miebackground);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n}\n.mie\\:hover\\:text-miedanger {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-miedanger);\n }\n }\n}\n.mie\\:hover\\:text-mieprimary {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-mieprimary);\n }\n }\n}\n.mie\\:hover\\:text-mietext {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-mietext);\n }\n }\n}\n.mie\\:hover\\:text-mietextsecondary {\n &:hover {\n @media (hover: hover) {\n color: var(--mie-color-mietextsecondary);\n }\n }\n}\n.mie\\:hover\\:shadow {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n.mie\\:hover\\:ring-2 {\n &:hover {\n @media (hover: hover) {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n}\n.mie\\:hover\\:ring-mieborder {\n &:hover {\n @media (hover: hover) {\n --tw-ring-color: var(--mie-color-mieborder);\n }\n }\n}\n.mie\\:focus\\:border-mieprimary {\n &:focus {\n border-color: var(--mie-color-mieprimary);\n }\n}\n.mie\\:focus\\:ring-1 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n}\n.mie\\:focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n}\n.mie\\:focus\\:ring-mieprimary {\n &:focus {\n --tw-ring-color: var(--mie-color-mieprimary);\n }\n}\n.mie\\:focus\\:ring-mieprimary\\/30 {\n &:focus {\n --tw-ring-color: var(--mie-color-mieprimary);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--mie-color-mieprimary) 30%, transparent);\n }\n }\n}\n.mie\\:focus\\:ring-offset-2 {\n &:focus {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n}\n.mie\\:focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n}\n.mie\\:disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n}\n.mie\\:disabled\\:opacity-40 {\n &:disabled {\n opacity: 40%;\n }\n}\n.mie\\:disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n}\n.mie\\:sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n.mie\\:md\\:w-80 {\n @media (width >= 48rem) {\n width: calc(var(--mie-spacing) * 80);\n }\n}\n.mie\\:md\\:max-w-\\[75vw\\] {\n @media (width >= 48rem) {\n max-width: 75vw;\n }\n}\n.mie\\:md\\:flex-row {\n @media (width >= 48rem) {\n flex-direction: row;\n }\n}\n.mie\\:md\\:px-6 {\n @media (width >= 48rem) {\n padding-inline: calc(var(--mie-spacing) * 6);\n }\n}\n.mie\\:lg\\:block {\n @media (width >= 64rem) {\n display: block;\n }\n}\n.mie\\:lg\\:flex {\n @media (width >= 64rem) {\n display: flex;\n }\n}\n.mie\\:lg\\:hidden {\n @media (width >= 64rem) {\n display: none;\n }\n}\n.mie\\:lg\\:h-4 {\n @media (width >= 64rem) {\n height: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:max-h-\\[calc\\(100dvh-11rem\\)\\] {\n @media (width >= 64rem) {\n max-height: calc(100dvh - 11rem);\n }\n}\n.mie\\:lg\\:max-h-\\[calc\\(100dvh-20rem\\)\\] {\n @media (width >= 64rem) {\n max-height: calc(100dvh - 20rem);\n }\n}\n.mie\\:lg\\:w-4 {\n @media (width >= 64rem) {\n width: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:w-72 {\n @media (width >= 64rem) {\n width: calc(var(--mie-spacing) * 72);\n }\n}\n.mie\\:lg\\:w-90 {\n @media (width >= 64rem) {\n width: calc(var(--mie-spacing) * 90);\n }\n}\n.mie\\:lg\\:max-w-full {\n @media (width >= 64rem) {\n max-width: 100%;\n }\n}\n.mie\\:lg\\:grid-cols-2 {\n @media (width >= 64rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n.mie\\:lg\\:flex-row {\n @media (width >= 64rem) {\n flex-direction: row;\n }\n}\n.mie\\:lg\\:items-center {\n @media (width >= 64rem) {\n align-items: center;\n }\n}\n.mie\\:lg\\:justify-center {\n @media (width >= 64rem) {\n justify-content: center;\n }\n}\n.mie\\:lg\\:gap-2 {\n @media (width >= 64rem) {\n gap: calc(var(--mie-spacing) * 2);\n }\n}\n.mie\\:lg\\:gap-3 {\n @media (width >= 64rem) {\n gap: calc(var(--mie-spacing) * 3);\n }\n}\n.mie\\:lg\\:px-3 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--mie-spacing) * 3);\n }\n}\n.mie\\:lg\\:px-4 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:px-6 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--mie-spacing) * 6);\n }\n}\n.mie\\:lg\\:py-2 {\n @media (width >= 64rem) {\n padding-block: calc(var(--mie-spacing) * 2);\n }\n}\n.mie\\:lg\\:pr-2 {\n @media (width >= 64rem) {\n padding-right: calc(var(--mie-spacing) * 2);\n }\n}\n.mie\\:lg\\:pb-4 {\n @media (width >= 64rem) {\n padding-bottom: calc(var(--mie-spacing) * 4);\n }\n}\n.mie\\:lg\\:text-sm {\n @media (width >= 64rem) {\n font-size: var(--mie-text-sm);\n line-height: var(--tw-leading, var(--mie-text-sm--line-height));\n }\n}\n@layer base {\n .qb-editor-root, .qb-editor-root *, .qb-editor-root *::before, .qb-editor-root *::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n }\n .qb-editor-root {\n font-family: \"Titillium Web\", ui-sans-serif, system-ui, sans-serif;\n }\n .qb-editor-root input, .qb-editor-root textarea, .qb-editor-root select, .qb-editor-root button {\n font-family: inherit;\n font-size: inherit;\n }\n}\ndiv:focus-visible, button:focus-visible {\n outline: none;\n}\n.qb-editor-root.dark {\n --mie-color-mieprimary: #6b7fa3;\n --mie-color-miesecondary: #9ca3af;\n --mie-color-mieaccent: #34d399;\n --mie-color-miedanger: #f87171;\n --mie-color-miewarning: #fb923c;\n --mie-color-miesurface: #252526;\n --mie-color-mieborder: #3c3c3c;\n --mie-color-mieborderinactive: #5a5a5a;\n --mie-color-mietext: #d4d4d4;\n --mie-color-mietextsecondary: #1e1e1e;\n --mie-color-mietextmuted: #808080;\n --mie-color-miebackground: #1e1e1e;\n --mie-color-miebackgroundsecondary: #252526;\n --mie-color-miebackgroundhover: #2a2d2e;\n --mie-color-mieoverlay: rgba(0, 0, 0, 0.7);\n}\n.mie\\:custom-scrollbar::-webkit-scrollbar {\n width: 4px;\n}\n.mie\\:custom-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n}\n.mie\\:custom-scrollbar::-webkit-scrollbar-thumb {\n background: transparent;\n border-radius: 9999px;\n transition: background 0.2s;\n}\n.mie\\:custom-scrollbar:hover::-webkit-scrollbar-thumb {\n background: #d1d5db;\n}\n.mie\\:custom-scrollbar {\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n}\n.mie\\:custom-scrollbar:hover {\n scrollbar-color: #d1d5db transparent;\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: \"<color>\";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: \"<length-percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n }\n }\n}\n";
9
9
  document.head.appendChild(style);
10
10
  }
11
11
  window.__QUESTIONNAIRE_EDITOR_CSS_INJECTED = true;
12
12
  })();
13
- import c, { useCallback as de, useMemo as Ee, memo as Ce, useState as ue, useRef as $, useEffect as J } from "react";
14
- import { useFormStore as V, useFormData as $e, useAlert as Ue, useUIApi as B, VEDITOR_ICON as tt, CODE_ICON as it, PICTURE_ICON as rt, UPLOAD_ICON as nt, DOWNLOAD_ICON as st, parseAndDetect as fe, adaptSchema as he, fieldTypes as K, TOOLS_ICON as ot, X_ICON as lt, PAPERCLIP_ICON as at, MATRIX_ICON as ct, RANKING_ICON as mt, SELECTINPUT_ICON as dt, FOLDERS_ICON as ut, TEXTINPUT_ICON as ft, TRASHCANTWO_ICON as re, useFormApi as Ne, FormStoreContext as Oe, ARROWDOWN_ICON as ht, NUMERIC_EXPRESSION_FORMATS as pt, EDIT_ICON as gt, EYEEDIT_ICON as bt, useVisibleFields as xt, useUIStore as vt, getFieldComponent as yt, MIE_FORMS_SCHEMA_TYPE as ve, createFormStore as jt, createUIStore as wt, AlertProvider as Et, UIStoreContext as Nt } from "@mieweb/forms-engine";
15
- import le from "js-yaml";
16
- import { useStore as Ct } from "zustand";
17
- var ae = { exports: {} }, Z = {};
13
+ import l, { useCallback as de, useMemo as Ee, memo as Ce, useState as ue, useRef as U, useEffect as J } from "react";
14
+ import { useFormStore as V, useFormData as $e, useAlert as Ue, useUIApi as B, VEDITOR_ICON as tt, CODE_ICON as it, PICTURE_ICON as rt, UPLOAD_ICON as nt, DOWNLOAD_ICON as st, parseAndDetect as fe, adaptSchema as pe, fieldTypes as K, TOOLS_ICON as ot, X_ICON as at, PAPERCLIP_ICON as mt, MATRIX_ICON as lt, RANKING_ICON as ct, SELECTINPUT_ICON as dt, FOLDERS_ICON as ut, TEXTINPUT_ICON as ft, CustomCheckbox as pt, TRASHCANTWO_ICON as re, useFormApi as Ne, FormStoreContext as Oe, ARROWDOWN_ICON as ht, NUMERIC_EXPRESSION_FORMATS as xt, EDIT_ICON as bt, EYEEDIT_ICON as gt, useVisibleFields as vt, useUIStore as yt, getFieldComponent as jt, MIE_FORMS_SCHEMA_TYPE as ve, createFormStore as wt, createUIStore as Et, UIStoreContext as Nt, AlertProvider as Ct } from "@mieweb/forms-engine";
15
+ import ae from "js-yaml";
16
+ import { useStore as Ot } from "zustand";
17
+ var me = { exports: {} }, Z = {};
18
18
  var Te;
19
- function Ot() {
19
+ function Tt() {
20
20
  if (Te) return Z;
21
21
  Te = 1;
22
22
  var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
23
23
  function r(n, s, o) {
24
- var u = null;
25
- if (o !== void 0 && (u = "" + o), s.key !== void 0 && (u = "" + s.key), "key" in s) {
24
+ var d = null;
25
+ if (o !== void 0 && (d = "" + o), s.key !== void 0 && (d = "" + s.key), "key" in s) {
26
26
  o = {};
27
- for (var a in s)
28
- a !== "key" && (o[a] = s[a]);
27
+ for (var m in s)
28
+ m !== "key" && (o[m] = s[m]);
29
29
  } else o = s;
30
30
  return s = o.ref, {
31
31
  $$typeof: e,
32
32
  type: n,
33
- key: u,
33
+ key: d,
34
34
  ref: s !== void 0 ? s : null,
35
35
  props: o
36
36
  };
@@ -39,152 +39,152 @@ function Ot() {
39
39
  }
40
40
  var ee = {};
41
41
  var Ie;
42
- function Tt() {
42
+ function It() {
43
43
  return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && (function() {
44
- function e(l) {
45
- if (l == null) return null;
46
- if (typeof l == "function")
47
- return l.$$typeof === _ ? null : l.displayName || l.name || null;
48
- if (typeof l == "string") return l;
49
- switch (l) {
50
- case S:
44
+ function e(a) {
45
+ if (a == null) return null;
46
+ if (typeof a == "function")
47
+ return a.$$typeof === P ? null : a.displayName || a.name || null;
48
+ if (typeof a == "string") return a;
49
+ switch (a) {
50
+ case k:
51
51
  return "Fragment";
52
- case N:
52
+ case w:
53
53
  return "Profiler";
54
- case F:
54
+ case R:
55
55
  return "StrictMode";
56
- case h:
56
+ case b:
57
57
  return "Suspense";
58
- case j:
58
+ case f:
59
59
  return "SuspenseList";
60
- case O:
60
+ case I:
61
61
  return "Activity";
62
62
  }
63
- if (typeof l == "object")
64
- switch (typeof l.tag == "number" && console.error(
63
+ if (typeof a == "object")
64
+ switch (typeof a.tag == "number" && console.error(
65
65
  "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
66
- ), l.$$typeof) {
67
- case y:
66
+ ), a.$$typeof) {
67
+ case j:
68
68
  return "Portal";
69
69
  case T:
70
- return l.displayName || "Context";
71
- case k:
72
- return (l._context.displayName || "Context") + ".Consumer";
73
- case m:
74
- var x = l.render;
75
- return l = l.displayName, l || (l = x.displayName || x.name || "", l = l !== "" ? "ForwardRef(" + l + ")" : "ForwardRef"), l;
76
- case q:
77
- return x = l.displayName || null, x !== null ? x : e(l.type) || "Memo";
78
- case C:
79
- x = l._payload, l = l._init;
70
+ return a.displayName || "Context";
71
+ case A:
72
+ return (a._context.displayName || "Context") + ".Consumer";
73
+ case x:
74
+ var v = a.render;
75
+ return a = a.displayName, a || (a = v.displayName || v.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
76
+ case O:
77
+ return v = a.displayName || null, v !== null ? v : e(a.type) || "Memo";
78
+ case E:
79
+ v = a._payload, a = a._init;
80
80
  try {
81
- return e(l(x));
81
+ return e(a(v));
82
82
  } catch {
83
83
  }
84
84
  }
85
85
  return null;
86
86
  }
87
- function i(l) {
88
- return "" + l;
87
+ function i(a) {
88
+ return "" + a;
89
89
  }
90
- function r(l) {
90
+ function r(a) {
91
91
  try {
92
- i(l);
93
- var x = !1;
92
+ i(a);
93
+ var v = !1;
94
94
  } catch {
95
- x = !0;
95
+ v = !0;
96
96
  }
97
- if (x) {
98
- x = console;
99
- var v = x.error, D = typeof Symbol == "function" && Symbol.toStringTag && l[Symbol.toStringTag] || l.constructor.name || "Object";
100
- return v.call(
101
- x,
97
+ if (v) {
98
+ v = console;
99
+ var y = v.error, D = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
100
+ return y.call(
101
+ v,
102
102
  "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
103
103
  D
104
- ), i(l);
104
+ ), i(a);
105
105
  }
106
106
  }
107
- function n(l) {
108
- if (l === S) return "<>";
109
- if (typeof l == "object" && l !== null && l.$$typeof === C)
107
+ function n(a) {
108
+ if (a === k) return "<>";
109
+ if (typeof a == "object" && a !== null && a.$$typeof === E)
110
110
  return "<...>";
111
111
  try {
112
- var x = e(l);
113
- return x ? "<" + x + ">" : "<...>";
112
+ var v = e(a);
113
+ return v ? "<" + v + ">" : "<...>";
114
114
  } catch {
115
115
  return "<...>";
116
116
  }
117
117
  }
118
118
  function s() {
119
- var l = p.A;
120
- return l === null ? null : l.getOwner();
119
+ var a = p.A;
120
+ return a === null ? null : a.getOwner();
121
121
  }
122
122
  function o() {
123
123
  return Error("react-stack-top-frame");
124
124
  }
125
- function u(l) {
126
- if (E.call(l, "key")) {
127
- var x = Object.getOwnPropertyDescriptor(l, "key").get;
128
- if (x && x.isReactWarning) return !1;
125
+ function d(a) {
126
+ if (C.call(a, "key")) {
127
+ var v = Object.getOwnPropertyDescriptor(a, "key").get;
128
+ if (v && v.isReactWarning) return !1;
129
129
  }
130
- return l.key !== void 0;
130
+ return a.key !== void 0;
131
131
  }
132
- function a(l, x) {
133
- function v() {
134
- M || (M = !0, console.error(
132
+ function m(a, v) {
133
+ function y() {
134
+ F || (F = !0, console.error(
135
135
  "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
136
- x
136
+ v
137
137
  ));
138
138
  }
139
- v.isReactWarning = !0, Object.defineProperty(l, "key", {
140
- get: v,
139
+ y.isReactWarning = !0, Object.defineProperty(a, "key", {
140
+ get: y,
141
141
  configurable: !0
142
142
  });
143
143
  }
144
- function d() {
145
- var l = e(this.type);
146
- return z[l] || (z[l] = !0, console.error(
144
+ function c() {
145
+ var a = e(this.type);
146
+ return $[a] || ($[a] = !0, console.error(
147
147
  "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
148
- )), l = this.props.ref, l !== void 0 ? l : null;
148
+ )), a = this.props.ref, a !== void 0 ? a : null;
149
149
  }
150
- function f(l, x, v, D, oe, be) {
151
- var L = v.ref;
152
- return l = {
153
- $$typeof: P,
154
- type: l,
155
- key: x,
156
- props: v,
150
+ function u(a, v, y, D, oe, be) {
151
+ var L = y.ref;
152
+ return a = {
153
+ $$typeof: _,
154
+ type: a,
155
+ key: v,
156
+ props: y,
157
157
  _owner: D
158
- }, (L !== void 0 ? L : null) !== null ? Object.defineProperty(l, "ref", {
158
+ }, (L !== void 0 ? L : null) !== null ? Object.defineProperty(a, "ref", {
159
159
  enumerable: !1,
160
- get: d
161
- }) : Object.defineProperty(l, "ref", { enumerable: !1, value: null }), l._store = {}, Object.defineProperty(l._store, "validated", {
160
+ get: c
161
+ }) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
162
162
  configurable: !1,
163
163
  enumerable: !1,
164
164
  writable: !0,
165
165
  value: 0
166
- }), Object.defineProperty(l, "_debugInfo", {
166
+ }), Object.defineProperty(a, "_debugInfo", {
167
167
  configurable: !1,
168
168
  enumerable: !1,
169
169
  writable: !0,
170
170
  value: null
171
- }), Object.defineProperty(l, "_debugStack", {
171
+ }), Object.defineProperty(a, "_debugStack", {
172
172
  configurable: !1,
173
173
  enumerable: !1,
174
174
  writable: !0,
175
175
  value: oe
176
- }), Object.defineProperty(l, "_debugTask", {
176
+ }), Object.defineProperty(a, "_debugTask", {
177
177
  configurable: !1,
178
178
  enumerable: !1,
179
179
  writable: !0,
180
180
  value: be
181
- }), Object.freeze && (Object.freeze(l.props), Object.freeze(l)), l;
181
+ }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
182
182
  }
183
- function b(l, x, v, D, oe, be) {
184
- var L = x.children;
183
+ function h(a, v, y, D, oe, be) {
184
+ var L = v.children;
185
185
  if (L !== void 0)
186
186
  if (D)
187
- if (A(L)) {
187
+ if (M(L)) {
188
188
  for (D = 0; D < L.length; D++)
189
189
  g(L[D]);
190
190
  Object.freeze && Object.freeze(L);
@@ -193,9 +193,9 @@ function Tt() {
193
193
  "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
194
194
  );
195
195
  else g(L);
196
- if (E.call(x, "key")) {
197
- L = e(l);
198
- var X = Object.keys(x).filter(function(et) {
196
+ if (C.call(v, "key")) {
197
+ L = e(a);
198
+ var X = Object.keys(v).filter(function(et) {
199
199
  return et !== "key";
200
200
  });
201
201
  D = 0 < X.length ? "{key: someKey, " + X.join(": ..., ") + ": ...}" : "{key: someKey}", Y[L + D] || (X = 0 < X.length ? "{" + X.join(": ..., ") + ": ...}" : "{}", console.error(
@@ -211,240 +211,237 @@ React keys must be passed directly to JSX without using spread:
211
211
  L
212
212
  ), Y[L + D] = !0);
213
213
  }
214
- if (L = null, v !== void 0 && (r(v), L = "" + v), u(x) && (r(x.key), L = "" + x.key), "key" in x) {
215
- v = {};
216
- for (var xe in x)
217
- xe !== "key" && (v[xe] = x[xe]);
218
- } else v = x;
219
- return L && a(
220
- v,
221
- typeof l == "function" ? l.displayName || l.name || "Unknown" : l
222
- ), f(
223
- l,
214
+ if (L = null, y !== void 0 && (r(y), L = "" + y), d(v) && (r(v.key), L = "" + v.key), "key" in v) {
215
+ y = {};
216
+ for (var ge in v)
217
+ ge !== "key" && (y[ge] = v[ge]);
218
+ } else y = v;
219
+ return L && m(
220
+ y,
221
+ typeof a == "function" ? a.displayName || a.name || "Unknown" : a
222
+ ), u(
223
+ a,
224
224
  L,
225
- v,
225
+ y,
226
226
  s(),
227
227
  oe,
228
228
  be
229
229
  );
230
230
  }
231
- function g(l) {
232
- R(l) ? l._store && (l._store.validated = 1) : typeof l == "object" && l !== null && l.$$typeof === C && (l._payload.status === "fulfilled" ? R(l._payload.value) && l._payload.value._store && (l._payload.value._store.validated = 1) : l._store && (l._store.validated = 1));
231
+ function g(a) {
232
+ S(a) ? a._store && (a._store.validated = 1) : typeof a == "object" && a !== null && a.$$typeof === E && (a._payload.status === "fulfilled" ? S(a._payload.value) && a._payload.value._store && (a._payload.value._store.validated = 1) : a._store && (a._store.validated = 1));
233
233
  }
234
- function R(l) {
235
- return typeof l == "object" && l !== null && l.$$typeof === P;
234
+ function S(a) {
235
+ return typeof a == "object" && a !== null && a.$$typeof === _;
236
236
  }
237
- var I = c, P = /* @__PURE__ */ Symbol.for("react.transitional.element"), y = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), F = /* @__PURE__ */ Symbol.for("react.strict_mode"), N = /* @__PURE__ */ Symbol.for("react.profiler"), k = /* @__PURE__ */ Symbol.for("react.consumer"), T = /* @__PURE__ */ Symbol.for("react.context"), m = /* @__PURE__ */ Symbol.for("react.forward_ref"), h = /* @__PURE__ */ Symbol.for("react.suspense"), j = /* @__PURE__ */ Symbol.for("react.suspense_list"), q = /* @__PURE__ */ Symbol.for("react.memo"), C = /* @__PURE__ */ Symbol.for("react.lazy"), O = /* @__PURE__ */ Symbol.for("react.activity"), _ = /* @__PURE__ */ Symbol.for("react.client.reference"), p = I.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, E = Object.prototype.hasOwnProperty, A = Array.isArray, w = console.createTask ? console.createTask : function() {
237
+ var q = l, _ = /* @__PURE__ */ Symbol.for("react.transitional.element"), j = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), R = /* @__PURE__ */ Symbol.for("react.strict_mode"), w = /* @__PURE__ */ Symbol.for("react.profiler"), A = /* @__PURE__ */ Symbol.for("react.consumer"), T = /* @__PURE__ */ Symbol.for("react.context"), x = /* @__PURE__ */ Symbol.for("react.forward_ref"), b = /* @__PURE__ */ Symbol.for("react.suspense"), f = /* @__PURE__ */ Symbol.for("react.suspense_list"), O = /* @__PURE__ */ Symbol.for("react.memo"), E = /* @__PURE__ */ Symbol.for("react.lazy"), I = /* @__PURE__ */ Symbol.for("react.activity"), P = /* @__PURE__ */ Symbol.for("react.client.reference"), p = q.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
238
238
  return null;
239
239
  };
240
- I = {
241
- react_stack_bottom_frame: function(l) {
242
- return l();
240
+ q = {
241
+ react_stack_bottom_frame: function(a) {
242
+ return a();
243
243
  }
244
244
  };
245
- var M, z = {}, U = I.react_stack_bottom_frame.bind(
246
- I,
245
+ var F, $ = {}, z = q.react_stack_bottom_frame.bind(
246
+ q,
247
247
  o
248
- )(), H = w(n(o)), Y = {};
249
- ee.Fragment = S, ee.jsx = function(l, x, v) {
248
+ )(), H = N(n(o)), Y = {};
249
+ ee.Fragment = k, ee.jsx = function(a, v, y) {
250
250
  var D = 1e4 > p.recentlyCreatedOwnerStacks++;
251
- return b(
252
- l,
253
- x,
251
+ return h(
252
+ a,
254
253
  v,
254
+ y,
255
255
  !1,
256
- D ? Error("react-stack-top-frame") : U,
257
- D ? w(n(l)) : H
256
+ D ? Error("react-stack-top-frame") : z,
257
+ D ? N(n(a)) : H
258
258
  );
259
- }, ee.jsxs = function(l, x, v) {
259
+ }, ee.jsxs = function(a, v, y) {
260
260
  var D = 1e4 > p.recentlyCreatedOwnerStacks++;
261
- return b(
262
- l,
263
- x,
261
+ return h(
262
+ a,
264
263
  v,
264
+ y,
265
265
  !0,
266
- D ? Error("react-stack-top-frame") : U,
267
- D ? w(n(l)) : H
266
+ D ? Error("react-stack-top-frame") : z,
267
+ D ? N(n(a)) : H
268
268
  );
269
269
  };
270
270
  })()), ee;
271
271
  }
272
272
  var Se;
273
- function It() {
274
- return Se || (Se = 1, process.env.NODE_ENV === "production" ? ae.exports = Ot() : ae.exports = Tt()), ae.exports;
275
- }
276
- var t = It();
277
273
  function St() {
278
- const [e, i] = c.useState(!1), [r, n] = c.useState(null), s = V((N) => N.replaceAll), o = $e(), { showAlert: u } = Ue(), a = B(), d = a.state.isPreview, f = a.state.isCodeEditor ?? !1, b = a.state.codeEditorHasError ?? !1, g = (N) => {
274
+ return Se || (Se = 1, process.env.NODE_ENV === "production" ? me.exports = Tt() : me.exports = It()), me.exports;
275
+ }
276
+ var t = St();
277
+ function kt() {
278
+ const [e, i] = l.useState(!1), [r, n] = l.useState(null), s = V((w) => w.replaceAll), o = $e(), { showAlert: d } = Ue(), m = B(), c = m.state.isPreview, u = m.state.isCodeEditor ?? !1, h = m.state.codeEditorHasError ?? !1, g = (w) => {
279
279
  try {
280
- const k = String(N).replace(/^\uFEFF/, "").trim(), { data: T, schemaType: m } = fe(k);
281
- if (m !== "mieforms" && m !== "surveyjs") {
282
- u(
280
+ const A = String(w).replace(/^\uFEFF/, "").trim(), { data: T, schemaType: x } = fe(A);
281
+ if (x !== "mieforms" && x !== "surveyjs") {
282
+ d(
283
283
  `Expected: MIE Forms or SurveyJS
284
- Detected: ${m}`,
284
+ Detected: ${x}`,
285
285
  { title: "Unsupported Schema Format" }
286
286
  );
287
287
  return;
288
288
  }
289
- n({ data: T, detectedSchemaType: m }), i(!0);
290
- } catch (k) {
291
- u(
292
- k?.message || "Invalid file format",
289
+ n({ data: T, detectedSchemaType: x }), i(!0);
290
+ } catch (A) {
291
+ d(
292
+ A?.message || "Invalid file format",
293
293
  { title: "Failed to Parse File" }
294
294
  );
295
295
  }
296
- }, R = (N) => {
296
+ }, S = (w) => {
297
297
  if (r)
298
298
  try {
299
- const { data: k } = r, T = he(k, N), m = T.fields || [];
300
- if (!Array.isArray(m))
299
+ const { data: A } = r, T = pe(A, w), x = T.fields || [];
300
+ if (!Array.isArray(x))
301
301
  throw new Error("Expected array of fields");
302
- T.conversionReport && a.setConversionReport(T.conversionReport);
303
- const h = {
304
- schemaType: N === "surveyjs" ? "mieforms-v1.0" : k.schemaType || "mieforms-v1.0",
302
+ T.conversionReport && m.setConversionReport(T.conversionReport);
303
+ const b = {
304
+ schemaType: w === "surveyjs" ? "mieforms-v1.0" : A.schemaType || "mieforms-v1.0",
305
305
  ...T.conversionReport?.surveyMetadata || {},
306
- fields: m
306
+ fields: x
307
307
  };
308
- if (N === "mieforms") {
309
- const { fields: j, schemaType: q, ...C } = k;
310
- Object.keys(C).length > 0 && Object.assign(h, C);
308
+ if (w === "mieforms") {
309
+ const { fields: f, schemaType: O, ...E } = A;
310
+ Object.keys(E).length > 0 && Object.assign(b, E);
311
311
  }
312
- if (s(h), a.selectedFieldId.clear(), a.preview.set(!1), N === "surveyjs" && T.conversionReport) {
313
- const j = T.conversionReport, q = j.unsupportedFields?.length || 0;
314
- u(
312
+ if (s(b), m.selectedFieldId.clear(), m.preview.set(!1), w === "surveyjs" && T.conversionReport) {
313
+ const f = T.conversionReport, O = f.unsupportedFields?.length || 0;
314
+ d(
315
315
  `Format: SurveyJS → MIE Forms
316
316
 
317
- Converted: ${j.convertedFields || 0} field(s)
318
- Unsupported: ${q} field(s)${q > 0 ? " ⚠️" : ""}`,
317
+ Converted: ${f.convertedFields || 0} field(s)
318
+ Unsupported: ${O} field(s)${O > 0 ? " ⚠️" : ""}`,
319
319
  { title: "✅ Import Successful" }
320
320
  );
321
321
  } else
322
- u(
323
- `Format: ${N === "surveyjs" ? "SurveyJS" : "MIE Forms"}
324
- Loaded ${m.length} field(s)`,
322
+ d(
323
+ `Format: ${w === "surveyjs" ? "SurveyJS" : "MIE Forms"}
324
+ Loaded ${x.length} field(s)`,
325
325
  { title: "✅ Import Successful" }
326
326
  );
327
327
  i(!1), n(null);
328
- } catch (k) {
329
- u(
330
- k?.message || "Invalid format",
328
+ } catch (A) {
329
+ d(
330
+ A?.message || "Invalid format",
331
331
  { title: "Import Failed" }
332
332
  ), i(!1), n(null);
333
333
  }
334
- }, I = () => {
334
+ }, q = () => {
335
335
  i(!1), n(null);
336
- }, P = () => {
337
- a.preview.set(!1), a.codeEditor.set(!1);
338
- }, y = () => {
339
- a.preview.set(!1), a.codeEditor.set(!0);
340
- }, S = () => {
341
- a.preview.set(!0), a.codeEditor.set(!1), a.selectedFieldId.clear();
342
- }, F = () => {
343
- const N = JSON.stringify(o, null, 2), k = new Blob([N], { type: "application/json" }), T = URL.createObjectURL(k), m = document.createElement("a");
344
- m.href = T, m.download = "questionnaire.json", m.click(), URL.revokeObjectURL(T);
336
+ }, _ = () => {
337
+ m.preview.set(!1), m.codeEditor.set(!1);
338
+ }, j = () => {
339
+ m.preview.set(!1), m.codeEditor.set(!0);
340
+ }, k = () => {
341
+ m.preview.set(!0), m.codeEditor.set(!1), m.selectedFieldId.clear();
342
+ }, R = () => {
343
+ const w = JSON.stringify(o, null, 2), A = new Blob([w], { type: "application/json" }), T = URL.createObjectURL(A), x = document.createElement("a");
344
+ x.href = T, x.download = "questionnaire.json", x.click(), URL.revokeObjectURL(T);
345
345
  };
346
- return /* @__PURE__ */ t.jsxs("header", { className: "editor-header mie:w-full mie:bg-white mie:border mie:border-gray-200 mie:rounded-lg mie:shadow-sm", children: [
347
- /* @__PURE__ */ t.jsxs("div", { className: "mie:px-4 mie:py-4", children: [
348
- /* @__PURE__ */ t.jsx("div", { className: "mie:mb-4", children: /* @__PURE__ */ t.jsx("h1", { className: "mie:text-lg mie:lg:text-2xl mie:font-bold mie:text-slate-900", children: "Editor" }) }),
349
- /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:flex-wrap mie:items-center mie:justify-between mie:gap-3", children: [
350
- /* @__PURE__ */ t.jsxs("div", { className: "header-mode-toggle mie:flex mie:gap-1 mie:rounded-lg mie:border mie:border-black/10 mie:bg-black/5 mie:p-1 mie:w-fit", children: [
351
- /* @__PURE__ */ t.jsxs(
352
- "button",
353
- {
354
- className: `mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-2 mie:lg:px-4 mie:py-2 mie:lg:py-2 mie:rounded-lg mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors ${!d && !f ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : b ? "mie:text-slate-400 mie:cursor-not-allowed" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
355
- onClick: P,
356
- disabled: b,
357
- title: b ? "Fix code errors before switching" : "Visual Editor",
358
- children: [
359
- /* @__PURE__ */ t.jsx(tt, { className: "mie:w-5 mie:h-5" }),
360
- /* @__PURE__ */ t.jsx("span", { children: "Build" })
361
- ]
362
- }
363
- ),
364
- /* @__PURE__ */ t.jsxs(
365
- "button",
366
- {
367
- className: `mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-2 mie:lg:px-4 mie:py-2 mie:lg:py-2 mie:rounded-lg mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors ${f ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
368
- onClick: y,
369
- title: "Code Editor",
370
- children: [
371
- /* @__PURE__ */ t.jsx(it, { className: "mie:w-5 mie:h-5" }),
372
- /* @__PURE__ */ t.jsx("span", { children: "Code" })
373
- ]
374
- }
375
- ),
376
- /* @__PURE__ */ t.jsxs(
377
- "button",
346
+ return /* @__PURE__ */ t.jsxs("header", { className: "editor-header mie:w-full mie:bg-miesurface mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm", children: [
347
+ /* @__PURE__ */ t.jsx("div", { className: "mie:px-4 mie:py-4", children: /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:flex-wrap mie:items-center mie:justify-between mie:gap-3", children: [
348
+ /* @__PURE__ */ t.jsxs("div", { className: "header-mode-toggle mie:flex mie:gap-1 mie:rounded-lg mie:border mie:border-mieborder mie:bg-miebackground mie:p-1 mie:w-fit", children: [
349
+ /* @__PURE__ */ t.jsxs(
350
+ "button",
351
+ {
352
+ className: `mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-2 mie:lg:px-4 mie:py-2 mie:lg:py-2 mie:rounded-lg mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${!c && !u ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : h ? "mie:bg-transparent mie:text-mietextmuted/50 mie:cursor-not-allowed" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
353
+ onClick: _,
354
+ disabled: h,
355
+ title: h ? "Fix code errors before switching" : "Visual Editor",
356
+ children: [
357
+ /* @__PURE__ */ t.jsx(tt, { className: "mie:w-5 mie:h-5" }),
358
+ /* @__PURE__ */ t.jsx("span", { children: "Build" })
359
+ ]
360
+ }
361
+ ),
362
+ /* @__PURE__ */ t.jsxs(
363
+ "button",
364
+ {
365
+ className: `mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-2 mie:lg:px-4 mie:py-2 mie:lg:py-2 mie:rounded-lg mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${u ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
366
+ onClick: j,
367
+ title: "Code Editor",
368
+ children: [
369
+ /* @__PURE__ */ t.jsx(it, { className: "mie:w-5 mie:h-5" }),
370
+ /* @__PURE__ */ t.jsx("span", { children: "Code" })
371
+ ]
372
+ }
373
+ ),
374
+ /* @__PURE__ */ t.jsxs(
375
+ "button",
376
+ {
377
+ className: `mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-2 mie:lg:px-4 mie:py-2 mie:lg:py-2 mie:rounded-lg mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${c ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : h ? "mie:bg-transparent mie:text-mietextmuted/50 mie:cursor-not-allowed" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
378
+ onClick: k,
379
+ disabled: h,
380
+ title: h ? "Fix code errors before switching" : "Preview Form",
381
+ children: [
382
+ /* @__PURE__ */ t.jsx(rt, { className: "mie:w-5 mie:h-5" }),
383
+ /* @__PURE__ */ t.jsx("span", { children: "Preview" })
384
+ ]
385
+ }
386
+ )
387
+ ] }),
388
+ /* @__PURE__ */ t.jsxs("div", { className: "header-actions mie:flex mie:gap-1 mie:items-center", children: [
389
+ /* @__PURE__ */ t.jsxs("label", { className: "header-import-label mie:group mie:px-2 mie:py-2 mie:lg:px-3 mie:lg:py-2 mie:rounded-lg mie:border mie:border-mieborder mie:bg-miesurface mie:hover:bg-mieprimary mie:hover:text-mietextsecondary mie:hover:border-mieprimary mie:cursor-pointer mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:flex mie:items-center mie:lg:gap-2 mie:gap-0 mie:text-mietext", children: [
390
+ /* @__PURE__ */ t.jsx(nt, { className: "mie:w-4 mie:h-4 mie:lg:w-4 mie:lg:h-4 mie:text-mietext mie:group-hover:text-mietextsecondary mie:transition-colors" }),
391
+ /* @__PURE__ */ t.jsx("span", { className: "mie:hidden min-[445px]:inline", children: "Import" }),
392
+ /* @__PURE__ */ t.jsx(
393
+ "input",
378
394
  {
379
- className: `mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-2 mie:lg:px-4 mie:py-2 mie:lg:py-2 mie:rounded-lg mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors ${d ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : b ? "mie:text-slate-400 mie:cursor-not-allowed" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
380
- onClick: S,
381
- disabled: b,
382
- title: b ? "Fix code errors before switching" : "Preview Form",
383
- children: [
384
- /* @__PURE__ */ t.jsx(rt, { className: "mie:w-5 mie:h-5" }),
385
- /* @__PURE__ */ t.jsx("span", { children: "Preview" })
386
- ]
387
- }
388
- )
389
- ] }),
390
- /* @__PURE__ */ t.jsxs("div", { className: "header-actions mie:flex mie:gap-1 mie:items-center", children: [
391
- /* @__PURE__ */ t.jsxs("label", { className: "header-import-label mie:px-2 mie:py-2 mie:lg:px-3 mie:lg:py-2 mie:rounded-lg mie:border mie:border-black/15 mie:bg-white mie:hover:bg-black/5 mie:cursor-pointer mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:flex mie:items-center mie:lg:gap-2 mie:gap-0", children: [
392
- /* @__PURE__ */ t.jsx(nt, { className: "mie:w-4 mie:h-4 mie:lg:w-4 mie:lg:h-4" }),
393
- /* @__PURE__ */ t.jsx("span", { className: "mie:hidden min-[445px]:inline", children: "Import" }),
394
- /* @__PURE__ */ t.jsx(
395
- "input",
396
- {
397
- className: "mie:hidden",
398
- type: "file",
399
- accept: ".json,.yaml,.yml,application/json,text/yaml",
400
- onChange: (N) => {
401
- const k = N.target.files?.[0];
402
- if (!k) return;
403
- const T = new FileReader();
404
- T.onload = (m) => g(m.target?.result ?? ""), T.readAsText(k), N.target.value = "";
405
- }
395
+ className: "mie:hidden",
396
+ type: "file",
397
+ accept: ".json,.yaml,.yml,application/json,text/yaml",
398
+ onChange: (w) => {
399
+ const A = w.target.files?.[0];
400
+ if (!A) return;
401
+ const T = new FileReader();
402
+ T.onload = (x) => g(x.target?.result ?? ""), T.readAsText(A), w.target.value = "";
406
403
  }
407
- )
408
- ] }),
409
- /* @__PURE__ */ t.jsxs(
410
- "button",
411
- {
412
- className: "mie:px-2 mie:py-2 mie:lg:px-3 mie:lg:py-2 mie:rounded-lg mie:border mie:border-black/15 mie:bg-white mie:hover:bg-black/5 mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:flex mie:items-center mie:lg:gap-2 mie:gap-0",
413
- onClick: F,
414
- title: "Export",
415
- children: [
416
- /* @__PURE__ */ t.jsx(st, { className: "mie:w-4 mie:h-4 mie:lg:w-4 mie:lg:h-4" }),
417
- /* @__PURE__ */ t.jsx("span", { className: "mie:hidden min-[445px]:inline", children: "Export" })
418
- ]
419
404
  }
420
405
  )
421
- ] })
406
+ ] }),
407
+ /* @__PURE__ */ t.jsxs(
408
+ "button",
409
+ {
410
+ className: "mie:group mie:px-2 mie:py-2 mie:lg:px-3 mie:lg:py-2 mie:rounded-lg mie:border mie:border-mieborder mie:bg-miesurface mie:hover:bg-mieprimary mie:hover:text-mietextsecondary mie:hover:border-mieprimary mie:text-xs mie:lg:text-sm mie:font-medium mie:transition-colors mie:flex mie:items-center mie:lg:gap-2 mie:gap-0 mie:outline-none mie:focus:outline-none mie:text-mietext",
411
+ onClick: R,
412
+ title: "Export",
413
+ children: [
414
+ /* @__PURE__ */ t.jsx(st, { className: "mie:w-4 mie:h-4 mie:lg:w-4 mie:lg:h-4 mie:text-mietext mie:group-hover:text-mietextsecondary mie:transition-colors" }),
415
+ /* @__PURE__ */ t.jsx("span", { className: "mie:hidden min-[445px]:inline", children: "Export" })
416
+ ]
417
+ }
418
+ )
422
419
  ] })
423
- ] }),
424
- e && r && /* @__PURE__ */ t.jsx("div", { className: "import-modal-overlay mie:fixed mie:inset-0 mie:z-50 mie:flex mie:items-center mie:justify-center mie:bg-black/50 mie:p-4", children: /* @__PURE__ */ t.jsxs("div", { className: "import-modal-content mie:bg-white mie:rounded-2xl mie:shadow-2xl mie:max-w-md mie:w-full mie:p-6", children: [
420
+ ] }) }),
421
+ e && r && /* @__PURE__ */ t.jsx("div", { className: "import-modal-overlay mie:fixed mie:inset-0 mie:z-50 mie:flex mie:items-center mie:justify-center mie:bg-mieoverlay mie:p-4", children: /* @__PURE__ */ t.jsxs("div", { className: "import-modal-content mie:bg-miesurface mie:rounded-2xl mie:shadow-2xl mie:max-w-md mie:w-full mie:p-6", children: [
425
422
  /* @__PURE__ */ t.jsxs("div", { className: "import-modal-header mie:mb-6", children: [
426
- /* @__PURE__ */ t.jsx("h3", { className: "mie:text-xl mie:font-semibold mie:text-slate-900 mie:mb-2", children: "Confirm Schema Type" }),
427
- /* @__PURE__ */ t.jsxs("p", { className: "mie:text-sm mie:text-slate-600", children: [
423
+ /* @__PURE__ */ t.jsx("h3", { className: "mie:text-xl mie:font-semibold mie:text-mietext mie:mb-2", children: "Confirm Schema Type" }),
424
+ /* @__PURE__ */ t.jsxs("p", { className: "mie:text-sm mie:text-mietextmuted", children: [
428
425
  "Is this a ",
429
- /* @__PURE__ */ t.jsx("strong", { className: "mie:text-slate-900", children: r.detectedSchemaType === "surveyjs" ? "SurveyJS" : "MIE Forms" }),
426
+ /* @__PURE__ */ t.jsx("strong", { className: "mie:text-mietext", children: r.detectedSchemaType === "surveyjs" ? "SurveyJS" : "MIE Forms" }),
430
427
  " schema?"
431
428
  ] }),
432
- r.detectedSchemaType === "surveyjs" && /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-slate-500 mie:mt-2", children: "SurveyJS schemas will be converted to MIE Forms format." })
429
+ r.detectedSchemaType === "surveyjs" && /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-mietextmuted mie:mt-2", children: "SurveyJS schemas will be converted to MIE Forms format." })
433
430
  ] }),
434
431
  /* @__PURE__ */ t.jsxs("div", { className: "import-modal-actions mie:flex mie:gap-3", children: [
435
432
  /* @__PURE__ */ t.jsx(
436
433
  "button",
437
434
  {
438
- onClick: () => R(r.detectedSchemaType),
439
- className: "mie:flex-1 mie:px-6 mie:py-3 mie:rounded-xl mie:bg-blue-500 mie:text-white mie:font-semibold mie:hover:bg-blue-600 mie:transition-colors mie:shadow-sm mie:hover:shadow",
435
+ onClick: () => S(r.detectedSchemaType),
436
+ className: "mie:flex-1 mie:px-6 mie:py-3 mie:rounded-xl mie:bg-mieprimary mie:text-miesurface mie:font-semibold mie:hover:bg-mieprimary/90 mie:transition-colors mie:shadow-sm mie:hover:shadow",
440
437
  children: "Yes, Import"
441
438
  }
442
439
  ),
443
440
  /* @__PURE__ */ t.jsx(
444
441
  "button",
445
442
  {
446
- onClick: I,
447
- className: "mie:flex-1 mie:px-6 mie:py-3 mie:rounded-xl mie:border-2 mie:border-slate-300 mie:bg-white mie:hover:bg-slate-50 mie:text-slate-700 mie:font-semibold mie:transition-colors",
443
+ onClick: q,
444
+ className: "mie:flex-1 mie:px-6 mie:py-3 mie:rounded-xl mie:border-2 mie:border-mieborder mie:bg-miesurface mie:hover:bg-miebackground mie:text-mietext mie:font-semibold mie:transition-colors",
448
445
  children: "Abort"
449
446
  }
450
447
  )
@@ -452,7 +449,7 @@ Loaded ${m.length} field(s)`,
452
449
  ] }) })
453
450
  ] });
454
451
  }
455
- const kt = (e) => {
452
+ const Rt = (e) => {
456
453
  switch (e) {
457
454
  case "Text Fields":
458
455
  return ft;
@@ -461,100 +458,100 @@ const kt = (e) => {
461
458
  case "Selection Fields":
462
459
  return dt;
463
460
  case "Rating & Ranking":
464
- return mt;
465
- case "Matrix Fields":
466
461
  return ct;
462
+ case "Matrix Fields":
463
+ return lt;
467
464
  case "Rich Content":
468
- return at;
465
+ return mt;
469
466
  default:
470
467
  return null;
471
468
  }
472
- }, Rt = ({ isPreview: e = !1 }) => {
469
+ }, At = ({ isPreview: e = !1 }) => {
473
470
  if (e) return null;
474
- const i = V((f) => f.addField), r = B(), n = V(
471
+ const i = V((u) => u.addField), r = B(), n = V(
475
472
  de(
476
- (f) => r.selectedFieldId.value ? f.byId[r.selectedFieldId.value] : null,
473
+ (u) => r.selectedFieldId.value ? u.byId[r.selectedFieldId.value] : null,
477
474
  [r.selectedFieldId.value]
478
475
  )
479
- ), s = n?.fieldType === "section", o = n?.title || "Section", u = c.useCallback(() => {
476
+ ), s = n?.fieldType === "section", o = n?.title || "Section", d = l.useCallback(() => {
480
477
  r.selectedFieldId.set(null);
481
478
  }, [r.selectedFieldId]);
482
- c.useEffect(() => {
483
- const f = (b) => {
484
- b.key === "Escape" && (b.preventDefault(), b.stopPropagation(), u());
479
+ l.useEffect(() => {
480
+ const u = (h) => {
481
+ h.key === "Escape" && (h.preventDefault(), h.stopPropagation(), d());
485
482
  };
486
- return window.addEventListener("keydown", f), () => window.removeEventListener("keydown", f);
487
- }, [u]);
488
- const a = Ee(() => {
489
- const f = {};
490
- return Object.entries(K).filter(([b]) => b !== "unsupported").forEach(([b, g]) => {
491
- const R = g.category || "Other";
492
- f[R] || (f[R] = []), f[R].push({
493
- type: b,
483
+ return window.addEventListener("keydown", u), () => window.removeEventListener("keydown", u);
484
+ }, [d]);
485
+ const m = Ee(() => {
486
+ const u = {};
487
+ return Object.entries(K).filter(([h]) => h !== "unsupported").forEach(([h, g]) => {
488
+ const S = g.category || "Other";
489
+ u[S] || (u[S] = []), u[S].push({
490
+ type: h,
494
491
  label: g.label
495
492
  });
496
- }), f;
497
- }, []), d = Ee(() => {
498
- const f = {};
499
- return Object.values(a).forEach((b) => {
500
- b.forEach(({ type: g }) => {
501
- f[g] = () => {
493
+ }), u;
494
+ }, []), c = Ee(() => {
495
+ const u = {};
496
+ return Object.values(m).forEach((h) => {
497
+ h.forEach(({ type: g }) => {
498
+ u[g] = () => {
502
499
  s && n?.id ? i(g, { sectionId: n.id }) : i(g);
503
500
  };
504
501
  });
505
- }), f;
506
- }, [a, i, s, n?.id]);
502
+ }), u;
503
+ }, [m, i, s, n?.id]);
507
504
  return /* @__PURE__ */ t.jsx(
508
505
  "div",
509
506
  {
510
- className: " mie:border mie:border-gray-200 mie:rounded-lg mie:bg-white mie:overflow-y-auto mie:custom-scrollbar mie:max-h-[calc(100svh-24rem)] mie:lg:max-h-[calc(100dvh-20rem)]",
507
+ className: " mie:border mie:border-mieborder mie:rounded-lg mie:bg-miesurface mie:overflow-y-auto mie:custom-scrollbar mie:max-h-[calc(100svh-24rem)] mie:lg:max-h-[calc(100dvh-20rem)]",
511
508
  tabIndex: "-1",
512
509
  children: /* @__PURE__ */ t.jsxs("div", { className: "tool-panel-container mie:pb-4 mie:rounded-lg mie:shadow-sm", children: [
513
- /* @__PURE__ */ t.jsxs("h3", { className: "tool-panel-title mie:sticky mie:top-0 mie:z-20 mie:bg-white mie:text-base mie:font-semibold mie:pb-2 mie:pt-3 mie:px-4 mie:border-b mie:border-gray-200 mie:flex mie:items-center mie:justify-between mie:gap-2", children: [
510
+ /* @__PURE__ */ t.jsxs("h3", { className: "tool-panel-title mie:sticky mie:top-0 mie:z-20 mie:bg-miesurface mie:text-base mie:font-semibold mie:text-mietext mie:pb-2 mie:pt-3 mie:px-4 mie:border-b mie:border-mieborder mie:flex mie:items-center mie:justify-between mie:gap-2", children: [
514
511
  /* @__PURE__ */ t.jsxs("span", { className: "mie:flex mie:items-center mie:gap-2 mie:min-w-0", children: [
515
- /* @__PURE__ */ t.jsx(ot, { className: "mie:w-5 mie:h-5 mie:text-gray-700 mie:shrink-0" }),
516
- /* @__PURE__ */ t.jsx("span", { className: "mie:truncate", children: s ? `Add to "${o}"` : "Tools" })
512
+ /* @__PURE__ */ t.jsx(ot, { className: "mie:w-5 mie:h-5 mie:text-mietext mie:shrink-0" }),
513
+ /* @__PURE__ */ t.jsx("span", { className: "mie:truncate mie:text-mietext", children: s ? `Add to "${o}"` : "Tools" })
517
514
  ] }),
518
515
  s && /* @__PURE__ */ t.jsx(
519
516
  "button",
520
517
  {
521
- onClick: u,
522
- className: "mie:bg-transparent mie:text-gray-600 mie:hover:text-red-600 mie:hover:bg-red-50 mie:p-1 mie:rounded mie:transition-colors mie:shrink-0",
518
+ onClick: d,
519
+ className: "mie:bg-transparent mie:text-mietextmuted mie:hover:text-miedanger mie:hover:bg-miedanger/10 mie:p-1 mie:rounded mie:transition-colors mie:shrink-0",
523
520
  title: "Unselect section",
524
- children: /* @__PURE__ */ t.jsx(lt, { className: "mie:w-5 mie:h-5" })
521
+ children: /* @__PURE__ */ t.jsx(at, { className: "mie:w-5 mie:h-5" })
525
522
  }
526
523
  )
527
524
  ] }),
528
- Object.entries(a).map(([f, b]) => /* @__PURE__ */ t.jsxs("div", { className: "tool-category", children: [
529
- /* @__PURE__ */ t.jsxs("h4", { className: "mie:sticky mie:top-11 mie:z-10 mie:bg-gray-50 mie:text-sm mie:font-semibold mie:text-gray-700 mie:px-4 mie:py-3 mie:border-b mie:border-gray-100 mie:uppercase mie:tracking-wide mie:flex mie:items-center mie:gap-2", children: [
525
+ Object.entries(m).map(([u, h]) => /* @__PURE__ */ t.jsxs("div", { className: "tool-category", children: [
526
+ /* @__PURE__ */ t.jsxs("h4", { className: "mie:sticky mie:top-11 mie:z-10 mie:bg-miebackground mie:text-sm mie:font-semibold mie:text-mietext mie:px-4 mie:py-3 mie:border-b mie:border-mieborder mie:uppercase mie:tracking-wide mie:flex mie:items-center mie:gap-2", children: [
530
527
  (() => {
531
- const g = kt(f);
532
- return g ? /* @__PURE__ */ t.jsx(g, { className: "mie:w-4 mie:h-4 mie:text-gray-600" }) : null;
528
+ const g = Rt(u);
529
+ return g ? /* @__PURE__ */ t.jsx(g, { className: "mie:w-4 mie:h-4 mie:text-mietextmuted" }) : null;
533
530
  })(),
534
- f
531
+ u
535
532
  ] }),
536
- /* @__PURE__ */ t.jsx("div", { className: "tool-items mie:grid mie:grid-cols-1 mie:gap-2 mie:px-4 mie:py-3", children: b.map(({ type: g, label: R }) => {
537
- const I = s && g === "section";
533
+ /* @__PURE__ */ t.jsx("div", { className: "tool-items mie:grid mie:grid-cols-1 mie:gap-2 mie:px-4 mie:py-3", children: h.map(({ type: g, label: S }) => {
534
+ const q = s && g === "section";
538
535
  return /* @__PURE__ */ t.jsxs(
539
536
  "button",
540
537
  {
541
- disabled: I,
542
- className: `mie:px-3 mie:py-2 mie:text-sm mie:text-left mie:border mie:rounded-md mie:transition-colors mie:duration-150 ${I ? "mie:border-gray-200 mie:bg-gray-50 mie:text-gray-400 mie:cursor-not-allowed" : "mie:bg-white mie:text-gray-900 mie:border-gray-300 mie:hover:bg-blue-50 mie:hover:border-blue-400 mie:hover:text-blue-700"}`,
543
- onClick: d[g],
544
- title: I ? "Cannot add section to a section" : `Add ${R}`,
538
+ disabled: q,
539
+ className: `mie:px-3 mie:py-2 mie:text-sm mie:text-left mie:border mie:rounded-md mie:transition-colors mie:duration-150 ${q ? "mie:border-mieborder mie:bg-miebackground mie:text-mietextmuted/50 mie:cursor-not-allowed" : "mie:bg-miesurface mie:text-mietext mie:border-mieborder mie:hover:bg-mieprimary/10 mie:hover:border-mieprimary/50 mie:hover:text-mieprimary"}`,
540
+ onClick: c[g],
541
+ title: q ? "Cannot add section to a section" : `Add ${S}`,
545
542
  children: [
546
543
  "+ ",
547
- R
544
+ S
548
545
  ]
549
546
  },
550
547
  g
551
548
  );
552
549
  }) })
553
- ] }, f))
550
+ ] }, u))
554
551
  ] })
555
552
  }
556
553
  );
557
- }, ke = c.memo(Rt, (e, i) => e.isPreview === i.isPreview);
554
+ }, ke = l.memo(At, (e, i) => e.isPreview === i.isPreview);
558
555
  function ze({
559
556
  id: e = "",
560
557
  label: i = "ID",
@@ -563,48 +560,48 @@ function ze({
563
560
  placeholder: s = "Enter unique ID…",
564
561
  className: o = ""
565
562
  }) {
566
- const [u, a] = c.useState(e ?? ""), [d, f] = c.useState("");
567
- c.useEffect(() => {
568
- a(e ?? ""), f("");
563
+ const [d, m] = l.useState(e ?? ""), [c, u] = l.useState("");
564
+ l.useEffect(() => {
565
+ m(e ?? ""), u("");
569
566
  }, [e]);
570
- const b = c.useCallback(() => {
571
- const g = String(u ?? "").trim();
567
+ const h = l.useCallback(() => {
568
+ const g = String(d ?? "").trim();
572
569
  if (!g) {
573
- f("ID cannot be empty."), a(e ?? "");
570
+ u("ID cannot be empty."), m(e ?? "");
574
571
  return;
575
572
  }
576
573
  if (g !== (e ?? "")) {
577
574
  if (typeof n == "function") {
578
- const R = n(g, e ?? "");
579
- if (R) {
580
- f(R);
575
+ const S = n(g, e ?? "");
576
+ if (S) {
577
+ u(S);
581
578
  return;
582
579
  }
583
580
  }
584
581
  r?.(g);
585
582
  }
586
- }, [u, e, r, n]);
583
+ }, [d, e, r, n]);
587
584
  return /* @__PURE__ */ t.jsxs("div", { className: o ? `draft-id-editor-container ${o}` : "draft-id-editor-container", children: [
588
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:mb-1", children: i }),
585
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: i }),
589
586
  /* @__PURE__ */ t.jsx(
590
587
  "input",
591
588
  {
592
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-black/20 mie:rounded",
593
- value: u,
589
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:transition-colors",
590
+ value: d,
594
591
  onChange: (g) => {
595
- d && f(""), a(g.target.value);
592
+ c && u(""), m(g.target.value);
596
593
  },
597
- onBlur: b,
594
+ onBlur: h,
598
595
  onKeyDown: (g) => {
599
- g.key === "Enter" && (g.preventDefault(), b());
596
+ g.key === "Enter" && (g.preventDefault(), h());
600
597
  },
601
598
  placeholder: s
602
599
  }
603
600
  ),
604
- d ? /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-red-600 mie:mt-1", children: d }) : null
601
+ c ? /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-miedanger mie:mt-1", children: c }) : null
605
602
  ] });
606
603
  }
607
- const At = [
604
+ const Pt = [
608
605
  { value: "text", label: "Text" },
609
606
  { value: "number", label: "Number" },
610
607
  { value: "email", label: "Email" },
@@ -614,7 +611,7 @@ const At = [
614
611
  { value: "month", label: "Month" },
615
612
  { value: "time", label: "Time" },
616
613
  { value: "range", label: "Range" }
617
- ], Pt = {
614
+ ], Mt = {
618
615
  Length: [
619
616
  { value: "mm", label: "Millimeters (mm)" },
620
617
  { value: "cm", label: "Centimeters (cm)" },
@@ -652,32 +649,32 @@ const At = [
652
649
  { value: "mmHg", label: "mmHg (blood pressure)" }
653
650
  ]
654
651
  };
655
- function Mt({ field: e, onUpdate: i }) {
652
+ function Ft({ field: e, onUpdate: i }) {
656
653
  const r = e.inputType || "text", n = e.unit || "", s = r === "number" || r === "range";
657
654
  return /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
658
655
  /* @__PURE__ */ t.jsxs("div", { children: [
659
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:mb-1", children: "Input Type" }),
656
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: "Input Type" }),
660
657
  /* @__PURE__ */ t.jsx(
661
658
  "select",
662
659
  {
663
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-black/20 mie:rounded",
660
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:cursor-pointer mie:transition-colors",
664
661
  value: r,
665
662
  onChange: (o) => i("inputType", o.target.value),
666
- children: At.map((o) => /* @__PURE__ */ t.jsx("option", { value: o.value, children: o.label }, o.value))
663
+ children: Pt.map((o) => /* @__PURE__ */ t.jsx("option", { value: o.value, children: o.label }, o.value))
667
664
  }
668
665
  )
669
666
  ] }),
670
667
  s && /* @__PURE__ */ t.jsxs("div", { children: [
671
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:mb-1", children: "Unit (optional)" }),
668
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: "Unit (optional)" }),
672
669
  /* @__PURE__ */ t.jsxs(
673
670
  "select",
674
671
  {
675
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-black/20 mie:rounded",
672
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:cursor-pointer mie:transition-colors",
676
673
  value: n,
677
674
  onChange: (o) => i("unit", o.target.value),
678
675
  children: [
679
676
  /* @__PURE__ */ t.jsx("option", { value: "", children: "None" }),
680
- Object.entries(Pt).map(([o, u]) => /* @__PURE__ */ t.jsx("optgroup", { label: o, children: u.map((a) => /* @__PURE__ */ t.jsx("option", { value: a.value, children: a.label }, a.value)) }, o))
677
+ Object.entries(Mt).map(([o, d]) => /* @__PURE__ */ t.jsx("optgroup", { label: o, children: d.map((m) => /* @__PURE__ */ t.jsx("option", { value: m.value, children: m.label }, m.value)) }, o))
681
678
  ]
682
679
  }
683
680
  )
@@ -685,13 +682,13 @@ function Mt({ field: e, onUpdate: i }) {
685
682
  ] });
686
683
  }
687
684
  function We({ f: e, onUpdateField: i }) {
688
- const r = V(c.useCallback((s) => s.byId, [])), n = c.useCallback((s, o) => {
685
+ const r = V(l.useCallback((s) => s.byId, [])), n = l.useCallback((s, o) => {
689
686
  if (!s?.trim()) return "ID cannot be empty.";
690
687
  if (s === o) return "";
691
- const u = new Set(Object.keys(r));
692
- return Object.values(r).forEach((a) => {
693
- a?.fieldType === "section" && Array.isArray(a.fields) && a.fields.forEach((d) => u.add(d.id));
694
- }), u.has(s) ? `ID "${s}" already exists.` : "";
688
+ const d = new Set(Object.keys(r));
689
+ return Object.values(r).forEach((m) => {
690
+ m?.fieldType === "section" && Array.isArray(m.fields) && m.fields.forEach((c) => d.add(c.id));
691
+ }), d.has(s) ? `ID "${s}" already exists.` : "";
695
692
  }, [r]);
696
693
  return /* @__PURE__ */ t.jsxs("div", { className: "common-editor-container mie:space-y-3", children: [
697
694
  /* @__PURE__ */ t.jsx(
@@ -703,37 +700,37 @@ function We({ f: e, onUpdateField: i }) {
703
700
  }
704
701
  ),
705
702
  /* @__PURE__ */ t.jsxs("div", { children: [
706
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:mb-1", children: "Label / Question" }),
703
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: "Label / Question" }),
707
704
  /* @__PURE__ */ t.jsx(
708
705
  "input",
709
706
  {
710
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-black/20 mie:rounded",
707
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:transition-colors",
711
708
  value: e.question || "",
712
709
  onChange: (s) => i?.("question", s.target.value),
713
710
  placeholder: "Enter question text"
714
711
  }
715
712
  )
716
713
  ] }),
717
- (e.fieldType === "text" || e.fieldType === "longtext") && /* @__PURE__ */ t.jsx(Mt, { field: e, onUpdate: i }),
714
+ (e.fieldType === "text" || e.fieldType === "longtext") && /* @__PURE__ */ t.jsx(Ft, { field: e, onUpdate: i }),
718
715
  /* @__PURE__ */ t.jsxs("div", { className: "mie:min-w-0", children: [
719
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:mb-1", children: "Sublabel (optional)" }),
716
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: "Sublabel (optional)" }),
720
717
  /* @__PURE__ */ t.jsx(
721
718
  "textarea",
722
719
  {
723
- className: "mie:w-full mie:min-w-0 mie:max-h-32 mie:px-3 mie:py-2 mie:border mie:border-black/20 mie:rounded mie:resize-y",
720
+ className: "mie:w-full mie:min-w-0 mie:max-h-32 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:resize-y mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:transition-colors",
724
721
  value: e.sublabel || "",
725
722
  onChange: (s) => i("sublabel", s.target.value),
726
723
  placeholder: "Helper text / description"
727
724
  }
728
725
  )
729
726
  ] }),
730
- /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs("label", { className: "mie:inline-flex mie:items-center mie:gap-2 mie:text-sm", children: [
727
+ /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs("label", { className: "mie:inline-flex mie:items-center mie:gap-2 mie:text-sm mie:text-mietext mie:cursor-pointer", children: [
731
728
  /* @__PURE__ */ t.jsx(
732
- "input",
729
+ pt,
733
730
  {
734
- type: "checkbox",
735
731
  checked: !!e.required,
736
- onChange: (s) => i?.("required", s.target.checked)
732
+ onChange: (s) => i?.("required", s),
733
+ size: "md"
737
734
  }
738
735
  ),
739
736
  "Required"
@@ -741,130 +738,130 @@ function We({ f: e, onUpdateField: i }) {
741
738
  ] });
742
739
  }
743
740
  function Ve({ field: e, api: i }) {
744
- const r = e.options || [], n = e.fieldType === "boolean", s = e.fieldType === "multitext", o = c.useRef(null), u = c.useRef(r.length), a = s ? "Text Inputs" : "Options", d = s ? "Text Input" : "Option", f = s ? "Input label" : "Option text";
745
- return c.useEffect(() => {
746
- if (r.length > u.current && o.current) {
747
- const b = o.current.lastElementChild;
748
- b && b.scrollIntoView({ behavior: "smooth", block: "nearest" });
741
+ const r = e.options || [], n = e.fieldType === "boolean", s = e.fieldType === "multitext", o = l.useRef(null), d = l.useRef(r.length), m = s ? "Text Inputs" : "Options", c = s ? "Text Input" : "Option", u = s ? "Input label" : "Option text";
742
+ return l.useEffect(() => {
743
+ if (r.length > d.current && o.current) {
744
+ const h = o.current.lastElementChild;
745
+ h && h.scrollIntoView({ behavior: "smooth", block: "nearest" });
749
746
  }
750
- u.current = r.length;
747
+ d.current = r.length;
751
748
  }, [r.length]), /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
752
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700", children: a }),
753
- /* @__PURE__ */ t.jsx("div", { ref: o, className: "mie:space-y-2", children: r.map((b) => /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:shadow-sm mie:hover:border-gray-400 mie:transition-colors", children: [
749
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: m }),
750
+ /* @__PURE__ */ t.jsx("div", { ref: o, className: "mie:space-y-2", children: r.map((h) => /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
754
751
  /* @__PURE__ */ t.jsx(
755
752
  "input",
756
753
  {
757
754
  className: "mie:flex-1 mie:min-w-0 mie:outline-none mie:bg-transparent",
758
- value: b.value,
759
- onChange: (g) => i.option.update(b.id, g.target.value),
760
- placeholder: f
755
+ value: h.value,
756
+ onChange: (g) => i.option.update(h.id, g.target.value),
757
+ placeholder: u
761
758
  }
762
759
  ),
763
760
  !n && /* @__PURE__ */ t.jsx(
764
761
  "button",
765
762
  {
766
- onClick: () => i.option.remove(b.id),
767
- className: "mie:shrink-0 mie:bg-transparent mie:text-gray-400 mie:hover:text-red-600 mie:transition-colors",
763
+ onClick: () => i.option.remove(h.id),
764
+ className: "mie:shrink-0 mie:bg-transparent mie:text-mietextmuted/70 mie:hover:text-miedanger mie:transition-colors",
768
765
  title: "Remove option",
769
766
  children: /* @__PURE__ */ t.jsx(re, { className: "mie:w-5 mie:h-5" })
770
767
  }
771
768
  )
772
- ] }, b.id)) }),
769
+ ] }, h.id)) }),
773
770
  !n && /* @__PURE__ */ t.jsxs(
774
771
  "button",
775
772
  {
776
773
  onClick: () => i.option.add(""),
777
- className: "mie:w-full mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-white mie:text-blue-600 mie:border mie:border-blue-300 mie:rounded-lg mie:hover:bg-blue-50 mie:transition-colors",
774
+ className: "mie:w-full mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-miesurface mie:text-mieprimary mie:border mie:border-mieprimary/50 mie:rounded-lg mie:hover:bg-mieprimary/10 mie:transition-colors",
778
775
  children: [
779
776
  "+ Add ",
780
- d
777
+ c
781
778
  ]
782
779
  }
783
780
  )
784
781
  ] });
785
782
  }
786
783
  function He({ field: e, api: i }) {
787
- const r = e.rows || [], n = e.columns || [], s = c.useRef(null), o = c.useRef(null), u = c.useRef(r.length), a = c.useRef(n.length);
788
- return c.useEffect(() => {
789
- if (r.length > u.current && s.current) {
790
- const d = s.current.lastElementChild;
791
- d && d.scrollIntoView({ behavior: "smooth", block: "nearest" });
784
+ const r = e.rows || [], n = e.columns || [], s = l.useRef(null), o = l.useRef(null), d = l.useRef(r.length), m = l.useRef(n.length);
785
+ return l.useEffect(() => {
786
+ if (r.length > d.current && s.current) {
787
+ const c = s.current.lastElementChild;
788
+ c && c.scrollIntoView({ behavior: "smooth", block: "nearest" });
792
789
  }
793
- u.current = r.length;
794
- }, [r.length]), c.useEffect(() => {
795
- if (n.length > a.current && o.current) {
796
- const d = o.current.lastElementChild;
797
- d && d.scrollIntoView({ behavior: "smooth", block: "nearest" });
790
+ d.current = r.length;
791
+ }, [r.length]), l.useEffect(() => {
792
+ if (n.length > m.current && o.current) {
793
+ const c = o.current.lastElementChild;
794
+ c && c.scrollIntoView({ behavior: "smooth", block: "nearest" });
798
795
  }
799
- a.current = n.length;
796
+ m.current = n.length;
800
797
  }, [n.length]), /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-4", children: [
801
798
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
802
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700", children: "Rows" }),
803
- /* @__PURE__ */ t.jsx("div", { ref: s, className: "mie:space-y-2", children: r.map((d) => /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:shadow-sm mie:hover:border-gray-400 mie:transition-colors", children: [
799
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: "Rows" }),
800
+ /* @__PURE__ */ t.jsx("div", { ref: s, className: "mie:space-y-2", children: r.map((c) => /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
804
801
  /* @__PURE__ */ t.jsx(
805
802
  "input",
806
803
  {
807
- className: "mie:flex-1 mie:min-w-0 mie:outline-none mie:bg-transparent",
808
- value: d.value,
809
- onChange: (f) => i.row.update(d.id, f.target.value),
804
+ className: "mie:flex-1 mie:min-w-0 mie:outline-none mie:bg-transparent mie:text-mietext mie:placeholder:text-mietextmuted",
805
+ value: c.value,
806
+ onChange: (u) => i.row.update(c.id, u.target.value),
810
807
  placeholder: "Row text"
811
808
  }
812
809
  ),
813
810
  /* @__PURE__ */ t.jsx(
814
811
  "button",
815
812
  {
816
- onClick: () => i.row.remove(d.id),
817
- className: "mie:shrink-0 mie:bg-transparent mie:text-gray-400 mie:hover:text-red-600 mie:transition-colors",
813
+ onClick: () => i.row.remove(c.id),
814
+ className: "mie:shrink-0 mie:bg-transparent mie:text-mietextmuted/70 mie:hover:text-miedanger mie:transition-colors",
818
815
  title: "Remove row",
819
816
  children: /* @__PURE__ */ t.jsx(re, { className: "mie:w-5 mie:h-5" })
820
817
  }
821
818
  )
822
- ] }, d.id)) }),
823
- r.length >= 10 ? /* @__PURE__ */ t.jsx("div", { className: "mie:px-3 mie:py-2 mie:text-sm mie:text-gray-500 mie:text-center mie:bg-gray-50 mie:rounded-lg", children: "Max rows reached (10)" }) : /* @__PURE__ */ t.jsx(
819
+ ] }, c.id)) }),
820
+ r.length >= 10 ? /* @__PURE__ */ t.jsx("div", { className: "mie:px-3 mie:py-2 mie:text-sm mie:text-mietextmuted mie:text-center mie:bg-miebackground mie:rounded-lg", children: "Max rows reached (10)" }) : /* @__PURE__ */ t.jsx(
824
821
  "button",
825
822
  {
826
823
  onClick: () => i.row.add(""),
827
- className: "mie:w-full mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-white mie:text-blue-600 mie:border mie:border-blue-300 mie:rounded-lg mie:hover:bg-blue-50 mie:transition-colors",
824
+ className: "mie:w-full mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-miesurface mie:text-mieprimary mie:border mie:border-mieprimary/50 mie:rounded-lg mie:hover:bg-mieprimary/10 mie:transition-colors",
828
825
  children: "+ Add Row"
829
826
  }
830
827
  )
831
828
  ] }),
832
829
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
833
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700", children: "Columns" }),
834
- /* @__PURE__ */ t.jsx("div", { ref: o, className: "mie:space-y-2", children: n.map((d) => /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:shadow-sm mie:hover:border-gray-400 mie:transition-colors", children: [
830
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: "Columns" }),
831
+ /* @__PURE__ */ t.jsx("div", { ref: o, className: "mie:space-y-2", children: n.map((c) => /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
835
832
  /* @__PURE__ */ t.jsx(
836
833
  "input",
837
834
  {
838
- className: "mie:flex-1 mie:min-w-0 mie:outline-none mie:bg-transparent",
839
- value: d.value,
840
- onChange: (f) => i.column.update(d.id, f.target.value),
835
+ className: "mie:flex-1 mie:min-w-0 mie:outline-none mie:bg-transparent mie:text-mietext mie:placeholder:text-mietextmuted",
836
+ value: c.value,
837
+ onChange: (u) => i.column.update(c.id, u.target.value),
841
838
  placeholder: "Column text"
842
839
  }
843
840
  ),
844
841
  /* @__PURE__ */ t.jsx(
845
842
  "button",
846
843
  {
847
- onClick: () => i.column.remove(d.id),
848
- className: "mie:shrink-0 mie:bg-transparent mie:text-gray-400 mie:hover:text-red-600 mie:transition-colors",
844
+ onClick: () => i.column.remove(c.id),
845
+ className: "mie:shrink-0 mie:bg-transparent mie:text-mietextmuted/70 mie:hover:text-miedanger mie:transition-colors",
849
846
  title: "Remove column",
850
847
  children: /* @__PURE__ */ t.jsx(re, { className: "mie:w-5 mie:h-5" })
851
848
  }
852
849
  )
853
- ] }, d.id)) }),
854
- n.length >= 10 ? /* @__PURE__ */ t.jsx("div", { className: "mie:px-3 mie:py-2 mie:text-sm mie:text-gray-500 mie:text-center mie:bg-gray-50 mie:rounded-lg", children: "Max columns reached (10)" }) : /* @__PURE__ */ t.jsx(
850
+ ] }, c.id)) }),
851
+ n.length >= 10 ? /* @__PURE__ */ t.jsx("div", { className: "mie:px-3 mie:py-2 mie:text-sm mie:text-mietextmuted mie:text-center mie:bg-miebackground mie:rounded-lg", children: "Max columns reached (10)" }) : /* @__PURE__ */ t.jsx(
855
852
  "button",
856
853
  {
857
854
  onClick: () => i.column.add(""),
858
- className: "mie:w-full mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-white mie:text-blue-600 mie:border mie:border-blue-300 mie:rounded-lg mie:hover:bg-blue-50 mie:transition-colors",
855
+ className: "mie:w-full mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-miesurface mie:text-mieprimary mie:border mie:border-mieprimary/50 mie:rounded-lg mie:hover:bg-mieprimary/10 mie:transition-colors",
859
856
  children: "+ Add Column"
860
857
  }
861
858
  )
862
859
  ] })
863
860
  ] });
864
861
  }
865
- function Ft({ f: e }) {
866
- const i = Ne(e.id), r = c.useCallback(
867
- (u, a) => i.field.update(u, a),
862
+ function _t({ f: e }) {
863
+ const i = Ne(e.id), r = l.useCallback(
864
+ (d, m) => i.field.update(d, m),
868
865
  [i]
869
866
  ), n = K[e.fieldType] || {}, s = n.hasOptions || !1, o = n.hasMatrix || !1;
870
867
  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
@@ -874,9 +871,9 @@ function Ft({ f: e }) {
874
871
  /* @__PURE__ */ t.jsx(
875
872
  "input",
876
873
  {
877
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-black/20 mie:rounded",
874
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:transition-colors",
878
875
  value: e.answer || "",
879
- onChange: (u) => r("answer", u.target.value),
876
+ onChange: (d) => r("answer", d.target.value),
880
877
  placeholder: "Default value"
881
878
  }
882
879
  )
@@ -885,124 +882,124 @@ function Ft({ f: e }) {
885
882
  o && /* @__PURE__ */ t.jsx(He, { field: e, api: i })
886
883
  ] });
887
884
  }
888
- function _t({ section: e, onActiveChildChange: i }) {
889
- const r = Ne(e.id), n = c.useContext(Oe), s = B();
885
+ function Dt({ section: e, onActiveChildChange: i }) {
886
+ const r = Ne(e.id), n = l.useContext(Oe), s = B();
890
887
  if (!n) throw new Error("Missing FormStoreContext.Provider in the tree");
891
- const o = Array.isArray(e.fields) ? e.fields : [], u = s.selectedChildId.ParentId, a = s.selectedChildId.ChildId, d = c.useMemo(() => u === e.id && a && o.some((h) => h.id === a) ? a : o[0]?.id || null, []), [f, b] = c.useState(d), g = c.useRef(a);
892
- c.useEffect(() => {
893
- g.current !== a && (g.current = a, u === e.id && a && a !== f && b(a));
894
- }, [u, a, e.id, f]), c.useEffect(() => {
888
+ const o = Array.isArray(e.fields) ? e.fields : [], d = s.selectedChildId.ParentId, m = s.selectedChildId.ChildId, c = l.useMemo(() => d === e.id && m && o.some((b) => b.id === m) ? m : o[0]?.id || null, []), [u, h] = l.useState(c), g = l.useRef(m);
889
+ l.useEffect(() => {
890
+ g.current !== m && (g.current = m, d === e.id && m && m !== u && h(m));
891
+ }, [d, m, e.id, u]), l.useEffect(() => {
895
892
  if (!o.length) {
896
- f !== null && b(null);
893
+ u !== null && h(null);
897
894
  return;
898
895
  }
899
- o.some((j) => j.id === f) || b(o[0].id);
900
- }, [o, f]), c.useEffect(() => {
901
- i?.(e.id, f || null);
902
- }, [e.id, f, i]);
903
- const R = c.useCallback(
904
- (h) => {
905
- b(h), s.selectedChildId.set(e.id, h);
896
+ o.some((f) => f.id === u) || h(o[0].id);
897
+ }, [o, u]), l.useEffect(() => {
898
+ i?.(e.id, u || null);
899
+ }, [e.id, u, i]);
900
+ const S = l.useCallback(
901
+ (b) => {
902
+ h(b), s.selectedChildId.set(e.id, b);
906
903
  },
907
904
  [e.id, s.selectedChildId]
908
- ), I = c.useCallback((h) => h.question?.trim() || K[h.fieldType]?.label || "Untitled", []), P = c.useCallback(
909
- (h, j) => r.field.update(h, j),
905
+ ), q = l.useCallback((b) => b.question?.trim() || K[b.fieldType]?.label || "Untitled", []), _ = l.useCallback(
906
+ (b, f) => r.field.update(b, f),
910
907
  [r]
911
- ), y = c.useMemo(
912
- () => o.find((h) => h.id === f) || null,
913
- [o, f]
914
- ), S = Ne(y?.id || "", e.id), F = y && S ? S : null, N = c.useCallback(
915
- (h, j) => {
916
- if (y) {
917
- if (h === "id") {
918
- const q = String(j ?? "").trim();
919
- if (!q) return;
908
+ ), j = l.useMemo(
909
+ () => o.find((b) => b.id === u) || null,
910
+ [o, u]
911
+ ), k = Ne(j?.id || "", e.id), R = j && k ? k : null, w = l.useCallback(
912
+ (b, f) => {
913
+ if (j) {
914
+ if (b === "id") {
915
+ const O = String(f ?? "").trim();
916
+ if (!O) return;
920
917
  n.getState().updateField(
921
- y.id,
922
- { id: q },
918
+ j.id,
919
+ { id: O },
923
920
  {
924
921
  sectionId: e.id,
925
- onIdChange: (C, O) => {
926
- b((_) => _ === O ? C : _);
922
+ onIdChange: (E, I) => {
923
+ h((P) => P === I ? E : P);
927
924
  }
928
925
  }
929
926
  );
930
927
  return;
931
928
  }
932
929
  n.getState().updateField(
933
- y.id,
934
- { [h]: j },
930
+ j.id,
931
+ { [b]: f },
935
932
  { sectionId: e.id }
936
933
  );
937
934
  }
938
935
  },
939
- [y, e.id, n]
940
- ), k = c.useCallback(() => {
941
- y && n.getState().deleteField(y.id, { sectionId: e.id });
942
- }, [y, e.id, n]), T = c.useMemo(
943
- () => y && (K[y.fieldType] || {}).hasOptions || !1,
944
- [y]
945
- ), m = c.useMemo(
946
- () => y && (K[y.fieldType] || {}).hasMatrix || !1,
947
- [y]
936
+ [j, e.id, n]
937
+ ), A = l.useCallback(() => {
938
+ j && n.getState().deleteField(j.id, { sectionId: e.id });
939
+ }, [j, e.id, n]), T = l.useMemo(
940
+ () => j && (K[j.fieldType] || {}).hasOptions || !1,
941
+ [j]
942
+ ), x = l.useMemo(
943
+ () => j && (K[j.fieldType] || {}).hasMatrix || !1,
944
+ [j]
948
945
  );
949
946
  return /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-4", children: [
950
947
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
951
- /* @__PURE__ */ t.jsx("h3", { className: "mie:text-sm mie:font-semibold mie:text-gray-700 mie:uppercase mie:tracking-wide", children: "Section Properties" }),
948
+ /* @__PURE__ */ t.jsx("h3", { className: "mie:text-sm mie:font-semibold mie:text-mietext mie:uppercase mie:tracking-wide", children: "Section Properties" }),
952
949
  /* @__PURE__ */ t.jsx(
953
950
  ze,
954
951
  {
955
952
  id: e.id,
956
- onCommit: (h) => r.field.renameId(h)
953
+ onCommit: (b) => r.field.renameId(b)
957
954
  }
958
955
  ),
959
956
  /* @__PURE__ */ t.jsxs("div", { className: "section-editor-title", children: [
960
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700 mie:mb-1", children: "Section Title" }),
957
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext mie:mb-1", children: "Section Title" }),
961
958
  /* @__PURE__ */ t.jsx(
962
959
  "input",
963
960
  {
964
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none",
961
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none",
965
962
  value: e.title || "",
966
- onChange: (h) => P("title", h.target.value),
963
+ onChange: (b) => _("title", b.target.value),
967
964
  placeholder: "e.g., Patient Information"
968
965
  }
969
966
  )
970
967
  ] })
971
968
  ] }),
972
969
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
973
- /* @__PURE__ */ t.jsxs("h3", { className: "mie:text-sm mie:font-semibold mie:text-gray-700 mie:uppercase mie:tracking-wide", children: [
970
+ /* @__PURE__ */ t.jsxs("h3", { className: "mie:text-sm mie:font-semibold mie:text-mietext mie:uppercase mie:tracking-wide", children: [
974
971
  "Fields (",
975
972
  o.length,
976
973
  ")"
977
974
  ] }),
978
- o.length === 0 ? /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:flex-col mie:items-center mie:justify-center mie:p-6 mie:bg-gray-50 mie:border-2 mie:border-dashed mie:border-gray-200 mie:rounded-lg mie:text-center", children: [
979
- /* @__PURE__ */ t.jsx("p", { className: "mie:text-sm mie:text-gray-500", children: "No fields in this section" }),
980
- /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-gray-400 mie:mt-1", children: "Use the Tool Panel to add fields" })
975
+ o.length === 0 ? /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:flex-col mie:items-center mie:justify-center mie:p-6 mie:bg-miebackground mie:border-2 mie:border-dashed mie:border-mieborder mie:rounded-lg mie:text-center", children: [
976
+ /* @__PURE__ */ t.jsx("p", { className: "mie:text-sm mie:text-mietextmuted", children: "No fields in this section" }),
977
+ /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-mietextmuted/70 mie:mt-1", children: "Use the Tool Panel to add fields" })
981
978
  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
982
979
  /* @__PURE__ */ t.jsxs("div", { className: "mie:relative", children: [
983
980
  /* @__PURE__ */ t.jsx(
984
981
  "select",
985
982
  {
986
- className: "mie:w-full mie:px-3 mie:py-2 mie:pr-10 mie:border mie:border-gray-300 mie:rounded mie:bg-white mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:appearance-none mie:cursor-pointer",
987
- value: f || "",
988
- onChange: (h) => R(h.target.value),
989
- children: o.map((h) => /* @__PURE__ */ t.jsxs("option", { value: h.id, children: [
990
- I(h),
983
+ className: "mie:w-full mie:px-3 mie:py-2 mie:pr-10 mie:border mie:border-mieborder mie:rounded mie:bg-miesurface mie:text-mietext mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:appearance-none mie:cursor-pointer",
984
+ value: u || "",
985
+ onChange: (b) => S(b.target.value),
986
+ children: o.map((b) => /* @__PURE__ */ t.jsxs("option", { value: b.id, children: [
987
+ q(b),
991
988
  " — ",
992
- K[h.fieldType]?.label
993
- ] }, h.id))
989
+ K[b.fieldType]?.label
990
+ ] }, b.id))
994
991
  }
995
992
  ),
996
- /* @__PURE__ */ t.jsx(ht, { className: "mie:absolute mie:right-3 mie:top-1/2 mie:-translate-y-1/2 mie:w-4 mie:h-4 mie:text-gray-500 mie:pointer-events-none" })
993
+ /* @__PURE__ */ t.jsx(ht, { className: "mie:absolute mie:right-3 mie:top-1/2 mie:-translate-y-1/2 mie:w-4 mie:h-4 mie:text-mietextmuted mie:pointer-events-none" })
997
994
  ] }),
998
- y && /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-4 mie:p-4 mie:bg-gray-50 mie:border mie:border-gray-200 mie:rounded-lg", children: [
995
+ j && /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-4 mie:p-4 mie:bg-miebackground mie:border mie:border-mieborder mie:rounded-lg", children: [
999
996
  /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:justify-between", children: [
1000
- /* @__PURE__ */ t.jsx("span", { className: "mie:inline-flex mie:items-center mie:px-2.5 mie:py-0.5 mie:rounded-full mie:text-xs mie:font-medium mie:bg-blue-100 mie:text-blue-800", children: K[y.fieldType]?.label || y.fieldType }),
997
+ /* @__PURE__ */ t.jsx("span", { className: "mie:inline-flex mie:items-center mie:px-2.5 mie:py-0.5 mie:rounded-full mie:text-xs mie:font-medium mie:bg-mieprimary/10 mie:text-mieprimary", children: K[j.fieldType]?.label || j.fieldType }),
1001
998
  /* @__PURE__ */ t.jsxs(
1002
999
  "button",
1003
1000
  {
1004
- className: "mie:flex mie:items-center mie:gap-1.5 mie:px-3 mie:py-1.5 mie:text-xs mie:font-medium mie:bg-white mie:text-red-600 mie:hover:text-red-700 mie:hover:bg-red-50 mie:border mie:border-red-300 mie:rounded mie:transition-colors",
1005
- onClick: k,
1001
+ className: "mie:flex mie:items-center mie:gap-1.5 mie:px-3 mie:py-1.5 mie:text-xs mie:font-medium mie:bg-miesurface mie:text-miedanger mie:hover:text-miedanger mie:hover:bg-miedanger/10 mie:border mie:border-miedanger/50 mie:rounded mie:transition-colors",
1002
+ onClick: A,
1006
1003
  title: "Delete this field",
1007
1004
  children: [
1008
1005
  /* @__PURE__ */ t.jsx(re, { className: "mie:w-3.5 mie:h-3.5" }),
@@ -1011,21 +1008,21 @@ function _t({ section: e, onActiveChildChange: i }) {
1011
1008
  }
1012
1009
  )
1013
1010
  ] }),
1014
- /* @__PURE__ */ t.jsx(We, { f: y, onUpdateField: N }),
1015
- y.fieldType === "input" && /* @__PURE__ */ t.jsxs("div", { className: "section-editor-default-answer", children: [
1016
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700 mie:mb-1", children: "Default Answer" }),
1011
+ /* @__PURE__ */ t.jsx(We, { f: j, onUpdateField: w }),
1012
+ j.fieldType === "input" && /* @__PURE__ */ t.jsxs("div", { className: "section-editor-default-answer", children: [
1013
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext mie:mb-1", children: "Default Answer" }),
1017
1014
  /* @__PURE__ */ t.jsx(
1018
1015
  "input",
1019
1016
  {
1020
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none",
1021
- value: y.answer || "",
1022
- onChange: (h) => N("answer", h.target.value),
1017
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none",
1018
+ value: j.answer || "",
1019
+ onChange: (b) => w("answer", b.target.value),
1023
1020
  placeholder: "Default value"
1024
1021
  }
1025
1022
  )
1026
1023
  ] }),
1027
- T && F && /* @__PURE__ */ t.jsx(Ve, { field: y, api: F }),
1028
- m && F && /* @__PURE__ */ t.jsx(He, { field: y, api: F })
1024
+ T && R && /* @__PURE__ */ t.jsx(Ve, { field: j, api: R }),
1025
+ x && R && /* @__PURE__ */ t.jsx(He, { field: j, api: R })
1029
1026
  ] })
1030
1027
  ] })
1031
1028
  ] })
@@ -1033,7 +1030,7 @@ function _t({ section: e, onActiveChildChange: i }) {
1033
1030
  }
1034
1031
  function Re(e, i, r) {
1035
1032
  if (e === "expression")
1036
- return pt.includes(i) ? ["equals", "notEquals", "greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual"] : ["equals", "notEquals", "contains", "empty", "notEmpty"];
1033
+ return xt.includes(i) ? ["equals", "notEquals", "greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual"] : ["equals", "notEquals", "contains", "empty", "notEmpty"];
1037
1034
  switch (e) {
1038
1035
  case "text":
1039
1036
  case "longtext":
@@ -1053,7 +1050,7 @@ function Re(e, i, r) {
1053
1050
  return ["equals", "notEquals"];
1054
1051
  }
1055
1052
  }
1056
- function Dt(e) {
1053
+ function qt(e) {
1057
1054
  switch (e) {
1058
1055
  case "check":
1059
1056
  case "multiselectdropdown":
@@ -1066,7 +1063,7 @@ function Dt(e) {
1066
1063
  return [];
1067
1064
  }
1068
1065
  }
1069
- function qt(e) {
1066
+ function Lt(e) {
1070
1067
  switch (e) {
1071
1068
  case "equals":
1072
1069
  return "= (equals)";
@@ -1100,113 +1097,113 @@ function Ae(e) {
1100
1097
  const i = String(e ?? "");
1101
1098
  return { id: i, value: i };
1102
1099
  }
1103
- function Lt() {
1100
+ function $t() {
1104
1101
  const e = B(), i = V((p) => p.byId), r = V((p) => p.setEnableWhen), n = V((p) => p.updateField), s = e?.selectedFieldId?.value ?? null;
1105
1102
  e?.selectedChildId?.ParentId;
1106
- const o = e?.selectedChildId?.ChildId ?? null, u = s ? i[s] : null, a = u?.fieldType === "section", d = c.useMemo(() => a ? Array.isArray(u?.fields) ? u.fields : [] : [], [a, u]), f = c.useMemo(() => !a || !o ? !1 : d.some((p) => p.id === o), [a, o, d]), b = c.useMemo(() => a && f ? `child:${o}` : "", [a, f, o]), [g, R] = c.useState(b);
1107
- c.useEffect(() => {
1108
- R(b);
1109
- }, [b]);
1110
- const I = c.useCallback((p) => {
1111
- if (R(p), !!a)
1103
+ const o = e?.selectedChildId?.ChildId ?? null, d = s ? i[s] : null, m = d?.fieldType === "section", c = l.useMemo(() => m ? Array.isArray(d?.fields) ? d.fields : [] : [], [m, d]), u = l.useMemo(() => !m || !o ? !1 : c.some((p) => p.id === o), [m, o, c]), h = l.useMemo(() => m && u ? `child:${o}` : "", [m, u, o]), [g, S] = l.useState(h);
1104
+ l.useEffect(() => {
1105
+ S(h);
1106
+ }, [h]);
1107
+ const q = l.useCallback((p) => {
1108
+ if (S(p), !!m)
1112
1109
  if (p && p.startsWith("child:")) {
1113
- const E = p.slice(6);
1114
- e.selectedChildId.set(s, E);
1110
+ const C = p.slice(6);
1111
+ e.selectedChildId.set(s, C);
1115
1112
  } else
1116
1113
  e.selectedChildId.set(null, null);
1117
- }, [a, s, e]), P = !!(a && g && g.startsWith("child:")), y = P ? g.slice(6) : null, S = P ? y : s, F = c.useMemo(() => S ? P ? d.find((p) => p.id === y) ?? null : i[S] ?? null : null, [i, S, P, y, d]), N = c.useMemo(() => {
1114
+ }, [m, s, e]), _ = !!(m && g && g.startsWith("child:")), j = _ ? g.slice(6) : null, k = _ ? j : s, R = l.useMemo(() => k ? _ ? c.find((p) => p.id === j) ?? null : i[k] ?? null : null, [i, k, _, j, c]), w = l.useMemo(() => {
1118
1115
  const p = [];
1119
- for (const E of Object.values(i))
1120
- if (E)
1121
- if (E.fieldType === "section" && Array.isArray(E.fields)) {
1122
- const A = E.title?.trim() || "Section";
1123
- E.fields.forEach((w) => {
1116
+ for (const C of Object.values(i))
1117
+ if (C)
1118
+ if (C.fieldType === "section" && Array.isArray(C.fields)) {
1119
+ const M = C.title?.trim() || "Section";
1120
+ C.fields.forEach((N) => {
1124
1121
  p.push({
1125
- id: w.id,
1126
- parentId: E.id,
1127
- label: `${A} › ${w.question?.trim() || w.id}`,
1128
- fieldType: w.fieldType,
1129
- displayFormat: w.displayFormat,
1130
- options: Array.isArray(w.options) ? w.options : []
1122
+ id: N.id,
1123
+ parentId: C.id,
1124
+ label: `${M} › ${N.question?.trim() || N.id}`,
1125
+ fieldType: N.fieldType,
1126
+ displayFormat: N.displayFormat,
1127
+ options: Array.isArray(N.options) ? N.options : []
1131
1128
  });
1132
1129
  });
1133
1130
  } else
1134
1131
  p.push({
1135
- id: E.id,
1132
+ id: C.id,
1136
1133
  parentId: null,
1137
- label: E.question?.trim() || E.title?.trim() || E.id,
1138
- fieldType: E.fieldType,
1139
- displayFormat: E.displayFormat,
1140
- options: Array.isArray(E.options) ? E.options : []
1134
+ label: C.question?.trim() || C.title?.trim() || C.id,
1135
+ fieldType: C.fieldType,
1136
+ displayFormat: C.displayFormat,
1137
+ options: Array.isArray(C.options) ? C.options : []
1141
1138
  });
1142
1139
  return p;
1143
- }, [i]), k = c.useCallback(
1144
- (p) => N.find((E) => E.id === p) || null,
1145
- [N]
1146
- ), T = c.useCallback(
1140
+ }, [i]), A = l.useCallback(
1141
+ (p) => w.find((C) => C.id === p) || null,
1142
+ [w]
1143
+ ), T = l.useCallback(
1147
1144
  (p) => {
1148
- if (!S) return;
1149
- const E = p && Array.isArray(p.conditions) ? { logic: p.logic || "AND", conditions: p.conditions } : void 0;
1150
- P && s ? n(S, { enableWhen: E }, { sectionId: s }) : r(S, E);
1145
+ if (!k) return;
1146
+ const C = p && Array.isArray(p.conditions) ? { logic: p.logic || "AND", conditions: p.conditions } : void 0;
1147
+ _ && s ? n(k, { enableWhen: C }, { sectionId: s }) : r(k, C);
1151
1148
  },
1152
- [S, P, s, r, n]
1153
- ), m = c.useMemo(() => F?.enableWhen && Array.isArray(F.enableWhen.conditions) ? { logic: F.enableWhen.logic || "AND", conditions: F.enableWhen.conditions } : { logic: "AND", conditions: [] }, [F]), h = c.useCallback(() => {
1149
+ [k, _, s, r, n]
1150
+ ), x = l.useMemo(() => R?.enableWhen && Array.isArray(R.enableWhen.conditions) ? { logic: R.enableWhen.logic || "AND", conditions: R.enableWhen.conditions } : { logic: "AND", conditions: [] }, [R]), b = l.useCallback(() => {
1154
1151
  const p = {
1155
- logic: m.logic || "AND",
1152
+ logic: x.logic || "AND",
1156
1153
  conditions: [
1157
- ...Array.isArray(m.conditions) ? m.conditions : [],
1154
+ ...Array.isArray(x.conditions) ? x.conditions : [],
1158
1155
  { targetId: "", operator: "equals", value: "" }
1159
1156
  ]
1160
1157
  };
1161
1158
  T(p);
1162
- }, [m, T]), j = c.useCallback(() => T(null), [T]), q = c.useCallback(
1159
+ }, [x, T]), f = l.useCallback(() => T(null), [T]), O = l.useCallback(
1163
1160
  (p) => {
1164
- const A = (Array.isArray(m.conditions) ? m.conditions : []).filter((w, M) => M !== p);
1165
- T({ ...m, conditions: A });
1161
+ const M = (Array.isArray(x.conditions) ? x.conditions : []).filter((N, F) => F !== p);
1162
+ T({ ...x, conditions: M });
1166
1163
  },
1167
- [m, T]
1168
- ), C = c.useCallback(
1169
- (p, E) => {
1170
- const w = [...Array.isArray(m.conditions) ? m.conditions : []], z = { ...w[p] || { targetId: "", operator: "equals", value: "" }, ...E };
1171
- if ("targetId" in E) {
1172
- const U = k(z.targetId), H = Re(U?.fieldType, U?.displayFormat, U?.inputType);
1173
- H.includes(z.operator) || (z.operator = H[0] || "equals");
1174
- const Y = Array.isArray(U?.options) ? U.options.map(Ae) : [];
1175
- Y.length > 0 && (new Set(Y.map((x) => x.id)).has(z.value) || (z.value = ""));
1164
+ [x, T]
1165
+ ), E = l.useCallback(
1166
+ (p, C) => {
1167
+ const N = [...Array.isArray(x.conditions) ? x.conditions : []], $ = { ...N[p] || { targetId: "", operator: "equals", value: "" }, ...C };
1168
+ if ("targetId" in C) {
1169
+ const z = A($.targetId), H = Re(z?.fieldType, z?.displayFormat, z?.inputType);
1170
+ H.includes($.operator) || ($.operator = H[0] || "equals");
1171
+ const Y = Array.isArray(z?.options) ? z.options.map(Ae) : [];
1172
+ Y.length > 0 && (new Set(Y.map((v) => v.id)).has($.value) || ($.value = ""));
1176
1173
  }
1177
- w[p] = z, T({ ...m, conditions: w });
1174
+ N[p] = $, T({ ...x, conditions: N });
1178
1175
  },
1179
- [m, k, T]
1180
- ), O = c.useMemo(
1181
- () => N.filter((p) => p.id !== S),
1182
- [N, S]
1183
- ), _ = !F || !S;
1176
+ [x, A, T]
1177
+ ), I = l.useMemo(
1178
+ () => w.filter((p) => p.id !== k),
1179
+ [w, k]
1180
+ ), P = !R || !k;
1184
1181
  return /* @__PURE__ */ t.jsxs("div", { className: "logic-editor-container mie:space-y-4", children: [
1185
- a && /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-2", children: [
1186
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700", children: "Target Field" }),
1182
+ m && /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-2", children: [
1183
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: "Target Field" }),
1187
1184
  /* @__PURE__ */ t.jsxs(
1188
1185
  "select",
1189
1186
  {
1190
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:bg-white",
1187
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:cursor-pointer mie:transition-colors",
1191
1188
  value: g,
1192
- onChange: (p) => I(p.target.value),
1189
+ onChange: (p) => q(p.target.value),
1193
1190
  children: [
1194
1191
  /* @__PURE__ */ t.jsx("option", { value: "", children: "Section (this)" }),
1195
- d.map((p) => /* @__PURE__ */ t.jsx("option", { value: `child:${p.id}`, children: p.question?.trim() || p.title?.trim() || p.id }, p.id))
1192
+ c.map((p) => /* @__PURE__ */ t.jsx("option", { value: `child:${p.id}`, children: p.question?.trim() || p.title?.trim() || p.id }, p.id))
1196
1193
  ]
1197
1194
  }
1198
1195
  )
1199
1196
  ] }),
1200
1197
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
1201
1198
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-2", children: [
1202
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-gray-700", children: "Logic Operator" }),
1199
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: "Logic Operator" }),
1203
1200
  /* @__PURE__ */ t.jsxs(
1204
1201
  "select",
1205
1202
  {
1206
- value: m.logic || "AND",
1207
- onChange: (p) => T({ ...m, logic: p.target.value }),
1208
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:bg-white",
1209
- disabled: _,
1203
+ value: x.logic || "AND",
1204
+ onChange: (p) => T({ ...x, logic: p.target.value }),
1205
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:cursor-pointer mie:transition-colors",
1206
+ disabled: P,
1210
1207
  children: [
1211
1208
  /* @__PURE__ */ t.jsx("option", { value: "AND", children: "AND — All conditions must be true" }),
1212
1209
  /* @__PURE__ */ t.jsx("option", { value: "OR", children: "OR — Any condition must be true" })
@@ -1219,9 +1216,9 @@ function Lt() {
1219
1216
  "button",
1220
1217
  {
1221
1218
  type: "button",
1222
- className: "mie:flex-1 mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-white mie:text-blue-600 mie:border mie:border-blue-300 mie:rounded-lg mie:hover:bg-blue-50 mie:transition-colors mie:disabled:opacity-50 mie:disabled:cursor-not-allowed",
1223
- onClick: h,
1224
- disabled: _,
1219
+ className: "mie:flex-1 mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-miesurface mie:text-mieprimary mie:border mie:border-mieprimary/50 mie:rounded-lg mie:hover:bg-mieprimary/10 mie:transition-colors mie:disabled:opacity-50 mie:disabled:cursor-not-allowed",
1220
+ onClick: b,
1221
+ disabled: P,
1225
1222
  children: "+ Add Condition"
1226
1223
  }
1227
1224
  ),
@@ -1229,157 +1226,157 @@ function Lt() {
1229
1226
  "button",
1230
1227
  {
1231
1228
  type: "button",
1232
- className: "mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-white mie:text-red-600 mie:border mie:border-red-300 mie:rounded-lg mie:hover:bg-red-50 mie:transition-colors mie:disabled:opacity-50 mie:disabled:cursor-not-allowed",
1233
- onClick: j,
1234
- disabled: _,
1229
+ className: "mie:px-3 mie:py-2 mie:text-sm mie:font-medium mie:bg-miesurface mie:text-miedanger mie:border mie:border-miedanger/50 mie:rounded-lg mie:hover:bg-miedanger/10 mie:transition-colors mie:disabled:opacity-50 mie:disabled:cursor-not-allowed",
1230
+ onClick: f,
1231
+ disabled: P,
1235
1232
  children: "Clear All"
1236
1233
  }
1237
1234
  )
1238
1235
  ] })
1239
1236
  ] }),
1240
- m.conditions.length > 0 && /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
1241
- /* @__PURE__ */ t.jsxs("h4", { className: "mie:text-sm mie:font-medium mie:text-gray-700", children: [
1237
+ x.conditions.length > 0 && /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-3", children: [
1238
+ /* @__PURE__ */ t.jsxs("h4", { className: "mie:text-sm mie:font-medium mie:text-mietext", children: [
1242
1239
  "Conditions (",
1243
- m.conditions.length,
1240
+ x.conditions.length,
1244
1241
  ")"
1245
1242
  ] }),
1246
- /* @__PURE__ */ t.jsx("div", { className: "mie:space-y-3", children: m.conditions.map((p, E) => {
1247
- const A = k(p.targetId), w = Re(A?.fieldType, A?.displayFormat, A?.inputType), M = A ? Dt(A.fieldType) : [], z = M.length > 0, U = Array.isArray(A?.options) ? A.options.map(Ae) : [], H = U.length > 0, Y = !["empty", "notEmpty"].includes(p.operator), x = ["greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual"].includes(p.operator);
1248
- return /* @__PURE__ */ t.jsxs("div", { className: "mie:p-3 mie:bg-gray-50 mie:border mie:border-gray-200 mie:rounded-lg mie:space-y-2", children: [
1243
+ /* @__PURE__ */ t.jsx("div", { className: "mie:space-y-3", children: x.conditions.map((p, C) => {
1244
+ const M = A(p.targetId), N = Re(M?.fieldType, M?.displayFormat, M?.inputType), F = M ? qt(M.fieldType) : [], $ = F.length > 0, z = Array.isArray(M?.options) ? M.options.map(Ae) : [], H = z.length > 0, Y = !["empty", "notEmpty"].includes(p.operator), v = ["greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual"].includes(p.operator);
1245
+ return /* @__PURE__ */ t.jsxs("div", { className: "mie:p-3 mie:bg-miebackground mie:border mie:border-mieborder mie:rounded-lg mie:space-y-2", children: [
1249
1246
  /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:justify-between mie:mb-2", children: [
1250
- /* @__PURE__ */ t.jsxs("span", { className: "mie:text-xs mie:font-semibold mie:text-gray-500 mie:uppercase mie:tracking-wide", children: [
1247
+ /* @__PURE__ */ t.jsxs("span", { className: "mie:text-xs mie:font-semibold mie:text-mietextmuted mie:uppercase mie:tracking-wide", children: [
1251
1248
  "Condition ",
1252
- E + 1
1249
+ C + 1
1253
1250
  ] }),
1254
1251
  /* @__PURE__ */ t.jsx(
1255
1252
  "button",
1256
1253
  {
1257
1254
  type: "button",
1258
- onClick: () => q(E),
1259
- className: "mie:bg-transparent mie:text-gray-400 mie:hover:text-red-600 mie:transition-colors",
1255
+ onClick: () => O(C),
1256
+ className: "mie:bg-transparent mie:text-mietextmuted/70 mie:hover:text-miedanger mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none",
1260
1257
  title: "Remove condition",
1261
- disabled: _,
1258
+ disabled: P,
1262
1259
  children: /* @__PURE__ */ t.jsx(re, { className: "mie:w-4 mie:h-4" })
1263
1260
  }
1264
1261
  )
1265
1262
  ] }),
1266
1263
  /* @__PURE__ */ t.jsxs("div", { className: "mie:space-y-2", children: [
1267
1264
  /* @__PURE__ */ t.jsxs("div", { children: [
1268
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-gray-600 mie:mb-1", children: "When Field" }),
1265
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-mietextmuted mie:mb-1", children: "When Field" }),
1269
1266
  /* @__PURE__ */ t.jsxs(
1270
1267
  "select",
1271
1268
  {
1272
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:bg-white mie:text-sm",
1269
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:text-sm mie:cursor-pointer mie:transition-colors",
1273
1270
  value: p.targetId,
1274
- onChange: (v) => C(E, { targetId: v.target.value }),
1275
- disabled: _,
1271
+ onChange: (y) => E(C, { targetId: y.target.value }),
1272
+ disabled: P,
1276
1273
  children: [
1277
1274
  /* @__PURE__ */ t.jsx("option", { value: "", children: "— Select field —" }),
1278
- O.map((v) => /* @__PURE__ */ t.jsx("option", { value: v.id, children: v.label }, v.id))
1275
+ I.map((y) => /* @__PURE__ */ t.jsx("option", { value: y.id, children: y.label }, y.id))
1279
1276
  ]
1280
1277
  }
1281
1278
  )
1282
1279
  ] }),
1283
- z && /* @__PURE__ */ t.jsxs("div", { children: [
1284
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-gray-600 mie:mb-1", children: "Property (optional)" }),
1280
+ $ && /* @__PURE__ */ t.jsxs("div", { children: [
1281
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-mietextmuted mie:mb-1", children: "Property (optional)" }),
1285
1282
  /* @__PURE__ */ t.jsxs(
1286
1283
  "select",
1287
1284
  {
1288
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:bg-white mie:text-sm",
1285
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:text-sm mie:cursor-pointer mie:transition-colors",
1289
1286
  value: p.propertyAccessor || "",
1290
- onChange: (v) => C(E, { propertyAccessor: v.target.value || void 0 }),
1291
- disabled: _ || !A,
1287
+ onChange: (y) => E(C, { propertyAccessor: y.target.value || void 0 }),
1288
+ disabled: P || !M,
1292
1289
  children: [
1293
1290
  /* @__PURE__ */ t.jsx("option", { value: "", children: "— Direct value —" }),
1294
- M.map((v) => /* @__PURE__ */ t.jsxs("option", { value: v, children: [
1291
+ F.map((y) => /* @__PURE__ */ t.jsxs("option", { value: y, children: [
1295
1292
  ".",
1296
- v,
1293
+ y,
1297
1294
  " (get ",
1298
- v,
1295
+ y,
1299
1296
  ")"
1300
- ] }, v))
1297
+ ] }, y))
1301
1298
  ]
1302
1299
  }
1303
1300
  ),
1304
- /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-gray-500 mie:mt-1", children: "Use .length or .count to compare the number of items" })
1301
+ /* @__PURE__ */ t.jsx("p", { className: "mie:text-xs mie:text-mietextmuted mie:mt-1", children: "Use .length or .count to compare the number of items" })
1305
1302
  ] }),
1306
1303
  /* @__PURE__ */ t.jsxs("div", { className: "mie:grid mie:grid-cols-2 mie:gap-2", children: [
1307
1304
  /* @__PURE__ */ t.jsxs("div", { children: [
1308
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-gray-600 mie:mb-1", children: "Operator" }),
1305
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-mietextmuted mie:mb-1", children: "Operator" }),
1309
1306
  /* @__PURE__ */ t.jsx(
1310
1307
  "select",
1311
1308
  {
1312
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:bg-white mie:text-sm",
1309
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:text-sm mie:cursor-pointer mie:transition-colors",
1313
1310
  value: p.operator,
1314
- onChange: (v) => C(E, { operator: v.target.value }),
1315
- disabled: _ || !A,
1316
- children: (A ? w : ["equals"]).map((v) => /* @__PURE__ */ t.jsx("option", { value: v, children: qt(v) }, v))
1311
+ onChange: (y) => E(C, { operator: y.target.value }),
1312
+ disabled: P || !M,
1313
+ children: (M ? N : ["equals"]).map((y) => /* @__PURE__ */ t.jsx("option", { value: y, children: Lt(y) }, y))
1317
1314
  }
1318
1315
  )
1319
1316
  ] }),
1320
1317
  /* @__PURE__ */ t.jsxs("div", { children: [
1321
- /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-gray-600 mie:mb-1", children: "Value" }),
1322
- Y ? H && !p.propertyAccessor && !x ? /* @__PURE__ */ t.jsxs(
1318
+ /* @__PURE__ */ t.jsx("label", { className: "mie:block mie:text-xs mie:font-medium mie:text-mietextmuted mie:mb-1", children: "Value" }),
1319
+ Y ? H && !p.propertyAccessor && !v ? /* @__PURE__ */ t.jsxs(
1323
1320
  "select",
1324
1321
  {
1325
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:bg-white mie:text-sm",
1322
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:text-sm mie:cursor-pointer mie:transition-colors",
1326
1323
  value: p.value,
1327
- onChange: (v) => C(E, { value: v.target.value }),
1328
- disabled: _ || !A,
1324
+ onChange: (y) => E(C, { value: y.target.value }),
1325
+ disabled: P || !M,
1329
1326
  children: [
1330
1327
  /* @__PURE__ */ t.jsx("option", { value: "", children: "— Select option —" }),
1331
- U.map((v) => /* @__PURE__ */ t.jsx("option", { value: v.id, children: v.value }, v.id))
1328
+ z.map((y) => /* @__PURE__ */ t.jsx("option", { value: y.id, children: y.value }, y.id))
1332
1329
  ]
1333
1330
  }
1334
1331
  ) : /* @__PURE__ */ t.jsx(
1335
1332
  "input",
1336
1333
  {
1337
- className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-300 mie:rounded-lg mie:focus:border-blue-400 mie:focus:ring-1 mie:focus:ring-blue-400 mie:outline-none mie:text-sm",
1338
- placeholder: p.propertyAccessor || x ? "Enter number" : "Enter value",
1339
- type: p.propertyAccessor || x ? "number" : "text",
1334
+ className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:bg-miesurface mie:text-mietext mie:text-sm mie:transition-colors",
1335
+ placeholder: p.propertyAccessor || v ? "Enter number" : "Enter value",
1336
+ type: p.propertyAccessor || v ? "number" : "text",
1340
1337
  value: p.value,
1341
- onChange: (v) => C(E, { value: v.target.value }),
1342
- disabled: _ || !A
1338
+ onChange: (y) => E(C, { value: y.target.value }),
1339
+ disabled: P || !M
1343
1340
  }
1344
- ) : /* @__PURE__ */ t.jsx("div", { className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-gray-200 mie:rounded-lg mie:bg-gray-100 mie:text-sm mie:text-gray-500 mie:flex mie:items-center", children: "(no value needed)" })
1341
+ ) : /* @__PURE__ */ t.jsx("div", { className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:bg-miebackground mie:text-sm mie:text-mietextmuted mie:flex mie:items-center", children: "(no value needed)" })
1345
1342
  ] })
1346
1343
  ] })
1347
1344
  ] })
1348
- ] }, E);
1345
+ ] }, C);
1349
1346
  }) })
1350
1347
  ] })
1351
1348
  ] });
1352
1349
  }
1353
1350
  function Pe({ isMobileModal: e = !1 }) {
1354
1351
  const i = B(), r = V(
1355
- c.useCallback(
1356
- (d) => i.selectedFieldId.value ? d.byId[i.selectedFieldId.value] : null,
1352
+ l.useCallback(
1353
+ (c) => i.selectedFieldId.value ? c.byId[i.selectedFieldId.value] : null,
1357
1354
  [i.selectedFieldId.value]
1358
1355
  )
1359
- ), [n, s] = c.useState("EDIT"), o = c.useCallback(
1360
- (d, f) => {
1361
- i.selectedChildId.set(d, f);
1356
+ ), [n, s] = l.useState("EDIT"), o = l.useCallback(
1357
+ (c, u) => {
1358
+ i.selectedChildId.set(c, u);
1362
1359
  },
1363
1360
  [i.selectedChildId.set]
1364
1361
  );
1365
- if (c.useEffect(() => {
1362
+ if (l.useEffect(() => {
1366
1363
  i.selectedChildId.set(null, null), s("EDIT");
1367
1364
  }, [i.selectedFieldId.value]), i.state.isPreview) return null;
1368
- const u = !r, a = r?.fieldType === "section";
1365
+ const d = !r, m = r?.fieldType === "section";
1369
1366
  return /* @__PURE__ */ t.jsxs(
1370
1367
  "div",
1371
1368
  {
1372
- className: `edit-panel-container mie:bg-white mie:border mie:border-gray-200 mie:rounded-lg mie:shadow-sm ${e ? "mie:overflow-visible mie:max-h-none" : "mie:overflow-y-auto mie:custom-scrollbar mie:max-h-[calc(100svh-24rem)] mie:lg:max-h-[calc(100dvh-20rem)]"}`,
1369
+ className: `edit-panel-container mie:bg-miesurface mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm ${e ? "mie:overflow-visible mie:max-h-none" : "mie:overflow-y-auto mie:custom-scrollbar mie:max-h-[calc(100svh-24rem)] mie:lg:max-h-[calc(100dvh-20rem)]"}`,
1373
1370
  children: [
1374
- /* @__PURE__ */ t.jsx("div", { className: "mie:sticky mie:top-0 mie:z-20 mie:bg-white mie:border-b mie:border-gray-200 mie:px-4 mie:pt-3 mie:pb-2", children: /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:gap-1 mie:rounded-lg mie:border mie:border-black/10 mie:bg-black/5 mie:p-1 mie:w-full", children: [
1371
+ /* @__PURE__ */ t.jsx("div", { className: "mie:sticky mie:top-0 mie:z-20 mie:bg-miesurface mie:border-b mie:border-mieborder mie:px-4 mie:pt-3 mie:pb-2", children: /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:gap-1 mie:rounded-lg mie:border mie:border-mieborder mie:bg-miebackground mie:p-1 mie:w-full", children: [
1375
1372
  /* @__PURE__ */ t.jsxs(
1376
1373
  "button",
1377
1374
  {
1378
1375
  type: "button",
1379
1376
  onClick: () => s("EDIT"),
1380
- className: `mie:flex-1 mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-3 mie:py-2 mie:rounded-lg mie:text-xs mie:font-medium mie:transition-colors ${n === "EDIT" ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
1377
+ className: `mie:flex-1 mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-3 mie:py-2 mie:rounded-lg mie:text-xs mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${n === "EDIT" ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
1381
1378
  children: [
1382
- /* @__PURE__ */ t.jsx(gt, { className: "mie:w-4 mie:h-4" }),
1379
+ /* @__PURE__ */ t.jsx(bt, { className: "mie:w-4 mie:h-4" }),
1383
1380
  /* @__PURE__ */ t.jsx("span", { children: "Edit" })
1384
1381
  ]
1385
1382
  }
@@ -1389,39 +1386,39 @@ function Pe({ isMobileModal: e = !1 }) {
1389
1386
  {
1390
1387
  type: "button",
1391
1388
  onClick: () => s("LOGIC"),
1392
- className: `mie:flex-1 mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-3 mie:py-2 mie:rounded-lg mie:text-xs mie:font-medium mie:transition-colors ${n === "LOGIC" ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
1389
+ className: `mie:flex-1 mie:flex mie:items-center mie:justify-center mie:gap-2 mie:px-3 mie:py-2 mie:rounded-lg mie:text-xs mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${n === "LOGIC" ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
1393
1390
  children: [
1394
- /* @__PURE__ */ t.jsx(bt, { className: "mie:w-4 mie:h-4" }),
1391
+ /* @__PURE__ */ t.jsx(gt, { className: "mie:w-4 mie:h-4" }),
1395
1392
  /* @__PURE__ */ t.jsx("span", { children: "Logic" })
1396
1393
  ]
1397
1394
  }
1398
1395
  )
1399
1396
  ] }) }),
1400
1397
  /* @__PURE__ */ t.jsxs("div", { className: "mie:p-4", children: [
1401
- u && /* @__PURE__ */ t.jsx("div", { className: "edit-panel-empty mie:text-gray-600", children: /* @__PURE__ */ t.jsx("p", { children: "Select a field in the center panel to edit its properties." }) }),
1402
- !u && n === "EDIT" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1403
- !a && /* @__PURE__ */ t.jsx(Ft, { f: r }),
1404
- a && /* @__PURE__ */ t.jsx(
1405
- _t,
1398
+ d && /* @__PURE__ */ t.jsx("div", { className: "edit-panel-empty mie:text-mietextmuted", children: /* @__PURE__ */ t.jsx("p", { children: "Select a field in the center panel to edit its properties." }) }),
1399
+ !d && n === "EDIT" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1400
+ !m && /* @__PURE__ */ t.jsx(_t, { f: r }),
1401
+ m && /* @__PURE__ */ t.jsx(
1402
+ Dt,
1406
1403
  {
1407
1404
  section: r,
1408
1405
  onActiveChildChange: o
1409
1406
  }
1410
1407
  )
1411
1408
  ] }),
1412
- !u && n === "LOGIC" && /* @__PURE__ */ t.jsx(Lt, {})
1409
+ !d && n === "LOGIC" && /* @__PURE__ */ t.jsx($t, {})
1413
1410
  ] })
1414
1411
  ]
1415
1412
  }
1416
1413
  );
1417
1414
  }
1418
- function $t() {
1419
- const e = B(), { fields: i } = xt(e.state.isPreview), r = vt((a) => a.hideUnsupportedFields), n = V((a) => a.order), s = c.useRef(null), o = c.useRef(0), u = Ee(() => (r ? i.filter((d) => d.fieldType !== "unsupported") : i).map((d) => d.id), [i, r]);
1420
- return c.useEffect(() => {
1415
+ function Ut() {
1416
+ const e = B(), { fields: i } = vt(e.state.isPreview), r = yt((m) => m.hideUnsupportedFields), n = V((m) => m.order), s = l.useRef(null), o = l.useRef(0), d = Ee(() => (r ? i.filter((c) => c.fieldType !== "unsupported") : i).map((c) => c.id), [i, r]);
1417
+ return l.useEffect(() => {
1421
1418
  if (!e.state.isPreview) {
1422
1419
  if (n.length > o.current) {
1423
- const a = n[n.length - 1], d = s.current?.querySelector(`[data-field-id="${a}"]`);
1424
- d && (d.scrollIntoView({ behavior: "smooth", block: "nearest" }), e.selectedFieldId.set(a));
1420
+ const m = n[n.length - 1], c = s.current?.querySelector(`[data-field-id="${m}"]`);
1421
+ c && (c.scrollIntoView({ behavior: "smooth", block: "nearest" }), e.selectedFieldId.set(m));
1425
1422
  }
1426
1423
  o.current = n.length;
1427
1424
  }
@@ -1433,36 +1430,36 @@ function $t() {
1433
1430
  ${e.state.isPreview ? "mie:max-w-4xl" : "mie:max-w-xl"}
1434
1431
  mie:mx-auto mie:rounded-lg mie:overflow-y-auto mie:max-h-[calc(100svh-13rem)] mie:lg:max-h-[calc(100dvh-11rem)] mie:custom-scrollbar mie:lg:pr-2`,
1435
1432
  onClick: () => !e.state.isPreview && e.selectedFieldId.clear(),
1436
- children: u.length === 0 ? /* @__PURE__ */ t.jsx(zt, {}) : u.map((a) => /* @__PURE__ */ t.jsx(Ut, { id: a }, a))
1433
+ children: d.length === 0 ? /* @__PURE__ */ t.jsx(Wt, {}) : d.map((m) => /* @__PURE__ */ t.jsx(zt, { id: m }, m))
1437
1434
  }
1438
1435
  );
1439
1436
  }
1440
- const Ut = c.memo(function({ id: i }) {
1441
- const r = V(c.useCallback((s) => s.byId[i], [i]));
1437
+ const zt = l.memo(function({ id: i }) {
1438
+ const r = V(l.useCallback((s) => s.byId[i], [i]));
1442
1439
  if (!r) return null;
1443
- const n = yt(r.fieldType);
1440
+ const n = jt(r.fieldType);
1444
1441
  return n ? /* @__PURE__ */ t.jsx("div", { className: "mie:mb-1.5", "data-field-type": r.fieldType, "data-field-id": r.id, children: /* @__PURE__ */ t.jsx(n, { field: r }) }) : null;
1445
1442
  });
1446
- function zt() {
1443
+ function Wt() {
1447
1444
  return /* @__PURE__ */ t.jsxs(
1448
1445
  "div",
1449
1446
  {
1450
- className: "form-builder-empty-state mie:flex mie:flex-col mie:items-center mie:justify-center mie:h-72 mie:bg-linear-to-br mie:from-gray-50 mie:to-gray-100 mie:border-2 mie:border-dashed mie:border-blue-200 mie:rounded-xl mie:shadow-md mie:text-center mie:px-8 mie:py-10",
1447
+ className: "form-builder-empty-state mie:flex mie:flex-col mie:items-center mie:justify-center mie:h-72 mie:bg-miebackground mie:border-2 mie:border-dashed mie:border-mieprimary/30 mie:rounded-xl mie:shadow-md mie:text-center mie:px-8 mie:py-10",
1451
1448
  children: [
1452
- /* @__PURE__ */ t.jsx("div", { className: "empty-state-title mie:text-xl mie:font-semibold mie:text-gray-700 mie:mb-2", children: "Forms" }),
1453
- /* @__PURE__ */ t.jsxs("div", { className: "empty-state-description mie:text-base mie:text-gray-500", children: [
1449
+ /* @__PURE__ */ t.jsx("div", { className: "empty-state-title mie:text-xl mie:font-semibold mie:text-mietext mie:mb-2", children: "Forms" }),
1450
+ /* @__PURE__ */ t.jsxs("div", { className: "empty-state-description mie:text-base mie:text-mietextmuted", children: [
1454
1451
  /* @__PURE__ */ t.jsxs("div", { className: "mie:lg:hidden", children: [
1455
1452
  "Tap the ",
1456
- /* @__PURE__ */ t.jsx("span", { className: "mie:font-semibold mie:text-blue-500", children: "Tool Panel" }),
1453
+ /* @__PURE__ */ t.jsx("span", { className: "mie:font-semibold mie:text-mieprimary", children: "Tool Panel" }),
1457
1454
  " button to add fields."
1458
1455
  ] }),
1459
1456
  /* @__PURE__ */ t.jsxs("div", { className: "mie:hidden mie:lg:block", children: [
1460
1457
  "Add fields using the ",
1461
- /* @__PURE__ */ t.jsx("span", { className: "mie:font-semibold mie:text-blue-500", children: "Tool Panel" }),
1458
+ /* @__PURE__ */ t.jsx("span", { className: "mie:font-semibold mie:text-mieprimary", children: "Tool Panel" }),
1462
1459
  " on the left.",
1463
1460
  /* @__PURE__ */ t.jsx("br", {}),
1464
1461
  "Edit field properties using the ",
1465
- /* @__PURE__ */ t.jsx("span", { className: "mie:font-semibold mie:text-blue-500", children: "Edit Panel" }),
1462
+ /* @__PURE__ */ t.jsx("span", { className: "mie:font-semibold mie:text-mieprimary", children: "Edit Panel" }),
1466
1463
  " on the right."
1467
1464
  ] })
1468
1465
  ] })
@@ -1475,36 +1472,36 @@ function Me(e, i) {
1475
1472
  for (var r = 0, n = Array(i); r < i; r++) n[r] = e[r];
1476
1473
  return n;
1477
1474
  }
1478
- function Wt(e) {
1475
+ function Vt(e) {
1479
1476
  if (Array.isArray(e)) return e;
1480
1477
  }
1481
- function Vt(e, i, r) {
1482
- return (i = Xt(i)) in e ? Object.defineProperty(e, i, {
1478
+ function Ht(e, i, r) {
1479
+ return (i = Qt(i)) in e ? Object.defineProperty(e, i, {
1483
1480
  value: r,
1484
1481
  enumerable: !0,
1485
1482
  configurable: !0,
1486
1483
  writable: !0
1487
1484
  }) : e[i] = r, e;
1488
1485
  }
1489
- function Ht(e, i) {
1486
+ function Yt(e, i) {
1490
1487
  var r = e == null ? null : typeof Symbol < "u" && e[Symbol.iterator] || e["@@iterator"];
1491
1488
  if (r != null) {
1492
- var n, s, o, u, a = [], d = !0, f = !1;
1489
+ var n, s, o, d, m = [], c = !0, u = !1;
1493
1490
  try {
1494
- if (o = (r = r.call(e)).next, i !== 0) for (; !(d = (n = o.call(r)).done) && (a.push(n.value), a.length !== i); d = !0) ;
1495
- } catch (b) {
1496
- f = !0, s = b;
1491
+ if (o = (r = r.call(e)).next, i !== 0) for (; !(c = (n = o.call(r)).done) && (m.push(n.value), m.length !== i); c = !0) ;
1492
+ } catch (h) {
1493
+ u = !0, s = h;
1497
1494
  } finally {
1498
1495
  try {
1499
- if (!d && r.return != null && (u = r.return(), Object(u) !== u)) return;
1496
+ if (!c && r.return != null && (d = r.return(), Object(d) !== d)) return;
1500
1497
  } finally {
1501
- if (f) throw s;
1498
+ if (u) throw s;
1502
1499
  }
1503
1500
  }
1504
- return a;
1501
+ return m;
1505
1502
  }
1506
1503
  }
1507
- function Yt() {
1504
+ function Jt() {
1508
1505
  throw new TypeError(`Invalid attempt to destructure non-iterable instance.
1509
1506
  In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
1510
1507
  }
@@ -1522,23 +1519,23 @@ function _e(e) {
1522
1519
  for (var i = 1; i < arguments.length; i++) {
1523
1520
  var r = arguments[i] != null ? arguments[i] : {};
1524
1521
  i % 2 ? Fe(Object(r), !0).forEach(function(n) {
1525
- Vt(e, n, r[n]);
1522
+ Ht(e, n, r[n]);
1526
1523
  }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Fe(Object(r)).forEach(function(n) {
1527
1524
  Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
1528
1525
  });
1529
1526
  }
1530
1527
  return e;
1531
1528
  }
1532
- function Jt(e, i) {
1529
+ function Bt(e, i) {
1533
1530
  if (e == null) return {};
1534
- var r, n, s = Bt(e, i);
1531
+ var r, n, s = Gt(e, i);
1535
1532
  if (Object.getOwnPropertySymbols) {
1536
1533
  var o = Object.getOwnPropertySymbols(e);
1537
1534
  for (n = 0; n < o.length; n++) r = o[n], i.indexOf(r) === -1 && {}.propertyIsEnumerable.call(e, r) && (s[r] = e[r]);
1538
1535
  }
1539
1536
  return s;
1540
1537
  }
1541
- function Bt(e, i) {
1538
+ function Gt(e, i) {
1542
1539
  if (e == null) return {};
1543
1540
  var r = {};
1544
1541
  for (var n in e) if ({}.hasOwnProperty.call(e, n)) {
@@ -1547,10 +1544,10 @@ function Bt(e, i) {
1547
1544
  }
1548
1545
  return r;
1549
1546
  }
1550
- function Gt(e, i) {
1551
- return Wt(e) || Ht(e, i) || Qt(e, i) || Yt();
1552
- }
1553
1547
  function Kt(e, i) {
1548
+ return Vt(e) || Yt(e, i) || Zt(e, i) || Jt();
1549
+ }
1550
+ function Xt(e, i) {
1554
1551
  if (typeof e != "object" || !e) return e;
1555
1552
  var r = e[Symbol.toPrimitive];
1556
1553
  if (r !== void 0) {
@@ -1560,18 +1557,18 @@ function Kt(e, i) {
1560
1557
  }
1561
1558
  return (i === "string" ? String : Number)(e);
1562
1559
  }
1563
- function Xt(e) {
1564
- var i = Kt(e, "string");
1560
+ function Qt(e) {
1561
+ var i = Xt(e, "string");
1565
1562
  return typeof i == "symbol" ? i : i + "";
1566
1563
  }
1567
- function Qt(e, i) {
1564
+ function Zt(e, i) {
1568
1565
  if (e) {
1569
1566
  if (typeof e == "string") return Me(e, i);
1570
1567
  var r = {}.toString.call(e).slice(8, -1);
1571
1568
  return r === "Object" && e.constructor && (r = e.constructor.name), r === "Map" || r === "Set" ? Array.from(e) : r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? Me(e, i) : void 0;
1572
1569
  }
1573
1570
  }
1574
- function Zt(e, i, r) {
1571
+ function ei(e, i, r) {
1575
1572
  return i in e ? Object.defineProperty(e, i, {
1576
1573
  value: r,
1577
1574
  enumerable: !0,
@@ -1593,14 +1590,14 @@ function qe(e) {
1593
1590
  for (var i = 1; i < arguments.length; i++) {
1594
1591
  var r = arguments[i] != null ? arguments[i] : {};
1595
1592
  i % 2 ? De(Object(r), !0).forEach(function(n) {
1596
- Zt(e, n, r[n]);
1593
+ ei(e, n, r[n]);
1597
1594
  }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : De(Object(r)).forEach(function(n) {
1598
1595
  Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
1599
1596
  });
1600
1597
  }
1601
1598
  return e;
1602
1599
  }
1603
- function ei() {
1600
+ function ti() {
1604
1601
  for (var e = arguments.length, i = new Array(e), r = 0; r < e; r++)
1605
1602
  i[r] = arguments[r];
1606
1603
  return function(n) {
@@ -1614,44 +1611,44 @@ function te(e) {
1614
1611
  for (var r = this, n = arguments.length, s = new Array(n), o = 0; o < n; o++)
1615
1612
  s[o] = arguments[o];
1616
1613
  return s.length >= e.length ? e.apply(this, s) : function() {
1617
- for (var u = arguments.length, a = new Array(u), d = 0; d < u; d++)
1618
- a[d] = arguments[d];
1619
- return i.apply(r, [].concat(s, a));
1614
+ for (var d = arguments.length, m = new Array(d), c = 0; c < d; c++)
1615
+ m[c] = arguments[c];
1616
+ return i.apply(r, [].concat(s, m));
1620
1617
  };
1621
1618
  };
1622
1619
  }
1623
- function pe(e) {
1620
+ function he(e) {
1624
1621
  return {}.toString.call(e).includes("Object");
1625
1622
  }
1626
- function ti(e) {
1623
+ function ii(e) {
1627
1624
  return !Object.keys(e).length;
1628
1625
  }
1629
1626
  function ne(e) {
1630
1627
  return typeof e == "function";
1631
1628
  }
1632
- function ii(e, i) {
1629
+ function ri(e, i) {
1633
1630
  return Object.prototype.hasOwnProperty.call(e, i);
1634
1631
  }
1635
- function ri(e, i) {
1636
- return pe(i) || G("changeType"), Object.keys(i).some(function(r) {
1637
- return !ii(e, r);
1632
+ function ni(e, i) {
1633
+ return he(i) || G("changeType"), Object.keys(i).some(function(r) {
1634
+ return !ri(e, r);
1638
1635
  }) && G("changeField"), i;
1639
1636
  }
1640
- function ni(e) {
1637
+ function si(e) {
1641
1638
  ne(e) || G("selectorType");
1642
1639
  }
1643
- function si(e) {
1644
- ne(e) || pe(e) || G("handlerType"), pe(e) && Object.values(e).some(function(i) {
1640
+ function oi(e) {
1641
+ ne(e) || he(e) || G("handlerType"), he(e) && Object.values(e).some(function(i) {
1645
1642
  return !ne(i);
1646
1643
  }) && G("handlersType");
1647
1644
  }
1648
- function oi(e) {
1649
- e || G("initialIsRequired"), pe(e) || G("initialType"), ti(e) && G("initialContent");
1645
+ function ai(e) {
1646
+ e || G("initialIsRequired"), he(e) || G("initialType"), ii(e) && G("initialContent");
1650
1647
  }
1651
- function li(e, i) {
1648
+ function mi(e, i) {
1652
1649
  throw new Error(e[i] || e.default);
1653
1650
  }
1654
- var ai = {
1651
+ var li = {
1655
1652
  initialIsRequired: "initial state is required",
1656
1653
  initialType: "initial state should be an object",
1657
1654
  initialContent: "initial state shouldn't be an empty object",
@@ -1661,73 +1658,73 @@ var ai = {
1661
1658
  changeType: "provided value of changes should be an object",
1662
1659
  changeField: 'it seams you want to change a field in the state which is not specified in the "initial" state',
1663
1660
  default: "an unknown error accured in `state-local` package"
1664
- }, G = te(li)(ai), ce = {
1665
- changes: ri,
1666
- selector: ni,
1667
- handler: si,
1668
- initial: oi
1661
+ }, G = te(mi)(li), le = {
1662
+ changes: ni,
1663
+ selector: si,
1664
+ handler: oi,
1665
+ initial: ai
1669
1666
  };
1670
1667
  function ci(e) {
1671
1668
  var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
1672
- ce.initial(e), ce.handler(i);
1669
+ le.initial(e), le.handler(i);
1673
1670
  var r = {
1674
1671
  current: e
1675
- }, n = te(ui)(r, i), s = te(di)(r), o = te(ce.changes)(e), u = te(mi)(r);
1676
- function a() {
1677
- var f = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(b) {
1678
- return b;
1672
+ }, n = te(fi)(r, i), s = te(ui)(r), o = te(le.changes)(e), d = te(di)(r);
1673
+ function m() {
1674
+ var u = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(h) {
1675
+ return h;
1679
1676
  };
1680
- return ce.selector(f), f(r.current);
1677
+ return le.selector(u), u(r.current);
1681
1678
  }
1682
- function d(f) {
1683
- ei(n, s, o, u)(f);
1679
+ function c(u) {
1680
+ ti(n, s, o, d)(u);
1684
1681
  }
1685
- return [a, d];
1682
+ return [m, c];
1686
1683
  }
1687
- function mi(e, i) {
1684
+ function di(e, i) {
1688
1685
  return ne(i) ? i(e.current) : i;
1689
1686
  }
1690
- function di(e, i) {
1687
+ function ui(e, i) {
1691
1688
  return e.current = qe(qe({}, e.current), i), i;
1692
1689
  }
1693
- function ui(e, i, r) {
1690
+ function fi(e, i, r) {
1694
1691
  return ne(i) ? i(e.current) : Object.keys(r).forEach(function(n) {
1695
1692
  var s;
1696
1693
  return (s = i[n]) === null || s === void 0 ? void 0 : s.call(i, e.current[n]);
1697
1694
  }), r;
1698
1695
  }
1699
- var fi = {
1696
+ var pi = {
1700
1697
  create: ci
1701
1698
  }, hi = {
1702
1699
  paths: {
1703
1700
  vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs"
1704
1701
  }
1705
1702
  };
1706
- function pi(e) {
1703
+ function xi(e) {
1707
1704
  return function i() {
1708
1705
  for (var r = this, n = arguments.length, s = new Array(n), o = 0; o < n; o++)
1709
1706
  s[o] = arguments[o];
1710
1707
  return s.length >= e.length ? e.apply(this, s) : function() {
1711
- for (var u = arguments.length, a = new Array(u), d = 0; d < u; d++)
1712
- a[d] = arguments[d];
1713
- return i.apply(r, [].concat(s, a));
1708
+ for (var d = arguments.length, m = new Array(d), c = 0; c < d; c++)
1709
+ m[c] = arguments[c];
1710
+ return i.apply(r, [].concat(s, m));
1714
1711
  };
1715
1712
  };
1716
1713
  }
1717
- function gi(e) {
1714
+ function bi(e) {
1718
1715
  return {}.toString.call(e).includes("Object");
1719
1716
  }
1720
- function bi(e) {
1721
- return e || Le("configIsRequired"), gi(e) || Le("configType"), e.urls ? (xi(), {
1717
+ function gi(e) {
1718
+ return e || Le("configIsRequired"), bi(e) || Le("configType"), e.urls ? (vi(), {
1722
1719
  paths: {
1723
1720
  vs: e.urls.monacoBase
1724
1721
  }
1725
1722
  }) : e;
1726
1723
  }
1727
- function xi() {
1724
+ function vi() {
1728
1725
  console.warn(Ye.deprecation);
1729
1726
  }
1730
- function vi(e, i) {
1727
+ function yi(e, i) {
1731
1728
  throw new Error(e[i] || e.default);
1732
1729
  }
1733
1730
  var Ye = {
@@ -1744,14 +1741,14 @@ var Ye = {
1744
1741
 
1745
1742
  For more please check the link https://github.com/suren-atoyan/monaco-loader#config
1746
1743
  `
1747
- }, Le = pi(vi)(Ye), yi = {
1748
- config: bi
1749
- }, ji = function() {
1744
+ }, Le = xi(yi)(Ye), ji = {
1745
+ config: gi
1746
+ }, wi = function() {
1750
1747
  for (var i = arguments.length, r = new Array(i), n = 0; n < i; n++)
1751
1748
  r[n] = arguments[n];
1752
1749
  return function(s) {
1753
- return r.reduceRight(function(o, u) {
1754
- return u(o);
1750
+ return r.reduceRight(function(o, d) {
1751
+ return d(o);
1755
1752
  }, s);
1756
1753
  };
1757
1754
  };
@@ -1760,37 +1757,37 @@ function Je(e, i) {
1760
1757
  i[r] instanceof Object && e[r] && Object.assign(i[r], Je(e[r], i[r]));
1761
1758
  }), _e(_e({}, e), i);
1762
1759
  }
1763
- var wi = {
1760
+ var Ei = {
1764
1761
  type: "cancelation",
1765
1762
  msg: "operation is manually canceled"
1766
1763
  };
1767
1764
  function ye(e) {
1768
1765
  var i = !1, r = new Promise(function(n, s) {
1769
1766
  e.then(function(o) {
1770
- return i ? s(wi) : n(o);
1767
+ return i ? s(Ei) : n(o);
1771
1768
  }), e.catch(s);
1772
1769
  });
1773
1770
  return r.cancel = function() {
1774
1771
  return i = !0;
1775
1772
  }, r;
1776
1773
  }
1777
- var Ei = ["monaco"], Ni = fi.create({
1774
+ var Ni = ["monaco"], Ci = pi.create({
1778
1775
  config: hi,
1779
1776
  isInitialized: !1,
1780
1777
  resolve: null,
1781
1778
  reject: null,
1782
1779
  monaco: null
1783
- }), Be = Gt(Ni, 2), se = Be[0], ge = Be[1];
1784
- function Ci(e) {
1785
- var i = yi.config(e), r = i.monaco, n = Jt(i, Ei);
1786
- ge(function(s) {
1780
+ }), Be = Kt(Ci, 2), se = Be[0], xe = Be[1];
1781
+ function Oi(e) {
1782
+ var i = ji.config(e), r = i.monaco, n = Bt(i, Ni);
1783
+ xe(function(s) {
1787
1784
  return {
1788
1785
  config: Je(s.config, n),
1789
1786
  monaco: r
1790
1787
  };
1791
1788
  });
1792
1789
  }
1793
- function Oi() {
1790
+ function Ti() {
1794
1791
  var e = se(function(i) {
1795
1792
  var r = i.monaco, n = i.isInitialized, s = i.resolve;
1796
1793
  return {
@@ -1800,36 +1797,36 @@ function Oi() {
1800
1797
  };
1801
1798
  });
1802
1799
  if (!e.isInitialized) {
1803
- if (ge({
1800
+ if (xe({
1804
1801
  isInitialized: !0
1805
1802
  }), e.monaco)
1806
1803
  return e.resolve(e.monaco), ye(je);
1807
1804
  if (window.monaco && window.monaco.editor)
1808
1805
  return Ge(window.monaco), e.resolve(window.monaco), ye(je);
1809
- ji(Ti, Si)(ki);
1806
+ wi(Ii, ki)(Ri);
1810
1807
  }
1811
1808
  return ye(je);
1812
1809
  }
1813
- function Ti(e) {
1810
+ function Ii(e) {
1814
1811
  return document.body.appendChild(e);
1815
1812
  }
1816
- function Ii(e) {
1813
+ function Si(e) {
1817
1814
  var i = document.createElement("script");
1818
1815
  return e && (i.src = e), i;
1819
1816
  }
1820
- function Si(e) {
1817
+ function ki(e) {
1821
1818
  var i = se(function(n) {
1822
1819
  var s = n.config, o = n.reject;
1823
1820
  return {
1824
1821
  config: s,
1825
1822
  reject: o
1826
1823
  };
1827
- }), r = Ii("".concat(i.config.paths.vs, "/loader.js"));
1824
+ }), r = Si("".concat(i.config.paths.vs, "/loader.js"));
1828
1825
  return r.onload = function() {
1829
1826
  return e();
1830
1827
  }, r.onerror = i.reject, r;
1831
1828
  }
1832
- function ki() {
1829
+ function Ri() {
1833
1830
  var e = se(function(r) {
1834
1831
  var n = r.config, s = r.resolve, o = r.reject;
1835
1832
  return {
@@ -1846,220 +1843,231 @@ function ki() {
1846
1843
  });
1847
1844
  }
1848
1845
  function Ge(e) {
1849
- se().monaco || ge({
1846
+ se().monaco || xe({
1850
1847
  monaco: e
1851
1848
  });
1852
1849
  }
1853
- function Ri() {
1850
+ function Ai() {
1854
1851
  return se(function(e) {
1855
1852
  var i = e.monaco;
1856
1853
  return i;
1857
1854
  });
1858
1855
  }
1859
1856
  var je = new Promise(function(e, i) {
1860
- return ge({
1857
+ return xe({
1861
1858
  resolve: e,
1862
1859
  reject: i
1863
1860
  });
1864
1861
  }), Ke = {
1865
- config: Ci,
1866
- init: Oi,
1867
- __getMonacoInstance: Ri
1868
- }, Ai = { wrapper: { display: "flex", position: "relative", textAlign: "initial" }, fullWidth: { width: "100%" }, hide: { display: "none" } }, we = Ai, Pi = { container: { display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center" } }, Mi = Pi;
1869
- function Fi({ children: e }) {
1870
- return c.createElement("div", { style: Mi.container }, e);
1871
- }
1872
- var _i = Fi, Di = _i;
1873
- function qi({ width: e, height: i, isEditorReady: r, loading: n, _ref: s, className: o, wrapperProps: u }) {
1874
- return c.createElement("section", { style: { ...we.wrapper, width: e, height: i }, ...u }, !r && c.createElement(Di, null, n), c.createElement("div", { ref: s, style: { ...we.fullWidth, ...!r && we.hide }, className: o }));
1875
- }
1876
- var Li = qi, Xe = Ce(Li);
1877
- function $i(e) {
1862
+ config: Oi,
1863
+ init: Ti,
1864
+ __getMonacoInstance: Ai
1865
+ }, Pi = { wrapper: { display: "flex", position: "relative", textAlign: "initial" }, fullWidth: { width: "100%" }, hide: { display: "none" } }, we = Pi, Mi = { container: { display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center" } }, Fi = Mi;
1866
+ function _i({ children: e }) {
1867
+ return l.createElement("div", { style: Fi.container }, e);
1868
+ }
1869
+ var Di = _i, qi = Di;
1870
+ function Li({ width: e, height: i, isEditorReady: r, loading: n, _ref: s, className: o, wrapperProps: d }) {
1871
+ return l.createElement("section", { style: { ...we.wrapper, width: e, height: i }, ...d }, !r && l.createElement(qi, null, n), l.createElement("div", { ref: s, style: { ...we.fullWidth, ...!r && we.hide }, className: o }));
1872
+ }
1873
+ var $i = Li, Xe = Ce($i);
1874
+ function Ui(e) {
1878
1875
  J(e, []);
1879
1876
  }
1880
- var Qe = $i;
1881
- function Ui(e, i, r = !0) {
1882
- let n = $(!0);
1877
+ var Qe = Ui;
1878
+ function zi(e, i, r = !0) {
1879
+ let n = U(!0);
1883
1880
  J(n.current || !r ? () => {
1884
1881
  n.current = !1;
1885
1882
  } : e, i);
1886
1883
  }
1887
- var W = Ui;
1884
+ var W = zi;
1888
1885
  function ie() {
1889
1886
  }
1890
1887
  function Q(e, i, r, n) {
1891
- return zi(e, n) || Wi(e, i, r, n);
1888
+ return Wi(e, n) || Vi(e, i, r, n);
1892
1889
  }
1893
- function zi(e, i) {
1890
+ function Wi(e, i) {
1894
1891
  return e.editor.getModel(Ze(e, i));
1895
1892
  }
1896
- function Wi(e, i, r, n) {
1893
+ function Vi(e, i, r, n) {
1897
1894
  return e.editor.createModel(i, r, n ? Ze(e, n) : void 0);
1898
1895
  }
1899
1896
  function Ze(e, i) {
1900
1897
  return e.Uri.parse(i);
1901
1898
  }
1902
- function Vi({ original: e, modified: i, language: r, originalLanguage: n, modifiedLanguage: s, originalModelPath: o, modifiedModelPath: u, keepCurrentOriginalModel: a = !1, keepCurrentModifiedModel: d = !1, theme: f = "light", loading: b = "Loading...", options: g = {}, height: R = "100%", width: I = "100%", className: P, wrapperProps: y = {}, beforeMount: S = ie, onMount: F = ie }) {
1903
- let [N, k] = ue(!1), [T, m] = ue(!0), h = $(null), j = $(null), q = $(null), C = $(F), O = $(S), _ = $(!1);
1899
+ function Hi({ original: e, modified: i, language: r, originalLanguage: n, modifiedLanguage: s, originalModelPath: o, modifiedModelPath: d, keepCurrentOriginalModel: m = !1, keepCurrentModifiedModel: c = !1, theme: u = "light", loading: h = "Loading...", options: g = {}, height: S = "100%", width: q = "100%", className: _, wrapperProps: j = {}, beforeMount: k = ie, onMount: R = ie }) {
1900
+ let [w, A] = ue(!1), [T, x] = ue(!0), b = U(null), f = U(null), O = U(null), E = U(R), I = U(k), P = U(!1);
1904
1901
  Qe(() => {
1905
- let w = Ke.init();
1906
- return w.then((M) => (j.current = M) && m(!1)).catch((M) => M?.type !== "cancelation" && console.error("Monaco initialization: error:", M)), () => h.current ? A() : w.cancel();
1902
+ let N = Ke.init();
1903
+ return N.then((F) => (f.current = F) && x(!1)).catch((F) => F?.type !== "cancelation" && console.error("Monaco initialization: error:", F)), () => b.current ? M() : N.cancel();
1907
1904
  }), W(() => {
1908
- if (h.current && j.current) {
1909
- let w = h.current.getOriginalEditor(), M = Q(j.current, e || "", n || r || "text", o || "");
1910
- M !== w.getModel() && w.setModel(M);
1905
+ if (b.current && f.current) {
1906
+ let N = b.current.getOriginalEditor(), F = Q(f.current, e || "", n || r || "text", o || "");
1907
+ F !== N.getModel() && N.setModel(F);
1911
1908
  }
1912
- }, [o], N), W(() => {
1913
- if (h.current && j.current) {
1914
- let w = h.current.getModifiedEditor(), M = Q(j.current, i || "", s || r || "text", u || "");
1915
- M !== w.getModel() && w.setModel(M);
1909
+ }, [o], w), W(() => {
1910
+ if (b.current && f.current) {
1911
+ let N = b.current.getModifiedEditor(), F = Q(f.current, i || "", s || r || "text", d || "");
1912
+ F !== N.getModel() && N.setModel(F);
1916
1913
  }
1917
- }, [u], N), W(() => {
1918
- let w = h.current.getModifiedEditor();
1919
- w.getOption(j.current.editor.EditorOption.readOnly) ? w.setValue(i || "") : i !== w.getValue() && (w.executeEdits("", [{ range: w.getModel().getFullModelRange(), text: i || "", forceMoveMarkers: !0 }]), w.pushUndoStop());
1920
- }, [i], N), W(() => {
1921
- h.current?.getModel()?.original.setValue(e || "");
1922
- }, [e], N), W(() => {
1923
- let { original: w, modified: M } = h.current.getModel();
1924
- j.current.editor.setModelLanguage(w, n || r || "text"), j.current.editor.setModelLanguage(M, s || r || "text");
1925
- }, [r, n, s], N), W(() => {
1926
- j.current?.editor.setTheme(f);
1927
- }, [f], N), W(() => {
1928
- h.current?.updateOptions(g);
1929
- }, [g], N);
1914
+ }, [d], w), W(() => {
1915
+ let N = b.current.getModifiedEditor();
1916
+ N.getOption(f.current.editor.EditorOption.readOnly) ? N.setValue(i || "") : i !== N.getValue() && (N.executeEdits("", [{ range: N.getModel().getFullModelRange(), text: i || "", forceMoveMarkers: !0 }]), N.pushUndoStop());
1917
+ }, [i], w), W(() => {
1918
+ b.current?.getModel()?.original.setValue(e || "");
1919
+ }, [e], w), W(() => {
1920
+ let { original: N, modified: F } = b.current.getModel();
1921
+ f.current.editor.setModelLanguage(N, n || r || "text"), f.current.editor.setModelLanguage(F, s || r || "text");
1922
+ }, [r, n, s], w), W(() => {
1923
+ f.current?.editor.setTheme(u);
1924
+ }, [u], w), W(() => {
1925
+ b.current?.updateOptions(g);
1926
+ }, [g], w);
1930
1927
  let p = de(() => {
1931
- if (!j.current) return;
1932
- O.current(j.current);
1933
- let w = Q(j.current, e || "", n || r || "text", o || ""), M = Q(j.current, i || "", s || r || "text", u || "");
1934
- h.current?.setModel({ original: w, modified: M });
1935
- }, [r, i, s, e, n, o, u]), E = de(() => {
1936
- !_.current && q.current && (h.current = j.current.editor.createDiffEditor(q.current, { automaticLayout: !0, ...g }), p(), j.current?.editor.setTheme(f), k(!0), _.current = !0);
1937
- }, [g, f, p]);
1928
+ if (!f.current) return;
1929
+ I.current(f.current);
1930
+ let N = Q(f.current, e || "", n || r || "text", o || ""), F = Q(f.current, i || "", s || r || "text", d || "");
1931
+ b.current?.setModel({ original: N, modified: F });
1932
+ }, [r, i, s, e, n, o, d]), C = de(() => {
1933
+ !P.current && O.current && (b.current = f.current.editor.createDiffEditor(O.current, { automaticLayout: !0, ...g }), p(), f.current?.editor.setTheme(u), A(!0), P.current = !0);
1934
+ }, [g, u, p]);
1938
1935
  J(() => {
1939
- N && C.current(h.current, j.current);
1940
- }, [N]), J(() => {
1941
- !T && !N && E();
1942
- }, [T, N, E]);
1943
- function A() {
1944
- let w = h.current?.getModel();
1945
- a || w?.original?.dispose(), d || w?.modified?.dispose(), h.current?.dispose();
1936
+ w && E.current(b.current, f.current);
1937
+ }, [w]), J(() => {
1938
+ !T && !w && C();
1939
+ }, [T, w, C]);
1940
+ function M() {
1941
+ let N = b.current?.getModel();
1942
+ m || N?.original?.dispose(), c || N?.modified?.dispose(), b.current?.dispose();
1946
1943
  }
1947
- return c.createElement(Xe, { width: I, height: R, isEditorReady: N, loading: b, _ref: q, className: P, wrapperProps: y });
1944
+ return l.createElement(Xe, { width: q, height: S, isEditorReady: w, loading: h, _ref: O, className: _, wrapperProps: j });
1948
1945
  }
1949
- var Hi = Vi;
1950
- Ce(Hi);
1951
- function Yi(e) {
1952
- let i = $();
1946
+ var Yi = Hi;
1947
+ Ce(Yi);
1948
+ function Ji(e) {
1949
+ let i = U();
1953
1950
  return J(() => {
1954
1951
  i.current = e;
1955
1952
  }, [e]), i.current;
1956
1953
  }
1957
- var Ji = Yi, me = /* @__PURE__ */ new Map();
1958
- function Bi({ defaultValue: e, defaultLanguage: i, defaultPath: r, value: n, language: s, path: o, theme: u = "light", line: a, loading: d = "Loading...", options: f = {}, overrideServices: b = {}, saveViewState: g = !0, keepCurrentModel: R = !1, width: I = "100%", height: P = "100%", className: y, wrapperProps: S = {}, beforeMount: F = ie, onMount: N = ie, onChange: k, onValidate: T = ie }) {
1959
- let [m, h] = ue(!1), [j, q] = ue(!0), C = $(null), O = $(null), _ = $(null), p = $(N), E = $(F), A = $(), w = $(n), M = Ji(o), z = $(!1), U = $(!1);
1954
+ var Bi = Ji, ce = /* @__PURE__ */ new Map();
1955
+ function Gi({ defaultValue: e, defaultLanguage: i, defaultPath: r, value: n, language: s, path: o, theme: d = "light", line: m, loading: c = "Loading...", options: u = {}, overrideServices: h = {}, saveViewState: g = !0, keepCurrentModel: S = !1, width: q = "100%", height: _ = "100%", className: j, wrapperProps: k = {}, beforeMount: R = ie, onMount: w = ie, onChange: A, onValidate: T = ie }) {
1956
+ let [x, b] = ue(!1), [f, O] = ue(!0), E = U(null), I = U(null), P = U(null), p = U(w), C = U(R), M = U(), N = U(n), F = Bi(o), $ = U(!1), z = U(!1);
1960
1957
  Qe(() => {
1961
- let l = Ke.init();
1962
- return l.then((x) => (C.current = x) && q(!1)).catch((x) => x?.type !== "cancelation" && console.error("Monaco initialization: error:", x)), () => O.current ? Y() : l.cancel();
1958
+ let a = Ke.init();
1959
+ return a.then((v) => (E.current = v) && O(!1)).catch((v) => v?.type !== "cancelation" && console.error("Monaco initialization: error:", v)), () => I.current ? Y() : a.cancel();
1963
1960
  }), W(() => {
1964
- let l = Q(C.current, e || n || "", i || s || "", o || r || "");
1965
- l !== O.current?.getModel() && (g && me.set(M, O.current?.saveViewState()), O.current?.setModel(l), g && O.current?.restoreViewState(me.get(o)));
1966
- }, [o], m), W(() => {
1967
- O.current?.updateOptions(f);
1968
- }, [f], m), W(() => {
1969
- !O.current || n === void 0 || (O.current.getOption(C.current.editor.EditorOption.readOnly) ? O.current.setValue(n) : n !== O.current.getValue() && (U.current = !0, O.current.executeEdits("", [{ range: O.current.getModel().getFullModelRange(), text: n, forceMoveMarkers: !0 }]), O.current.pushUndoStop(), U.current = !1));
1970
- }, [n], m), W(() => {
1971
- let l = O.current?.getModel();
1972
- l && s && C.current?.editor.setModelLanguage(l, s);
1973
- }, [s], m), W(() => {
1974
- a !== void 0 && O.current?.revealLine(a);
1975
- }, [a], m), W(() => {
1976
- C.current?.editor.setTheme(u);
1977
- }, [u], m);
1961
+ let a = Q(E.current, e || n || "", i || s || "", o || r || "");
1962
+ a !== I.current?.getModel() && (g && ce.set(F, I.current?.saveViewState()), I.current?.setModel(a), g && I.current?.restoreViewState(ce.get(o)));
1963
+ }, [o], x), W(() => {
1964
+ I.current?.updateOptions(u);
1965
+ }, [u], x), W(() => {
1966
+ !I.current || n === void 0 || (I.current.getOption(E.current.editor.EditorOption.readOnly) ? I.current.setValue(n) : n !== I.current.getValue() && (z.current = !0, I.current.executeEdits("", [{ range: I.current.getModel().getFullModelRange(), text: n, forceMoveMarkers: !0 }]), I.current.pushUndoStop(), z.current = !1));
1967
+ }, [n], x), W(() => {
1968
+ let a = I.current?.getModel();
1969
+ a && s && E.current?.editor.setModelLanguage(a, s);
1970
+ }, [s], x), W(() => {
1971
+ m !== void 0 && I.current?.revealLine(m);
1972
+ }, [m], x), W(() => {
1973
+ E.current?.editor.setTheme(d);
1974
+ }, [d], x);
1978
1975
  let H = de(() => {
1979
- if (!(!_.current || !C.current) && !z.current) {
1980
- E.current(C.current);
1981
- let l = o || r, x = Q(C.current, n || e || "", i || s || "", l || "");
1982
- O.current = C.current?.editor.create(_.current, { model: x, automaticLayout: !0, ...f }, b), g && O.current.restoreViewState(me.get(l)), C.current.editor.setTheme(u), a !== void 0 && O.current.revealLine(a), h(!0), z.current = !0;
1976
+ if (!(!P.current || !E.current) && !$.current) {
1977
+ C.current(E.current);
1978
+ let a = o || r, v = Q(E.current, n || e || "", i || s || "", a || "");
1979
+ I.current = E.current?.editor.create(P.current, { model: v, automaticLayout: !0, ...u }, h), g && I.current.restoreViewState(ce.get(a)), E.current.editor.setTheme(d), m !== void 0 && I.current.revealLine(m), b(!0), $.current = !0;
1983
1980
  }
1984
- }, [e, i, r, n, s, o, f, b, g, u, a]);
1981
+ }, [e, i, r, n, s, o, u, h, g, d, m]);
1985
1982
  J(() => {
1986
- m && p.current(O.current, C.current);
1987
- }, [m]), J(() => {
1988
- !j && !m && H();
1989
- }, [j, m, H]), w.current = n, J(() => {
1990
- m && k && (A.current?.dispose(), A.current = O.current?.onDidChangeModelContent((l) => {
1991
- U.current || k(O.current.getValue(), l);
1983
+ x && p.current(I.current, E.current);
1984
+ }, [x]), J(() => {
1985
+ !f && !x && H();
1986
+ }, [f, x, H]), N.current = n, J(() => {
1987
+ x && A && (M.current?.dispose(), M.current = I.current?.onDidChangeModelContent((a) => {
1988
+ z.current || A(I.current.getValue(), a);
1992
1989
  }));
1993
- }, [m, k]), J(() => {
1994
- if (m) {
1995
- let l = C.current.editor.onDidChangeMarkers((x) => {
1996
- let v = O.current.getModel()?.uri;
1997
- if (v && x.find((D) => D.path === v.path)) {
1998
- let D = C.current.editor.getModelMarkers({ resource: v });
1990
+ }, [x, A]), J(() => {
1991
+ if (x) {
1992
+ let a = E.current.editor.onDidChangeMarkers((v) => {
1993
+ let y = I.current.getModel()?.uri;
1994
+ if (y && v.find((D) => D.path === y.path)) {
1995
+ let D = E.current.editor.getModelMarkers({ resource: y });
1999
1996
  T?.(D);
2000
1997
  }
2001
1998
  });
2002
1999
  return () => {
2003
- l?.dispose();
2000
+ a?.dispose();
2004
2001
  };
2005
2002
  }
2006
2003
  return () => {
2007
2004
  };
2008
- }, [m, T]);
2005
+ }, [x, T]);
2009
2006
  function Y() {
2010
- A.current?.dispose(), R ? g && me.set(o, O.current.saveViewState()) : O.current.getModel()?.dispose(), O.current.dispose();
2007
+ M.current?.dispose(), S ? g && ce.set(o, I.current.saveViewState()) : I.current.getModel()?.dispose(), I.current.dispose();
2011
2008
  }
2012
- return c.createElement(Xe, { width: I, height: P, isEditorReady: m, loading: d, _ref: _, className: y, wrapperProps: S });
2013
- }
2014
- var Gi = Bi, Ki = Ce(Gi), Xi = Ki;
2015
- function Qi() {
2016
- const e = $e(), i = V((m) => m.replaceAll), r = B(), { showAlert: n } = Ue(), s = c.useRef(null), o = c.useRef(""), u = c.useRef(null), a = c.useRef(!1), [d, f] = c.useState("yaml"), [b, g] = c.useState(640), [R, I] = c.useState(() => {
2009
+ return l.createElement(Xe, { width: q, height: _, isEditorReady: x, loading: c, _ref: P, className: j, wrapperProps: k });
2010
+ }
2011
+ var Ki = Gi, Xi = Ce(Ki), Qi = Xi;
2012
+ function Zi() {
2013
+ const e = $e(), i = V((f) => f.replaceAll), r = B(), { showAlert: n } = Ue(), s = l.useRef(null), o = l.useRef(""), d = l.useRef(null), m = l.useRef(!1), [c, u] = l.useState("yaml"), [h, g] = l.useState(!1);
2014
+ l.useEffect(() => {
2015
+ const f = document.querySelector(".qb-editor-root");
2016
+ if (!f) return;
2017
+ const O = () => {
2018
+ g(f.classList.contains("dark"));
2019
+ };
2020
+ O();
2021
+ const E = new MutationObserver(O);
2022
+ return E.observe(f, { attributes: !0, attributeFilter: ["class"] }), () => E.disconnect();
2023
+ }, []);
2024
+ const [S, q] = l.useState(640), [_, j] = l.useState(() => {
2017
2025
  try {
2018
- return le.dump(e, { indent: 2, lineWidth: -1 });
2026
+ return ae.dump(e, { indent: 2, lineWidth: -1 });
2019
2027
  } catch {
2020
2028
  return "";
2021
2029
  }
2022
- }), [P, y] = c.useState("");
2023
- c.useEffect(() => {
2030
+ }), [k, R] = l.useState("");
2031
+ l.useEffect(() => {
2024
2032
  r.setCodeEditorHasError(!1);
2025
2033
  }, []);
2026
- const S = c.useCallback((m) => d === "json" ? JSON.parse(m) : le.load(m), [d]), F = c.useCallback((m) => d === "json" ? JSON.stringify(m, null, 2) : le.dump(m, { indent: 2, lineWidth: -1 }), [d]);
2027
- c.useEffect(() => {
2028
- const m = () => {
2034
+ const w = l.useCallback((f) => c === "json" ? JSON.parse(f) : ae.load(f), [c]), A = l.useCallback((f) => c === "json" ? JSON.stringify(f, null, 2) : ae.dump(f, { indent: 2, lineWidth: -1 }), [c]);
2035
+ l.useEffect(() => {
2036
+ const f = () => {
2029
2037
  if (s.current) {
2030
- const h = s.current.getBoundingClientRect().top, j = window.innerHeight - h - 20;
2031
- g(Math.max(400, j));
2038
+ const O = s.current.getBoundingClientRect().top, E = window.innerHeight - O - 20;
2039
+ q(Math.max(400, E));
2032
2040
  }
2033
2041
  };
2034
- return m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
2035
- }, []), c.useEffect(() => {
2036
- if (!a.current)
2042
+ return f(), window.addEventListener("resize", f), () => window.removeEventListener("resize", f);
2043
+ }, []), l.useEffect(() => {
2044
+ if (!m.current)
2037
2045
  try {
2038
- const m = F(e);
2039
- I(m), o.current = m, y(""), r.setCodeEditorHasError(!1);
2040
- } catch (m) {
2041
- y(`Failed to serialize: ${m.message}`), r.setCodeEditorHasError(!0);
2046
+ const f = A(e);
2047
+ j(f), o.current = f, R(""), r.setCodeEditorHasError(!1);
2048
+ } catch (f) {
2049
+ R(`Failed to serialize: ${f.message}`), r.setCodeEditorHasError(!0);
2042
2050
  }
2043
- }, [e, F, r]);
2044
- const N = (m) => {
2045
- I(m || ""), o.current = m || "", a.current = !0;
2051
+ }, [e, A, r]);
2052
+ const T = (f) => {
2053
+ j(f || ""), o.current = f || "", m.current = !0;
2046
2054
  try {
2047
- const h = S(m || "{}");
2048
- if (!h || typeof h != "object")
2055
+ const O = w(f || "{}");
2056
+ if (!O || typeof O != "object")
2049
2057
  throw new Error("Invalid form data: must be an object");
2050
- y(""), r.setCodeEditorHasError(!1);
2051
- } catch (h) {
2052
- const j = `Invalid ${d.toUpperCase()}: ${h.message}`;
2053
- y(j), r.setCodeEditorHasError(!0);
2058
+ R(""), r.setCodeEditorHasError(!1);
2059
+ } catch (O) {
2060
+ const E = `Invalid ${c.toUpperCase()}: ${O.message}`;
2061
+ R(E), r.setCodeEditorHasError(!0);
2054
2062
  }
2055
- }, k = (m) => {
2056
- u.current = m, m.onDidPaste((h) => {
2057
- const j = R, q = m.getModel().getValue();
2063
+ }, x = (f) => {
2064
+ d.current = f, f.onDidPaste((O) => {
2065
+ const E = _, I = f.getModel().getValue();
2058
2066
  try {
2059
- const C = S(q);
2060
- if (C && typeof C == "object") {
2061
- const { schemaType: O } = fe(C);
2062
- O === "surveyjs" && n(
2067
+ const P = w(I);
2068
+ if (P && typeof P == "object") {
2069
+ const { schemaType: p } = fe(P);
2070
+ p === "surveyjs" && n(
2063
2071
  `This SurveyJS schema will be converted to MIE Forms format.
2064
2072
 
2065
2073
  Do you want to proceed with the conversion?`,
@@ -2068,20 +2076,20 @@ Do you want to proceed with the conversion?`,
2068
2076
  confirmText: "Yes, Convert",
2069
2077
  cancelText: "No, Cancel Paste",
2070
2078
  onConfirm: () => {
2071
- const { fields: _, conversionReport: p } = he(C, O), E = {
2072
- schemaType: C.schemaType || ve,
2073
- ...p?.surveyMetadata || {},
2074
- fields: _
2079
+ const { fields: C, conversionReport: M } = pe(P, p), N = {
2080
+ schemaType: P.schemaType || ve,
2081
+ ...M?.surveyMetadata || {},
2082
+ fields: C
2075
2083
  };
2076
- i(E);
2077
- const A = F(E);
2078
- I(A), o.current = A, m.setValue(A), y(""), a.current = !1, p && (r.setConversionReport(p), setTimeout(() => {
2079
- const w = p?.unsupportedFields?.length || 0;
2084
+ i(N);
2085
+ const F = A(N);
2086
+ j(F), o.current = F, f.setValue(F), R(""), m.current = !1, M && (r.setConversionReport(M), setTimeout(() => {
2087
+ const $ = M?.unsupportedFields?.length || 0;
2080
2088
  n(
2081
2089
  `This schema has been converted to MIE Forms format.
2082
2090
 
2083
- Converted: ${p?.convertedFields || 0} field(s)
2084
- Unsupported: ${w} field(s)${w > 0 ? " ⚠️" : ""}
2091
+ Converted: ${M?.convertedFields || 0} field(s)
2092
+ Unsupported: ${$} field(s)${$ > 0 ? " ⚠️" : ""}
2085
2093
 
2086
2094
  Please use MIE Forms schema inside of code editor for the best experience in the future.`,
2087
2095
  { title: "ℹ️ SurveyJS Schema Detected" }
@@ -2089,7 +2097,7 @@ Please use MIE Forms schema inside of code editor for the best experience in the
2089
2097
  }, 100));
2090
2098
  },
2091
2099
  onCancel: () => {
2092
- m.setValue(j), I(j), o.current = j;
2100
+ f.setValue(E), j(E), o.current = E;
2093
2101
  }
2094
2102
  }
2095
2103
  );
@@ -2097,65 +2105,65 @@ Please use MIE Forms schema inside of code editor for the best experience in the
2097
2105
  } catch {
2098
2106
  }
2099
2107
  });
2100
- }, T = (m) => {
2108
+ }, b = (f) => {
2101
2109
  try {
2102
- const h = S(R), j = m === "json" ? JSON.stringify(h, null, 2) : le.dump(h, { indent: 2, lineWidth: -1 });
2103
- I(j), o.current = j, f(m), y(""), r.setCodeEditorHasError(!1);
2104
- } catch (h) {
2105
- y(`Cannot convert: ${h.message}`), r.setCodeEditorHasError(!0);
2110
+ const O = w(_), E = f === "json" ? JSON.stringify(O, null, 2) : ae.dump(O, { indent: 2, lineWidth: -1 });
2111
+ j(E), o.current = E, u(f), R(""), r.setCodeEditorHasError(!1);
2112
+ } catch (O) {
2113
+ R(`Cannot convert: ${O.message}`), r.setCodeEditorHasError(!0);
2106
2114
  }
2107
2115
  };
2108
- return c.useEffect(() => () => {
2109
- const m = o.current?.trim();
2110
- if (!m) {
2111
- i({ schemaType: ve, fields: [] }), a.current = !1;
2116
+ return l.useEffect(() => () => {
2117
+ const f = o.current?.trim();
2118
+ if (!f) {
2119
+ i({ schemaType: ve, fields: [] }), m.current = !1;
2112
2120
  return;
2113
2121
  }
2114
2122
  try {
2115
- const h = S(m);
2116
- if (!h || typeof h != "object" || JSON.stringify(e) === JSON.stringify(h)) return;
2117
- const { schemaType: j } = fe(h), { fields: q, conversionReport: C } = he(h, j), O = {
2118
- schemaType: h.schemaType || ve,
2119
- ...C?.surveyMetadata || {},
2120
- fields: q
2123
+ const O = w(f);
2124
+ if (!O || typeof O != "object" || JSON.stringify(e) === JSON.stringify(O)) return;
2125
+ const { schemaType: E } = fe(O), { fields: I, conversionReport: P } = pe(O, E), p = {
2126
+ schemaType: O.schemaType || ve,
2127
+ ...P?.surveyMetadata || {},
2128
+ fields: I
2121
2129
  };
2122
- C && r.setConversionReport(C), i(O), r.setCodeEditorHasError(!1), a.current = !1;
2130
+ P && r.setConversionReport(P), i(p), r.setCodeEditorHasError(!1), m.current = !1;
2123
2131
  } catch {
2124
2132
  }
2125
- }, [S, i, r, e]), /* @__PURE__ */ t.jsxs("div", { ref: s, className: "code-editor-container mie:flex mie:flex-col mie:bg-gray-50 mie:max-w-7xl mie:w-full", style: { height: `${b}px` }, children: [
2126
- /* @__PURE__ */ t.jsxs("div", { className: "code-editor-header mie:flex mie:items-center mie:justify-between mie:gap-3 mie:p-4 mie:bg-white mie:border-b mie:border-black/10", children: [
2127
- /* @__PURE__ */ t.jsx("div", { className: "mie:flex mie:items-center mie:gap-2", children: /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:gap-1 mie:rounded-lg mie:border mie:border-black/10 mie:bg-black/5 mie:p-1", children: [
2133
+ }, [w, i, r, e]), /* @__PURE__ */ t.jsxs("div", { ref: s, className: "code-editor-container mie:flex mie:flex-col mie:bg-miebackground mie:max-w-7xl mie:w-full", style: { height: `${S}px` }, children: [
2134
+ /* @__PURE__ */ t.jsxs("div", { className: "code-editor-header mie:flex mie:items-center mie:justify-between mie:gap-3 mie:p-4 mie:bg-miesurface mie:border-b mie:border-mieborder", children: [
2135
+ /* @__PURE__ */ t.jsx("div", { className: "mie:flex mie:items-center mie:gap-2", children: /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:gap-1 mie:rounded-lg mie:border mie:border-mieborder mie:bg-miebackground mie:p-1", children: [
2128
2136
  /* @__PURE__ */ t.jsx(
2129
2137
  "button",
2130
2138
  {
2131
- onClick: () => T("yaml"),
2132
- className: `mie:px-3 mie:py-1 mie:rounded-md mie:text-sm mie:font-medium mie:transition-colors ${d === "yaml" ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
2139
+ onClick: () => b("yaml"),
2140
+ className: `mie:px-3 mie:py-1 mie:rounded-md mie:text-sm mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${c === "yaml" ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
2133
2141
  children: "YAML"
2134
2142
  }
2135
2143
  ),
2136
2144
  /* @__PURE__ */ t.jsx(
2137
2145
  "button",
2138
2146
  {
2139
- onClick: () => T("json"),
2140
- className: `mie:px-3 mie:py-1 mie:rounded-md mie:text-sm mie:font-medium mie:transition-colors ${d === "json" ? "mie:bg-white mie:text-slate-900 mie:shadow-sm" : "mie:text-slate-600 mie:hover:text-slate-900"}`,
2147
+ onClick: () => b("json"),
2148
+ className: `mie:px-3 mie:py-1 mie:rounded-md mie:text-sm mie:font-medium mie:transition-colors mie:border-0 mie:outline-none mie:focus:outline-none ${c === "json" ? "mie:bg-mieprimary mie:text-mietextsecondary mie:shadow-sm" : "mie:bg-transparent mie:text-mietextmuted mie:hover:text-mietext mie:hover:bg-miesurface"}`,
2141
2149
  children: "JSON"
2142
2150
  }
2143
2151
  )
2144
2152
  ] }) }),
2145
2153
  /* @__PURE__ */ t.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2", children: [
2146
- /* @__PURE__ */ t.jsx("div", { className: "mie:text-xs mie:text-gray-500 mie:px-3 mie:py-1", children: "Auto-saves when switching tabs" }),
2147
- P && /* @__PURE__ */ t.jsx("div", { className: "mie:text-xs mie:text-red-600 mie:bg-red-50 mie:px-3 mie:py-1 mie:rounded-lg", children: P })
2154
+ /* @__PURE__ */ t.jsx("div", { className: "mie:text-xs mie:text-mietextmuted mie:px-3 mie:py-1", children: "Auto-saves when switching tabs" }),
2155
+ k && /* @__PURE__ */ t.jsx("div", { className: "mie:text-xs mie:text-miedanger mie:bg-miedanger/10 mie:px-3 mie:py-1 mie:rounded-lg", children: k })
2148
2156
  ] })
2149
2157
  ] }),
2150
2158
  /* @__PURE__ */ t.jsx("div", { className: "code-editor-content mie:flex-1 mie:overflow-hidden", children: /* @__PURE__ */ t.jsx(
2151
- Xi,
2159
+ Qi,
2152
2160
  {
2153
2161
  height: "100%",
2154
- language: d,
2155
- value: R,
2156
- onChange: N,
2157
- onMount: k,
2158
- theme: "light",
2162
+ language: c,
2163
+ value: _,
2164
+ onChange: T,
2165
+ onMount: x,
2166
+ theme: h ? "vs-dark" : "light",
2159
2167
  options: {
2160
2168
  minimap: { enabled: !1 },
2161
2169
  fontSize: 13,
@@ -2173,30 +2181,30 @@ Please use MIE Forms schema inside of code editor for the best experience in the
2173
2181
  ) })
2174
2182
  ] });
2175
2183
  }
2176
- function Zi({ selectedField: e }) {
2177
- const i = B(), [r, n] = c.useState(!1), s = i.state.isPreview, o = i.state.isCodeEditor, u = i.state.isEditModalOpen, a = i.state.panelResetKey, d = !s;
2178
- return /* @__PURE__ */ t.jsxs("div", { className: "layout-container mie:w-full mie:h-fit mie:rounded-lg mie:mt-2 mie:md:mt-4 mie:lg:mt-6", children: [
2179
- o ? /* @__PURE__ */ t.jsx("div", { className: "mie:border mie:border-gray-200 mie:rounded-lg", children: /* @__PURE__ */ t.jsx(Qi, {}) }) : /* @__PURE__ */ t.jsxs("div", { className: "layout-grid mie:flex mie:lg:gap-3 mie:h-full", children: [
2180
- d && /* @__PURE__ */ t.jsx("div", { className: "layout-tool-panel mie:hidden mie:lg:block mie:lg:w-72", children: /* @__PURE__ */ t.jsx(ke, {}) }),
2181
- /* @__PURE__ */ t.jsx("div", { className: "layout-main-content mie:flex-1 mie:min-w-0", children: /* @__PURE__ */ t.jsx($t, {}) }),
2182
- d && /* @__PURE__ */ t.jsx("div", { className: "layout-edit-panel mie:hidden mie:lg:block mie:lg:w-90 mie:md:w-80", children: /* @__PURE__ */ t.jsx(Pe, {}, a) }),
2183
- d && /* @__PURE__ */ t.jsx("div", { className: "layout-mobile-modal mie:lg:hidden", children: u && e && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
2184
+ function er({ selectedField: e }) {
2185
+ const i = B(), [r, n] = l.useState(!1), s = i.state.isPreview, o = i.state.isCodeEditor, d = i.state.isEditModalOpen, m = i.state.panelResetKey, c = !s;
2186
+ return /* @__PURE__ */ t.jsxs("div", { className: "layout-container mie:w-full mie:h-fit mie:rounded-lg mie:mt-3", children: [
2187
+ o ? /* @__PURE__ */ t.jsx("div", { className: "mie:border mie:border-mieborder mie:rounded-lg", children: /* @__PURE__ */ t.jsx(Zi, {}) }) : /* @__PURE__ */ t.jsxs("div", { className: "layout-grid mie:flex mie:lg:gap-3 mie:h-full", children: [
2188
+ c && /* @__PURE__ */ t.jsx("div", { className: "layout-tool-panel mie:hidden mie:lg:block mie:lg:w-72", children: /* @__PURE__ */ t.jsx(ke, {}) }),
2189
+ /* @__PURE__ */ t.jsx("div", { className: "layout-main-content mie:flex-1 mie:min-w-0", children: /* @__PURE__ */ t.jsx(Ut, {}) }),
2190
+ c && /* @__PURE__ */ t.jsx("div", { className: "layout-edit-panel mie:hidden mie:lg:block mie:lg:w-90 mie:md:w-80", children: /* @__PURE__ */ t.jsx(Pe, {}, m) }),
2191
+ c && /* @__PURE__ */ t.jsx("div", { className: "layout-mobile-modal mie:lg:hidden", children: d && e && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
2184
2192
  /* @__PURE__ */ t.jsx(
2185
2193
  "div",
2186
2194
  {
2187
- className: "mie:fixed mie:inset-0 mie:z-40 mie:bg-black/30 mie:lg:hidden",
2195
+ className: "mie:fixed mie:inset-0 mie:z-40 mie:bg-mieoverlay mie:lg:hidden",
2188
2196
  onClick: () => i.modal.set(!1)
2189
2197
  }
2190
2198
  ),
2191
- /* @__PURE__ */ t.jsx("div", { className: "mie:fixed mie:bottom-0 mie:left-0 mie:right-0 mie:z-50 mie:bg-white mie:rounded-t-2xl mie:shadow-2xl mie:max-h-[60vh] mie:overflow-y-auto mie:custom-scrollbar mie:lg:hidden", children: /* @__PURE__ */ t.jsx(Pe, { isMobileModal: !0 }, a) })
2199
+ /* @__PURE__ */ t.jsx("div", { className: "mie:fixed mie:bottom-0 mie:left-0 mie:right-0 mie:z-50 mie:bg-miesurface mie:rounded-t-2xl mie:shadow-2xl mie:max-h-[60vh] mie:overflow-y-auto mie:custom-scrollbar mie:lg:hidden", children: /* @__PURE__ */ t.jsx(Pe, { isMobileModal: !0 }, m) })
2192
2200
  ] }) })
2193
2201
  ] }),
2194
- d && !o && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
2202
+ c && !o && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
2195
2203
  /* @__PURE__ */ t.jsx(
2196
2204
  "button",
2197
2205
  {
2198
2206
  onClick: () => n(!r),
2199
- className: "mie:lg:hidden mie:fixed mie:bottom-5 mie:left-5 mie:z-40 mie:bg-blue-500 mie:hover:bg-blue-600 mie:text-white mie:rounded-full mie:w-12 mie:h-12 mie:flex mie:items-center mie:justify-center mie:shadow-lg mie:transition-all",
2207
+ className: "mie:lg:hidden mie:fixed mie:bottom-5 mie:left-5 mie:z-40 mie:bg-mieprimary mie:hover:bg-mieprimary/90 mie:text-miesurface mie:rounded-full mie:w-12 mie:h-12 mie:flex mie:items-center mie:justify-center mie:shadow-lg mie:transition-all",
2200
2208
  title: "Add field",
2201
2209
  children: /* @__PURE__ */ t.jsx("svg", { className: "mie:w-6 mie:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
2202
2210
  }
@@ -2205,73 +2213,74 @@ function Zi({ selectedField: e }) {
2205
2213
  /* @__PURE__ */ t.jsx(
2206
2214
  "div",
2207
2215
  {
2208
- className: "mie:fixed mie:inset-0 mie:z-40 mie:bg-black/30 mie:lg:hidden",
2216
+ className: "mie:fixed mie:inset-0 mie:z-40 mie:bg-mieoverlay mie:lg:hidden",
2209
2217
  onClick: () => n(!1)
2210
2218
  }
2211
2219
  ),
2212
- /* @__PURE__ */ t.jsx("div", { className: "mie:fixed mie:bottom-0 mie:left-0 mie:right-0 mie:z-50 mie:bg-white mie:rounded-t-2xl mie:shadow-2xl mie:max-h-[60vh] mie:overflow-y-auto mie:custom-scrollbar mie:lg:hidden", children: /* @__PURE__ */ t.jsx(ke, {}) })
2220
+ /* @__PURE__ */ t.jsx("div", { className: "mie:fixed mie:bottom-0 mie:left-0 mie:right-0 mie:z-50 mie:bg-miesurface mie:rounded-t-2xl mie:shadow-2xl mie:max-h-[60vh] mie:overflow-y-auto mie:custom-scrollbar mie:lg:hidden", children: /* @__PURE__ */ t.jsx(ke, {}) })
2213
2221
  ] })
2214
2222
  ] })
2215
2223
  ] });
2216
2224
  }
2217
- function er({
2225
+ function tr({
2218
2226
  initialFormData: e,
2219
2227
  schemaType: i,
2220
2228
  onChange: r,
2221
2229
  className: n = "",
2222
2230
  showHeader: s = !0,
2223
2231
  startInPreview: o = !1,
2224
- hideUnsupportedFields: u = !1
2232
+ hideUnsupportedFields: d = !1,
2233
+ theme: m = "light"
2225
2234
  }) {
2226
- const [a, d] = c.useState("json"), f = B(), b = c.useRef(!1), g = c.useContext(Oe);
2227
- c.useEffect(() => {
2228
- if (!(b.current || !g)) {
2235
+ const [c, u] = l.useState("json"), h = B(), g = l.useRef(!1), S = l.useContext(Oe);
2236
+ l.useEffect(() => {
2237
+ if (!(g.current || !S)) {
2229
2238
  if (e)
2230
2239
  try {
2231
- const { data: I, schemaType: P } = fe(e, i), y = he(I, P);
2232
- y.conversionReport && f.setConversionReport(y.conversionReport);
2233
- const S = {
2234
- schemaType: P === "surveyjs" ? "mieforms-v1.0" : I.schemaType || "mieforms-v1.0",
2235
- fields: y.fields || []
2240
+ const { data: j, schemaType: k } = fe(e, i), R = pe(j, k);
2241
+ R.conversionReport && h.setConversionReport(R.conversionReport);
2242
+ const w = {
2243
+ schemaType: k === "surveyjs" ? "mieforms-v1.0" : j.schemaType || "mieforms-v1.0",
2244
+ fields: R.fields || []
2236
2245
  };
2237
- if (P === "surveyjs" && y.conversionReport?.surveyMetadata)
2238
- Object.assign(S, y.conversionReport.surveyMetadata);
2239
- else if (P === "mieforms") {
2240
- const { fields: F, schemaType: N, ...k } = I;
2241
- Object.keys(k).length > 0 && Object.assign(S, k);
2246
+ if (k === "surveyjs" && R.conversionReport?.surveyMetadata)
2247
+ Object.assign(w, R.conversionReport.surveyMetadata);
2248
+ else if (k === "mieforms") {
2249
+ const { fields: A, schemaType: T, ...x } = j;
2250
+ Object.keys(x).length > 0 && Object.assign(w, x);
2242
2251
  }
2243
- Array.isArray(S.fields) && S.fields.length && g.getState().replaceAll(S);
2252
+ Array.isArray(w.fields) && w.fields.length && S.getState().replaceAll(w);
2244
2253
  } catch {
2245
- g.getState().replaceAll({ schemaType: "mieforms-v1.0", fields: [] });
2254
+ S.getState().replaceAll({ schemaType: "mieforms-v1.0", fields: [] });
2246
2255
  }
2247
- f.preview.set(!!o), b.current = !0;
2256
+ h.preview.set(!!o), g.current = !0;
2248
2257
  }
2249
- }, [e, i, o, f, g]), c.useEffect(() => {
2250
- f.setHideUnsupportedFields(u);
2251
- }, [u, f]), c.useEffect(() => {
2252
- if (!(!r || !g))
2253
- return g.subscribe((I) => {
2258
+ }, [e, i, o, h, S]), l.useEffect(() => {
2259
+ h.setHideUnsupportedFields(d);
2260
+ }, [d, h]), l.useEffect(() => {
2261
+ if (!(!r || !S))
2262
+ return S.subscribe((j) => {
2254
2263
  r({
2255
- schemaType: I.schemaType || "mieforms-v1.0",
2256
- ...I.schemaMetadata,
2257
- fields: I.order.map((P) => I.byId[P])
2264
+ schemaType: j.schemaType || "mieforms-v1.0",
2265
+ ...j.schemaMetadata,
2266
+ fields: j.order.map((k) => j.byId[k])
2258
2267
  });
2259
2268
  });
2260
- }, [r, g]);
2261
- const R = Ct(
2262
- g,
2263
- (I) => f.selectedFieldId.value ? I.byId[f.selectedFieldId.value] : null
2264
- );
2265
- return /* @__PURE__ */ t.jsxs("div", { className: `qb-editor-root editor-container mie:w-full mie:max-w-7xl mie:mx-auto mie:bg-gray-100 mie:font-titillium ${n}`, children: [
2266
- s && /* @__PURE__ */ t.jsx(St, { codeFormat: a, onCodeFormatChange: d }),
2267
- /* @__PURE__ */ t.jsx(Zi, { selectedField: R, codeFormat: a })
2268
- ] });
2269
- }
2270
- function sr(e) {
2271
- const i = c.useRef(jt()).current, r = c.useRef(wt()).current;
2272
- return /* @__PURE__ */ t.jsx(Et, { children: /* @__PURE__ */ t.jsx(Oe.Provider, { value: i, children: /* @__PURE__ */ t.jsx(Nt.Provider, { value: r, children: /* @__PURE__ */ t.jsx(er, { ...e }) }) }) });
2269
+ }, [r, S]);
2270
+ const q = Ot(
2271
+ S,
2272
+ (j) => h.selectedFieldId.value ? j.byId[h.selectedFieldId.value] : null
2273
+ ), _ = m === "dark";
2274
+ return /* @__PURE__ */ t.jsx("div", { className: `qb-editor-root editor-container mie:w-full mie:max-w-7xl mie:mx-auto mie:bg-miebackground mie:font-titillium ${_ ? "dark" : ""} ${n}`, children: /* @__PURE__ */ t.jsxs(Ct, { children: [
2275
+ s && /* @__PURE__ */ t.jsx(kt, { codeFormat: c, onCodeFormatChange: u }),
2276
+ /* @__PURE__ */ t.jsx(er, { selectedField: q, codeFormat: c })
2277
+ ] }) });
2278
+ }
2279
+ function or(e) {
2280
+ const i = l.useRef(wt()).current, r = l.useRef(Et()).current;
2281
+ return /* @__PURE__ */ t.jsx(Oe.Provider, { value: i, children: /* @__PURE__ */ t.jsx(Nt.Provider, { value: r, children: /* @__PURE__ */ t.jsx(tr, { ...e }) }) });
2273
2282
  }
2274
2283
  export {
2275
- sr as QuestionnaireEditor
2284
+ or as QuestionnaireEditor
2276
2285
  };
2277
2286
  //# sourceMappingURL=index.js.map