inconel 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,aAAa,CAAA;AACpB,OAAO,cAAc,CAAA;AAGrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;IAC3E,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAe,EACf,SAAiB,EACjB,OAAmB,EACnB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACT,UAAU,EACV,SAAiB,EACjB,MAAa,EACb,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAW,EACX,GAAG,KAAK,EACT,EAAE,WAAW,sCA8Db"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,aAAa,CAAA;AACpB,OAAO,cAAc,CAAA;AAGrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;IAC3E,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAe,EACf,SAAiB,EACjB,OAAmB,EACnB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACT,UAAU,EACV,SAAiB,EACjB,MAAa,EACb,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAW,EACX,IAAY,EACZ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,WAAW,sCA8Eb"}
@@ -1,85 +1,104 @@
1
- import { jsx as t, jsxs as w } from "react/jsx-runtime";
2
- import { useMemo as C, useEffect as E } from "react";
3
- import { classNames as b } from "../shared/classNames.js";
1
+ import { jsx as e, jsxs as T } from "react/jsx-runtime";
2
+ import { useMemo as g, useEffect as B } from "react";
3
+ import { classNames as N } from "../shared/classNames.js";
4
4
  /* empty css */
5
- import { BUTTON_TYPE_CLASS_NAMES as T } from "./constants.js";
5
+ import { BUTTON_TYPE_CLASS_NAMES as Y } from "./constants.js";
6
6
  /* empty css */
