@unoff/ui 1.21.0

package/dist/components/slots/drawer/Drawer.js

@@ -0,0 +1,148 @@
+import '../../../assets/Drawer.css';
+import { jsxs as v, jsx as T } from "react/jsx-runtime";
+import p from "react";
+import { t as f } from "../../../do-classnames-DSDFCvzy.js";
+class E extends p.Component {
+  drawerRef;
+  static defaultProps = {
+    isScrolling: !1
+  };
+  constructor(e) {
+    super(e), this.state = {
+      isDrawerCollapsed: !1,
+      drawerSize: {
+        value: e.defaultSize.value,
+        unit: e.defaultSize.unit
+      }
+    }, this.drawerRef = p.createRef();
+  }
+  // Lifecycle
+  componentDidUpdate = (e, t) => {
+    const { onCollapse: r, onExpand: i } = this.props, { isDrawerCollapsed: o } = this.state;
+    o && !t.isDrawerCollapsed && r && r(), !o && t.isDrawerCollapsed && i && i();
+  };
+  // Handlers
+  clickHandler = (e) => {
+    const { defaultSize: t, maxSize: r } = this.props, { drawerSize: i } = this.state;
+    document.body.style.cursor = "", document.removeEventListener("mousemove", this.onDrag), e.detail === 2 && this.setState({
+      drawerSize: i === t ? r : t,
+      isDrawerCollapsed: !1
+    });
+  };
+  // Direct Actions
+  setBorder = (e) => {
+    const t = "var(--drawer-border)", r = {};
+    return e && e.forEach((i) => {
+      i === "TOP" && (r.borderTop = t), i === "LEFT" && (r.borderLeft = t), i === "BOTTOM" && (r.borderBottom = t), i === "RIGHT" && (r.borderRight = t);
+    }), r;
+  };
+  setUnit = (e) => e.unit === "AUTO" ? "auto" : e.unit === "PIXEL" ? `${e.value}px` : `${e.value}%`;
+  expandDrawer = () => {
+    const { defaultSize: e } = this.props;
+    this.setState({
+      drawerSize: e,
+      isDrawerCollapsed: !1
+    });
+  };
+  collapseDrawer = () => {
+    const { minSize: e } = this.props;
+    this.setState({
+      drawerSize: e,
+      isDrawerCollapsed: !0
+    });
+  };
+  onGrab = () => {
+    document.body.style.cursor = "ns-resize", document.addEventListener("mousemove", this.onDrag);
+  };
+  onDrag = (e) => {
+    const { direction: t, pin: r, minSize: i, maxSize: o } = this.props, { drawerRef: n } = this, { clientX: c, clientY: u } = e;
+    if (!n.current) return;
+    const s = n.current.getBoundingClientRect(), l = n.current.parentElement?.getBoundingClientRect();
+    if (!l) return;
+    let a = 0;
+    const m = t === "VERTICAL" ? l.height : l.width;
+    if (r === "TOP") {
+      const d = l.bottom - s.top;
+      a = Math.min(u - s.top, d);
+    } else if (r === "BOTTOM") {
+      const d = s.bottom - l.top;
+      a = Math.min(s.bottom - u, d);
+    } else if (r === "LEFT") {
+      const d = l.right - s.left;
+      a = Math.min(c - s.left, d);
+    } else if (r === "RIGHT") {
+      const d = s.right - l.left;
+      a = Math.min(s.right - c, d);
+    }
+    a = Math.max(0, a);
+    const h = i.unit === "PERCENT" ? (i.value ?? 0) * m / 100 : i.value ?? 0, w = o.unit === "PERCENT" ? (o.value ?? 100) * m / 100 : o.value ?? 1 / 0;
+    a = Math.max(h, Math.min(a, w)), this.setState({
+      drawerSize: {
+        value: o.unit === "PERCENT" ? a / m * 100 : a,
+        unit: o.unit
+      },
+      isDrawerCollapsed: a <= h
+    }), document.body.style.cursor = t === "VERTICAL" ? "ns-resize" : "ew-resize", document.addEventListener("mouseup", () => {
+      document.body.style.cursor = "", document.removeEventListener("mousemove", this.onDrag);
+    });
+  };
+  // Render
+  render() {
+    const {
+      id: e,
+      pin: t,
+      children: r,
+      direction: i,
+      border: o,
+      maxSize: n,
+      minSize: c,
+      isScrolling: u
+    } = this.props, { drawerSize: s } = this.state;
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        id: e,
+        style: {
+          ...this.setBorder(o),
+          ...i === "VERTICAL" ? {
+            height: this.setUnit(s),
+            maxHeight: this.setUnit(n),
+            minHeight: this.setUnit(c)
+          } : {
+            width: this.setUnit(s),
+            maxWidth: this.setUnit(n),
+            minWidth: this.setUnit(c)
+          }
+        },
+        className: f(["drawer", u && "drawer--scrolling"]),
+        ref: this.drawerRef,
+        children: [
+          /* @__PURE__ */ T(
+            "div",
+            {
+              className: f([
+                "drawer__knob",
+                t === "TOP" && "drawer__knob--top",
+                t === "LEFT" && "drawer__knob--left",
+                t === "BOTTOM" && "drawer__knob--bottom",
+                t === "RIGHT" && "drawer__knob--right"
+              ]),
+              onMouseDown: this.onGrab,
+              onClick: this.clickHandler,
+              role: "separator",
+              "aria-orientation": i === "VERTICAL" ? "vertical" : "horizontal",
+              "aria-valuemin": c.value,
+              "aria-valuemax": n.value,
+              "aria-valuenow": s.value
+            }
+          ),
+          r
+        ]
+      }
+    );
+  }
+}
+export {
+  E as default
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/components/slots/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/slots/drawer/Drawer.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './drawer.scss'\n\ninterface Unit {\n  value?: number\n  unit: 'PIXEL' | 'PERCENT' | 'AUTO'\n}\n\nexport type DrawerProps = {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Direction of the drawer layout\n   */\n  direction: 'VERTICAL' | 'HORIZONTAL'\n  /**\n   * Position of the drawer\n   */\n  pin: 'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT'\n  /**\n   * Default size of the drawer\n   */\n  defaultSize: Unit\n  /**\n   * Maximum allowed size\n   */\n  maxSize: Unit\n  /**\n   * Minimum allowed size\n   */\n  minSize: Unit\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n  /**\n   * Whether the content is scrollable\n   * @default false\n   */\n  isScrolling?: boolean\n  /**\n   * Drawer content\n   */\n  children?: React.ReactNode\n  /**\n   * Callback when drawer collapses\n   */\n  onCollapse?: () => void\n  /**\n   * Callback when drawer expands\n   */\n  onExpand?: () => void\n}\n\nexport type DrawerState = {\n  isDrawerCollapsed: boolean\n  drawerSize: {\n    value?: number\n    unit: 'PIXEL' | 'PERCENT' | 'AUTO'\n  }\n}\n\nexport default class Drawer extends React.Component<DrawerProps, DrawerState> {\n  drawerRef: React.RefObject<HTMLDivElement>\n\n  static defaultProps: Partial<DrawerProps> = {\n    isScrolling: false,\n  }\n\n  constructor(props: DrawerProps) {\n    super(props)\n    this.state = {\n      isDrawerCollapsed: false,\n      drawerSize: {\n        value: props.defaultSize.value,\n        unit: props.defaultSize.unit,\n      },\n    }\n    this.drawerRef = React.createRef()\n  }\n\n  // Lifecycle\n  componentDidUpdate = (\n    _: Readonly<DrawerProps>,\n    prevState: Readonly<DrawerState>\n  ) => {\n    const { onCollapse, onExpand } = this.props\n    const { isDrawerCollapsed } = this.state\n\n    if (isDrawerCollapsed && !prevState.isDrawerCollapsed)\n      onCollapse && onCollapse()\n    if (!isDrawerCollapsed && prevState.isDrawerCollapsed)\n      onExpand && onExpand()\n  }\n\n  // Handlers\n  clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { defaultSize, maxSize } = this.props\n    const { drawerSize } = this.state\n\n    document.body.style.cursor = ''\n    document.removeEventListener('mousemove', this.onDrag)\n\n    if (e.detail === 2)\n      this.setState({\n        drawerSize: drawerSize === defaultSize ? maxSize : defaultSize,\n        isDrawerCollapsed: false,\n      })\n  }\n\n  // Direct Actions\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property = 'var(--drawer-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  setUnit = (size: Unit) => {\n    if (size.unit === 'AUTO') return 'auto'\n    return size.unit === 'PIXEL' ? `${size.value}px` : `${size.value}%`\n  }\n\n  expandDrawer = () => {\n    const { defaultSize } = this.props\n\n    this.setState({\n      drawerSize: defaultSize,\n      isDrawerCollapsed: false,\n    })\n  }\n\n  collapseDrawer = () => {\n    const { minSize } = this.props\n\n    this.setState({\n      drawerSize: minSize,\n      isDrawerCollapsed: true,\n    })\n  }\n\n  onGrab = () => {\n    document.body.style.cursor = 'ns-resize'\n    document.addEventListener('mousemove', this.onDrag)\n  }\n\n  onDrag = (e: MouseEvent) => {\n    const { direction, pin, minSize, maxSize } = this.props\n    const { drawerRef } = this\n    const { clientX, clientY } = e\n\n    if (!drawerRef.current) return\n\n    const rect = drawerRef.current.getBoundingClientRect()\n    const parentRect = drawerRef.current.parentElement?.getBoundingClientRect()\n\n    if (!parentRect) return\n\n    let delta = 0\n    const parentSize =\n      direction === 'VERTICAL' ? parentRect.height : parentRect.width\n\n    if (pin === 'TOP') {\n      const maxDelta = parentRect.bottom - rect.top\n      delta = Math.min(clientY - rect.top, maxDelta)\n    } else if (pin === 'BOTTOM') {\n      const maxDelta = rect.bottom - parentRect.top\n      delta = Math.min(rect.bottom - clientY, maxDelta)\n    } else if (pin === 'LEFT') {\n      const maxDelta = parentRect.right - rect.left\n      delta = Math.min(clientX - rect.left, maxDelta)\n    } else if (pin === 'RIGHT') {\n      const maxDelta = rect.right - parentRect.left\n      delta = Math.min(rect.right - clientX, maxDelta)\n    }\n\n    delta = Math.max(0, delta)\n\n    const minPixels =\n      minSize.unit === 'PERCENT'\n        ? ((minSize.value ?? 0) * parentSize) / 100\n        : (minSize.value ?? 0)\n    const maxPixels =\n      maxSize.unit === 'PERCENT'\n        ? ((maxSize.value ?? 100) * parentSize) / 100\n        : (maxSize.value ?? Infinity)\n\n    delta = Math.max(minPixels, Math.min(delta, maxPixels))\n\n    this.setState({\n      drawerSize: {\n        value: maxSize.unit === 'PERCENT' ? (delta / parentSize) * 100 : delta,\n        unit: maxSize.unit,\n      },\n      isDrawerCollapsed: delta <= minPixels,\n    })\n\n    document.body.style.cursor =\n      direction === 'VERTICAL' ? 'ns-resize' : 'ew-resize'\n    document.addEventListener('mouseup', () => {\n      document.body.style.cursor = ''\n      document.removeEventListener('mousemove', this.onDrag)\n    })\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      pin,\n      children,\n      direction,\n      border,\n      maxSize,\n      minSize,\n      isScrolling,\n    } = this.props\n    const { drawerSize } = this.state\n\n    return (\n      <div\n        id={id}\n        style={{\n          ...this.setBorder(border),\n          ...(direction === 'VERTICAL'\n            ? {\n                height: this.setUnit(drawerSize),\n                maxHeight: this.setUnit(maxSize),\n                minHeight: this.setUnit(minSize),\n              }\n            : {\n                width: this.setUnit(drawerSize),\n                maxWidth: this.setUnit(maxSize),\n                minWidth: this.setUnit(minSize),\n              }),\n        }}\n        className={doClassnames(['drawer', isScrolling && 'drawer--scrolling'])}\n        ref={this.drawerRef}\n      >\n        <div\n          className={doClassnames([\n            'drawer__knob',\n            pin === 'TOP' && 'drawer__knob--top',\n            pin === 'LEFT' && 'drawer__knob--left',\n            pin === 'BOTTOM' && 'drawer__knob--bottom',\n            pin === 'RIGHT' && 'drawer__knob--right',\n          ])}\n          onMouseDown={this.onGrab}\n          onClick={this.clickHandler}\n          role=\"separator\"\n          aria-orientation={\n            direction === 'VERTICAL' ? 'vertical' : 'horizontal'\n          }\n          aria-valuemin={minSize.value}\n          aria-valuemax={maxSize.value}\n          aria-valuenow={drawerSize.value}\n        />\n        {children}\n      </div>\n    )\n  }\n}\n"],"names":["Drawer","React","props","_","prevState","onCollapse","onExpand","isDrawerCollapsed","defaultSize","maxSize","drawerSize","orientation","property","styles","entry","size","minSize","direction","pin","drawerRef","clientX","clientY","rect","parentRect","delta","parentSize","maxDelta","minPixels","maxPixels","id","children","border","isScrolling","jsxs","doClassnames","jsx"],"mappings":"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"}

package/dist/components/slots/form-item/FormItem.d.ts

@@ -0,0 +1,52 @@
+
+export interface FormItemProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Label text for the form item
+     */
+    label?: string;
+    /**
+     * Helper or error message configuration
+     */
+    helper?: {
+        /** Type of message */
+        type: 'INFO' | 'ERROR';
+        /** Message text */
+        message: string;
+    };
+    /**
+     * Whether to fill available width
+     * @default true
+     */
+    shouldFill?: boolean;
+    /**
+     * Whether to align content to baseline
+     * @default false
+     */
+    isBaseline?: boolean;
+    /**
+     * Whether to use multi-line layout
+     * @default false
+     */
+    isMultiLine?: boolean;
+    /**
+     * Whether the item is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Whether to show a "New" badge
+     * @default false
+     */
+    isNew?: boolean;
+    /**
+     * Form input element
+     */
+    children: React.ReactNode;
+}
+declare const FormItem: (props: FormItemProps) => import("react/jsx-runtime").JSX.Element;
+export default FormItem;
+//# sourceMappingURL=FormItem.d.ts.map

package/dist/components/slots/form-item/FormItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/form-item/FormItem.tsx"],"names":[],"mappings":";AAIA,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,sBAAsB;QACtB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,mBAAmB;QACnB,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IACD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,QAAQ,UAAW,aAAa,4CAoErC,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/components/slots/form-item/FormItem.js

@@ -0,0 +1,89 @@
+import '../../../assets/FormItem.css';
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import p from "../../../styles/texts/texts.module.js";
+import h from "../../tags/chip/Chip.js";
+import _ from "../../dialogs/message/Message.js";
+import { t as m } from "../../../do-classnames-DSDFCvzy.js";
+const w = (s) => {
+  const {
+    id: i,
+    label: l,
+    helper: r,
+    shouldFill: t = !0,
+    isBaseline: a = !1,
+    isMultiLine: n = !1,
+    isBlocked: d = !1,
+    isNew: f = !1,
+    children: c
+  } = s;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: m([
+        "form-item",
+        t && "form-item--fill",
+        a && "form-item--baseline",
+        n && "form-item--multiline",
+        d && "form-item--blocked"
+      ]),
+      role: "group",
+      "aria-describedby": r ? `${i}-helper` : void 0,
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: "form-item__row",
+            role: "presentation",
+            children: [
+              l !== void 0 && /* @__PURE__ */ e(
+                "label",
+                {
+                  className: m([p.type, "form-item__label"]),
+                  htmlFor: i,
+                  id: `${i}-label`,
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "form-item__input",
+                  role: "presentation",
+                  children: c
+                }
+              ),
+              f && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "form-item__chip",
+                  role: "presentation",
+                  children: /* @__PURE__ */ e(h, { children: "New" })
+                }
+              )
+            ]
+          }
+        ),
+        r !== void 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            className: "form-item__helper",
+            id: `${i}-helper`,
+            role: "alert",
+            "aria-live": "polite",
+            children: /* @__PURE__ */ e(
+              _,
+              {
+                icon: r.type === "INFO" ? "info" : "warning",
+                messages: [r.message]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  w as default
+};
+//# sourceMappingURL=FormItem.js.map

package/dist/components/slots/form-item/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","sources":["../../../../src/components/slots/form-item/FormItem.tsx"],"sourcesContent":["import texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Message from '@components/dialogs/message/Message'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './form-item.scss'\n\nexport interface FormItemProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Label text for the form item\n   */\n  label?: string\n  /**\n   * Helper or error message configuration\n   */\n  helper?: {\n    /** Type of message */\n    type: 'INFO' | 'ERROR'\n    /** Message text */\n    message: string\n  }\n  /**\n   * Whether to fill available width\n   * @default true\n   */\n  shouldFill?: boolean\n  /**\n   * Whether to align content to baseline\n   * @default false\n   */\n  isBaseline?: boolean\n  /**\n   * Whether to use multi-line layout\n   * @default false\n   */\n  isMultiLine?: boolean\n  /**\n   * Whether the item is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Form input element\n   */\n  children: React.ReactNode\n}\n\nconst FormItem = (props: FormItemProps) => {\n  const {\n    id,\n    label,\n    helper,\n    shouldFill = true,\n    isBaseline = false,\n    isMultiLine = false,\n    isBlocked = false,\n    isNew = false,\n    children,\n  } = props\n\n  return (\n    <div\n      className={doClassnames([\n        'form-item',\n        shouldFill && 'form-item--fill',\n        isBaseline && 'form-item--baseline',\n        isMultiLine && 'form-item--multiline',\n        isBlocked && 'form-item--blocked',\n      ])}\n      role=\"group\"\n      aria-describedby={helper ? `${id}-helper` : undefined}\n    >\n      <div\n        className=\"form-item__row\"\n        role=\"presentation\"\n      >\n        {label !== undefined && (\n          <label\n            className={doClassnames([texts.type, 'form-item__label'])}\n            htmlFor={id}\n            id={`${id}-label`}\n          >\n            {label}\n          </label>\n        )}\n        <div\n          className=\"form-item__input\"\n          role=\"presentation\"\n        >\n          {children}\n        </div>\n        {isNew && (\n          <div\n            className=\"form-item__chip\"\n            role=\"presentation\"\n          >\n            <Chip>New</Chip>\n          </div>\n        )}\n      </div>\n      {helper !== undefined && (\n        <div\n          className=\"form-item__helper\"\n          id={`${id}-helper`}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <Message\n            icon={helper.type === 'INFO' ? 'info' : 'warning'}\n            messages={[helper.message]}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default FormItem\n"],"names":["FormItem","props","id","label","helper","shouldFill","isBaseline","isMultiLine","isBlocked","isNew","children","jsxs","doClassnames","jsx","texts","Chip","Message"],"mappings":";;;;;AAuDA,MAAMA,IAAW,CAACC,MAAyB;AACzC,QAAM;AAAA,IACJ,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,EAAA,IACET;AAEJ,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAa;AAAA,QACtB;AAAA,QACAP,KAAc;AAAA,QACdC,KAAc;AAAA,QACdC,KAAe;AAAA,QACfC,KAAa;AAAA,MAAA,CACd;AAAA,MACD,MAAK;AAAA,MACL,oBAAkBJ,IAAS,GAAGF,CAAE,YAAY;AAAA,MAE5C,UAAA;AAAA,QAAA,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAR,MAAU,UACT,gBAAAU;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,EAAa,CAACE,EAAM,MAAM,kBAAkB,CAAC;AAAA,kBACxD,SAASZ;AAAA,kBACT,IAAI,GAAGA,CAAE;AAAA,kBAER,UAAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGL,gBAAAU;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBAEJ,UAAAH;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEFD,KACC,gBAAAI;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBAEL,UAAA,gBAAAA,EAACE,KAAK,UAAA,MAAA,CAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHX,MAAW,UACV,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,GAAGX,CAAE;AAAA,YACT,MAAK;AAAA,YACL,aAAU;AAAA,YAEV,UAAA,gBAAAW;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,MAAMZ,EAAO,SAAS,SAAS,SAAS;AAAA,gBACxC,UAAU,CAACA,EAAO,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/slots/layout/Layout.d.ts

@@ -0,0 +1,34 @@
+import { DrawerProps } from '../drawer/Drawer';
+
+export type LayoutProps = {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Array of column configurations
+     */
+    column: Array<{
+        /** Content node */
+        node?: React.ReactElement;
+        /** Type modifier for styling */
+        typeModifier?: 'LIST' | 'DISTRIBUTED' | 'CENTERED' | 'BLANK' | 'DRAWER' | 'FIXED';
+        /** Fixed width value */
+        fixedWidth?: string;
+        /** Drawer configuration (when typeModifier is DRAWER) */
+        drawerOptions?: DrawerProps;
+    }>;
+    /**
+     * Whether to use full width
+     * @default false
+     */
+    isFullWidth?: boolean;
+    /**
+     * Whether to use full height
+     * @default false
+     */
+    isFullHeight?: boolean;
+};
+declare const Layout: (props: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default Layout;
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/slots/layout/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/layout/Layout.tsx"],"names":[],"mappings":";AACA,OAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,eAAe,CAAA;AAEtB,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC;QACZ,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;QACzB,gCAAgC;QAChC,YAAY,CAAC,EACT,MAAM,GACN,aAAa,GACb,UAAU,GACV,OAAO,GACP,QAAQ,GACR,OAAO,CAAA;QACX,wBAAwB;QACxB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,yDAAyD;QACzD,aAAa,CAAC,EAAE,WAAW,CAAA;KAC5B,CAAC,CAAA;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,MAAM,UAAW,WAAW,4CA4CjC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/slots/layout/Layout.js

@@ -0,0 +1,45 @@
+import '../../../assets/Layout.css';
+import { jsx as l } from "react/jsx-runtime";
+import { t as d } from "../../../do-classnames-DSDFCvzy.js";
+import s from "../drawer/Drawer.js";
+const c = (e) => {
+  const { id: r, column: t, isFullWidth: a = !1, isFullHeight: n = !1 } = e;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      id: r,
+      className: d([
+        "layout",
+        a && "layout--full-width",
+        n && "layout--full-height"
+      ]),
+      role: "main",
+      children: t.map(
+        (o, i) => o.node !== void 0 && (o.typeModifier === "DRAWER" && o.drawerOptions !== void 0 ? /* @__PURE__ */ l(s, { ...o.drawerOptions, children: o.node }) : /* @__PURE__ */ l(
+          "div",
+          {
+            className: d([
+              "layout__block",
+              o.typeModifier === "LIST" && "layout__block--list",
+              o.typeModifier === "DISTRIBUTED" && "layout__block--distributed",
+              o.typeModifier === "CENTERED" && "layout__block--centered",
+              o.typeModifier === "BLANK" && "layout__block--blank",
+              o.typeModifier === "FIXED" && "layout__block--fixed"
+            ]),
+            style: {
+              width: o.fixedWidth !== void 0 ? o.fixedWidth : void 0
+            },
+            role: "region",
+            "aria-label": `Content section ${i + 1}`,
+            children: o.node
+          },
+          i
+        ))
+      )
+    }
+  );
+};
+export {
+  c as default
+};
+//# sourceMappingURL=Layout.js.map

