@photon-ai/pho-ui 1.4.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 (83) hide show
  1. package/dist/chunks/IconAlertCircleFilled-VxKU8TYK.js +11 -0
  2. package/dist/chunks/IconAlertCircleFilled-VxKU8TYK.js.map +1 -0
  3. package/dist/chunks/IconArrowUpRight-DGgKzQwV.js +14 -0
  4. package/dist/chunks/IconArrowUpRight-DGgKzQwV.js.map +1 -0
  5. package/dist/chunks/IconChevronLeft-CSWMKQ4C.js +11 -0
  6. package/dist/chunks/IconChevronLeft-CSWMKQ4C.js.map +1 -0
  7. package/dist/chunks/IconInfoCircle-L0zfhg7R.js +21 -0
  8. package/dist/chunks/IconInfoCircle-L0zfhg7R.js.map +1 -0
  9. package/dist/chunks/animated-height-DhNSac85.js +50 -0
  10. package/dist/chunks/animated-height-DhNSac85.js.map +1 -0
  11. package/dist/chunks/basic-page-D1zm81YS.js +481 -0
  12. package/dist/chunks/basic-page-D1zm81YS.js.map +1 -0
  13. package/dist/chunks/{close-button-B8gF5UNk.js → button-X5wsWvRa.js} +127 -147
  14. package/dist/chunks/button-X5wsWvRa.js.map +1 -0
  15. package/dist/chunks/close-button-xadxp0j8.js +29 -0
  16. package/dist/chunks/close-button-xadxp0j8.js.map +1 -0
  17. package/dist/chunks/combobox-rLdS6fl-.js +117 -0
  18. package/dist/chunks/combobox-rLdS6fl-.js.map +1 -0
  19. package/dist/chunks/dialog-Caze1vkf.js +252 -0
  20. package/dist/chunks/dialog-Caze1vkf.js.map +1 -0
  21. package/dist/chunks/error-DR6G2LmG.js +251 -0
  22. package/dist/chunks/error-DR6G2LmG.js.map +1 -0
  23. package/dist/chunks/{input-CxS7ndpb.js → input-D3XQcC4J.js} +29 -31
  24. package/dist/chunks/input-D3XQcC4J.js.map +1 -0
  25. package/dist/chunks/{menu-BSXds3Rt.js → menu-BC-9IP29.js} +39 -39
  26. package/dist/chunks/menu-BC-9IP29.js.map +1 -0
  27. package/dist/chunks/popover-EL1SE1kj.js +46 -0
  28. package/dist/chunks/popover-EL1SE1kj.js.map +1 -0
  29. package/dist/chunks/{sidebar-DGpEKxOn.js → sidebar-DDJC1MeD.js} +72 -64
  30. package/dist/chunks/sidebar-DDJC1MeD.js.map +1 -0
  31. package/dist/components/button.js +13 -12
  32. package/dist/components/combobox.js +2 -114
  33. package/dist/components/command.js +242 -0
  34. package/dist/components/command.js.map +1 -0
  35. package/dist/components/context-menu.js +1 -1
  36. package/dist/components/dialog.js +1 -1
  37. package/dist/components/drawer.js.map +1 -1
  38. package/dist/components/error.js +13 -0
  39. package/dist/components/input.js +1 -1
  40. package/dist/components/menu.js +1 -1
  41. package/dist/components/notification.js +27 -39
  42. package/dist/components/notification.js.map +1 -1
  43. package/dist/components/phone-input.js +17001 -0
  44. package/dist/components/phone-input.js.map +1 -0
  45. package/dist/components/popover.js +2 -43
  46. package/dist/components/toast.js.map +1 -1
  47. package/dist/index.js +62 -50
  48. package/dist/primitives.js +1 -1
  49. package/dist/sections/basic-page.js +1 -1
  50. package/dist/sections/sidebar.js +1 -1
  51. package/dist/src/components/command/command.d.ts +114 -0
  52. package/dist/src/components/command/index.d.ts +1 -0
  53. package/dist/src/components/dialog/dialog.d.ts +89 -1
  54. package/dist/src/components/drawer/drawer.d.ts +2 -2
  55. package/dist/src/components/error/error.d.ts +56 -0
  56. package/dist/src/components/error/index.d.ts +2 -0
  57. package/dist/src/components/error/problem.d.ts +80 -0
  58. package/dist/src/components/notification/notification.d.ts +1 -1
  59. package/dist/src/components/phone-input/country-alpha3.d.ts +250 -0
  60. package/dist/src/components/phone-input/country-search.d.ts +8 -0
  61. package/dist/src/components/phone-input/index.d.ts +1 -0
  62. package/dist/src/components/phone-input/phone-input.d.ts +47 -0
  63. package/dist/src/components/toast/toast.d.ts +1 -1
  64. package/dist/src/index.d.ts +1 -0
  65. package/dist/src/sections/basic-page/basic-page.d.ts +165 -45
  66. package/dist/src/sections/sidebar/sidebar.d.ts +8 -3
  67. package/dist/src/utils/animated-height.d.ts +13 -0
  68. package/package.json +16 -5
  69. package/src/styles/theme.css +27 -0
  70. package/dist/chunks/basic-page-4_GZOvRr.js +0 -255
  71. package/dist/chunks/basic-page-4_GZOvRr.js.map +0 -1
  72. package/dist/chunks/close-button-B8gF5UNk.js.map +0 -1
  73. package/dist/chunks/dialog-Ba0UUE5g.js +0 -155
  74. package/dist/chunks/dialog-Ba0UUE5g.js.map +0 -1
  75. package/dist/chunks/input-CxS7ndpb.js.map +0 -1
  76. package/dist/chunks/menu-BSXds3Rt.js.map +0 -1
  77. package/dist/chunks/sidebar-DGpEKxOn.js.map +0 -1
  78. package/dist/components/alert-dialog.js +0 -59
  79. package/dist/components/alert-dialog.js.map +0 -1
  80. package/dist/components/combobox.js.map +0 -1
  81. package/dist/components/popover.js.map +0 -1
  82. package/dist/src/components/alert-dialog/alert-dialog.d.ts +0 -41
  83. package/dist/src/components/alert-dialog/index.d.ts +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"notification.js","names":["__iconNode","__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertCircle.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconCircleCheck.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs","../../src/components/notification/notification.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M12 8v4\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M12 16h.01\", \"key\": \"svg-2\" }]];\nconst IconAlertCircle = createReactComponent(\"outline\", \"alert-circle\", \"AlertCircle\", __iconNode);\n\nexport { __iconNode, IconAlertCircle as default };\n//# sourceMappingURL=IconAlertCircle.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M9 12l2 2l4 -4\", \"key\": \"svg-1\" }]];\nconst IconCircleCheck = createReactComponent(\"outline\", \"circle-check\", \"CircleCheck\", __iconNode);\n\nexport { __iconNode, IconCircleCheck as default };\n//# sourceMappingURL=IconCircleCheck.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M12 9h.01\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M11 12h1v4h1\", \"key\": \"svg-2\" }]];\nconst IconInfoCircle = createReactComponent(\"outline\", \"info-circle\", \"InfoCircle\", __iconNode);\n\nexport { __iconNode, IconInfoCircle as default };\n//# sourceMappingURL=IconInfoCircle.mjs.map\n","import { type HTMLAttributes, type ReactNode, type Ref } from \"react\";\nimport {\n IconCircleCheck,\n IconInfoCircle,\n IconAlertCircle,\n IconX,\n type Icon,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE closed, semantic axis: `color`. It selects a status glyph *and* its\n * tint together — you never pick an icon and a color separately. This is the\n * `IconNotification` flavor from the app; the unused avatar/image variants of\n * the source family are intentionally dropped.\n * - The action row is a single reduced pair: a brand `confirmLabel` link beside\n * a gray dismiss link. It appears only when there's something to confirm.\n * - `onClose` is the only thing that renders the top-right close button — no\n * separate boolean flag to keep in sync.\n */\n\n/** Status color → icon tint. A bare status-tinted glyph, no badge surface. */\nexport const NOTIFICATION_COLORS = {\n brand: {\n classes: \"text-pho-brand\",\n description: \"Informational / product update (default)\",\n },\n gray: {\n classes: \"text-pho-secondary\",\n description: \"Neutral, low-stakes note\",\n },\n success: {\n classes: \"text-pho-success\",\n description: \"An action completed\",\n },\n warning: {\n classes: \"text-pho-warning\",\n description: \"Needs attention, not yet failed\",\n },\n error: {\n classes: \"text-pho-error\",\n description: \"Something went wrong\",\n },\n} satisfies VariantMap;\n\nexport type NotificationColor = keyof typeof NOTIFICATION_COLORS;\n\n/** Status color → glyph. Mirrors the source's `iconMap` semantics. */\nconst ICON_MAP = {\n brand: IconInfoCircle,\n gray: IconInfoCircle,\n success: IconCircleCheck,\n warning: IconAlertCircle,\n error: IconAlertCircle,\n} satisfies Record<NotificationColor, Icon>;\n\nexport interface NotificationProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"title\" | \"color\"\n> {\n /** Status color — selects the glyph and its tint. @default \"brand\" */\n color?: NotificationColor;\n /** Bold heading line. */\n title: ReactNode;\n /** Supporting line under the title. */\n description?: ReactNode;\n /** Confirm action label — renders a brand link paired with a dismiss link. */\n confirmLabel?: string;\n /** Called when the confirm link is clicked. */\n onConfirm?: () => void;\n /** Dismiss link label, shown beside the confirm link. @default \"Dismiss\" */\n dismissLabel?: string;\n /** Called on dismiss. Its presence also renders the top-right close button. */\n onClose?: () => void;\n /** Override the status glyph while keeping the color's tint. */\n icon?: Icon;\n className?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst LINK_CLASS =\n \"cursor-pointer text-base font-medium outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\";\n\n/**\n * Notification — the standalone status card ported from the app's\n * `IconNotification`: a status glyph, a title/description, an optional\n * confirm+dismiss link pair, and an optional close button. It is a *card*, not a\n * lifecycle: it owns its surface but nothing about timing or stacking.\n *\n * For a transient, auto-stacking toast, drop it inside pho-ui's Base UI\n * {@link Toast} — render it as the child of a `Toast.Root` whose own surface you\n * neutralize (`className=\"bg-transparent p-0 shadow-none ring-0\"`) so the\n * manager owns motion and swipe while this card owns the look. For a choice the\n * user must make, use `AlertDialog` instead.\n */\nexport function Notification({\n color = \"brand\",\n title,\n description,\n confirmLabel,\n onConfirm,\n dismissLabel = \"Dismiss\",\n onClose,\n icon,\n className,\n ref,\n ...props\n}: NotificationProps) {\n const Glyph = icon ?? ICON_MAP[color];\n const showActions = Boolean(confirmLabel);\n\n return (\n <div\n ref={ref}\n {...props}\n className={cn(\n // Floating layer: keeps its shadow elevation, hairline card edge.\n \"ring-pho-secondary bg-pho-primary shadow-pho-lg rounded-base relative flex w-full max-w-sm gap-4 p-4 ring-1 ring-inset\",\n className,\n )}\n >\n <Glyph\n aria-hidden=\"true\"\n className={cn(\n \"mt-0.5 size-5 shrink-0\",\n resolveVariant(NOTIFICATION_COLORS, color),\n )}\n />\n\n <div className=\"flex flex-1 flex-col gap-3 pr-6\">\n <div className=\"flex flex-col gap-1\">\n <p className=\"text-pho-primary text-base font-medium\">{title}</p>\n {description != null && description !== false && (\n <p className=\"text-pho-description text-base\">{description}</p>\n )}\n </div>\n\n {showActions && (\n <div className=\"flex gap-4\">\n <button\n type=\"button\"\n onClick={onConfirm}\n className={cn(\n LINK_CLASS,\n // brand text is monochrome now — underline carries the hover.\n \"text-pho-brand hover:underline\",\n )}\n >\n {confirmLabel}\n </button>\n <button\n type=\"button\"\n onClick={onClose}\n className={cn(\n LINK_CLASS,\n \"text-pho-secondary hover:text-pho-secondary-hover\",\n )}\n >\n {dismissLabel}\n </button>\n </div>\n )}\n </div>\n\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n aria-label=\"Dismiss\"\n className=\"text-pho-secondary hover:text-pho-secondary-hover hover:bg-pho-ghost-hover outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-sm transition focus-visible:outline-2 [&>svg]:size-4\"\n >\n <IconX aria-hidden=\"true\" />\n </button>\n )}\n </div>\n );\n}\n\nNotification.displayName = \"Notification\";\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}
1
+ {"version":3,"file":"notification.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertCircle.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconCircleCheck.mjs","../../src/components/notification/notification.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M12 8v4\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M12 16h.01\", \"key\": \"svg-2\" }]];\nconst IconAlertCircle = createReactComponent(\"outline\", \"alert-circle\", \"AlertCircle\", __iconNode);\n\nexport { __iconNode, IconAlertCircle as default };\n//# sourceMappingURL=IconAlertCircle.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M9 12l2 2l4 -4\", \"key\": \"svg-1\" }]];\nconst IconCircleCheck = createReactComponent(\"outline\", \"circle-check\", \"CircleCheck\", __iconNode);\n\nexport { __iconNode, IconCircleCheck as default };\n//# sourceMappingURL=IconCircleCheck.mjs.map\n","import { type HTMLAttributes, type ReactNode, type Ref } from \"react\";\nimport {\n IconCircleCheck,\n IconInfoCircle,\n IconAlertCircle,\n IconX,\n type Icon,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE closed, semantic axis: `color`. It selects a status glyph *and* its\n * tint together — you never pick an icon and a color separately. This is the\n * `IconNotification` flavor from the app; the unused avatar/image variants of\n * the source family are intentionally dropped.\n * - The action row is a single reduced pair: a brand `confirmLabel` link beside\n * a gray dismiss link. It appears only when there's something to confirm.\n * - `onClose` is the only thing that renders the top-right close button — no\n * separate boolean flag to keep in sync.\n */\n\n/** Status color → icon tint. A bare status-tinted glyph, no badge surface. */\nexport const NOTIFICATION_COLORS = {\n brand: {\n classes: \"text-pho-brand\",\n description: \"Informational / product update (default)\",\n },\n gray: {\n classes: \"text-pho-secondary\",\n description: \"Neutral, low-stakes note\",\n },\n success: {\n classes: \"text-pho-success\",\n description: \"An action completed\",\n },\n warning: {\n classes: \"text-pho-warning\",\n description: \"Needs attention, not yet failed\",\n },\n error: {\n classes: \"text-pho-error\",\n description: \"Something went wrong\",\n },\n} satisfies VariantMap;\n\nexport type NotificationColor = keyof typeof NOTIFICATION_COLORS;\n\n/** Status color → glyph. Mirrors the source's `iconMap` semantics. */\nconst ICON_MAP = {\n brand: IconInfoCircle,\n gray: IconInfoCircle,\n success: IconCircleCheck,\n warning: IconAlertCircle,\n error: IconAlertCircle,\n} satisfies Record<NotificationColor, Icon>;\n\nexport interface NotificationProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"title\" | \"color\"\n> {\n /** Status color — selects the glyph and its tint. @default \"brand\" */\n color?: NotificationColor;\n /** Bold heading line. */\n title: ReactNode;\n /** Supporting line under the title. */\n description?: ReactNode;\n /** Confirm action label — renders a brand link paired with a dismiss link. */\n confirmLabel?: string;\n /** Called when the confirm link is clicked. */\n onConfirm?: () => void;\n /** Dismiss link label, shown beside the confirm link. @default \"Dismiss\" */\n dismissLabel?: string;\n /** Called on dismiss. Its presence also renders the top-right close button. */\n onClose?: () => void;\n /** Override the status glyph while keeping the color's tint. */\n icon?: Icon;\n className?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst LINK_CLASS =\n \"cursor-pointer text-base font-medium outline-pho-brand transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2\";\n\n/**\n * Notification — the standalone status card ported from the app's\n * `IconNotification`: a status glyph, a title/description, an optional\n * confirm+dismiss link pair, and an optional close button. It is a *card*, not a\n * lifecycle: it owns its surface but nothing about timing or stacking.\n *\n * For a transient, auto-stacking toast, drop it inside pho-ui's Base UI\n * {@link Toast} — render it as the child of a `Toast.Root` whose own surface you\n * neutralize (`className=\"bg-transparent p-0 shadow-none ring-0\"`) so the\n * manager owns motion and swipe while this card owns the look. For a choice the\n * user must make, use `Dialog` instead.\n */\nexport function Notification({\n color = \"brand\",\n title,\n description,\n confirmLabel,\n onConfirm,\n dismissLabel = \"Dismiss\",\n onClose,\n icon,\n className,\n ref,\n ...props\n}: NotificationProps) {\n const Glyph = icon ?? ICON_MAP[color];\n const showActions = Boolean(confirmLabel);\n\n return (\n <div\n ref={ref}\n {...props}\n className={cn(\n // Floating layer: keeps its shadow elevation, hairline card edge.\n \"ring-pho-secondary bg-pho-primary shadow-pho-lg rounded-base relative flex w-full max-w-sm gap-4 p-4 ring-1 ring-inset\",\n className,\n )}\n >\n <Glyph\n aria-hidden=\"true\"\n className={cn(\n \"mt-0.5 size-5 shrink-0\",\n resolveVariant(NOTIFICATION_COLORS, color),\n )}\n />\n\n <div className=\"flex flex-1 flex-col gap-3 pr-6\">\n <div className=\"flex flex-col gap-1\">\n <p className=\"text-pho-primary text-base font-medium\">{title}</p>\n {description != null && description !== false && (\n <p className=\"text-pho-description text-base\">{description}</p>\n )}\n </div>\n\n {showActions && (\n <div className=\"flex gap-4\">\n <button\n type=\"button\"\n onClick={onConfirm}\n className={cn(\n LINK_CLASS,\n // brand text is monochrome now — underline carries the hover.\n \"text-pho-brand hover:underline\",\n )}\n >\n {confirmLabel}\n </button>\n <button\n type=\"button\"\n onClick={onClose}\n className={cn(\n LINK_CLASS,\n \"text-pho-secondary hover:text-pho-secondary-hover\",\n )}\n >\n {dismissLabel}\n </button>\n </div>\n )}\n </div>\n\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n aria-label=\"Dismiss\"\n className=\"text-pho-secondary hover:text-pho-secondary-hover hover:bg-pho-ghost-hover outline-pho-brand absolute top-2.5 right-2.5 flex size-6 cursor-pointer items-center justify-center rounded-sm transition focus-visible:outline-2 [&>svg]:size-4\"\n >\n <IconX aria-hidden=\"true\" />\n </button>\n )}\n </div>\n );\n}\n\nNotification.displayName = \"Notification\";\n"],"x_google_ignoreList":[0,1],"mappings":";;;;;;;;AASA,IAAMA,IAAa;AAAA,EAAC,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAwC,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAW,KAAO;AAAA,EAAQ,CAAC;AAAA,EAAG,CAAC,QAAQ;AAAA,IAAE,GAAK;AAAA,IAAc,KAAO;AAAA,EAAQ,CAAC;AAAC,GACtL,IAAkB,EAAqB,WAAW,gBAAgB,eAAeA,CAAU,GCD3F,IAAa,CAAC,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAwC,KAAO;AAAQ,CAAC,GAAG,CAAC,QAAQ;AAAA,EAAE,GAAK;AAAA,EAAkB,KAAO;AAAQ,CAAC,CAAC,GAC5I,IAAkB,EAAqB,WAAW,gBAAgB,eAAe,CAAU,GCcpF,IAAsB;AAAA,EACjC,OAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF,GAKM,IAAW;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GA0BM,IACJ;AAcF,SAAgB,EAAa,EAC3B,OAAA,IAAQ,SACR,OAAA,GACA,aAAA,GACA,cAAA,GACA,WAAA,GACA,cAAA,IAAe,WACf,SAAA,GACA,MAAA,GACA,WAAA,GACA,KAAA,GACA,GAAG,EAAA,GACiB;AACpB,QAAM,IAAQ,KAAQ,EAAS,CAAA,GACzB,IAAc,EAAQ;AAE5B,SACE,gBAAA,EAAC,OAAD;AAAA,IACO,KAAA;AAAA,IACL,GAAI;AAAA,IACJ,WAAW,EAET,0HACA,CACF;AAAA,cAPF;AAAA,MASE,gBAAA,EAAC,GAAD;AAAA,QACE,eAAY;AAAA,QACZ,WAAW,EACT,0BACA,EAAe,GAAqB,CAAK,CAC3C;AAAA,MACD,CAAA;AAAA,MAED,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBAAf,CACE,gBAAA,EAAC,OAAD;AAAA,UAAK,WAAU;AAAA,oBAAf,CACE,gBAAA,EAAC,KAAD;AAAA,YAAG,WAAU;AAAA,sBAA0C;AAAA,UAAS,CAAA,GAC/D,KAAe,QAAQ,MAAgB,MACtC,gBAAA,EAAC,KAAD;AAAA,YAAG,WAAU;AAAA,sBAAkC;AAAA,UAAe,CAAA,CAE7D;AAAA,YAEJ,KACC,gBAAA,EAAC,OAAD;AAAA,UAAK,WAAU;AAAA,oBAAf,CACE,gBAAA,EAAC,UAAD;AAAA,YACE,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW,EACT,GAEA,gCACF;AAAA,sBAEC;AAAA,UACK,CAAA,GACR,gBAAA,EAAC,UAAD;AAAA,YACE,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW,EACT,GACA,mDACF;AAAA,sBAEC;AAAA,UACK,CAAA,CACL;AAAA,UAEJ;AAAA;MAEJ,KACC,gBAAA,EAAC,UAAD;AAAA,QACE,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAW;AAAA,QACX,WAAU;AAAA,kBAEV,gBAAA,EAAC,GAAD,EAAO,eAAY,OAAQ,CAAA;AAAA,MACrB,CAAA;AAAA,IAEP;AAAA;AAET;AAEA,EAAa,cAAc"}