7
- import { createDebouncedCallback as k } from "./utils.js";
8
- import B from "../Svg/Svg.js";
9
- function $({
10
- loading: e = !1,
11
- fullWidth: _ = !1,
12
- variant: N = "primary",
13
- label: h,
14
- buttonType: S,
15
- icon: a,
16
- iconClassName: v,
17
- iconWidth: n,
18
- iconHeight: o,
19
- iconRight: r = !1,
20
- render: x = !0,
7
+ import { createDebouncedCallback as $ } from "./utils.js";
8
+ import z from "../Svg/Svg.js";
9
+ function J({
10
+ loading: t = !1,
11
+ fullWidth: y = !1,
12
+ variant: M = "primary",
13
+ label: S,
14
+ buttonType: v,
15
+ icon: n,
16
+ iconClassName: x,
17
+ iconWidth: o,
18
+ iconHeight: l,
19
+ iconRight: i = !1,
20
+ render: k = !0,
21
21
  debounceTime: u,
22
- isActive: i,
22
+ isActive: r,
23
23
  onClick: m,
24
24
  disabled: s,
25
- className: y,
25
+ className: w,
26
26
  children: A,
27
- size: M = "md",
28
- ...d
27
+ size: E = "md",
28
+ pill: j = !1,
29
+ count: d,
30
+ progress: f,
31
+ progressColor: C,
32
+ ...p
29
33
  }) {
30
- const j = S ?? N, l = C(
31
- () => k(m, u ?? 0),
34
+ const I = v ?? M, a = g(
35
+ () => $(m, u ?? 0),
32
36
  [m, u]
33
37
  );
34
- if (E(() => () => l.cancel(), [l]), !x) return null;
35
- const f = h ?? A, p = a ? /* @__PURE__ */ t(
38
+ if (B(() => () => a.cancel(), [a]), !k) return null;
39
+ const b = S ?? A, _ = typeof f == "number" ? Math.max(0, Math.min(100, f)) : null, h = typeof n == "string" && n ? /* @__PURE__ */ e(
36
40
  "span",
37
41
  {
38
- className: b(
42
+ className: N(
39
43
  "inconel-button__icon",
40
- r ? "inconel-button__icon--right" : "inconel-button__icon--left",
41
- v
44
+ i ? "inconel-button__icon--right" : "inconel-button__icon--left",
45
+ x
42
46
  ),
43
- style: { width: n ?? void 0, height: o ?? void 0 },
47
+ style: { width: o ?? void 0, height: l ?? void 0 },
44
48
  "aria-hidden": "true",
45
- children: /* @__PURE__ */ t(
46
- B,
49
+ children: /* @__PURE__ */ e(
50
+ z,
47
51
  {
48
- src: a,
52
+ src: n,
53
+ renumerateIRIElements: !1,
54
+ loading: () => null,
55
+ fallback: () => null,
49
56
  beforeInjection: (c) => {
50
- n && c.setAttribute("width", String(n)), o && c.setAttribute("height", String(o)), c.setAttribute("preserveAspectRatio", "xMidYMid meet");
57
+ o && c.setAttribute("width", String(o)), l && c.setAttribute("height", String(l)), c.setAttribute("preserveAspectRatio", "xMidYMid meet");
51
58
  }
52
59
  }
53
60
  )
54
61
  }
55
62
  ) : null;
56
- return /* @__PURE__ */ w(
63
+ return /* @__PURE__ */ T(
57
64
  "button",
58
65
  {
59
- ...d,
60
- disabled: s || e,
61
- "aria-pressed": typeof i == "boolean" ? i : d["aria-pressed"],
62
- onClick: s || e ? void 0 : l,
63
- className: b(
66
+ ...p,
67
+ disabled: s || t,
68
+ "aria-pressed": typeof r == "boolean" ? r : p["aria-pressed"],
69
+ onClick: s || t ? void 0 : a,
70
+ className: N(
64
71
  "inconel-button",
65
- `inconel-size-${M}`,
66
- T[j],
67
- _ && "inconel-button--full-width",
68
- e && "inconel-is-loading",
72
+ `inconel-size-${E}`,
73
+ Y[I],
74
+ y && "inconel-button--full-width",
75
+ j && "inconel-button--pill",
76
+ t && "inconel-is-loading",
69
77
  s && "inconel-is-disabled",
70
- i && "inconel-is-active",
71
- y
78
+ r && "inconel-is-active",
79
+ w
72
80
  ),
73
81
  children: [
74
- e && /* @__PURE__ */ t("span", { className: "inconel-button__spinner", "aria-hidden": "true" }),
75
- !r && p,
76
- f !== void 0 && /* @__PURE__ */ t("span", { className: "inconel-button__title", children: f }),
77
- r && p
82
+ _ !== null && /* @__PURE__ */ e(
83
+ "span",
84
+ {
85
+ className: "inconel-button__progress",
86
+ style: {
87
+ width: `${_}%`,
88
+ background: C ?? void 0
89
+ }
90
+ }
91
+ ),
92
+ t && /* @__PURE__ */ e("span", { className: "inconel-button__spinner", "aria-hidden": "true" }),
93
+ !i && h,
94
+ b !== void 0 && /* @__PURE__ */ e("span", { className: "inconel-button__title", children: b }),
95
+ i && h,
96
+ d != null && /* @__PURE__ */ e("span", { className: "inconel-button__count", children: d })
78
97
  ]
79
98
  }
80
99
  );
81
100
  }
82
101
  export {
83
- $ as Button
102
+ J as Button
84
103
  };
85
104
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n useEffect,\n useMemo,\n type ButtonHTMLAttributes,\n type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport '../shared/sizes.css'\nimport type { ControlSize } from '../shared/types'\nimport { Svg } from '../Svg'\nimport {\n BUTTON_TYPE_CLASS_NAMES,\n type ButtonType,\n} from './constants'\nimport './styles.css'\nimport { createDebouncedCallback } from './utils'\n\nexport interface ButtonProps\n extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n label?: ReactNode\n buttonType?: ButtonType\n icon?: string | null\n iconClassName?: string\n iconWidth?: number | null\n iconHeight?: number | null\n iconRight?: boolean\n render?: boolean\n debounceTime?: number | null\n isActive?: boolean | null\n onChange?: ButtonHTMLAttributes<HTMLButtonElement>['onChange']\n loading?: boolean\n fullWidth?: boolean\n variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'warning' | 'dark'\n size?: ControlSize\n}\n\nexport function Button({\n loading = false,\n fullWidth = false,\n variant = 'primary',\n label,\n buttonType,\n icon,\n iconClassName,\n iconWidth,\n iconHeight,\n iconRight = false,\n render = true,\n debounceTime,\n isActive,\n onClick,\n disabled,\n className,\n children,\n size = 'md',\n ...props\n}: ButtonProps) {\n const resolvedType = buttonType ?? variant\n const debouncedClick = useMemo(\n () => createDebouncedCallback(onClick, debounceTime ?? 0),\n [onClick, debounceTime],\n )\n\n useEffect(() => () => debouncedClick.cancel(), [debouncedClick])\n\n if (!render) return null\n\n const content = label ?? children\n const iconNode = icon ? (\n <span\n className={classNames(\n 'inconel-button__icon',\n iconRight\n ? 'inconel-button__icon--right'\n : 'inconel-button__icon--left',\n iconClassName,\n )}\n style={{ width: iconWidth ?? undefined, height: iconHeight ?? undefined }}\n aria-hidden=\"true\"\n >\n <Svg\n src={icon}\n beforeInjection={(svg) => {\n if (iconWidth) svg.setAttribute('width', String(iconWidth))\n if (iconHeight) svg.setAttribute('height', String(iconHeight))\n svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n }}\n />\n </span>\n ) : null\n\n return (\n <button\n {...props}\n disabled={disabled || loading}\n aria-pressed={\n typeof isActive === 'boolean' ? isActive : props['aria-pressed']\n }\n onClick={disabled || loading ? undefined : debouncedClick}\n className={classNames(\n 'inconel-button',\n `inconel-size-${size}`,\n BUTTON_TYPE_CLASS_NAMES[resolvedType],\n fullWidth && 'inconel-button--full-width',\n loading && 'inconel-is-loading',\n disabled && 'inconel-is-disabled',\n isActive && 'inconel-is-active',\n className,\n )}\n >\n {loading && <span className=\"inconel-button__spinner\" aria-hidden=\"true\" />}\n {!iconRight && iconNode}\n {content !== undefined && (\n <span className=\"inconel-button__title\">{content}</span>\n )}\n {iconRight && iconNode}\n </button>\n )\n}\n"],"names":["Button","loading","fullWidth","variant","label","buttonType","icon","iconClassName","iconWidth","iconHeight","iconRight","render","debounceTime","isActive","onClick","disabled","className","children","size","props","resolvedType","debouncedClick","useMemo","createDebouncedCallback","useEffect","content","iconNode","jsx","classNames","Svg","svg","jsxs","BUTTON_TYPE_CLASS_NAMES"],"mappings":";;;;;;;;AAqCO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAef,KAAcF,GAC7BkB,IAAiBC;AAAA,IACrB,MAAMC,EAAwBT,GAASF,KAAgB,CAAC;AAAA,IACxD,CAACE,GAASF,CAAY;AAAA,EAAA;AAKxB,MAFAY,EAAU,MAAM,MAAMH,EAAe,UAAU,CAACA,CAAc,CAAC,GAE3D,CAACV,EAAQ,QAAO;AAEpB,QAAMc,IAAUrB,KAASa,GACnBS,IAAWpB,IACf,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAlB,IACI,gCACA;AAAA,QACJH;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,OAAOC,KAAa,QAAW,QAAQC,KAAc,OAAA;AAAA,MAC9D,eAAY;AAAA,MAEZ,UAAA,gBAAAkB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKvB;AAAA,UACL,iBAAiB,CAACwB,MAAQ;AACxB,YAAItB,KAAWsB,EAAI,aAAa,SAAS,OAAOtB,CAAS,CAAC,GACtDC,KAAYqB,EAAI,aAAa,UAAU,OAAOrB,CAAU,CAAC,GAC7DqB,EAAI,aAAa,uBAAuB,eAAe;AAAA,UACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IAEA;AAEJ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,UAAUJ,KAAYd;AAAA,MACtB,gBACE,OAAOY,KAAa,YAAYA,IAAWM,EAAM,cAAc;AAAA,MAEjE,SAASJ,KAAYd,IAAU,SAAYoB;AAAA,MAC3C,WAAWO;AAAA,QACT;AAAA,QACA,gBAAgBV,CAAI;AAAA,QACpBc,EAAwBZ,CAAY;AAAA,QACpClB,KAAa;AAAA,QACbD,KAAW;AAAA,QACXc,KAAY;AAAA,QACZF,KAAY;AAAA,QACZG;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAf,KAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,2BAA0B,eAAY,QAAO;AAAA,QACxE,CAACjB,KAAagB;AAAA,QACdD,MAAY,UACX,gBAAAE,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAF,GAAQ;AAAA,QAElDf,KAAagB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n useEffect,\n useMemo,\n type ButtonHTMLAttributes,\n type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport '../shared/sizes.css'\nimport type { ControlSize } from '../shared/types'\nimport { Svg } from '../Svg'\nimport {\n BUTTON_TYPE_CLASS_NAMES,\n type ButtonType,\n} from './constants'\nimport './styles.css'\nimport { createDebouncedCallback } from './utils'\n\nexport interface ButtonProps\n extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n label?: ReactNode\n buttonType?: ButtonType\n icon?: string | null\n iconClassName?: string\n iconWidth?: number | null\n iconHeight?: number | null\n iconRight?: boolean\n render?: boolean\n debounceTime?: number | null\n isActive?: boolean | null\n onChange?: ButtonHTMLAttributes<HTMLButtonElement>['onChange']\n loading?: boolean\n fullWidth?: boolean\n variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'warning' | 'dark'\n size?: ControlSize\n pill?: boolean\n count?: ReactNode\n progress?: number | null\n progressColor?: string | null\n}\n\nexport function Button({\n loading = false,\n fullWidth = false,\n variant = 'primary',\n label,\n buttonType,\n icon,\n iconClassName,\n iconWidth,\n iconHeight,\n iconRight = false,\n render = true,\n debounceTime,\n isActive,\n onClick,\n disabled,\n className,\n children,\n size = 'md',\n pill = false,\n count,\n progress,\n progressColor,\n ...props\n}: ButtonProps) {\n const resolvedType = buttonType ?? variant\n const debouncedClick = useMemo(\n () => createDebouncedCallback(onClick, debounceTime ?? 0),\n [onClick, debounceTime],\n )\n\n useEffect(() => () => debouncedClick.cancel(), [debouncedClick])\n\n if (!render) return null\n\n const content = label ?? children\n const progressWidth =\n typeof progress === 'number' ? Math.max(0, Math.min(100, progress)) : null\n const iconNode = typeof icon === 'string' && icon ? (\n <span\n className={classNames(\n 'inconel-button__icon',\n iconRight\n ? 'inconel-button__icon--right'\n : 'inconel-button__icon--left',\n iconClassName,\n )}\n style={{ width: iconWidth ?? undefined, height: iconHeight ?? undefined }}\n aria-hidden=\"true\"\n >\n <Svg\n src={icon}\n renumerateIRIElements={false}\n loading={() => null}\n fallback={() => null}\n beforeInjection={(svg) => {\n if (iconWidth) svg.setAttribute('width', String(iconWidth))\n if (iconHeight) svg.setAttribute('height', String(iconHeight))\n svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n }}\n />\n </span>\n ) : null\n\n return (\n <button\n {...props}\n disabled={disabled || loading}\n aria-pressed={\n typeof isActive === 'boolean' ? isActive : props['aria-pressed']\n }\n onClick={disabled || loading ? undefined : debouncedClick}\n className={classNames(\n 'inconel-button',\n `inconel-size-${size}`,\n BUTTON_TYPE_CLASS_NAMES[resolvedType],\n fullWidth && 'inconel-button--full-width',\n pill && 'inconel-button--pill',\n loading && 'inconel-is-loading',\n disabled && 'inconel-is-disabled',\n isActive && 'inconel-is-active',\n className,\n )}\n >\n {progressWidth !== null && (\n <span\n className=\"inconel-button__progress\"\n style={{\n width: `${progressWidth}%`,\n background: progressColor ?? undefined,\n }}\n />\n )}\n {loading && <span className=\"inconel-button__spinner\" aria-hidden=\"true\" />}\n {!iconRight && iconNode}\n {content !== undefined && (\n <span className=\"inconel-button__title\">{content}</span>\n )}\n {iconRight && iconNode}\n {count != null && <span className=\"inconel-button__count\">{count}</span>}\n </button>\n )\n}\n"],"names":["Button","loading","fullWidth","variant","label","buttonType","icon","iconClassName","iconWidth","iconHeight","iconRight","render","debounceTime","isActive","onClick","disabled","className","children","size","pill","count","progress","progressColor","props","resolvedType","debouncedClick","useMemo","createDebouncedCallback","useEffect","content","progressWidth","iconNode","jsx","classNames","Svg","svg","jsxs","BUTTON_TYPE_CLASS_NAMES"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- export declare const BUTTON_TYPES: readonly ["default", "primary", "danger", "warning", "secondary", "success", "light", "dark", "calendar", "circleDanger", "circleSuccess", "circlePrimary", "circleWarning", "circleDark", "circleSecondary", "squareDanger", "squareSuccess", "squarePrimary", "squareWarning", "squareDark", "squareSecondary", "ghost"];
1
+ export declare const BUTTON_TYPES: readonly ["default", "primary", "danger", "warning", "secondary", "success", "light", "dark", "calendar", "circleDanger", "circleSuccess", "circlePrimary", "circleWarning", "circleDark", "circleSecondary", "squareDanger", "squareSuccess", "squarePrimary", "squareWarning", "squareDark", "squareSecondary", "ghost", "outlinePrimary", "outlineSecondary", "outlineDanger", "outlineWarning", "outlineSuccess", "outlineDark"];
2
2
  export type ButtonType = (typeof BUTTON_TYPES)[number];
3
3
  export declare const BUTTON_TYPE_CLASS_NAMES: Record<ButtonType, string>;
4
4
  //# sourceMappingURL=constants.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Button/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,4TAuBf,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAS9B,CAAA"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Button/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,saA6Bf,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAS9B,CAAA"}
@@ -20,7 +20,13 @@ const a = [
20
20
  "squareWarning",
21
21
  "squareDark",
22
22
  "squareSecondary",
23
- "ghost"
23
+ "ghost",
24
+ "outlinePrimary",
25
+ "outlineSecondary",
26
+ "outlineDanger",
27
+ "outlineWarning",
28
+ "outlineSuccess",
29
+ "outlineDark"
24
30
  ], c = Object.fromEntries(
25
31
  a.map((r) => [
26
32
  r,
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["export const BUTTON_TYPES = [\n 'default',\n 'primary',\n 'danger',\n 'warning',\n 'secondary',\n 'success',\n 'light',\n 'dark',\n 'calendar',\n 'circleDanger',\n 'circleSuccess',\n 'circlePrimary',\n 'circleWarning',\n 'circleDark',\n 'circleSecondary',\n 'squareDanger',\n 'squareSuccess',\n 'squarePrimary',\n 'squareWarning',\n 'squareDark',\n 'squareSecondary',\n 'ghost',\n] as const\n\nexport type ButtonType = (typeof BUTTON_TYPES)[number]\n\nexport const BUTTON_TYPE_CLASS_NAMES: Record<ButtonType, string> =\n Object.fromEntries(\n BUTTON_TYPES.map((type) => [\n type,\n `inconel-button--${type.replace(\n /[A-Z]/g,\n (letter) => `-${letter.toLowerCase()}`,\n )}`,\n ]),\n ) as Record<ButtonType, string>\n"],"names":["BUTTON_TYPES","BUTTON_TYPE_CLASS_NAMES","type","letter"],"mappings":"AAAO,MAAMA,IAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAIaC,IACX,OAAO;AAAA,EACLD,EAAa,IAAI,CAACE,MAAS;AAAA,IACzBA;AAAA,IACA,mBAAmBA,EAAK;AAAA,MACtB;AAAA,MACA,CAACC,MAAW,IAAIA,EAAO,aAAa;AAAA,IAAA,CACrC;AAAA,EAAA,CACF;AACH;"}
1
+ {"version":3,"file":"constants.js","sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["export const BUTTON_TYPES = [\n 'default',\n 'primary',\n 'danger',\n 'warning',\n 'secondary',\n 'success',\n 'light',\n 'dark',\n 'calendar',\n 'circleDanger',\n 'circleSuccess',\n 'circlePrimary',\n 'circleWarning',\n 'circleDark',\n 'circleSecondary',\n 'squareDanger',\n 'squareSuccess',\n 'squarePrimary',\n 'squareWarning',\n 'squareDark',\n 'squareSecondary',\n 'ghost',\n 'outlinePrimary',\n 'outlineSecondary',\n 'outlineDanger',\n 'outlineWarning',\n 'outlineSuccess',\n 'outlineDark',\n] as const\n\nexport type ButtonType = (typeof BUTTON_TYPES)[number]\n\nexport const BUTTON_TYPE_CLASS_NAMES: Record<ButtonType, string> =\n Object.fromEntries(\n BUTTON_TYPES.map((type) => [\n type,\n `inconel-button--${type.replace(\n /[A-Z]/g,\n (letter) => `-${letter.toLowerCase()}`,\n )}`,\n ]),\n ) as Record<ButtonType, string>\n"],"names":["BUTTON_TYPES","BUTTON_TYPE_CLASS_NAMES","type","letter"],"mappings":"AAAO,MAAMA,IAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAIaC,IACX,OAAO;AAAA,EACLD,EAAa,IAAI,CAACE,MAAS;AAAA,IACzBA;AAAA,IACA,mBAAmBA,EAAK;AAAA,MACtB;AAAA,MACA,CAACC,MAAW,IAAIA,EAAO,aAAa;AAAA,IAAA,CACrC;AAAA,EAAA,CACF;AACH;"}
@@ -10,6 +10,7 @@ export interface SlideTabsProps {
10
10
  activeKey?: string | number | null;
11
11
  onChange?: (key: string | number) => void;
12
12
  className?: string | null;
13
+ fullWidth?: boolean;
13
14
  }
14
- export declare function SlideTabs({ tabs, activeKey, onChange, className, }: SlideTabsProps): import("react").JSX.Element | null;
15
+ export declare function SlideTabs({ tabs, activeKey, onChange, className, fullWidth, }: SlideTabsProps): import("react").JSX.Element | null;
15
16
  //# sourceMappingURL=SlideTabs.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SlideTabs.d.ts","sourceRoot":"","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,sCAkDhB"}
1
+ {"version":3,"file":"SlideTabs.d.ts","sourceRoot":"","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAiB,GAClB,EAAE,cAAc,sCAwDhB"}
@@ -1,52 +1,63 @@
1
- import { jsxs as l, jsx as r } from "react/jsx-runtime";
2
- import { useRef as h, useState as p, useMemo as y, useEffect as k } from "react";
3
- import { classNames as c } from "../shared/classNames.js";
1
+ import { jsxs as o, jsx as c } from "react/jsx-runtime";
2
+ import { useRef as p, useState as y, useMemo as k, useEffect as w } from "react";
3
+ import { classNames as r } from "../shared/classNames.js";
4
4
  /* empty css */
5
5
  function x({
6
- tabs: i = [],
6
+ tabs: n = [],
7
7
  activeKey: f,
8
8
  onChange: a,
9
- className: d
9
+ className: d,
10
+ fullWidth: u = !1
10
11
  }) {
11
- const s = h({}), [o, m] = p({ left: 0, width: 0 }), t = y(
12
- () => i.filter((e) => e.show !== !1),
13
- [i]
14
- ), n = t.find((e) => e.key === f) ?? t[0];
15
- return k(() => {
16
- if (!n) return;
17
- const e = s.current[String(n.key)];
12
+ const s = p({}), [l, m] = y({ left: 0, width: 0 }), t = k(
13
+ () => n.filter((e) => e.show !== !1),
14
+ [n]
15
+ ), i = t.find((e) => e.key === f) ?? t[0];
16
+ return w(() => {
17
+ if (!i) return;
18
+ const e = s.current[String(i.key)];
18
19
  e && m({ left: e.offsetLeft, width: e.offsetWidth });
19
- }, [n, t]), t.length ? /* @__PURE__ */ l("div", { className: c("inconel-slide-tabs", d), children: [
20
- /* @__PURE__ */ r(
21
- "div",
22
- {
23
- className: "inconel-slide-tabs__indicator",
24
- style: {
25
- width: o.width,
26
- transform: `translateX(${o.left}px)`
27
- }
28
- }
29
- ),
30
- t.map((e) => /* @__PURE__ */ l(
31
- "button",
32
- {
33
- ref: (u) => {
34
- s.current[String(e.key)] = u;
35
- },
36
- type: "button",
37
- className: c(
38
- "inconel-slide-tabs__item",
39
- n.key === e.key && "inconel-is-active"
20
+ }, [i, t]), t.length ? /* @__PURE__ */ o(
21
+ "div",
22
+ {
23
+ className: r(
24
+ "inconel-slide-tabs",
25
+ u && "inconel-slide-tabs--full-width",
26
+ d
27
+ ),
28
+ children: [
29
+ /* @__PURE__ */ c(
30
+ "div",
31
+ {
32
+ className: "inconel-slide-tabs__indicator",
33
+ style: {
34
+ width: l.width,
35
+ transform: `translateX(${l.left}px)`
36
+ }
37
+ }
40
38
  ),
41
- onClick: () => a?.(e.key),
42
- children: [
43
- e.label,
44
- typeof e.count == "number" && e.count > 0 && /* @__PURE__ */ r("span", { className: "inconel-slide-tabs__count", children: e.count })
45
- ]
46
- },
47
- e.key
48
- ))
49
- ] }) : null;
39
+ t.map((e) => /* @__PURE__ */ o(
40
+ "button",
41
+ {
42
+ ref: (h) => {
43
+ s.current[String(e.key)] = h;
44
+ },
45
+ type: "button",
46
+ className: r(
47
+ "inconel-slide-tabs__item",
48
+ i.key === e.key && "inconel-is-active"
49
+ ),
50
+ onClick: () => a?.(e.key),
51
+ children: [
52
+ e.label,
53
+ typeof e.count == "number" && e.count > 0 && /* @__PURE__ */ c("span", { className: "inconel-slide-tabs__count", children: e.count })
54
+ ]
55
+ },
56
+ e.key
57
+ ))
58
+ ]
59
+ }
60
+ ) : null;
50
61
  }
51
62
  export {
52
63
  x as SlideTabs
@@ -1 +1 @@
1
- {"version":3,"file":"SlideTabs.js","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"sourcesContent":["import {\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport './styles.css'\n\nexport interface SlideTab {\n key: string | number\n label: ReactNode\n count?: ReactNode\n show?: boolean\n}\n\nexport interface SlideTabsProps {\n tabs?: SlideTab[]\n activeKey?: string | number | null\n onChange?: (key: string | number) => void\n className?: string | null\n}\n\nexport function SlideTabs({\n tabs = [],\n activeKey,\n onChange,\n className,\n}: SlideTabsProps) {\n const refs = useRef<Record<string, HTMLButtonElement | null>>({})\n const [indicator, setIndicator] = useState({ left: 0, width: 0 })\n const visibleTabs = useMemo(\n () => tabs.filter((tab) => tab.show !== false),\n [tabs],\n )\n const active =\n visibleTabs.find((tab) => tab.key === activeKey) ?? visibleTabs[0]\n\n useEffect(() => {\n if (!active) return\n const element = refs.current[String(active.key)]\n if (element) {\n setIndicator({ left: element.offsetLeft, width: element.offsetWidth })\n }\n }, [active, visibleTabs])\n\n if (!visibleTabs.length) return null\n\n return (\n <div className={classNames('inconel-slide-tabs', className)}>\n <div\n className=\"inconel-slide-tabs__indicator\"\n style={{\n width: indicator.width,\n transform: `translateX(${indicator.left}px)`,\n }}\n />\n {visibleTabs.map((tab) => (\n <button\n key={tab.key}\n ref={(element) => {\n refs.current[String(tab.key)] = element\n }}\n type=\"button\"\n className={classNames(\n 'inconel-slide-tabs__item',\n active.key === tab.key && 'inconel-is-active',\n )}\n onClick={() => onChange?.(tab.key)}\n >\n {tab.label}\n {typeof tab.count === 'number' && tab.count > 0 && (\n <span className=\"inconel-slide-tabs__count\">{tab.count}</span>\n )}\n </button>\n ))}\n </div>\n )\n}\n"],"names":["SlideTabs","tabs","activeKey","onChange","className","refs","useRef","indicator","setIndicator","useState","visibleTabs","useMemo","tab","active","useEffect","element","classNames","jsx","jsxs"],"mappings":";;;;AAyBO,SAASA,EAAU;AAAA,EACxB,MAAAC,IAAO,CAAA;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAMC,IAAOC,EAAiD,EAAE,GAC1D,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAE,MAAM,GAAG,OAAO,GAAG,GAC1DC,IAAcC;AAAA,IAClB,MAAMV,EAAK,OAAO,CAACW,MAAQA,EAAI,SAAS,EAAK;AAAA,IAC7C,CAACX,CAAI;AAAA,EAAA,GAEDY,IACJH,EAAY,KAAK,CAACE,MAAQA,EAAI,QAAQV,CAAS,KAAKQ,EAAY,CAAC;AAUnE,SARAI,EAAU,MAAM;AACd,QAAI,CAACD,EAAQ;AACb,UAAME,IAAUV,EAAK,QAAQ,OAAOQ,EAAO,GAAG,CAAC;AAC/C,IAAIE,KACFP,EAAa,EAAE,MAAMO,EAAQ,YAAY,OAAOA,EAAQ,aAAa;AAAA,EAEzE,GAAG,CAACF,GAAQH,CAAW,CAAC,GAEnBA,EAAY,2BAGd,OAAA,EAAI,WAAWM,EAAW,sBAAsBZ,CAAS,GACxD,UAAA;AAAA,IAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAOV,EAAU;AAAA,UACjB,WAAW,cAAcA,EAAU,IAAI;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,IAEDG,EAAY,IAAI,CAACE,MAChB,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,KAAK,CAACH,MAAY;AAChB,UAAAV,EAAK,QAAQ,OAAOO,EAAI,GAAG,CAAC,IAAIG;AAAA,QAClC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC;AAAA,UACT;AAAA,UACAH,EAAO,QAAQD,EAAI,OAAO;AAAA,QAAA;AAAA,QAE5B,SAAS,MAAMT,IAAWS,EAAI,GAAG;AAAA,QAEhC,UAAA;AAAA,UAAAA,EAAI;AAAA,UACJ,OAAOA,EAAI,SAAU,YAAYA,EAAI,QAAQ,KAC5C,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAL,EAAI,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAbpDA,EAAI;AAAA,IAAA,CAgBZ;AAAA,EAAA,GACH,IA9B8B;AAgClC;"}
1
+ {"version":3,"file":"SlideTabs.js","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"sourcesContent":["import {\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport './styles.css'\n\nexport interface SlideTab {\n key: string | number\n label: ReactNode\n count?: ReactNode\n show?: boolean\n}\n\nexport interface SlideTabsProps {\n tabs?: SlideTab[]\n activeKey?: string | number | null\n onChange?: (key: string | number) => void\n className?: string | null\n fullWidth?: boolean\n}\n\nexport function SlideTabs({\n tabs = [],\n activeKey,\n onChange,\n className,\n fullWidth = false,\n}: SlideTabsProps) {\n const refs = useRef<Record<string, HTMLButtonElement | null>>({})\n const [indicator, setIndicator] = useState({ left: 0, width: 0 })\n const visibleTabs = useMemo(\n () => tabs.filter((tab) => tab.show !== false),\n [tabs],\n )\n const active =\n visibleTabs.find((tab) => tab.key === activeKey) ?? visibleTabs[0]\n\n useEffect(() => {\n if (!active) return\n const element = refs.current[String(active.key)]\n if (element) {\n setIndicator({ left: element.offsetLeft, width: element.offsetWidth })\n }\n }, [active, visibleTabs])\n\n if (!visibleTabs.length) return null\n\n return (\n <div\n className={classNames(\n 'inconel-slide-tabs',\n fullWidth && 'inconel-slide-tabs--full-width',\n className,\n )}\n >\n <div\n className=\"inconel-slide-tabs__indicator\"\n style={{\n width: indicator.width,\n transform: `translateX(${indicator.left}px)`,\n }}\n />\n {visibleTabs.map((tab) => (\n <button\n key={tab.key}\n ref={(element) => {\n refs.current[String(tab.key)] = element\n }}\n type=\"button\"\n className={classNames(\n 'inconel-slide-tabs__item',\n active.key === tab.key && 'inconel-is-active',\n )}\n onClick={() => onChange?.(tab.key)}\n >\n {tab.label}\n {typeof tab.count === 'number' && tab.count > 0 && (\n <span className=\"inconel-slide-tabs__count\">{tab.count}</span>\n )}\n </button>\n ))}\n </div>\n )\n}\n"],"names":["SlideTabs","tabs","activeKey","onChange","className","fullWidth","refs","useRef","indicator","setIndicator","useState","visibleTabs","useMemo","tab","active","useEffect","element","jsxs","classNames","jsx"],"mappings":";;;;AA0BO,SAASA,EAAU;AAAA,EACxB,MAAAC,IAAO,CAAA;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAmB;AACjB,QAAMC,IAAOC,EAAiD,EAAE,GAC1D,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAE,MAAM,GAAG,OAAO,GAAG,GAC1DC,IAAcC;AAAA,IAClB,MAAMX,EAAK,OAAO,CAACY,MAAQA,EAAI,SAAS,EAAK;AAAA,IAC7C,CAACZ,CAAI;AAAA,EAAA,GAEDa,IACJH,EAAY,KAAK,CAACE,MAAQA,EAAI,QAAQX,CAAS,KAAKS,EAAY,CAAC;AAUnE,SARAI,EAAU,MAAM;AACd,QAAI,CAACD,EAAQ;AACb,UAAME,IAAUV,EAAK,QAAQ,OAAOQ,EAAO,GAAG,CAAC;AAC/C,IAAIE,KACFP,EAAa,EAAE,MAAMO,EAAQ,YAAY,OAAOA,EAAQ,aAAa;AAAA,EAEzE,GAAG,CAACF,GAAQH,CAAW,CAAC,GAEnBA,EAAY,SAGf,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAb,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOX,EAAU;AAAA,cACjB,WAAW,cAAcA,EAAU,IAAI;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,QAEDG,EAAY,IAAI,CAACE,MAChB,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAACD,MAAY;AAChB,cAAAV,EAAK,QAAQ,OAAOO,EAAI,GAAG,CAAC,IAAIG;AAAA,YAClC;AAAA,YACA,MAAK;AAAA,YACL,WAAWE;AAAA,cACT;AAAA,cACAJ,EAAO,QAAQD,EAAI,OAAO;AAAA,YAAA;AAAA,YAE5B,SAAS,MAAMV,IAAWU,EAAI,GAAG;AAAA,YAEhC,UAAA;AAAA,cAAAA,EAAI;AAAA,cACJ,OAAOA,EAAI,SAAU,YAAYA,EAAI,QAAQ,KAC5C,gBAAAM,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAN,EAAI,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAbpDA,EAAI;AAAA,QAAA,CAgBZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAnC2B;AAsClC;"}