package/dist/components/slots/layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sources":["../../../../src/components/slots/layout/Layout.tsx"],"sourcesContent":["import { doClassnames } from '@a_ng_d/figmug-utils'\nimport Drawer, { DrawerProps } from '../drawer/Drawer'\nimport './layout.scss'\n\nexport type LayoutProps = {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Array of column configurations\n   */\n  column: Array<{\n    /** Content node */\n    node?: React.ReactElement\n    /** Type modifier for styling */\n    typeModifier?:\n      | 'LIST'\n      | 'DISTRIBUTED'\n      | 'CENTERED'\n      | 'BLANK'\n      | 'DRAWER'\n      | 'FIXED'\n    /** Fixed width value */\n    fixedWidth?: string\n    /** Drawer configuration (when typeModifier is DRAWER) */\n    drawerOptions?: DrawerProps\n  }>\n  /**\n   * Whether to use full width\n   * @default false\n   */\n  isFullWidth?: boolean\n  /**\n   * Whether to use full height\n   * @default false\n   */\n  isFullHeight?: boolean\n}\n\nconst Layout = (props: LayoutProps) => {\n  const { id, column, isFullWidth = false, isFullHeight = false } = props\n\n  return (\n    <div\n      id={id}\n      className={doClassnames([\n        'layout',\n        isFullWidth && 'layout--full-width',\n        isFullHeight && 'layout--full-height',\n      ])}\n      role=\"main\"\n    >\n      {column.map(\n        (item, index) =>\n          item.node !== undefined &&\n          (item.typeModifier === 'DRAWER' &&\n          item.drawerOptions !== undefined ? (\n            <Drawer {...item.drawerOptions}>{item.node}</Drawer>\n          ) : (\n            <div\n              key={index}\n              className={doClassnames([\n                'layout__block',\n                item.typeModifier === 'LIST' && 'layout__block--list',\n                item.typeModifier === 'DISTRIBUTED' &&\n                  'layout__block--distributed',\n                item.typeModifier === 'CENTERED' && 'layout__block--centered',\n                item.typeModifier === 'BLANK' && 'layout__block--blank',\n                item.typeModifier === 'FIXED' && 'layout__block--fixed',\n              ])}\n              style={{\n                width:\n                  item.fixedWidth !== undefined ? item.fixedWidth : undefined,\n              }}\n              role=\"region\"\n              aria-label={`Content section ${index + 1}`}\n            >\n              {item.node}\n            </div>\n          ))\n      )}\n    </div>\n  )\n}\n\nexport default Layout\n"],"names":["Layout","props","id","column","isFullWidth","isFullHeight","jsx","doClassnames","item","index","Drawer"],"mappings":";;;AAwCA,MAAMA,IAAS,CAACC,MAAuB;AACrC,QAAM,EAAE,IAAAC,GAAI,QAAAC,GAAQ,aAAAC,IAAc,IAAO,cAAAC,IAAe,OAAUJ;AAElE,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAJ;AAAA,MACA,WAAWK,EAAa;AAAA,QACtB;AAAA,QACAH,KAAe;AAAA,QACfC,KAAgB;AAAA,MAAA,CACjB;AAAA,MACD,MAAK;AAAA,MAEJ,UAAAF,EAAO;AAAA,QACN,CAACK,GAAMC,MACLD,EAAK,SAAS,WACbA,EAAK,iBAAiB,YACvBA,EAAK,kBAAkB,2BACpBE,GAAA,EAAQ,GAAGF,EAAK,eAAgB,UAAAA,EAAK,MAAK,IAE3C,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWC,EAAa;AAAA,cACtB;AAAA,cACAC,EAAK,iBAAiB,UAAU;AAAA,cAChCA,EAAK,iBAAiB,iBACpB;AAAA,cACFA,EAAK,iBAAiB,cAAc;AAAA,cACpCA,EAAK,iBAAiB,WAAW;AAAA,cACjCA,EAAK,iBAAiB,WAAW;AAAA,YAAA,CAClC;AAAA,YACD,OAAO;AAAA,cACL,OACEA,EAAK,eAAe,SAAYA,EAAK,aAAa;AAAA,YAAA;AAAA,YAEtD,MAAK;AAAA,YACL,cAAY,mBAAmBC,IAAQ,CAAC;AAAA,YAEvC,UAAAD,EAAK;AAAA,UAAA;AAAA,UAjBDC;AAAA,QAAA;AAAA,MAkBP;AAAA,IAEN;AAAA,EAAA;AAGN;"}

