@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/components/feedBack/message/message.js

@@ -1,5 +1,6 @@
 import { use as p, spread as g, mergeProps as u, insert as a, createComponent as m, effect as f, setAttribute as v, template as n, delegateEvents as d } from "solid-js/web";
-import '../../../assets/styles/less/components/message/message.entry.css';/* empty css                                                         */
+import '../../../assets/styles/less/components/message/message.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                         */
 import { mergeProps as b, splitProps as _, Show as $ } from "solid-js";
 import h from "clsx";
 import { mergeRefs as w } from "../../../primitives/mergeRefs.js";
@@ -43,12 +44,12 @@ function k(o) {
     return a(t, () => o.children), t;
   })();
 }
-const H = Object.assign(L, {
+const I = Object.assign(L, {
   Header: k
 });
 d(["click"]);
 export {
-  H as Message,
+  I as Message,
   L as MessageContainer
 };
 //# sourceMappingURL=message.js.map

package/dist/components/feedBack/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid=\"message\"\n      role=\"alert\"\n      aria-live={resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\"}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","props","merged","mergeProps","variant","closeAriaLabel","local","rest","splitProps","resolvedSeverity","severity","type","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","Boolean","_$insert","children","_$createComponent","Show","when","onClose","_el$2","_tmpl$","$$click","Icon","name","weight","_$effect","_$setAttribute","Header","_el$3","_tmpl$3","Message","Object","assign","_$delegateEvents"],"mappings":";;;;;;;AAoBO,SAASA,EAAiBC,GAA+C;AAC9E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAmBC,gBAAgB;AAAA,EAAA,GAAWJ,CAAK,GAClF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,YACA,QACA,YACA,WACA,WACA,kBACA,KAAK,CACN,GAEKO,IAAmBA,MAAmCH,EAAMI,YAAYJ,EAAMK;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IASSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAPrBZ,GAAI;AAAA,MAAA,eACI;AAAA,MAAS,MAChB;AAAA,MAAO,IAAA,cAAA;AAAA,eACDE,EAAAA,MAAuB,UAAU,cAAc;AAAA,MAAQ;AAAA,MAAA,IAAA,QAAA;AAAA,eAC3DW,EAAG,gBAAgB,gBAAgBd,EAAMF,OAAO,IAAIE,EAAMe,OAAO;AAAA,UACtE,CAAC,gBAAgBZ,EAAAA,CAAkB,EAAE,GAAGa,EAAQb;QAAkB,CACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAc,EAAAX,GAAA,MAGDN,EAAMkB,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAMsB;AAAAA,MAAO;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGZ,MAAMzB,EAAMsB,UAAAA,GAAWL,EAAAM,GAAAJ,EAI/BO,GAAI;AAAA,UAACC,MAAI;AAAA,UAASC,QAAQ;AAAA,QAAA,CAAI,CAAA,GAAAC,QAAAC,EAAAP,GAAA,cAHnBvB,EAAMD,cAAc,CAAA,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAjB;AAAAA,EAAA,GAAA;AAQ1C;AAEA,SAASyB,EAAOpC,GAAiC;AAC/C,UAAA,MAAA;AAAA,QAAAqC,IAAAC,EAAAA;AAAAhB,WAAAA,EAAAe,GAAA,MAA0CrC,EAAMuB,QAAQ,GAAAc;AAAAA,EAAA,GAAA;AAC1D;AAEO,MAAME,IAAUC,OAAOC,OAAO1C,GAAkB;AAAA,EAAEqC,QAAAA;AAAO,CAAC;AAE1CM,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid=\"message\"\n      role=\"alert\"\n      aria-live={resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\"}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","props","merged","mergeProps","variant","closeAriaLabel","local","rest","splitProps","resolvedSeverity","severity","type","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","Boolean","_$insert","children","_$createComponent","Show","when","onClose","_el$2","_tmpl$","$$click","Icon","name","weight","_$effect","_$setAttribute","Header","_el$3","_tmpl$3","Message","Object","assign","_$delegateEvents"],"mappings":";;;;;;;;AAqBO,SAASA,EAAiBC,GAA+C;AAC9E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAmBC,gBAAgB;AAAA,EAAA,GAAWJ,CAAK,GAClF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,YACA,QACA,YACA,WACA,WACA,kBACA,KAAK,CACN,GAEKO,IAAmBA,MAAmCH,EAAMI,YAAYJ,EAAMK;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IASSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAPrBZ,GAAI;AAAA,MAAA,eACI;AAAA,MAAS,MAChB;AAAA,MAAO,IAAA,cAAA;AAAA,eACDE,EAAAA,MAAuB,UAAU,cAAc;AAAA,MAAQ;AAAA,MAAA,IAAA,QAAA;AAAA,eAC3DW,EAAG,gBAAgB,gBAAgBd,EAAMF,OAAO,IAAIE,EAAMe,OAAO;AAAA,UACtE,CAAC,gBAAgBZ,EAAAA,CAAkB,EAAE,GAAGa,EAAQb;QAAkB,CACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAc,EAAAX,GAAA,MAGDN,EAAMkB,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAMsB;AAAAA,MAAO;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGZ,MAAMzB,EAAMsB,UAAAA,GAAWL,EAAAM,GAAAJ,EAI/BO,GAAI;AAAA,UAACC,MAAI;AAAA,UAASC,QAAQ;AAAA,QAAA,CAAI,CAAA,GAAAC,QAAAC,EAAAP,GAAA,cAHnBvB,EAAMD,cAAc,CAAA,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAjB;AAAAA,EAAA,GAAA;AAQ1C;AAEA,SAASyB,EAAOpC,GAAiC;AAC/C,UAAA,MAAA;AAAA,QAAAqC,IAAAC,EAAAA;AAAAhB,WAAAA,EAAAe,GAAA,MAA0CrC,EAAMuB,QAAQ,GAAAc;AAAAA,EAAA,GAAA;AAC1D;AAEO,MAAME,IAAUC,OAAOC,OAAO1C,GAAkB;AAAA,EAAEqC,QAAAA;AAAO,CAAC;AAE1CM,EAAA,CAAA,OAAA,CAAA;"}

