@unoff/ui 1.21.0

package/dist/components/slots/popin/Popin.js

@@ -0,0 +1,182 @@
+import '../../../assets/Popin.css';
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import o from "../../../styles/texts/texts.module.js";
+import A from "../../tags/chip/Chip.js";
+import N from "../../inputs/select/Select.js";
+import { Icon as _ } from "../../assets/icon/Icon.js";
+import s from "../../actions/button/Button.js";
+import { t as l } from "../../../do-classnames-DSDFCvzy.js";
+const O = (m) => {
+  const {
+    id: a,
+    type: d = "POPIN",
+    title: p,
+    actions: e,
+    select: r,
+    indicator: c,
+    tag: u,
+    isLoading: n = !1,
+    isMessage: y = !1,
+    children: v,
+    onClose: f
+  } = m;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      id: a,
+      className: l(["popin", d === "PANEL" && "popin--panel"]),
+      role: d === "PANEL" ? "complementary" : "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": a ? `${a}-title` : void 0,
+      "aria-label": a ? void 0 : p,
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "popin__header",
+            role: "presentation",
+            children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "popin__title",
+                  role: "presentation",
+                  children: [
+                    /* @__PURE__ */ i(
+                      "span",
+                      {
+                        id: `${a}-title`,
+                        className: l([
+                          o.type,
+                          o["type--large"],
+                          o["type--bold"],
+                          o["type--truncated"]
+                        ]),
+                        children: p
+                      }
+                    ),
+                    u != null && /* @__PURE__ */ i(A, { children: u })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i(
+                s,
+                {
+                  type: "icon",
+                  icon: "close",
+                  action: f
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: l([
+              "popin__content",
+              n && "popin__content--loading",
+              y && "popin__content--message"
+            ]),
+            role: "region",
+            "aria-busy": n,
+            children: n ? /* @__PURE__ */ i(
+              _,
+              {
+                type: "PICTO",
+                iconName: "spinner",
+                role: "status"
+              }
+            ) : v
+          }
+        ),
+        (e !== void 0 || c !== void 0) && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "popin__footer",
+            role: "toolbar",
+            children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "popin__extra",
+                  role: "group",
+                  children: [
+                    c !== void 0 && /* @__PURE__ */ i(
+                      "div",
+                      {
+                        className: o.label,
+                        role: "status",
+                        children: c
+                      }
+                    ),
+                    r !== void 0 && /* @__PURE__ */ i(
+                      N,
+                      {
+                        id: "tertiary-action",
+                        type: "CHECK_BOX",
+                        name: "abstract-action-name",
+                        label: r.label,
+                        isChecked: r.state,
+                        action: r.action
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "popin__actions",
+                  role: "group",
+                  children: [
+                    e?.secondary !== void 0 && /* @__PURE__ */ i(
+                      s,
+                      {
+                        type: "secondary",
+                        label: e.secondary.label,
+                        isLoading: e.secondary.state === "LOADING",
+                        isDisabled: e.secondary.state === "DISABLED",
+                        feature: e.secondary.feature === void 0 ? "SECONDARY_ACTION" : e.secondary.feature,
+                        isAutofocus: e.secondary.isAutofocus === void 0 ? !1 : e.secondary.isAutofocus,
+                        action: e.secondary.action
+                      }
+                    ),
+                    e?.destructive !== void 0 && /* @__PURE__ */ i(
+                      s,
+                      {
+                        type: "destructive",
+                        label: e.destructive.label,
+                        isLoading: e.destructive.state === "LOADING",
+                        isDisabled: e.destructive.state === "DISABLED",
+                        feature: e.destructive.feature === void 0 ? "DESTRUCTIVE_ACTION" : e.destructive.feature,
+                        isAutofocus: e.destructive.isAutofocus === void 0 ? !1 : e.destructive.isAutofocus,
+                        action: e.destructive.action
+                      }
+                    ),
+                    e?.primary !== void 0 && /* @__PURE__ */ i(
+                      s,
+                      {
+                        type: "primary",
+                        label: e.primary.label,
+                        isLoading: e.primary.state === "LOADING",
+                        isDisabled: e.primary.state === "DISABLED",
+                        feature: e.primary.feature === void 0 ? "PRIMARY_ACTION" : e.primary.feature,
+                        isAutofocus: e.primary.isAutofocus === void 0 ? !1 : e.primary.isAutofocus,
+                        action: e.primary.action
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  O as default
+};
+//# sourceMappingURL=Popin.js.map

package/dist/components/slots/popin/Popin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popin.js","sources":["../../../../src/components/slots/popin/Popin.tsx"],"sourcesContent":["import texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Select from '@components/inputs/select/Select'\nimport Icon from '@components/assets/icon/Icon'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './popin.scss'\n\nexport interface PopInProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Type of popin layout\n   * @default 'POPIN'\n   */\n  type?: 'POPIN' | 'PANEL'\n  /**\n   * Title text\n   */\n  title: string\n  /**\n   * Optional tag to display next to the title\n   */\n  tag?: string\n  /**\n   * Configuration for action buttons\n   */\n  actions?: {\n    /** Primary action button */\n    primary?: {\n      label: string\n      state?: 'DEFAULT' | 'DISABLED' | 'LOADING'\n      isAutofocus?: boolean\n      feature?: string\n      action: React.MouseEventHandler & React.KeyboardEventHandler\n    }\n    /** Destructive action button */\n    destructive?: {\n      label: string\n      state?: 'DEFAULT' | 'DISABLED' | 'LOADING'\n      feature?: string\n      isAutofocus?: boolean\n      action: React.ReactEventHandler | (() => void)\n    }\n    /** Secondary action button */\n    secondary?: {\n      label: string\n      state?: 'DEFAULT' | 'DISABLED' | 'LOADING'\n      feature?: string\n      isAutofocus?: boolean\n      action: React.MouseEventHandler & React.KeyboardEventHandler\n    }\n  }\n  /**\n   * Select/checkbox configuration\n   */\n  select?: {\n    /** Label text */\n    label: string\n    /** Current state */\n    state: boolean\n    /** Change handler */\n    action: React.ChangeEventHandler<HTMLInputElement> | undefined\n  }\n  /**\n   * Optional indicator text\n   */\n  indicator?: string\n  /**\n   * Whether the popin is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether to use message layout\n   * @default false\n   */\n  isMessage?: boolean\n  /**\n   * Popin content\n   */\n  children?: React.ReactNode\n  /**\n   * Close handler\n   */\n  onClose: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nconst PopIn = (props: PopInProps) => {\n  const {\n    id,\n    type = 'POPIN',\n    title,\n    actions,\n    select,\n    indicator,\n    tag,\n    isLoading = false,\n    isMessage = false,\n    children,\n    onClose,\n  } = props\n\n  return (\n    <div\n      id={id}\n      className={doClassnames(['popin', type === 'PANEL' && 'popin--panel'])}\n      role={type === 'PANEL' ? 'complementary' : 'dialog'}\n      aria-modal=\"true\"\n      aria-labelledby={id ? `${id}-title` : undefined}\n      aria-label={!id ? title : undefined}\n    >\n      <div\n        className=\"popin__header\"\n        role=\"presentation\"\n      >\n        <div\n          className=\"popin__title\"\n          role=\"presentation\"\n        >\n          <span\n            id={`${id}-title`}\n            className={doClassnames([\n              texts.type,\n              texts['type--large'],\n              texts['type--bold'],\n              texts['type--truncated'],\n            ])}\n          >\n            {title}\n          </span>\n          {tag != undefined && <Chip>{tag}</Chip>}\n        </div>\n        <Button\n          type=\"icon\"\n          icon=\"close\"\n          action={onClose}\n        />\n      </div>\n      <div\n        className={doClassnames([\n          'popin__content',\n          isLoading && 'popin__content--loading',\n          isMessage && 'popin__content--message',\n        ])}\n        role=\"region\"\n        aria-busy={isLoading}\n      >\n        {isLoading ? (\n          <Icon\n            type=\"PICTO\"\n            iconName=\"spinner\"\n            role=\"status\"\n          />\n        ) : (\n          children\n        )}\n      </div>\n      {(actions !== undefined || indicator !== undefined) && (\n        <div\n          className=\"popin__footer\"\n          role=\"toolbar\"\n        >\n          <div\n            className=\"popin__extra\"\n            role=\"group\"\n          >\n            {indicator !== undefined && (\n              <div\n                className={texts.label}\n                role=\"status\"\n              >\n                {indicator}\n              </div>\n            )}\n            {select !== undefined && (\n              <Select\n                id=\"tertiary-action\"\n                type=\"CHECK_BOX\"\n                name=\"abstract-action-name\"\n                label={select.label}\n                isChecked={select.state}\n                action={select.action}\n              />\n            )}\n          </div>\n          <div\n            className=\"popin__actions\"\n            role=\"group\"\n          >\n            {actions?.secondary !== undefined && (\n              <Button\n                type=\"secondary\"\n                label={actions.secondary.label}\n                isLoading={actions.secondary.state === 'LOADING'}\n                isDisabled={actions.secondary.state === 'DISABLED'}\n                feature={\n                  actions.secondary.feature === undefined\n                    ? 'SECONDARY_ACTION'\n                    : actions.secondary.feature\n                }\n                isAutofocus={\n                  actions.secondary.isAutofocus === undefined\n                    ? false\n                    : actions.secondary.isAutofocus\n                }\n                action={actions.secondary.action}\n              />\n            )}\n            {actions?.destructive !== undefined && (\n              <Button\n                type=\"destructive\"\n                label={actions.destructive.label}\n                isLoading={actions.destructive.state === 'LOADING'}\n                isDisabled={actions.destructive.state === 'DISABLED'}\n                feature={\n                  actions.destructive.feature === undefined\n                    ? 'DESTRUCTIVE_ACTION'\n                    : actions.destructive.feature\n                }\n                isAutofocus={\n                  actions.destructive.isAutofocus === undefined\n                    ? false\n                    : actions.destructive.isAutofocus\n                }\n                action={actions.destructive.action}\n              />\n            )}\n            {actions?.primary !== undefined && (\n              <Button\n                type=\"primary\"\n                label={actions.primary.label}\n                isLoading={actions.primary.state === 'LOADING'}\n                isDisabled={actions.primary.state === 'DISABLED'}\n                feature={\n                  actions.primary.feature === undefined\n                    ? 'PRIMARY_ACTION'\n                    : actions.primary.feature\n                }\n                isAutofocus={\n                  actions.primary.isAutofocus === undefined\n                    ? false\n                    : actions.primary.isAutofocus\n                }\n                action={actions.primary.action}\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default PopIn\n"],"names":["PopIn","props","id","type","title","actions","select","indicator","tag","isLoading","isMessage","children","onClose","jsxs","doClassnames","jsx","texts","Chip","Button","Icon","Select"],"mappings":"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"}

package/dist/components/slots/section/Section.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+
+export interface SectionProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Title element for the section
+     */
+    title?: React.ReactNode;
+    /**
+     * Array of body content configurations
+     */
+    body: Array<{
+        /** Content node */
+        node?: React.ReactNode;
+        /** Spacing modifier */
+        spacingModifier?: 'LARGE' | 'TIGHT' | 'NONE';
+    }>;
+    /**
+     * Array of border positions
+     */
+    border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>;
+}
+export default class Section extends React.Component<SectionProps> {
+    setBorder: (orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined) => {
+        [key: string]: React.CSSProperties;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=Section.d.ts.map

package/dist/components/slots/section/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;QACV,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACtB,uBAAuB;QACvB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;KAC7C,CAAC,CAAA;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CACpD;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,SAAS,gBACM,MAAM,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAapE;IAED,MAAM;CAiCP"}

package/dist/components/slots/section/Section.js

@@ -0,0 +1,49 @@
+import '../../../assets/Section.css';
+import { jsxs as n, jsx as d } from "react/jsx-runtime";
+import c from "react";
+import { t as l } from "../../../do-classnames-DSDFCvzy.js";
+class g extends c.Component {
+  setBorder = (s) => {
+    const r = "var(--section-border)", o = {};
+    return s && s.forEach((e) => {
+      e === "TOP" && (o.borderTop = r), e === "LEFT" && (o.borderLeft = r), e === "BOTTOM" && (o.borderBottom = r), e === "RIGHT" && (o.borderRight = r);
+    }), o;
+  };
+  render() {
+    const { id: s, title: r, border: o, body: e } = this.props;
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        id: s,
+        className: "section",
+        style: {
+          ...this.setBorder(o)
+        },
+        role: "region",
+        children: [
+          r && /* @__PURE__ */ d("div", { role: "presentation", children: r }),
+          e.map(
+            (i, t) => (i.node !== void 0 || i.node !== null) && /* @__PURE__ */ d(
+              "div",
+              {
+                className: l([
+                  "section__child",
+                  i.spacingModifier === "LARGE" && "section__child--large",
+                  i.spacingModifier === "TIGHT" && "section__child--tight",
+                  i.spacingModifier === "NONE" && "section__child--none"
+                ]),
+                role: "group",
+                children: i.node
+              },
+              t
+            )
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  g as default
+};
+//# sourceMappingURL=Section.js.map

package/dist/components/slots/section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../../src/components/slots/section/Section.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './section.scss'\n\nexport interface SectionProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Title element for the section\n   */\n  title?: React.ReactNode\n  /**\n   * Array of body content configurations\n   */\n  body: Array<{\n    /** Content node */\n    node?: React.ReactNode\n    /** Spacing modifier */\n    spacingModifier?: 'LARGE' | 'TIGHT' | 'NONE'\n  }>\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n}\n\nexport default class Section extends React.Component<SectionProps> {\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property = 'var(--section-border)' as React.CSSProperties\n    const styles: { [key: string]: React.CSSProperties } = {}\n\n    if (!orientation) return styles\n    orientation.forEach((entry) => {\n      if (entry === 'TOP') styles.borderTop = property\n      if (entry === 'LEFT') styles.borderLeft = property\n      if (entry === 'BOTTOM') styles.borderBottom = property\n      if (entry === 'RIGHT') styles.borderRight = property\n    })\n    return styles\n  }\n\n  render() {\n    const { id, title, border, body } = this.props\n\n    return (\n      <div\n        id={id}\n        className=\"section\"\n        style={{\n          ...this.setBorder(border),\n        }}\n        role=\"region\"\n      >\n        {title && <div role=\"presentation\">{title}</div>}\n        {body.map(\n          (item, index) =>\n            (item.node !== undefined || item.node !== null) && (\n              <div\n                key={index}\n                className={doClassnames([\n                  'section__child',\n                  item.spacingModifier === 'LARGE' && 'section__child--large',\n                  item.spacingModifier === 'TIGHT' && 'section__child--tight',\n                  item.spacingModifier === 'NONE' && 'section__child--none',\n                ])}\n                role=\"group\"\n              >\n                {item.node}\n              </div>\n            )\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["Section","React","orientation","property","styles","entry","id","title","border","body","jsxs","jsx","item","index","doClassnames"],"mappings":";;;AA4BA,MAAqBA,UAAgBC,EAAM,UAAwB;AAAA,EACjE,YAAY,CACVC,MACG;AACH,UAAMC,IAAW,yBACXC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,IAAAE,GAAI,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAA,IAAS,KAAK;AAEzC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAJ;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,UACL,GAAG,KAAK,UAAUE,CAAM;AAAA,QAAA;AAAA,QAE1B,MAAK;AAAA,QAEJ,UAAA;AAAA,UAAAD,KAAS,gBAAAI,EAAC,OAAA,EAAI,MAAK,gBAAgB,UAAAJ,GAAM;AAAA,UACzCE,EAAK;AAAA,YACJ,CAACG,GAAMC,OACJD,EAAK,SAAS,UAAaA,EAAK,SAAS,SACxC,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWG,EAAa;AAAA,kBACtB;AAAA,kBACAF,EAAK,oBAAoB,WAAW;AAAA,kBACpCA,EAAK,oBAAoB,WAAW;AAAA,kBACpCA,EAAK,oBAAoB,UAAU;AAAA,gBAAA,CACpC;AAAA,gBACD,MAAK;AAAA,gBAEJ,UAAAA,EAAK;AAAA,cAAA;AAAA,cATDC;AAAA,YAAA;AAAA,UAUP;AAAA,QAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/components/slots/simple-item/SimpleItem.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+
+export interface SimpleItemProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Content for the left section
+     */
+    leftPartSlot: React.ReactNode;
+    /**
+     * Content for the right section
+     */
+    rightPartSlot?: React.ReactNode;
+    /**
+     * Whether to render as a list item
+     * @default true
+     */
+    isListItem?: boolean;
+    /**
+     * Whether the item is clickable
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Whether to use transparent background
+     * @default false
+     */
+    isTransparent?: boolean;
+    /**
+     * Vertical alignment mode
+     * @default 'DEFAULT'
+     */
+    alignment?: 'DEFAULT' | 'CENTER' | 'BASELINE';
+    /**
+     * Click handler
+     */
+    action?: React.MouseEventHandler<HTMLLIElement | HTMLElement> & React.KeyboardEventHandler<HTMLLIElement | HTMLElement>;
+}
+export default class SimpleItem extends React.Component<SimpleItemProps> {
+    static defaultProps: Partial<SimpleItemProps>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=SimpleItem.d.ts.map

package/dist/components/slots/simple-item/SimpleItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleItem.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/simple-item/SimpleItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,oBAAoB,CAAA;AAE3B,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,GAAG,WAAW,CAAC,GAC3D,KAAK,CAAC,oBAAoB,CAAC,aAAa,GAAG,WAAW,CAAC,CAAA;CAC1D;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAK5C;IAED,MAAM;CAgFP"}

package/dist/components/slots/simple-item/SimpleItem.js

@@ -0,0 +1,100 @@
+import '../../../assets/SimpleItem.css';
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import c from "react";
+import { t as o } from "../../../do-classnames-DSDFCvzy.js";
+class h extends c.Component {
+  static defaultProps = {
+    isListItem: !0,
+    isInteractive: !1,
+    isTransparent: !1,
+    alignment: "DEFAULT"
+  };
+  render() {
+    const {
+      id: n,
+      leftPartSlot: a,
+      rightPartSlot: l,
+      isListItem: p,
+      isInteractive: e,
+      isTransparent: d,
+      alignment: i,
+      action: s
+    } = this.props;
+    return p ? /* @__PURE__ */ m(
+      "li",
+      {
+        "data-id": n,
+        className: o([
+          "simple-item",
+          i === "CENTER" && "simple-item--centered",
+          i === "BASELINE" && "simple-item--baseline",
+          e && "simple-item--interactive",
+          d && "simple-item--transparent"
+        ]),
+        tabIndex: e ? 0 : -1,
+        onMouseDown: e ? s : void 0,
+        onKeyDown: (t) => {
+          (t.key === " " || t.key === "Enter") && e && s?.(t), t.key === "Escape" && e && t.target.blur();
+        },
+        role: e ? "button" : "listitem",
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "simple-item__left",
+              role: "presentation",
+              children: a
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "simple-item__right",
+              role: "presentation",
+              children: l
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ m(
+      "div",
+      {
+        "data-id": n,
+        className: o([
+          "simple-item",
+          i === "CENTER" && "simple-item--centered",
+          i === "BASELINE" && "simple-item--baseline",
+          e && "simple-item--interactive"
+        ]),
+        tabIndex: e ? 0 : -1,
+        onMouseDown: e ? s : void 0,
+        onKeyDown: (t) => {
+          (t.key === " " || t.key === "Enter") && e && s?.(t), t.key === "Escape" && e && t.target.blur();
+        },
+        role: e ? "button" : "group",
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "simple-item__left",
+              role: "presentation",
+              children: a
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "simple-item__right",
+              role: "presentation",
+              children: l
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  h as default
+};
+//# sourceMappingURL=SimpleItem.js.map

package/dist/components/slots/simple-item/SimpleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleItem.js","sources":["../../../../src/components/slots/simple-item/SimpleItem.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './simple-item.scss'\n\nexport interface SimpleItemProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Content for the left section\n   */\n  leftPartSlot: React.ReactNode\n  /**\n   * Content for the right section\n   */\n  rightPartSlot?: React.ReactNode\n  /**\n   * Whether to render as a list item\n   * @default true\n   */\n  isListItem?: boolean\n  /**\n   * Whether the item is clickable\n   * @default false\n   */\n  isInteractive?: boolean\n  /**\n   * Whether to use transparent background\n   * @default false\n   */\n  isTransparent?: boolean\n  /**\n   * Vertical alignment mode\n   * @default 'DEFAULT'\n   */\n  alignment?: 'DEFAULT' | 'CENTER' | 'BASELINE'\n  /**\n   * Click handler\n   */\n  action?: React.MouseEventHandler<HTMLLIElement | HTMLElement> &\n    React.KeyboardEventHandler<HTMLLIElement | HTMLElement>\n}\n\nexport default class SimpleItem extends React.Component<SimpleItemProps> {\n  static defaultProps: Partial<SimpleItemProps> = {\n    isListItem: true,\n    isInteractive: false,\n    isTransparent: false,\n    alignment: 'DEFAULT',\n  }\n\n  render() {\n    const {\n      id,\n      leftPartSlot,\n      rightPartSlot,\n      isListItem,\n      isInteractive,\n      isTransparent,\n      alignment,\n      action,\n    } = this.props\n\n    if (isListItem)\n      return (\n        <li\n          data-id={id}\n          className={doClassnames([\n            'simple-item',\n            alignment === 'CENTER' && 'simple-item--centered',\n            alignment === 'BASELINE' && 'simple-item--baseline',\n            isInteractive && 'simple-item--interactive',\n            isTransparent && 'simple-item--transparent',\n          ])}\n          tabIndex={isInteractive ? 0 : -1}\n          onMouseDown={isInteractive ? action : undefined}\n          onKeyDown={(e) => {\n            if ((e.key === ' ' || e.key === 'Enter') && isInteractive)\n              action?.(e)\n            if (e.key === 'Escape' && isInteractive)\n              (e.target as HTMLElement).blur()\n          }}\n          role={isInteractive ? 'button' : 'listitem'}\n        >\n          <div\n            className=\"simple-item__left\"\n            role=\"presentation\"\n          >\n            {leftPartSlot}\n          </div>\n          <div\n            className=\"simple-item__right\"\n            role=\"presentation\"\n          >\n            {rightPartSlot}\n          </div>\n        </li>\n      )\n    return (\n      <div\n        data-id={id}\n        className={doClassnames([\n          'simple-item',\n          alignment === 'CENTER' && 'simple-item--centered',\n          alignment === 'BASELINE' && 'simple-item--baseline',\n          isInteractive && 'simple-item--interactive',\n        ])}\n        tabIndex={isInteractive ? 0 : -1}\n        onMouseDown={isInteractive ? action : undefined}\n        onKeyDown={(e) => {\n          if ((e.key === ' ' || e.key === 'Enter') && isInteractive) action?.(e)\n          if (e.key === 'Escape' && isInteractive)\n            (e.target as HTMLElement).blur()\n        }}\n        role={isInteractive ? 'button' : 'group'}\n      >\n        <div\n          className=\"simple-item__left\"\n          role=\"presentation\"\n        >\n          {leftPartSlot}\n        </div>\n        <div\n          className=\"simple-item__right\"\n          role=\"presentation\"\n        >\n          {rightPartSlot}\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["SimpleItem","React","id","leftPartSlot","rightPartSlot","isListItem","isInteractive","isTransparent","alignment","action","jsxs","doClassnames","e","jsx"],"mappings":";;;AA4CA,MAAqBA,UAAmBC,EAAM,UAA2B;AAAA,EACvE,OAAO,eAAyC;AAAA,IAC9C,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,WAAW;AAAA,EAAA;AAAA,EAGb,SAAS;AACP,UAAM;AAAA,MACJ,IAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,eAAAC;AAAA,MACA,WAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,IACE,KAAK;AAET,WAAIJ,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAASR;AAAA,QACT,WAAWS,EAAa;AAAA,UACtB;AAAA,UACAH,MAAc,YAAY;AAAA,UAC1BA,MAAc,cAAc;AAAA,UAC5BF,KAAiB;AAAA,UACjBC,KAAiB;AAAA,QAAA,CAClB;AAAA,QACD,UAAUD,IAAgB,IAAI;AAAA,QAC9B,aAAaA,IAAgBG,IAAS;AAAA,QACtC,WAAW,CAACG,MAAM;AAChB,WAAKA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAYN,KAC1CG,IAASG,CAAC,GACRA,EAAE,QAAQ,YAAYN,KACvBM,EAAE,OAAuB,KAAA;AAAA,QAC9B;AAAA,QACA,MAAMN,IAAgB,WAAW;AAAA,QAEjC,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAV;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAT;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA,IAIJ,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAASR;AAAA,QACT,WAAWS,EAAa;AAAA,UACtB;AAAA,UACAH,MAAc,YAAY;AAAA,UAC1BA,MAAc,cAAc;AAAA,UAC5BF,KAAiB;AAAA,QAAA,CAClB;AAAA,QACD,UAAUA,IAAgB,IAAI;AAAA,QAC9B,aAAaA,IAAgBG,IAAS;AAAA,QACtC,WAAW,CAACG,MAAM;AAChB,WAAKA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAYN,SAAwBM,CAAC,GACjEA,EAAE,QAAQ,YAAYN,KACvBM,EAAE,OAAuB,KAAA;AAAA,QAC9B;AAAA,QACA,MAAMN,IAAgB,WAAW;AAAA,QAEjC,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAV;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAT;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/components/tags/chip/Chip.d.ts

@@ -0,0 +1,43 @@
+
+export interface ChipProps {
+    /**
+     * Visual state of the chip
+     * @default 'ACTIVE'
+     */
+    state?: 'ACTIVE' | 'INACTIVE' | 'ON_BACKGROUND';
+    /**
+     * Content for the left slot
+     */
+    leftSlot?: React.ReactElement;
+    /**
+     * Content for the right slot
+     */
+    rightSlot?: React.ReactElement;
+    /**
+     * Text content of the chip
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the chip is displayed alone (adds padding)
+     * @default false
+     */
+    isSolo?: boolean;
+    /**
+     * Preview tooltip configuration
+     */
+    preview?: {
+        /** Preview image URL */
+        image: string;
+        /** Preview text */
+        text: string | React.ReactNode;
+        /** Preview position */
+        pin?: 'TOP' | 'BOTTOM';
+    };
+    /**
+     * Click handler
+     */
+    action?: React.MouseEventHandler & React.KeyboardEventHandler<HTMLDivElement>;
+}
+declare const Chip: (props: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export default Chip;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/tags/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/tags/chip/Chip.tsx"],"names":[],"mappings":";AAIA,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,eAAe,CAAA;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAA;CAC9E;AAED,QAAA,MAAM,IAAI,UAAW,SAAS,4CA+E7B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/tags/chip/Chip.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Chip.figma.d.ts.map

package/dist/components/tags/chip/Chip.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.figma.d.ts","sourceRoot":"","sources":["../../../../src/components/tags/chip/Chip.figma.tsx"],"names":[],"mappings":""}

package/dist/components/tags/chip/Chip.figma.js

@@ -0,0 +1,18 @@
+import { jsx as a } from "react/jsx-runtime";
+import { i as t } from "../../../index_react-CmuCVQet.js";
+import e from "./Chip.js";
+t.figma.connect(
+  e,
+  "https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=276:83",
+  {
+    props: {
+      state: t.figma.enum("state", {
+        ACTIVE: "ACTIVE",
+        INACTIVE: "INACTIVE",
+        TRANSPARENT: "ON_BACKGROUND"
+      })
+    },
+    example: (i) => /* @__PURE__ */ a(e, { state: i.state, children: "Label" })
+  }
+);
+//# sourceMappingURL=Chip.figma.js.map

package/dist/components/tags/chip/Chip.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.figma.js","sources":["../../../../src/components/tags/chip/Chip.figma.tsx"],"sourcesContent":["import { figma } from '@figma/code-connect'\nimport Chip from './Chip'\n\nfigma.connect(\n  Chip,\n  'https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=276:83',\n  {\n    props: {\n      state: figma.enum('state', {\n        ACTIVE: 'ACTIVE',\n        INACTIVE: 'INACTIVE',\n        TRANSPARENT: 'ON_BACKGROUND',\n      }),\n    },\n    example: (props) => <Chip state={props.state}>Label</Chip>,\n  }\n)\n"],"names":["figma","Chip","props","jsx"],"mappings":";;;AAGAA,EAAAA,MAAM;AAAA,EACJC;AAAA,EACA;AAAA,EACA;AAAA,IACE,OAAO;AAAA,MACL,OAAOD,EAAAA,MAAM,KAAK,SAAS;AAAA,QACzB,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,IAEH,SAAS,CAACE,MAAU,gBAAAC,EAACF,KAAK,OAAOC,EAAM,OAAO,UAAA,QAAA,CAAK;AAAA,EAAA;AAEvD;"}

package/dist/components/tags/chip/Chip.js

@@ -0,0 +1,88 @@
+import '../../../assets/Chip.css';
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useState as p } from "react";
+import a from "../../../styles/texts/texts.module.js";
+import { t as d } from "../../../do-classnames-DSDFCvzy.js";
+import h from "../tooltip/Tooltip.js";
+const _ = (o) => {
+  const { children: l, state: r = "ACTIVE", isSolo: v = !1, preview: e, action: i } = o, [c, s] = p(!1);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: d([
+        "chip",
+        r === "INACTIVE" && "chip--inactive",
+        r === "ON_BACKGROUND" && "chip--on-background",
+        v && "chip--solo",
+        (i !== void 0 || e !== void 0) && "chip--interactive"
+      ]),
+      onMouseDown: (t) => {
+        if (i) i(t);
+        else return;
+      },
+      onMouseEnter: () => {
+        e !== void 0 && s(!0);
+      },
+      onMouseLeave: () => {
+        e !== void 0 && s(!1);
+      },
+      onKeyDown: (t) => {
+        if (i && (t.key === "Enter" || t.key === " ")) i(t);
+        else return;
+      },
+      onFocus: () => {
+        e !== void 0 && s(!0);
+      },
+      onBlur: () => {
+        e !== void 0 && s(!1);
+      },
+      tabIndex: i !== void 0 || e !== void 0 ? 0 : -1,
+      role: i !== void 0 || e !== void 0 ? "button" : void 0,
+      "aria-pressed": i !== void 0 ? r === "ACTIVE" : void 0,
+      "aria-disabled": r === "INACTIVE" ? !0 : void 0,
+      children: [
+        o.leftSlot && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "chip__left-slot",
+            role: "presentation",
+            children: o.leftSlot
+          }
+        ),
+        l !== void 0 && /* @__PURE__ */ n(
+          "div",
+          {
+            className: d([
+              "chip__text",
+              a.type,
+              a["type--truncated"]
+            ]),
+            role: "presentation",
+            children: l
+          }
+        ),
+        o.rightSlot && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "chip__right-slot",
+            role: "presentation",
+            children: o.rightSlot
+          }
+        ),
+        c && /* @__PURE__ */ n(
+          h,
+          {
+            pin: e?.pin || "BOTTOM",
+            type: "WITH_IMAGE",
+            image: e?.image,
+            children: e?.text
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=Chip.js.map

package/dist/components/tags/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/tags/chip/Chip.tsx"],"sourcesContent":["import { useState } from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport Tooltip from '../tooltip/Tooltip'\nimport './chip.scss'\n\nexport interface ChipProps {\n  /**\n   * Visual state of the chip\n   * @default 'ACTIVE'\n   */\n  state?: 'ACTIVE' | 'INACTIVE' | 'ON_BACKGROUND'\n  /**\n   * Content for the left slot\n   */\n  leftSlot?: React.ReactElement\n  /**\n   * Content for the right slot\n   */\n  rightSlot?: React.ReactElement\n  /**\n   * Text content of the chip\n   */\n  children?: React.ReactNode\n  /**\n   * Whether the chip is displayed alone (adds padding)\n   * @default false\n   */\n  isSolo?: boolean\n  /**\n   * Preview tooltip configuration\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Click handler\n   */\n  action?: React.MouseEventHandler & React.KeyboardEventHandler<HTMLDivElement>\n}\n\nconst Chip = (props: ChipProps) => {\n  const { children, state = 'ACTIVE', isSolo = false, preview, action } = props\n  const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n\n  return (\n    <div\n      className={doClassnames([\n        'chip',\n        state === 'INACTIVE' && 'chip--inactive',\n        state === 'ON_BACKGROUND' && 'chip--on-background',\n        isSolo && 'chip--solo',\n        (action !== undefined || preview !== undefined) && 'chip--interactive',\n      ])}\n      onMouseDown={(e) => {\n        if (action) action(e)\n        else return undefined\n      }}\n      onMouseEnter={() => {\n        if (preview !== undefined) setIsPreviewVisible(true)\n      }}\n      onMouseLeave={() => {\n        if (preview !== undefined) setIsPreviewVisible(false)\n      }}\n      onKeyDown={(e) => {\n        if (action && (e.key === 'Enter' || e.key === ' ')) action(e)\n        else return undefined\n      }}\n      onFocus={() => {\n        if (preview !== undefined) setIsPreviewVisible(true)\n      }}\n      onBlur={() => {\n        if (preview !== undefined) setIsPreviewVisible(false)\n      }}\n      tabIndex={action !== undefined || preview !== undefined ? 0 : -1}\n      role={\n        action !== undefined || preview !== undefined ? 'button' : undefined\n      }\n      aria-pressed={action !== undefined ? state === 'ACTIVE' : undefined}\n      aria-disabled={state === 'INACTIVE' ? true : undefined}\n    >\n      {props.leftSlot && (\n        <div\n          className=\"chip__left-slot\"\n          role=\"presentation\"\n        >\n          {props.leftSlot}\n        </div>\n      )}\n      {children !== undefined && (\n        <div\n          className={doClassnames([\n            'chip__text',\n            texts.type,\n            texts['type--truncated'],\n          ])}\n          role=\"presentation\"\n        >\n          {children}\n        </div>\n      )}\n      {props.rightSlot && (\n        <div\n          className=\"chip__right-slot\"\n          role=\"presentation\"\n        >\n          {props.rightSlot}\n        </div>\n      )}\n      {isPreviewVisible && (\n        <Tooltip\n          pin={preview?.pin || 'BOTTOM'}\n          type=\"WITH_IMAGE\"\n          image={preview?.image}\n        >\n          {preview?.text}\n        </Tooltip>\n      )}\n    </div>\n  )\n}\n\nexport default Chip\n"],"names":["Chip","props","children","state","isSolo","preview","action","isPreviewVisible","setIsPreviewVisible","useState","jsxs","doClassnames","e","jsx","texts","Tooltip"],"mappings":";;;;;AA8CA,MAAMA,IAAO,CAACC,MAAqB;AACjC,QAAM,EAAE,UAAAC,GAAU,OAAAC,IAAQ,UAAU,QAAAC,IAAS,IAAO,SAAAC,GAAS,QAAAC,MAAWL,GAClE,CAACM,GAAkBC,CAAmB,IAAIC,EAAS,EAAK;AAE9D,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa;AAAA,QACtB;AAAA,QACAR,MAAU,cAAc;AAAA,QACxBA,MAAU,mBAAmB;AAAA,QAC7BC,KAAU;AAAA,SACTE,MAAW,UAAaD,MAAY,WAAc;AAAA,MAAA,CACpD;AAAA,MACD,aAAa,CAACO,MAAM;AAClB,YAAIN,KAAeM,CAAC;AAAA,YACf;AAAA,MACP;AAAA,MACA,cAAc,MAAM;AAClB,QAAIP,MAAY,UAAWG,EAAoB,EAAI;AAAA,MACrD;AAAA,MACA,cAAc,MAAM;AAClB,QAAIH,MAAY,UAAWG,EAAoB,EAAK;AAAA,MACtD;AAAA,MACA,WAAW,CAACI,MAAM;AAChB,YAAIN,MAAWM,EAAE,QAAQ,WAAWA,EAAE,QAAQ,QAAaA,CAAC;AAAA,YACvD;AAAA,MACP;AAAA,MACA,SAAS,MAAM;AACb,QAAIP,MAAY,UAAWG,EAAoB,EAAI;AAAA,MACrD;AAAA,MACA,QAAQ,MAAM;AACZ,QAAIH,MAAY,UAAWG,EAAoB,EAAK;AAAA,MACtD;AAAA,MACA,UAAUF,MAAW,UAAaD,MAAY,SAAY,IAAI;AAAA,MAC9D,MACEC,MAAW,UAAaD,MAAY,SAAY,WAAW;AAAA,MAE7D,gBAAcC,MAAW,SAAYH,MAAU,WAAW;AAAA,MAC1D,iBAAeA,MAAU,aAAa,KAAO;AAAA,MAE5C,UAAA;AAAA,QAAAF,EAAM,YACL,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAZ,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAGVC,MAAa,UACZ,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAa;AAAA,cACtB;AAAA,cACAG,EAAM;AAAA,cACNA,EAAM,iBAAiB;AAAA,YAAA,CACxB;AAAA,YACD,MAAK;AAAA,YAEJ,UAAAZ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJD,EAAM,aACL,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAZ,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAGVM,KACC,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,KAAKV,GAAS,OAAO;AAAA,YACrB,MAAK;AAAA,YACL,OAAOA,GAAS;AAAA,YAEf,UAAAA,GAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAIR;"}