package/dist/components/slots/list/List.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+
+export interface ListProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * List item elements
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom padding value
+     */
+    padding?: string;
+    /**
+     * Whether to show a border on scroll
+     * @default false
+     */
+    isTopBorderEnabled?: boolean;
+    /**
+     * Whether to show loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Whether the list contains message items
+     * @default false
+     */
+    isMessage?: boolean;
+    /**
+     * Whether to use alternate styling
+     * @default false
+     */
+    isAlternate?: boolean;
+    /**
+     * Whether to use full width
+     * @default false
+     */
+    isFullWidth?: boolean;
+    /**
+     * Whether to use full height
+     * @default false
+     */
+    isFullHeight?: boolean;
+}
+export declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
+export default List;
+//# sourceMappingURL=List.d.ts.map

package/dist/components/slots/list/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,IAAI,UAAW,SAAS,4CAqDpC,CAAA;AACD,eAAe,IAAI,CAAA"}

package/dist/components/slots/list/List.js

@@ -0,0 +1,55 @@
+import '../../../assets/List.css';
+import { jsx as s } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Icon as g } from "../../assets/icon/Icon.js";
+import { t as T } from "../../../do-classnames-DSDFCvzy.js";
+const x = (i) => {
+  const {
+    id: r,
+    children: a,
+    isLoading: e = !1,
+    isMessage: o = !1,
+    padding: n,
+    isTopBorderEnabled: d = !1,
+    isAlternate: f = !1,
+    isFullWidth: p = !1,
+    isFullHeight: u = !1
+  } = i, [c, l] = h(!1), m = (t) => {
+    t.preventDefault(), t.currentTarget.scrollTop > 0 && d ? l(!0) : l(!1);
+  };
+  return /* @__PURE__ */ s(
+    "ul",
+    {
+      id: r,
+      style: {
+        padding: n,
+        listStyleType: "none"
+      },
+      className: T([
+        "list",
+        e && "list--loading",
+        o && "list--message",
+        c && "list--top-border",
+        f && "list--alternate",
+        p && "list--full-width",
+        u && "list--full-height"
+      ]),
+      onScroll: m,
+      "aria-busy": e,
+      children: e ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+        g,
+        {
+          type: "PICTO",
+          iconName: "spinner",
+          role: "status",
+          "aria-hidden": "true"
+        }
+      ) }) : a
+    }
+  );
+};
+export {
+  x as List,
+  x as default
+};
+//# sourceMappingURL=List.js.map