package/dist/components/feedBack/modal/modal.js

@@ -1,5 +1,6 @@
 import { createComponent as c, Portal as w, addEventListener as y, use as g, insert as s, Dynamic as C, mergeProps as k, effect as l, className as i, isServer as E, template as _, delegateEvents as A } from "solid-js/web";
-import '../../../assets/styles/less/components/modal/modal.entry.css';/* empty css                                                     */
+import '../../../assets/styles/less/components/modal/modal.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
 import { mergeProps as O, splitProps as $, createEffect as h, onCleanup as x, Show as L } from "solid-js";
 import n from "clsx";
 import { createCssTransition as P } from "../../../primitives/createCssTransition.js";
@@ -103,7 +104,7 @@ function j(o) {
     return s(r, () => o.children), l(() => i(r, n("smwb-modal__footer", o.class))), r;
   })();
 }
-const J = Object.assign(N, {
+const Q = Object.assign(N, {
   Footer: j,
   Header: T,
   Content: R
@@ -113,6 +114,6 @@ export {
   R as Content,
   j as Footer,
   T as Header,
-  J as Modal
+  Q as Modal
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/feedBack/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","overlayEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","isTopOverlayLayer","document","addEventListener","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","_$addEventListener","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","overlayEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","isTopOverlayLayer","document","addEventListener","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","_$addEventListener","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}

package/dist/components/feedBack/progressIndicator/progressIndicator.d.ts

@@ -5,15 +5,28 @@ export interface ProgressIndicatorProps {
     variant: "circular" | "linear";
     type: "determinate" | "indeterminate";
     progressValue?: number;
+    /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */
+    max?: number;
     /** Semantic color. */
     color?: ProgressColor;
     /** Circular size preset. */
     size?: "small" | "medium" | "large";
+    /** Linear: fill the container's width instead of the fixed 240px track. */
+    fullWidth?: boolean;
+    /** Linear: the width, in px or any CSS length. */
+    width?: number | string;
+    /**
+     * Linear, determinate: the value as text beside the bar. `true` shows a
+     * percentage — or "3 / 14" with a custom `max`; a function formats it, e.g.
+     * `(value, max) => <>{value} of {max}</>`.
+     */
+    valueLabel?: boolean | ((value: number, max: number) => JSX.Element);
     /** Accessible name for the progress bar. */
     "aria-label"?: string;
     id?: string;
 }
 export interface CircularProgressProps {
+    /** Percent, 0–100. */
     progressValue?: number;
 }
 export declare function CircularProgress(props: CircularProgressProps): JSX.Element;

package/dist/components/feedBack/progressIndicator/progressIndicator.js

@@ -1,80 +1,113 @@
-import { createComponent as c, spread as n, mergeProps as u, insert as _, effect as f, style as b, template as l, use as v } from "solid-js/web";
-import '../../../assets/styles/less/components/progressIndicator/progressIndicator.entry.css';/* empty css                                                                             */
-import { createEffect as $, mergeProps as w, splitProps as h, Show as m } from "solid-js";
-import p from "clsx";
-var y = /* @__PURE__ */ l("<svg class=smwb-indicator_circular__svg><circle class=smwb-indicator_circular__circle cx=24 cy=24 r=22>"), i = /* @__PURE__ */ l("<div>"), P = /* @__PURE__ */ l("<div><div class=smwb-indicator_linear__thumb>"), V = /* @__PURE__ */ l("<div class=smwb-indicator_circular__thumb>");
-function C(o) {
+import { createComponent as u, spread as h, mergeProps as w, insert as d, effect as $, className as C, style as y, template as n, use as z } from "solid-js/web";
+import '../../../assets/styles/less/components/progressIndicator/progressIndicator.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                             */
+import { createEffect as k, mergeProps as L, splitProps as M, Show as p } from "solid-js";
+import g from "clsx";
+var D = /* @__PURE__ */ n("<svg class=smwb-indicator_circular__svg><circle class=smwb-indicator_circular__circle cx=24 cy=24 r=22>"), I = /* @__PURE__ */ n("<div><div class=smwb-indicator_linear__thumb>"), m = /* @__PURE__ */ n("<div>"), S = /* @__PURE__ */ n("<div><span class=smwb-indicator__value>"), W = /* @__PURE__ */ n("<div class=smwb-indicator_circular__thumb>");
+function B(l) {
   let a;
-  return $(() => {
-    const r = o.progressValue ?? 0;
+  return k(() => {
+    const e = l.progressValue ?? 0;
     if (!a || !a.r) return;
-    const t = a.r.baseVal.value;
-    if (t) {
-      const e = 2 * Math.PI * t;
-      a.style.strokeDasharray = `${e} ${e}`, a.style.strokeDashoffset = `${e - r / 100 * e}`;
+    const s = a.r.baseVal.value;
+    if (s) {
+      const t = 2 * Math.PI * s;
+      a.style.strokeDasharray = `${t} ${t}`, a.style.strokeDashoffset = `${t - e / 100 * t}`;
     }
   }), (() => {
-    var r = y(), t = r.firstChild, e = a;
-    return typeof e == "function" ? v(e, t) : a = t, r;
+    var e = D(), s = e.firstChild, t = a;
+    return typeof t == "function" ? z(t, s) : a = s, e;
   })();
 }
-function I(o) {
-  const a = w({
+const E = (l) => typeof l == "number" ? `${l}px` : l;
+function F(l) {
+  const a = L({
     progressValue: 0,
+    max: 100,
     color: "primary",
     size: "medium"
-  }, o), [r] = h(a, ["type", "variant", "class", "progressValue", "color", "size", "aria-label", "id"]), t = () => r.color !== "primary" ? `smwb-indicator_color-${r.color}` : void 0, e = () => ({
+  }, l), [e] = M(a, ["type", "variant", "class", "progressValue", "max", "color", "size", "fullWidth", "width", "valueLabel", "aria-label", "id"]), s = () => e.color !== "primary" ? `smwb-indicator_color-${e.color}` : void 0, t = () => {
+    const r = e.max > 0 ? e.progressValue / e.max : 0;
+    return Math.min(100, Math.max(0, r * 100));
+  }, x = () => !!e.valueLabel && e.type === "determinate", V = () => {
+    const r = e.valueLabel;
+    return typeof r == "function" ? r(e.progressValue, e.max) : e.max === 100 ? `${Math.round(e.progressValue)}%` : `${e.progressValue} / ${e.max}`;
+  }, f = () => ({
+    "smwb-indicator_full-width": e.fullWidth
+  }), v = () => e.width !== void 0 ? {
+    width: E(e.width)
+  } : void 0, _ = () => ({
     role: "progressbar",
-    "aria-label": r["aria-label"],
-    id: r.id,
-    ...r.type === "determinate" ? {
-      "aria-valuenow": r.progressValue,
+    "aria-label": e["aria-label"],
+    id: e.id,
+    ...e.type === "determinate" ? {
+      "aria-valuenow": e.progressValue,
       "aria-valuemin": 0,
-      "aria-valuemax": 100
+      "aria-valuemax": e.max
     } : {}
-  });
-  return c(m, {
+  }), b = (r) => (() => {
+    var o = I(), i = o.firstChild;
+    return h(o, w(_, {
+      get class() {
+        return g("smwb-indicator_linear", `smwb-${e.type}`, s(), r && f(), r && e.class);
+      },
+      get style() {
+        return r ? v() : void 0;
+      }
+    }), !1, !0), $((c) => y(i, e.type === "determinate" ? {
+      width: `${t()}%`
+    } : {}, c)), o;
+  })();
+  return u(p, {
     get when() {
-      return r.variant === "circular";
+      return e.variant === "circular";
     },
     get fallback() {
-      return (() => {
-        var s = P(), d = s.firstChild;
-        return n(s, u(e, {
-          get class() {
-            return p("smwb-indicator_linear", `smwb-${r.type}`, t(), r.class);
-          }
-        }), !1, !0), f((g) => b(d, r.type === "determinate" ? {
-          width: `${r.progressValue}%`
-        } : {}, g)), s;
-      })();
+      return u(p, {
+        get when() {
+          return x();
+        },
+        get fallback() {
+          return b(!0);
+        },
+        get children() {
+          var r = S(), o = r.firstChild;
+          return d(r, () => b(!1), o), d(o, V), $((i) => {
+            var c = g("smwb-indicator_labeled", f(), e.class), P = v();
+            return c !== i.e && C(r, i.e = c), i.t = y(r, P, i.t), i;
+          }, {
+            e: void 0,
+            t: void 0
+          }), r;
+        }
+      });
     },
     get children() {
-      var s = i();
-      return n(s, u(e, {
+      var r = m();
+      return h(r, w(_, {
         get class() {
-          return p("smwb-indicator_circular", `smwb-${r.type}`, t(), `smwb-indicator_size-${r.size}`, r.class);
+          return g("smwb-indicator_circular", `smwb-${e.type}`, s(), `smwb-indicator_size-${e.size}`, e.class);
         }
-      }), !1, !0), _(s, c(m, {
+      }), !1, !0), d(r, u(p, {
         get when() {
-          return r.type === "determinate";
+          return e.type === "determinate";
         },
         get fallback() {
-          return [V(), i(), i(), i()];
+          return [W(), m(), m(), m()];
         },
         get children() {
-          return c(C, {
+          return u(B, {
             get progressValue() {
-              return r.progressValue;
+              return t();
             }
           });
         }
-      })), s;
+      })), r;
     }
   });
 }
 export {
-  C as CircularProgress,
-  I as ProgressIndicator
+  B as CircularProgress,
+  F as ProgressIndicator
 };
 //# sourceMappingURL=progressIndicator.js.map

package/dist/components/feedBack/progressIndicator/progressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressIndicator.js","sources":["../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  class?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport interface CircularProgressProps {\n  progressValue?: number;\n}\n\nexport function CircularProgress(props: CircularProgressProps): JSX.Element {\n  let circle: SVGCircleElement | undefined;\n\n  createEffect(() => {\n    const value = props.progressValue ?? 0;\n    if (!circle || !circle.r) return;\n    const radius = circle.r.baseVal.value;\n    if (radius) {\n      const length = 2 * Math.PI * radius;\n      circle.style.strokeDasharray = `${length} ${length}`;\n      circle.style.strokeDashoffset = `${length - (value / 100) * length}`;\n    }\n  });\n\n  return (\n    <svg class=\"smwb-indicator_circular__svg\">\n      <circle class=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circle} />\n    </svg>\n  );\n}\n\nexport function ProgressIndicator(props: ProgressIndicatorProps): JSX.Element {\n  const merged = mergeProps({ progressValue: 0, color: \"primary\" as ProgressColor, size: \"medium\" as const }, props);\n  const [local] = splitProps(merged, [\"type\", \"variant\", \"class\", \"progressValue\", \"color\", \"size\", \"aria-label\", \"id\"]);\n\n  const colorClass = (): string | undefined =>\n    local.color !== \"primary\" ? `smwb-indicator_color-${local.color}` : undefined;\n\n  const ariaProps = (): JSX.HTMLAttributes<HTMLDivElement> => ({\n    role: \"progressbar\",\n    \"aria-label\": local[\"aria-label\"],\n    id: local.id,\n    ...(local.type === \"determinate\"\n      ? { \"aria-valuenow\": local.progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": 100 }\n      : {}),\n  });\n\n  return (\n    <Show\n      when={local.variant === \"circular\"}\n      fallback={\n        <div {...ariaProps()} class={cn(\"smwb-indicator_linear\", `smwb-${local.type}`, colorClass(), local.class)}>\n          <div\n            class=\"smwb-indicator_linear__thumb\"\n            style={local.type === \"determinate\" ? { width: `${local.progressValue}%` } : {}}\n          />\n        </div>\n      }\n    >\n      <div\n        {...ariaProps()}\n        class={cn(\n          \"smwb-indicator_circular\",\n          `smwb-${local.type}`,\n          colorClass(),\n          `smwb-indicator_size-${local.size}`,\n          local.class\n        )}\n      >\n        <Show\n          when={local.type === \"determinate\"}\n          fallback={\n            <>\n              <div class=\"smwb-indicator_circular__thumb\" />\n              <div />\n              <div />\n              <div />\n            </>\n          }\n        >\n          <CircularProgress progressValue={local.progressValue} />\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["CircularProgress","props","circle","createEffect","value","progressValue","r","radius","baseVal","length","Math","PI","style","strokeDasharray","strokeDashoffset","_el$","_tmpl$","_el$2","firstChild","_ref$","_$use","ProgressIndicator","merged","mergeProps","color","size","local","splitProps","colorClass","undefined","ariaProps","role","id","type","_$createComponent","Show","when","variant","fallback","_el$4","_tmpl$3","_el$5","_$spread","_$mergeProps","cn","class","_$effect","_$p","_$style","width","children","_el$3","_tmpl$2","_$insert","_tmpl$4"],"mappings":"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"}
+{"version":3,"file":"progressIndicator.js","sources":["../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  class?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */\n  max?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Linear: fill the container's width instead of the fixed 240px track. */\n  fullWidth?: boolean;\n  /** Linear: the width, in px or any CSS length. */\n  width?: number | string;\n  /**\n   * Linear, determinate: the value as text beside the bar. `true` shows a\n   * percentage — or \"3 / 14\" with a custom `max`; a function formats it, e.g.\n   * `(value, max) => <>{value} of {max}</>`.\n   */\n  valueLabel?: boolean | ((value: number, max: number) => JSX.Element);\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport interface CircularProgressProps {\n  /** Percent, 0–100. */\n  progressValue?: number;\n}\n\nexport function CircularProgress(props: CircularProgressProps): JSX.Element {\n  let circle: SVGCircleElement | undefined;\n\n  createEffect(() => {\n    const value = props.progressValue ?? 0;\n    if (!circle || !circle.r) return;\n    const radius = circle.r.baseVal.value;\n    if (radius) {\n      const length = 2 * Math.PI * radius;\n      circle.style.strokeDasharray = `${length} ${length}`;\n      circle.style.strokeDashoffset = `${length - (value / 100) * length}`;\n    }\n  });\n\n  return (\n    <svg class=\"smwb-indicator_circular__svg\">\n      <circle class=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circle} />\n    </svg>\n  );\n}\n\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nexport function ProgressIndicator(props: ProgressIndicatorProps): JSX.Element {\n  const merged = mergeProps(\n    { progressValue: 0, max: 100, color: \"primary\" as ProgressColor, size: \"medium\" as const },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"type\",\n    \"variant\",\n    \"class\",\n    \"progressValue\",\n    \"max\",\n    \"color\",\n    \"size\",\n    \"fullWidth\",\n    \"width\",\n    \"valueLabel\",\n    \"aria-label\",\n    \"id\",\n  ]);\n\n  const colorClass = (): string | undefined =>\n    local.color !== \"primary\" ? `smwb-indicator_color-${local.color}` : undefined;\n  const percent = (): number => {\n    const ratio = local.max > 0 ? local.progressValue / local.max : 0;\n    return Math.min(100, Math.max(0, ratio * 100));\n  };\n  const labeled = (): boolean => Boolean(local.valueLabel) && local.type === \"determinate\";\n  const valueText = (): JSX.Element => {\n    const label = local.valueLabel;\n    if (typeof label === \"function\") return label(local.progressValue, local.max);\n    return local.max === 100 ? `${Math.round(local.progressValue)}%` : `${local.progressValue} / ${local.max}`;\n  };\n  // Width classes and style go on the outermost element: the bar, or the\n  // wrapper that also holds the value label.\n  const sizeClass = (): Record<string, boolean | undefined> => ({ \"smwb-indicator_full-width\": local.fullWidth });\n  const sizeStyle = (): JSX.CSSProperties | undefined =>\n    local.width !== undefined ? { width: cssLength(local.width) } : undefined;\n\n  const ariaProps = (): JSX.HTMLAttributes<HTMLDivElement> => ({\n    role: \"progressbar\",\n    \"aria-label\": local[\"aria-label\"],\n    id: local.id,\n    ...(local.type === \"determinate\"\n      ? { \"aria-valuenow\": local.progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": local.max }\n      : {}),\n  });\n\n  const linear = (outer: boolean): JSX.Element => (\n    <div\n      {...ariaProps()}\n      class={cn(\n        \"smwb-indicator_linear\",\n        `smwb-${local.type}`,\n        colorClass(),\n        outer && sizeClass(),\n        outer && local.class\n      )}\n      style={outer ? sizeStyle() : undefined}\n    >\n      <div class=\"smwb-indicator_linear__thumb\" style={local.type === \"determinate\" ? { width: `${percent()}%` } : {}} />\n    </div>\n  );\n\n  return (\n    <Show\n      when={local.variant === \"circular\"}\n      fallback={\n        <Show when={labeled()} fallback={linear(true)}>\n          <div class={cn(\"smwb-indicator_labeled\", sizeClass(), local.class)} style={sizeStyle()}>\n            {linear(false)}\n            <span class=\"smwb-indicator__value\">{valueText()}</span>\n          </div>\n        </Show>\n      }\n    >\n      <div\n        {...ariaProps()}\n        class={cn(\n          \"smwb-indicator_circular\",\n          `smwb-${local.type}`,\n          colorClass(),\n          `smwb-indicator_size-${local.size}`,\n          local.class\n        )}\n      >\n        <Show\n          when={local.type === \"determinate\"}\n          fallback={\n            <>\n              <div class=\"smwb-indicator_circular__thumb\" />\n              <div />\n              <div />\n              <div />\n            </>\n          }\n        >\n          <CircularProgress progressValue={percent()} />\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["CircularProgress","props","circle","createEffect","value","progressValue","r","radius","baseVal","length","Math","PI","style","strokeDasharray","strokeDashoffset","_el$","_tmpl$","_el$2","firstChild","_ref$","_$use","cssLength","ProgressIndicator","merged","mergeProps","max","color","size","local","splitProps","colorClass","undefined","percent","ratio","min","labeled","Boolean","valueLabel","type","valueText","label","round","sizeClass","fullWidth","sizeStyle","width","ariaProps","role","id","linear","outer","_el$3","_tmpl$2","_el$4","_$spread","_$mergeProps","cn","class","_$effect","_$p","_$style","_$createComponent","Show","when","variant","fallback","children","_el$6","_tmpl$4","_el$7","_$insert","_p$","_v$","_v$2","e","_$className","t","_el$5","_tmpl$3","_tmpl$5"],"mappings":"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"}

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -1,13 +1,14 @@
-import { createComponent as r, insert as l, effect as s, setAttribute as g, className as p, template as u } from "solid-js/web";
-import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';/* empty css                                                                         */
-import { splitProps as b, Show as o } from "solid-js";
-import v from "clsx";
+import { createComponent as r, insert as l, effect as s, setAttribute as p, className as b, template as c } from "solid-js/web";
+import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                         */
+import { splitProps as v, Show as o } from "solid-js";
+import h from "clsx";
 import { Modal as a } from "../modal/modal.js";
 import { TextField as C } from "../../inputs/textField/textField.js";
 import { Button as i } from "../../inputs/button/button.js";
-var h = /* @__PURE__ */ u("<div class=smwb-save-asset-dialog__preview><img alt>"), f = /* @__PURE__ */ u("<div>");
-function k(c) {
-  const [e] = b(c, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), m = () => e.onNameChange !== void 0 || e.name !== void 0;
+var f = /* @__PURE__ */ c("<div class=smwb-save-asset-dialog__preview><img alt>"), w = /* @__PURE__ */ c("<div>");
+function F(m) {
+  const [e] = v(m, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), d = () => e.onNameChange !== void 0 || e.name !== void 0, u = () => e.title ?? "Save";
   return r(a, {
     get open() {
       return e.open;
@@ -15,18 +16,21 @@ function k(c) {
     get onClose() {
       return e.onClose;
     },
-    size: "small",
+    size: "medium",
+    get "aria-label"() {
+      return u();
+    },
     get children() {
       return [r(a.Header, {
         get children() {
-          return e.title ?? "Save";
+          return u();
         }
       }), r(a.Content, {
         get children() {
-          var t = f();
+          var t = w();
           return l(t, r(o, {
             get when() {
-              return m();
+              return d();
             },
             get children() {
               return r(C, {
@@ -36,6 +40,7 @@ function k(c) {
                 get value() {
                   return e.name ?? "";
                 },
+                fullWidth: !0,
                 get disabled() {
                   return !!e.busy;
                 },
@@ -47,8 +52,8 @@ function k(c) {
               return e.previewSrc;
             },
             get children() {
-              var n = h(), d = n.firstChild;
-              return s(() => g(d, "src", e.previewSrc)), n;
+              var n = f(), g = n.firstChild;
+              return s(() => p(g, "src", e.previewSrc)), n;
             }
           }), null), l(t, r(o, {
             get when() {
@@ -67,7 +72,7 @@ function k(c) {
                 }
               });
             }
-          }), null), l(t, () => e.children, null), s(() => p(t, v("smwb-save-asset-dialog__body", e.class))), t;
+          }), null), l(t, () => e.children, null), s(() => b(t, h("smwb-save-asset-dialog__body", e.class))), t;
         }
       }), r(a.Footer, {
         get children() {
@@ -96,6 +101,6 @@ function k(c) {
   });
 }
 export {
-  k as SaveAssetDialog
+  F as SaveAssetDialog
 };
 //# sourceMappingURL=saveAssetDialog.js.map

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: JSX.Element;\n  class?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"nameLabel\",\n    \"name\",\n    \"onNameChange\",\n    \"previewSrc\",\n    \"onCapture\",\n    \"captureLabel\",\n    \"busy\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"onConfirm\",\n    \"onClose\",\n    \"children\",\n    \"class\",\n  ]);\n\n  const showNameField = (): boolean => local.onNameChange !== undefined || local.name !== undefined;\n\n  return (\n    <Modal open={local.open} onClose={local.onClose} size=\"small\">\n      <Modal.Header>{local.title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-save-asset-dialog__body\", local.class)}>\n          <Show when={showNameField()}>\n            <TextField\n              label={local.nameLabel ?? \"Name\"}\n              value={local.name ?? \"\"}\n              disabled={!!local.busy}\n              onChange={(event) => local.onNameChange?.((event.currentTarget as HTMLInputElement).value)}\n            />\n          </Show>\n          <Show when={local.previewSrc}>\n            <div class=\"smwb-save-asset-dialog__preview\">\n              <img src={local.previewSrc} alt=\"\" />\n            </div>\n          </Show>\n          <Show when={local.onCapture}>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!local.busy}\n              onClick={() => local.onCapture?.()}\n              label={local.captureLabel ?? \"Capture preview\"}\n            />\n          </Show>\n          {local.children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","props","local","splitProps","showNameField","onNameChange","undefined","name","_$createComponent","Modal","open","onClose","size","children","Header","title","Content","_el$","_tmpl$2","_$insert","Show","when","TextField","label","nameLabel","value","disabled","busy","onChange","event","currentTarget","previewSrc","_el$2","_tmpl$","_el$3","firstChild","_$effect","_$setAttribute","onCapture","Button","variant","onClick","captureLabel","_$className","cn","class","Footer","cancelLabel","onConfirm","confirmLabel"],"mappings":"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"}
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: JSX.Element;\n  class?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"nameLabel\",\n    \"name\",\n    \"onNameChange\",\n    \"previewSrc\",\n    \"onCapture\",\n    \"captureLabel\",\n    \"busy\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"onConfirm\",\n    \"onClose\",\n    \"children\",\n    \"class\",\n  ]);\n\n  const showNameField = (): boolean => local.onNameChange !== undefined || local.name !== undefined;\n  // The visible heading also names the dialog for screen readers.\n  const heading = (): string => local.title ?? \"Save\";\n\n  return (\n    <Modal open={local.open} onClose={local.onClose} size=\"medium\" aria-label={heading()}>\n      <Modal.Header>{heading()}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-save-asset-dialog__body\", local.class)}>\n          <Show when={showNameField()}>\n            <TextField\n              label={local.nameLabel ?? \"Name\"}\n              value={local.name ?? \"\"}\n              fullWidth\n              disabled={!!local.busy}\n              onChange={(event) => local.onNameChange?.((event.currentTarget as HTMLInputElement).value)}\n            />\n          </Show>\n          <Show when={local.previewSrc}>\n            <div class=\"smwb-save-asset-dialog__preview\">\n              <img src={local.previewSrc} alt=\"\" />\n            </div>\n          </Show>\n          <Show when={local.onCapture}>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!local.busy}\n              onClick={() => local.onCapture?.()}\n              label={local.captureLabel ?? \"Capture preview\"}\n            />\n          </Show>\n          {local.children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","props","local","splitProps","showNameField","onNameChange","undefined","name","heading","title","_$createComponent","Modal","open","onClose","size","children","Header","Content","_el$","_tmpl$2","_$insert","Show","when","TextField","label","nameLabel","value","fullWidth","disabled","busy","onChange","event","currentTarget","previewSrc","_el$2","_tmpl$","_el$3","firstChild","_$effect","_$setAttribute","onCapture","Button","variant","onClick","captureLabel","_$className","cn","class","Footer","cancelLabel","onConfirm","confirmLabel"],"mappings":"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"}

package/dist/components/feedBack/skeleton/skeleton.js

@@ -1,11 +1,12 @@
 import { createComponent as o, use as g, insert as h, Dynamic as m, mergeProps as d, template as y } from "solid-js/web";
-import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';/* empty css                                                           */
+import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
 import { mergeProps as w, splitProps as _, Show as k, For as $ } from "solid-js";
 import b from "clsx";
 import { mergeRefs as l } from "../../../primitives/mergeRefs.js";
 var v = /* @__PURE__ */ y("<span class=smwb-skeleton__group aria-hidden=true>");
 const c = (n) => typeof n == "number" ? `${n}px` : n;
-function j(n) {
+function z(n) {
   const p = w({
     variant: "text",
     animation: "pulse",
@@ -69,6 +70,6 @@ function j(n) {
   });
 }
 export {
-  j as Skeleton
+  z as Skeleton
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/components/feedBack/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SkeletonProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n  ref?: Ref<HTMLElement>;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"text\" as const, animation: \"pulse\" as const, count: 1, component: \"span\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"width\",\n    \"height\",\n    \"animation\",\n    \"count\",\n    \"animationDelay\",\n    \"component\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const className = (): string =>\n    cn(\n      \"smwb-skeleton\",\n      `smwb-skeleton_${local.variant}`,\n      local.animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${local.animation}`,\n      local.class\n    );\n\n  const itemStyle = (index: number): JSX.CSSProperties => ({\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n    width: toCssSize(local.width),\n    height: toCssSize(local.height),\n    ...(local.animationDelay ? { \"animation-delay\": `${index * local.animationDelay}ms` } : {}),\n  });\n\n  return (\n    <Show\n      when={local.count > 1}\n      fallback={\n        <Dynamic\n          component={local.component}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"skeleton\"\n          aria-hidden=\"true\"\n          class={className()}\n          style={itemStyle(0)}\n        />\n      }\n    >\n      <span ref={mergeRefs(local.ref)} class=\"smwb-skeleton__group\" aria-hidden=\"true\">\n        <For each={Array.from({ length: local.count }, (_, i) => i)}>\n          {(index) => (\n            <Dynamic\n              component={local.component}\n              data-testid=\"skeleton\"\n              aria-hidden=\"true\"\n              class={className()}\n              style={itemStyle(index)}\n            />\n          )}\n        </For>\n      </span>\n    </Show>\n  );\n}\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","props","merged","mergeProps","variant","animation","count","component","local","rest","splitProps","className","cn","class","itemStyle","index","style","width","height","animationDelay","_$createComponent","Show","when","fallback","Dynamic","_$mergeProps","ref","r$","_ref$2","mergeRefs","children","_el$","_tmpl$","_ref$","_$use","_$insert","For","each","Array","from","length","_","i"],"mappings":";;;;;;AAwBA,MAAMA,IAAYA,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAExG,SAASC,EAASC,GAAmC;AAC1D,QAAMC,IAASC,EACb;AAAA,IAAEC,SAAS;AAAA,IAAiBC,WAAW;AAAA,IAAkBC,OAAO;AAAA,IAAGC,WAAW;AAAA,EAAA,GAC9EN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,WACA,SACA,UACA,aACA,SACA,kBACA,aACA,SACA,KAAK,CACN,GAEKS,IAAYA,MAChBC,EACE,iBACA,iBAAiBJ,EAAMJ,OAAO,IAC9BI,EAAMH,cAAc,KAAQ,+BAA+B,iBAAiBG,EAAMH,SAAS,IAC3FG,EAAMK,KACR,GAEIC,IAAYA,CAACC,OAAsC;AAAA,IACvD,GAAI,OAAOP,EAAMQ,SAAU,YAAYR,EAAMQ,QAAQR,EAAMQ,QAAQ,CAAA;AAAA,IACnEC,OAAOnB,EAAUU,EAAMS,KAAK;AAAA,IAC5BC,QAAQpB,EAAUU,EAAMU,MAAM;AAAA,IAC9B,GAAIV,EAAMW,iBAAiB;AAAA,MAAE,mBAAmB,GAAGJ,IAAQP,EAAMW,cAAc;AAAA,IAAA,IAAS,CAAA;AAAA,EAAC;AAG3F,SAAAC,EACGC,GAAI;AAAA,IAAA,IACHC,OAAI;AAAA,aAAEd,EAAMF,QAAQ;AAAA,IAAC;AAAA,IAAA,IACrBiB,WAAQ;AAAA,aAAAH,EACLI,GAAOC,EAAA;AAAA,QAAA,IACNlB,YAAS;AAAA,iBAAEC,EAAMD;AAAAA,QAAS;AAAA,MAAA,GACtBE,GAAI;AAAA,QAAAiB,IAAAC,GAAA;AAAA,cAAAC,IACHC,EAAUrB,EAAMkB,GAAG;AAAC,iBAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,QAAA;AAAA,QAAA,eAAA;AAAA,QAAA,eAAA;AAAA,QAAA,IAAA,QAAA;AAAA,iBAGlBhB,EAAAA;AAAAA,QAAW;AAAA,QAAA,IAClBK,QAAK;AAAA,iBAAEF,EAAU,CAAC;AAAA,QAAC;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,IAAA,IAAAgB,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAIZJ,EAAUrB,EAAMkB,GAAG;AAAC,oBAAAO,KAAA,cAAAC,EAAAD,GAAAF,CAAA,GAAAI,EAAAJ,GAAAX,EAC5BgB,GAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEC,MAAMC,KAAK;AAAA,YAAEC,QAAQhC,EAAMF;AAAAA,UAAAA,GAAS,CAACmC,GAAGC,MAAMA,CAAC;AAAA,QAAC;AAAA,QAAAZ,UACvDf,CAAAA,MAAKK,EACJI,GAAO;AAAA,UAAA,IACNjB,YAAS;AAAA,mBAAEC,EAAMD;AAAAA,UAAS;AAAA,UAAA,eAAA;AAAA,UAAA,eAAA;AAAA,UAAA,IAAA,QAAA;AAAA,mBAGnBI,EAAAA;AAAAA,UAAW;AAAA,UAAA,IAClBK,QAAK;AAAA,mBAAEF,EAAUC,CAAK;AAAA,UAAC;AAAA,QAAA,CAAA;AAAA,MAAA,CAE1B,CAAA,GAAAgB;AAAAA,IAAA;AAAA,EAAA,CAAA;AAKX;"}
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SkeletonProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n  ref?: Ref<HTMLElement>;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"text\" as const, animation: \"pulse\" as const, count: 1, component: \"span\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"width\",\n    \"height\",\n    \"animation\",\n    \"count\",\n    \"animationDelay\",\n    \"component\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const className = (): string =>\n    cn(\n      \"smwb-skeleton\",\n      `smwb-skeleton_${local.variant}`,\n      local.animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${local.animation}`,\n      local.class\n    );\n\n  const itemStyle = (index: number): JSX.CSSProperties => ({\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n    width: toCssSize(local.width),\n    height: toCssSize(local.height),\n    ...(local.animationDelay ? { \"animation-delay\": `${index * local.animationDelay}ms` } : {}),\n  });\n\n  return (\n    <Show\n      when={local.count > 1}\n      fallback={\n        <Dynamic\n          component={local.component}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"skeleton\"\n          aria-hidden=\"true\"\n          class={className()}\n          style={itemStyle(0)}\n        />\n      }\n    >\n      <span ref={mergeRefs(local.ref)} class=\"smwb-skeleton__group\" aria-hidden=\"true\">\n        <For each={Array.from({ length: local.count }, (_, i) => i)}>\n          {(index) => (\n            <Dynamic\n              component={local.component}\n              data-testid=\"skeleton\"\n              aria-hidden=\"true\"\n              class={className()}\n              style={itemStyle(index)}\n            />\n          )}\n        </For>\n      </span>\n    </Show>\n  );\n}\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","props","merged","mergeProps","variant","animation","count","component","local","rest","splitProps","className","cn","class","itemStyle","index","style","width","height","animationDelay","_$createComponent","Show","when","fallback","Dynamic","_$mergeProps","ref","r$","_ref$2","mergeRefs","children","_el$","_tmpl$","_ref$","_$use","_$insert","For","each","Array","from","length","_","i"],"mappings":";;;;;;;AAyBA,MAAMA,IAAYA,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAExG,SAASC,EAASC,GAAmC;AAC1D,QAAMC,IAASC,EACb;AAAA,IAAEC,SAAS;AAAA,IAAiBC,WAAW;AAAA,IAAkBC,OAAO;AAAA,IAAGC,WAAW;AAAA,EAAA,GAC9EN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,WACA,SACA,UACA,aACA,SACA,kBACA,aACA,SACA,KAAK,CACN,GAEKS,IAAYA,MAChBC,EACE,iBACA,iBAAiBJ,EAAMJ,OAAO,IAC9BI,EAAMH,cAAc,KAAQ,+BAA+B,iBAAiBG,EAAMH,SAAS,IAC3FG,EAAMK,KACR,GAEIC,IAAYA,CAACC,OAAsC;AAAA,IACvD,GAAI,OAAOP,EAAMQ,SAAU,YAAYR,EAAMQ,QAAQR,EAAMQ,QAAQ,CAAA;AAAA,IACnEC,OAAOnB,EAAUU,EAAMS,KAAK;AAAA,IAC5BC,QAAQpB,EAAUU,EAAMU,MAAM;AAAA,IAC9B,GAAIV,EAAMW,iBAAiB;AAAA,MAAE,mBAAmB,GAAGJ,IAAQP,EAAMW,cAAc;AAAA,IAAA,IAAS,CAAA;AAAA,EAAC;AAG3F,SAAAC,EACGC,GAAI;AAAA,IAAA,IACHC,OAAI;AAAA,aAAEd,EAAMF,QAAQ;AAAA,IAAC;AAAA,IAAA,IACrBiB,WAAQ;AAAA,aAAAH,EACLI,GAAOC,EAAA;AAAA,QAAA,IACNlB,YAAS;AAAA,iBAAEC,EAAMD;AAAAA,QAAS;AAAA,MAAA,GACtBE,GAAI;AAAA,QAAAiB,IAAAC,GAAA;AAAA,cAAAC,IACHC,EAAUrB,EAAMkB,GAAG;AAAC,iBAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,QAAA;AAAA,QAAA,eAAA;AAAA,QAAA,eAAA;AAAA,QAAA,IAAA,QAAA;AAAA,iBAGlBhB,EAAAA;AAAAA,QAAW;AAAA,QAAA,IAClBK,QAAK;AAAA,iBAAEF,EAAU,CAAC;AAAA,QAAC;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,IAAA,IAAAgB,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAIZJ,EAAUrB,EAAMkB,GAAG;AAAC,oBAAAO,KAAA,cAAAC,EAAAD,GAAAF,CAAA,GAAAI,EAAAJ,GAAAX,EAC5BgB,GAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEC,MAAMC,KAAK;AAAA,YAAEC,QAAQhC,EAAMF;AAAAA,UAAAA,GAAS,CAACmC,GAAGC,MAAMA,CAAC;AAAA,QAAC;AAAA,QAAAZ,UACvDf,CAAAA,MAAKK,EACJI,GAAO;AAAA,UAAA,IACNjB,YAAS;AAAA,mBAAEC,EAAMD;AAAAA,UAAS;AAAA,UAAA,eAAA;AAAA,UAAA,eAAA;AAAA,UAAA,IAAA,QAAA;AAAA,mBAGnBI,EAAAA;AAAAA,UAAW;AAAA,UAAA,IAClBK,QAAK;AAAA,mBAAEF,EAAUC,CAAK;AAAA,UAAC;AAAA,QAAA,CAAA;AAAA,MAAA,CAE1B,CAAA,GAAAgB;AAAAA,IAAA;AAAA,EAAA,CAAA;AAKX;"}