package/dist/components/slots/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../../src/components/slots/list/List.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Icon from '@components/assets/icon/Icon'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './list.scss'\n\nexport interface ListProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * List item elements\n   */\n  children?: React.ReactNode\n  /**\n   * Custom padding value\n   */\n  padding?: string\n  /**\n   * Whether to show a border on scroll\n   * @default false\n   */\n  isTopBorderEnabled?: boolean\n  /**\n   * Whether to show loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether the list contains message items\n   * @default false\n   */\n  isMessage?: boolean\n  /**\n   * Whether to use alternate styling\n   * @default false\n   */\n  isAlternate?: boolean\n  /**\n   * Whether to use full width\n   * @default false\n   */\n  isFullWidth?: boolean\n  /**\n   * Whether to use full height\n   * @default false\n   */\n  isFullHeight?: boolean\n}\n\nexport const List = (props: ListProps) => {\n  const {\n    id,\n    children,\n    isLoading = false,\n    isMessage = false,\n    padding,\n    isTopBorderEnabled = false,\n    isAlternate = false,\n    isFullWidth = false,\n    isFullHeight = false,\n  } = props\n  const [hasTopBorder, setTopBorder] = useState(false)\n\n  const onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    e.preventDefault()\n    if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled) setTopBorder(true)\n    else setTopBorder(false)\n  }\n\n  return (\n    <ul\n      id={id}\n      style={{\n        padding: padding,\n        listStyleType: 'none',\n      }}\n      className={doClassnames([\n        'list',\n        isLoading && 'list--loading',\n        isMessage && 'list--message',\n        hasTopBorder && 'list--top-border',\n        isAlternate && 'list--alternate',\n        isFullWidth && 'list--full-width',\n        isFullHeight && 'list--full-height',\n      ])}\n      onScroll={onScroll}\n      aria-busy={isLoading}\n    >\n      {isLoading ? (\n        <li>\n          <Icon\n            type=\"PICTO\"\n            iconName=\"spinner\"\n            role=\"status\"\n            aria-hidden=\"true\"\n          />\n        </li>\n      ) : (\n        children\n      )}\n    </ul>\n  )\n}\nexport default List\n"],"names":["List","props","id","children","isLoading","isMessage","padding","isTopBorderEnabled","isAlternate","isFullWidth","isFullHeight","hasTopBorder","setTopBorder","useState","onScroll","e","jsx","doClassnames","Icon"],"mappings":";;;;AAkDO,MAAMA,IAAO,CAACC,MAAqB;AACxC,QAAM;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,EAAA,IACbT,GACE,CAACU,GAAcC,CAAY,IAAIC,EAAS,EAAK,GAE7CC,IAAW,CAACC,MAAuC;AACvD,IAAAA,EAAE,eAAA,GACEA,EAAE,cAAc,YAAY,KAAKR,MAAiC,EAAI,MACxD,EAAK;AAAA,EACzB;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAd;AAAA,MACA,OAAO;AAAA,QACL,SAAAI;AAAA,QACA,eAAe;AAAA,MAAA;AAAA,MAEjB,WAAWW,EAAa;AAAA,QACtB;AAAA,QACAb,KAAa;AAAA,QACbC,KAAa;AAAA,QACbM,KAAgB;AAAA,QAChBH,KAAe;AAAA,QACfC,KAAe;AAAA,QACfC,KAAgB;AAAA,MAAA,CACjB;AAAA,MACD,UAAAI;AAAA,MACA,aAAWV;AAAA,MAEV,UAAAA,sBACE,MAAA,EACC,UAAA,gBAAAY;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,MAAK;AAAA,UACL,eAAY;AAAA,QAAA;AAAA,MAAA,GAEhB,IAEAf;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/slots/popin/Popin.d.ts

@@ -0,0 +1,85 @@
+
+export interface PopInProps {
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Type of popin layout
+     * @default 'POPIN'
+     */
+    type?: 'POPIN' | 'PANEL';
+    /**
+     * Title text
+     */
+    title: string;
+    /**
+     * Optional tag to display next to the title
+     */
+    tag?: string;
+    /**
+     * Configuration for action buttons
+     */
+    actions?: {
+        /** Primary action button */
+        primary?: {
+            label: string;
+            state?: 'DEFAULT' | 'DISABLED' | 'LOADING';
+            isAutofocus?: boolean;
+            feature?: string;
+            action: React.MouseEventHandler & React.KeyboardEventHandler;
+        };
+        /** Destructive action button */
+        destructive?: {
+            label: string;
+            state?: 'DEFAULT' | 'DISABLED' | 'LOADING';
+            feature?: string;
+            isAutofocus?: boolean;
+            action: React.ReactEventHandler | (() => void);
+        };
+        /** Secondary action button */
+        secondary?: {
+            label: string;
+            state?: 'DEFAULT' | 'DISABLED' | 'LOADING';
+            feature?: string;
+            isAutofocus?: boolean;
+            action: React.MouseEventHandler & React.KeyboardEventHandler;
+        };
+    };
+    /**
+     * Select/checkbox configuration
+     */
+    select?: {
+        /** Label text */
+        label: string;
+        /** Current state */
+        state: boolean;
+        /** Change handler */
+        action: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    };
+    /**
+     * Optional indicator text
+     */
+    indicator?: string;
+    /**
+     * Whether the popin is in loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Whether to use message layout
+     * @default false
+     */
+    isMessage?: boolean;
+    /**
+     * Popin content
+     */
+    children?: React.ReactNode;
+    /**
+     * Close handler
+     */
+    onClose: React.MouseEventHandler & React.KeyboardEventHandler;
+}
+declare const PopIn: (props: PopInProps) => import("react/jsx-runtime").JSX.Element;
+export default PopIn;
+//# sourceMappingURL=Popin.d.ts.map

package/dist/components/slots/popin/Popin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popin.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/popin/Popin.tsx"],"names":[],"mappings":";AAMA,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IACxB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,4BAA4B;QAC5B,OAAO,CAAC,EAAE;YACR,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;YAC1C,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;SAC7D,CAAA;QACD,gCAAgC;QAChC,WAAW,CAAC,EAAE;YACZ,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;YAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;SAC/C,CAAA;QACD,8BAA8B;QAC9B,SAAS,CAAC,EAAE;YACV,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;YAC1C,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;SAC7D,CAAA;KACF,CAAA;IACD;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,iBAAiB;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB;QACpB,KAAK,EAAE,OAAO,CAAA;QACd,qBAAqB;QACrB,MAAM,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAA;KAC/D,CAAA;IACD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CAC9D;AAED,QAAA,MAAM,KAAK,UAAW,UAAU,4CAoK/B,CAAA;AAED,eAAe,KAAK,CAAA"}