@arkyn/components 3.0.1-beta.95 → 3.0.2

package/dist/modules/components/phoneInput/styles.css

@@ -0,0 +1,19 @@
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynPhoneInputContainer{border:1px solid #0000;border-radius:6px;outline:1px solid #0000;justify-content:start;align-items:center;gap:8px;width:100%;min-height:38px;max-height:38px;padding:0 16px;display:flex;position:relative}.arkynPhoneInputContainer:hover{cursor:text}.arkynPhoneInputContainer.opacity{opacity:.5}.arkynPhoneInputContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynPhoneInputContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynPhoneInputContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynPhoneInputContainer.outline{border-color:var(--border,#e2e8f0)}.arkynPhoneInputContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynPhoneInputContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynPhoneInputContainer.md{min-height:42px;max-height:42px}.arkynPhoneInputContainer.lg{min-height:46px;max-height:46px}}
+
+@layer arkyn{.arkynPhoneInputCountriesOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynPhoneInputCountryOption{color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground,#fff);align-items:center;gap:10px;font-weight:400;line-height:21.79px;display:flex}.arkynPhoneInputCountryOption>span{color:var(--text-muted,#a1a1aa);font-size:14px;font-weight:300;line-height:21.79px}.arkynPhoneInputCountryOption.md{padding:8px 16px;font-size:14px}.arkynPhoneInputCountryOption.lg{padding:8px 16px;font-size:16px}.arkynPhoneInputCountryOption .flag{border-radius:4px;max-width:30px;max-height:20px}.arkynPhoneInputCountryOption .check{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));margin-left:auto;display:none}.arkynPhoneInputCountryOption:hover{cursor:pointer;filter:brightness(.95)}.arkynPhoneInputCountryOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynPhoneInputCountryOption.active svg{display:unset}}
+
+@layer arkyn{.arkynPhoneInputCountryOptionsContainer{z-index:7;border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:200px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynPhoneInputCountryOptionsContainer.bottom{top:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer.top{bottom:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}.arkynPhoneInputCountryOptionsContainerSearchSelect{border:none;border-bottom:1px solid var(--border,#e2e8f0);color:var(--text-heading,#09090b);background-color:var(--background-foreground,#fff);outline:none;padding:16px;font-size:14px}.arkynPhoneInputCountryOptionsContainerSearchSelect::placeholder{color:var(--text-muted,#a1a1aa)}}
+
+@layer arkyn{.phoneInputSelectCountry{cursor:pointer;align-items:center;gap:8px;min-width:58px;display:flex}.phoneInputSelectCountry .flag{border-radius:4px;max-width:30px;max-height:20px}.phoneInputSelectCountry .chevronDown{min-width:12px;max-width:12px;min-height:12px;max-height:12px;color:var(--text-muted,#a1a1aa)}.phoneInputSelectCountry>.arkynDivider{min-width:1px;min-height:20px}}
+
+@layer arkyn{.arkynDivider{background-color:var(--border,#e2e8f0);flex:1;display:block}.arkynDivider.horizontal{width:100%;min-height:1px;max-height:1px}.arkynDivider.vertical{min-width:1px;max-width:1px;height:100%}}
+
+@layer arkyn{.phoneInputMask{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;margin-left:8px}.phoneInputMask.md{min-height:40px;max-height:40px;font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.md::placeholder{font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.lg{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.phoneInputMask.lg::placeholder{font-size:16px;font-weight:400;line-height:16px}}

package/dist/modules/components/popover/index.js

@@ -0,0 +1,32 @@
+import { useScrollLock as e } from "../../hooks/useScrollLock.js";
+/* empty css       */
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/popover/index.tsx
+function i(i) {
+	let { children: a, button: o, closeOnClick: s, className: c = "", orientation: l = "bottomLeft" } = i, [u, d] = t(!1), f = `arkynPopover ${l} ${u ? "visibleTrue" : "visibleFalse"} ${c}`;
+	function p() {
+		u || d(!0);
+	}
+	return e(u), /* @__PURE__ */ r("div", {
+		className: f,
+		onClick: p,
+		children: [
+			o,
+			/* @__PURE__ */ n("div", {
+				style: { visibility: u ? "visible" : "hidden" },
+				onClick: () => s && d(!1),
+				className: "arkynPopoverContent",
+				children: a
+			}),
+			u && /* @__PURE__ */ n("div", {
+				onClick: () => d(!1),
+				className: "arkynPopoverOverlay"
+			})
+		]
+	});
+}
+//#endregion
+export { i as Popover };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/popover/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from \"react\";\n\nimport { useScrollLock } from \"../../hooks/useScrollLock\";\nimport \"./styles.css\";\n\ntype OrientationProps =\n\t| \"bottomLeft\"\n\t| \"bottomRight\"\n\t| \"topLeft\"\n\t| \"topRight\"\n\t| \"top\"\n\t| \"left\"\n\t| \"bottom\"\n\t| \"right\";\n\ntype PopoverProps = {\n\t/** Content rendered inside the floating panel. Required. */\n\tchildren: ReactNode;\n\t/** Trigger element — clicking it opens the popover. Required. */\n\tbutton: ReactNode;\n\t/** When true, clicking the popover content also closes it. @default false */\n\tcloseOnClick?: boolean;\n\t/**\n\t * Position of the floating panel relative to the trigger.\n\t * Options: `\"bottomLeft\"` | `\"bottomRight\"` | `\"topLeft\"` | `\"topRight\"` | `\"top\"` | `\"bottom\"` | `\"left\"` | `\"right\"`.\n\t * @default \"bottomLeft\"\n\t */\n\torientation?: OrientationProps;\n\t/** Additional CSS class applied to the popover root element. */\n\tclassName?: string;\n};\n\n/**\n * Popover — floating panel that appears relative to a trigger element.\n *\n * Clicking outside the popover (or clicking the content when `closeOnClick` is set)\n * dismisses it. Locks body scroll while open.\n *\n * @param props.children - Content to display inside the panel. Required.\n * @param props.button - Trigger element that opens the popover. Required.\n * @param props.closeOnClick - Clicking the content also closes the popover. Default: false\n * @param props.orientation - Panel position relative to the trigger. Default: \"bottomLeft\"\n * @param props.className - Additional CSS class for the root element.\n *\n * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.\n *\n * @example\n * ```tsx\n * // Basic dropdown menu\n * <Popover button={<Button>Options</Button>} closeOnClick>\n *   <ul>\n *     <li onClick={handleEdit}>Edit</li>\n *     <li onClick={handleDelete}>Delete</li>\n *   </ul>\n * </Popover>\n *\n * // User profile menu (bottom-right)\n * <Popover\n *   button={<IconButton icon={User} aria-label=\"Account\" />}\n *   orientation=\"bottomRight\"\n *   closeOnClick\n * >\n *   <nav>\n *     <a href=\"/profile\">Profile</a>\n *     <a href=\"/settings\">Settings</a>\n *     <a href=\"/logout\">Sign out</a>\n *   </nav>\n * </Popover>\n *\n * // Filter panel (top-left)\n * <Popover button={<Badge>Filters</Badge>} orientation=\"topLeft\">\n *   <Input name=\"search\" placeholder=\"Search...\" />\n *   <Select name=\"status\" options={statusOptions} />\n * </Popover>\n * ```\n */\n\nfunction Popover(props: PopoverProps) {\n\tconst {\n\t\tchildren,\n\t\tbutton,\n\t\tcloseOnClick,\n\t\tclassName: baseClassName = \"\",\n\t\torientation = \"bottomLeft\",\n\t} = props;\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tconst visible = isOpen ? \"visibleTrue\" : \"visibleFalse\";\n\tconst className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;\n\n\tfunction handleOpenPopover() {\n\t\tif (!isOpen) setIsOpen(true);\n\t}\n\n\tuseScrollLock(isOpen);\n\n\treturn (\n\t\t<div className={className} onClick={handleOpenPopover}>\n\t\t\t{button}\n\n\t\t\t<div\n\t\t\t\tstyle={{ visibility: isOpen ? \"visible\" : \"hidden\" }}\n\t\t\t\tonClick={() => closeOnClick && setIsOpen(false)}\n\t\t\t\tclassName=\"arkynPopoverContent\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t{isOpen && (\n\t\t\t\t<div onClick={() => setIsOpen(false)} className=\"arkynPopoverOverlay\" />\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport { Popover };\n"],"mappings":";;;;;AA6EA,SAAS,EAAQ,GAAqB;CACrC,IAAM,EACL,aACA,WACA,iBACA,WAAW,IAAgB,IAC3B,iBAAc,iBACX,GACE,CAAC,GAAQ,KAAa,EAAS,EAAK,GAGpC,IAAY,gBAAgB,EAAY,GAD9B,IAAS,gBAAgB,eACgB,GAAG;CAE5D,SAAS,IAAoB;EAC5B,AAAK,KAAQ,EAAU,EAAI;CAC5B;CAIA,OAFA,EAAc,CAAM,GAGnB,kBAAC,OAAD;EAAgB;EAAW,SAAS;YAApC;GACE;GAED,kBAAC,OAAD;IACC,OAAO,EAAE,YAAY,IAAS,YAAY,SAAS;IACnD,eAAe,KAAgB,EAAU,EAAK;IAC9C,WAAU;IAET;GACG,CAAA;GAEJ,KACA,kBAAC,OAAD;IAAK,eAAe,EAAU,EAAK;IAAG,WAAU;GAAuB,CAAA;EAEpE;;AAEP"}

package/dist/modules/components/popover/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPopover{position:relative}.arkynPopoverContent{z-index:3;background-color:var(--background-foreground,#fff);border-radius:8px;position:absolute;box-shadow:3px 3px 8px #0003}.arkynPopover .arkynPopoverContent{display:none}.arkynPopover.visibleTrue .arkynPopoverContent{display:unset}.arkynPopover.bottomLeft .arkynPopoverContent{bottom:-5px;right:0;transform:translateY(100%)}.arkynPopover.bottomRight .arkynPopoverContent{bottom:-5px;left:0;transform:translateY(100%)}.arkynPopover.topLeft .arkynPopoverContent{top:-5px;right:0;transform:translateY(-100%)}.arkynPopover.topRight .arkynPopoverContent{top:-5px;left:0;transform:translateY(-100%)}.arkynPopover.bottom .arkynPopoverContent{top:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.top .arkynPopoverContent{bottom:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.left .arkynPopoverContent{bottom:50%;right:calc(100% + 5px);transform:translateY(50%)}.arkynPopover.right .arkynPopoverContent{bottom:50%;left:calc(100% + 5px);transform:translateY(50%)}.arkynPopoverOverlay{z-index:1;position:fixed;inset:0}}

package/dist/modules/components/radio/radioBox/index.js

@@ -0,0 +1,27 @@
+import { useRadioGroup as e } from "../radioContext.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/radio/radioBox/index.tsx
+function r(r) {
+	let { value: i, size: a, disabled: o, children: s, className: c = "", onClick: l, onFocus: u, ...d } = r, { handleChange: f, size: p, value: m, isError: h, disabled: g } = e(), _ = m === i, v = a || p, y = o || g, b = `arkynRadioBox ${v} ${_ ? "checkedTrue" : "checkedFalse"} ${h ? "errorTrue" : "errorFalse"} ${y ? "disabledTrue" : "disabledFalse"} ${c}`;
+	function x(e) {
+		l?.(e), f(i);
+	}
+	function S(e) {
+		u?.(e), f(i);
+	}
+	return /* @__PURE__ */ n("label", {
+		className: b.trim(),
+		children: [/* @__PURE__ */ t("button", {
+			type: "button",
+			disabled: y,
+			onClick: x,
+			onFocus: S,
+			...d
+		}), s]
+	});
+}
+//#endregion
+export { r as RadioBox };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/radio/radioBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioBox/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nimport { useRadioGroup } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Value submitted to the form when this option is selected. Required. */\n\tvalue: string;\n\t/** Applies error styling. Inherited from `RadioGroup` when not set. */\n\tisError?: boolean;\n\t/** Size variant. Inherits from `RadioGroup` when not set. */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * RadioBox — individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.\n *\n * Reads active value, size, error state, and disabled state from `RadioGroup` context.\n * Must be used as a direct child of `RadioGroup`.\n *\n * @param props.value - Option value. Required.\n * @param props.children - Option label content (text, icons, or rich markup).\n * @param props.disabled - Disables this option (group can also disable all options).\n * @param props.size - Size override. Inherits from group by default.\n *\n * **...Other valid HTML `<button>` properties**\n *\n * @returns RadioBox JSX element.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Choose a plan\" onChange={setPlan}>\n *   <RadioBox value=\"basic\">Basic — $9/mo</RadioBox>\n *   <RadioBox value=\"pro\">Pro — $29/mo</RadioBox>\n *   <RadioBox value=\"enterprise\" disabled>Enterprise — contact us</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioBox(props: RadioBoxProps) {\n\tconst {\n\t\tvalue: componentValue,\n\t\tsize: componentSize,\n\t\tdisabled,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tonFocus,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\thandleChange,\n\t\tsize: groupSize,\n\t\tvalue,\n\t\tisError,\n\t\tdisabled: groupDisabled,\n\t} = useRadioGroup();\n\n\tconst isChecked = value === componentValue;\n\tconst size = componentSize || groupSize;\n\n\tconst isDisabled = disabled || groupDisabled;\n\n\tconst checkedClass = isChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst disabledClass = isDisabled ? \"disabledTrue\" : \"disabledFalse\";\n\tconst className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;\n\n\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\tonClick?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\tfunction handleFocus(event: React.FocusEvent<HTMLButtonElement>) {\n\t\tonFocus?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\treturn (\n\t\t<label className={className.trim()}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\t{...rest}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</label>\n\t);\n}\n\nexport { RadioBox };\n"],"mappings":";;;;AAuCA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OAAO,GACP,MAAM,GACN,aACA,aACA,WAAW,IAAgB,IAC3B,YACA,YACA,GAAG,MACA,GAEE,EACL,iBACA,MAAM,GACN,UACA,YACA,UAAU,MACP,EAAc,GAEZ,IAAY,MAAU,GACtB,IAAO,KAAiB,GAExB,IAAa,KAAY,GAKzB,IAAY,iBAAiB,EAAK,GAHnB,IAAY,gBAAgB,eAGO,GAFrC,IAAU,cAAc,aAE2B,GADhD,IAAa,iBAAiB,gBACmC,GAAG;CAE1F,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,OACC,kBAAC,SAAD;EAAO,WAAW,EAAU,KAAK;YAAjC,CACC,kBAAC,UAAD;GACC,MAAK;GACL,UAAU;GACV,SAAS;GACT,SAAS;GACT,GAAI;EACJ,CAAA,GAEA,CACK;;AAET"}

package/dist/modules/components/radio/radioBox/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynRadioBox{color:var(--text-body,#52525b);align-items:center;gap:8px;font-size:14px;line-height:19.07px;display:flex}.arkynRadioBox>button{background-color:var(--input-background,#fafafa);border:2px solid var(--border,#e2e8f0);border-radius:99999px;position:relative}.arkynRadioBox>button:not(:disabled):hover{cursor:pointer}.arkynRadioBox.checkedTrue>button{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynRadioBox.errorTrue>button{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynRadioBox.checkedTrue>button:before{content:"  ";background-color:rgb(var(--spotlight-primary,17, 109, 220));border-radius:99999px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynRadioBox.sm>button{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.arkynRadioBox.md>button,.arkynRadioBox.lg>button{min-width:24px;max-width:24px;min-height:24px;max-height:24px}.arkynRadioBox.checkedTrue.sm>button:before{min-width:10px;max-width:10px;min-height:10px;max-height:10px}.arkynRadioBox.checkedTrue.md>button:before,.arkynRadioBox.checkedTrue.lg>button:before{min-width:12px;max-width:12px;min-height:12px;max-height:12px}.arkynRadioBox.disabledTrue{opacity:.5}.arkynRadioBox.disabledTrue>button{cursor:not-allowed}}

package/dist/modules/components/radio/radioContext.js

@@ -0,0 +1,24 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/radio/radioContext.tsx
+var r = e({});
+function i(e) {
+	let { children: t, size: i, isError: a, handleChange: o, value: s, disabled: c } = e;
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			handleChange: o,
+			value: s,
+			size: i,
+			isError: a,
+			disabled: c
+		},
+		children: t
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { i as RadioProvider, a as useRadioGroup };
+
+//# sourceMappingURL=radioContext.js.map

package/dist/modules/components/radio/radioContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioContext.js","names":[],"sources":["../../../../src/components/radio/radioContext.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\n\ntype RadioGroupContextType = {\n\tvalue: string;\n\tisError: boolean;\n\tsize: \"sm\" | \"md\" | \"lg\";\n\thandleChange: (value: string) => void;\n\tdisabled: boolean;\n};\n\ntype RadioProviderProps = {\n\tchildren: ReactNode;\n\tisError: boolean;\n\tsize: \"sm\" | \"md\" | \"lg\";\n\tvalue: string;\n\thandleChange: (value: string) => void;\n\tdisabled: boolean;\n};\n\nconst radioContext = createContext({} as RadioGroupContextType);\n\nfunction RadioProvider(props: RadioProviderProps) {\n\tconst { children, size, isError, handleChange, value, disabled } = props;\n\n\treturn (\n\t\t<radioContext.Provider\n\t\t\tvalue={{ handleChange, value, size, isError, disabled }}\n\t\t>\n\t\t\t{children}\n\t\t</radioContext.Provider>\n\t);\n}\n\nfunction useRadioGroup() {\n\treturn useContext(radioContext);\n}\n\nexport { RadioProvider, useRadioGroup };\n"],"mappings":";;;AAmBA,IAAM,IAAe,EAAc,CAAC,CAA0B;AAE9D,SAAS,EAAc,GAA2B;CACjD,IAAM,EAAE,aAAU,SAAM,YAAS,iBAAc,UAAO,gBAAa;CAEnE,OACC,kBAAC,EAAa,UAAd;EACC,OAAO;GAAE;GAAc;GAAO;GAAM;GAAS;EAAS;EAErD;CACqB,CAAA;AAEzB;AAEA,SAAS,IAAgB;CACxB,OAAO,EAAW,CAAY;AAC/B"}

package/dist/modules/components/radio/radioGroup/index.js

@@ -0,0 +1,44 @@
+import { useForm as e } from "../../../hooks/useForm.js";
+import { FieldTemplate as t } from "../../../services/fieldTemplate.js";
+import { RadioProvider as n } from "../radioContext.js";
+/* empty css       */
+import { useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/radio/radioGroup/index.tsx
+function o(o) {
+	let { defaultValue: s = "", name: c, label: l, showAsterisk: u, errorMessage: d, value: f, onChange: p, size: m = "md", className: h = "", disabled: g = !1, unShowFieldTemplate: _ = !1, orientation: v = "vertical", ...y } = o, [b, x] = r(s), { fieldErrors: S } = e();
+	function C(e) {
+		x(e), p && p(e);
+	}
+	let w = d || S?.[c], T = !!w, E = `arkynRadioGroup ${m}`;
+	return /* @__PURE__ */ i(t, {
+		name: c,
+		label: l,
+		showAsterisk: u,
+		className: h,
+		errorMessage: w,
+		unShowFieldTemplate: _,
+		orientation: v,
+		children: /* @__PURE__ */ a(n, {
+			isError: T,
+			size: m,
+			value: f || b,
+			handleChange: C,
+			disabled: g,
+			children: [/* @__PURE__ */ i("input", {
+				style: { display: "none" },
+				type: "text",
+				readOnly: !0,
+				name: c,
+				value: f || b
+			}), /* @__PURE__ */ i("div", {
+				className: E.trim(),
+				...y
+			})]
+		})
+	});
+}
+//#endregion
+export { o as RadioGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/radio/radioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioGroup/index.tsx"],"sourcesContent":["import { type HTMLAttributes, useState } from \"react\";\n\nimport { useForm } from \"../../../hooks/useForm\";\nimport { FieldTemplate } from \"../../../services/fieldTemplate\";\n\nimport { RadioProvider } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Field name used for form submission. Required. */\n\tname: string;\n\t/** Label displayed above the group. */\n\tlabel?: string;\n\t/** Appends an asterisk to the label. @default false */\n\tshowAsterisk?: boolean;\n\t/** Error message shown below the group. Overrides `fieldErrors[name]` from `FormProvider`. */\n\terrorMessage?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Initial selected value (uncontrolled). @default \"\" */\n\tdefaultValue?: string;\n\t/** Callback fired when the selected option changes. */\n\tonChange?: (value: string) => void;\n\t/** Size variant applied to all `RadioBox` children. @default \"md\" */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Disables all `RadioBox` children. @default false */\n\tdisabled?: boolean;\n\t/** When `true`, skips the `FieldTemplate` wrapper (label, error message). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Layout direction of the `FieldWrapper`. @default \"horizontal\" */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * RadioGroup — managed group of `RadioBox` options with form integration.\n *\n * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from\n * the nearest `FormProvider` when no `errorMessage` is explicitly provided.\n *\n * @param props.name - Form field name. Required.\n * @param props.label - Label displayed above the group.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.value - Controlled selection.\n * @param props.defaultValue - Initial selection (uncontrolled). Default: `\"\"`\n * @param props.onChange - Called with the newly selected value.\n * @param props.size - Size for all child `RadioBox` elements. Default: `\"md\"`\n * @param props.disabled - Disables all options. Default: false\n * @param props.errorMessage - Validation error message.\n * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false\n *\n * **...Other valid HTML `<div>` properties**\n *\n * @returns RadioGroup JSX element.\n *\n * @example\n * ```tsx\n * // Uncontrolled with label\n * <RadioGroup name=\"gender\" label=\"Gender\" showAsterisk defaultValue=\"male\">\n *   <RadioBox value=\"male\">Male</RadioBox>\n *   <RadioBox value=\"female\">Female</RadioBox>\n *   <RadioBox value=\"other\">Other</RadioBox>\n * </RadioGroup>\n *\n * // Controlled with change handler\n * <RadioGroup name=\"plan\" label=\"Subscription plan\" value={plan} onChange={setPlan}>\n *   <RadioBox value=\"basic\">Basic — $9/mo</RadioBox>\n *   <RadioBox value=\"pro\">Pro — $29/mo</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioGroup(props: RadioGroupProps) {\n\tconst {\n\t\tdefaultValue = \"\",\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\terrorMessage: baseErrorMessage,\n\t\tvalue: forceValue,\n\t\tonChange,\n\t\tsize = \"md\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t\t...rest\n\t} = props;\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst { fieldErrors } = useForm();\n\n\tfunction handleChange(value: string) {\n\t\tsetValue(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst className = `arkynRadioGroup ${size}`;\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<RadioProvider\n\t\t\t\tisError={isError}\n\t\t\t\tsize={size}\n\t\t\t\tvalue={forceValue || value}\n\t\t\t\thandleChange={handleChange}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadOnly\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceValue || value}\n\t\t\t\t/>\n\n\t\t\t\t<div className={className.trim()} {...rest} />\n\t\t\t</RadioProvider>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RadioGroup };\n"],"mappings":";;;;;;;AAuEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,kBAAe,IACf,SACA,UACA,iBACA,cAAc,GACd,OAAO,GACP,aACA,UAAO,MACP,WAAW,IAAmB,IAC9B,cAAW,IACX,yBAAsB,IACtB,iBAAc,YACd,GAAG,MACA,GAEE,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,EAAE,mBAAgB,EAAQ;CAEhC,SAAS,EAAa,GAAe;EAEpC,AADA,EAAS,CAAK,GACV,KAAU,EAAS,CAAK;CAC7B;CAEA,IAAM,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAY,mBAAmB;CAErC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACU;GACH;GACN,OAAO,KAAc;GACP;GACJ;aALX,CAOC,kBAAC,SAAD;IACC,OAAO,EAAE,SAAS,OAAO;IACzB,MAAK;IACL,UAAA;IACM;IACN,OAAO,KAAc;GACrB,CAAA,GAED,kBAAC,OAAD;IAAK,WAAW,EAAU,KAAK;IAAG,GAAI;GAAO,CAAA,CAC/B;;CACD,CAAA;AAEjB"}

package/dist/modules/components/radio/radioGroup/styles.css

@@ -0,0 +1,7 @@
+@layer arkyn{.arkynRadioGroup{align-items:center;gap:32px;display:flex}}
+
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}

package/dist/modules/components/richText/blockButton/index.js

@@ -0,0 +1,23 @@
+import { textAlignTypes as e } from "../../../templates/richTextTemplates.js";
+import { isBlockActive as t } from "../../../services/isBlockActive.js";
+import { toggleBlock as n } from "../../../services/toggleBlock.js";
+/* empty css       */
+import { jsx as r } from "react/jsx-runtime";
+import { useSlate as i } from "slate-react";
+//#region src/components/richText/blockButton/index.tsx
+function a({ format: a, icon: o }) {
+	let s = i(), c = t(s, a, e.includes(a) ? "align" : "type") ? "activeTrue" : "activeFalse";
+	function l(e) {
+		e.preventDefault(), n(s, a);
+	}
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		className: `arkynRichTextBlockButton ${c}`,
+		onMouseDown: l,
+		children: /* @__PURE__ */ r(o, {})
+	});
+}
+//#endregion
+export { a as BlockButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/richText/blockButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/richText/blockButton/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { MouseEvent } from \"react\";\nimport { useSlate } from \"slate-react\";\n\nimport { isBlockActive } from \"../../../services/isBlockActive\";\nimport { toggleBlock } from \"../../../services/toggleBlock\";\nimport { textAlignTypes } from \"../../../templates/richTextTemplates\";\nimport type {\n\tRichTextAlignFormatType,\n\tRichTextElementFormatType,\n} from \"../../../types/richTextTypes\";\n\nimport \"./styles.css\";\n\ntype BlockButtonProps = {\n\tformat: RichTextElementFormatType | RichTextAlignFormatType;\n\ticon: LucideIcon;\n};\n\nfunction BlockButton({ format, icon: Icon }: BlockButtonProps) {\n\tconst editor = useSlate();\n\n\tconst blockType = textAlignTypes.includes(format) ? \"align\" : \"type\";\n\tconst isActive = isBlockActive(editor, format, blockType);\n\n\tconst activeClass = isActive ? \"activeTrue\" : \"activeFalse\";\n\n\tfunction handleMouseDown(event: MouseEvent<HTMLButtonElement>) {\n\t\tevent.preventDefault();\n\t\ttoggleBlock(editor, format);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={`arkynRichTextBlockButton ${activeClass}`}\n\t\t\tonMouseDown={handleMouseDown}\n\t\t>\n\t\t\t<Icon />\n\t\t</button>\n\t);\n}\n\nexport { BlockButton };\n"],"mappings":";;;;;;;AAmBA,SAAS,EAAY,EAAE,WAAQ,MAAM,KAA0B;CAC9D,IAAM,IAAS,EAAS,GAKlB,IAFW,EAAc,GAAQ,GADrB,EAAe,SAAS,CAAM,IAAI,UAAU,MAG1C,IAAW,eAAe;CAE9C,SAAS,EAAgB,GAAsC;EAE9D,AADA,EAAM,eAAe,GACrB,EAAY,GAAQ,CAAM;CAC3B;CAEA,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAW,4BAA4B;EACvC,aAAa;YAEb,kBAAC,GAAD,CAAO,CAAA;CACA,CAAA;AAEV"}

package/dist/modules/components/richText/blockButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynRichTextBlockButton{background-color:var(--background-underground,#fafafa);border:none;border-radius:4px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.arkynRichTextBlockButton svg{width:20px;height:20px;color:var(--text-heading,#09090b)}.arkynRichTextBlockButton:hover{cursor:pointer;filter:brightness(.98)}html.dark .arkynRichTextBlockButton:hover{cursor:pointer;filter:brightness(.9)}}

package/dist/modules/components/richText/element/index.js

@@ -0,0 +1,75 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/richText/element/index.tsx
+function n({ attributes: n, children: r, element: i }) {
+	let a = { textAlign: i.align };
+	switch (i.type) {
+		case "blockQuote": return /* @__PURE__ */ e("blockquote", {
+			className: "arkynElementBlockquote",
+			style: a,
+			...n,
+			children: r
+		});
+		case "bulletedList": return /* @__PURE__ */ e("ul", {
+			className: "arkynElementBulletList",
+			style: a,
+			...n,
+			children: r
+		});
+		case "headingOne": return /* @__PURE__ */ e("h1", {
+			className: "arkynElementHeadingOne",
+			style: a,
+			...n,
+			children: r
+		});
+		case "headingTwo": return /* @__PURE__ */ e("h2", {
+			className: "arkynElementHeadingTwo",
+			style: a,
+			...n,
+			children: r
+		});
+		case "listItem": return /* @__PURE__ */ e("li", {
+			className: "arkynElementListItem",
+			style: a,
+			...n,
+			children: r
+		});
+		case "numberedList": return /* @__PURE__ */ e("ol", {
+			className: "arkynElementNumberedList",
+			style: a,
+			...n,
+			children: r
+		});
+		case "image": return /* @__PURE__ */ t("div", {
+			style: a,
+			...n,
+			children: [/* @__PURE__ */ e("img", {
+				className: "arkynElementImage",
+				alt: "arkynElementImage",
+				src: i?.src || ""
+			}), r]
+		});
+		case "video": return /* @__PURE__ */ t("div", {
+			style: a,
+			...n,
+			children: [/* @__PURE__ */ e("iframe", {
+				className: "arkynElementVideo",
+				src: i?.src || "",
+				title: "YouTube video player",
+				allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+				referrerPolicy: "strict-origin-when-cross-origin",
+				allowFullScreen: !0
+			}), r]
+		});
+		default: return /* @__PURE__ */ e("p", {
+			className: "arkynElementParagraph",
+			style: a,
+			...n,
+			children: r
+		});
+	}
+}
+//#endregion
+export { n as Element };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/richText/element/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/richText/element/index.tsx"],"sourcesContent":["import type { RenderElementProps } from \"slate-react\";\nimport \"./styles.css\";\n\nfunction Element({ attributes, children, element }: RenderElementProps) {\n\tconst style = { textAlign: element.align };\n\n\tswitch (element.type) {\n\t\tcase \"blockQuote\":\n\t\t\treturn (\n\t\t\t\t<blockquote\n\t\t\t\t\tclassName=\"arkynElementBlockquote\"\n\t\t\t\t\tstyle={style}\n\t\t\t\t\t{...attributes}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</blockquote>\n\t\t\t);\n\t\tcase \"bulletedList\":\n\t\t\treturn (\n\t\t\t\t<ul className=\"arkynElementBulletList\" style={style} {...attributes}>\n\t\t\t\t\t{children}\n\t\t\t\t</ul>\n\t\t\t);\n\t\tcase \"headingOne\":\n\t\t\treturn (\n\t\t\t\t<h1 className=\"arkynElementHeadingOne\" style={style} {...attributes}>\n\t\t\t\t\t{children}\n\t\t\t\t</h1>\n\t\t\t);\n\t\tcase \"headingTwo\":\n\t\t\treturn (\n\t\t\t\t<h2 className=\"arkynElementHeadingTwo\" style={style} {...attributes}>\n\t\t\t\t\t{children}\n\t\t\t\t</h2>\n\t\t\t);\n\t\tcase \"listItem\":\n\t\t\treturn (\n\t\t\t\t<li className=\"arkynElementListItem\" style={style} {...attributes}>\n\t\t\t\t\t{children}\n\t\t\t\t</li>\n\t\t\t);\n\t\tcase \"numberedList\":\n\t\t\treturn (\n\t\t\t\t<ol className=\"arkynElementNumberedList\" style={style} {...attributes}>\n\t\t\t\t\t{children}\n\t\t\t\t</ol>\n\t\t\t);\n\t\tcase \"image\":\n\t\t\treturn (\n\t\t\t\t<div style={style} {...attributes}>\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"arkynElementImage\"\n\t\t\t\t\t\talt=\"arkynElementImage\"\n\t\t\t\t\t\tsrc={element?.src || \"\"}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"video\":\n\t\t\treturn (\n\t\t\t\t<div style={style} {...attributes}>\n\t\t\t\t\t<iframe\n\t\t\t\t\t\tclassName=\"arkynElementVideo\"\n\t\t\t\t\t\tsrc={element?.src || \"\"}\n\t\t\t\t\t\ttitle=\"YouTube video player\"\n\t\t\t\t\t\tallow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n\t\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\t\tallowFullScreen\n\t\t\t\t\t/>\n\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t);\n\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<p className=\"arkynElementParagraph\" style={style} {...attributes}>\n\t\t\t\t\t{children}\n\t\t\t\t</p>\n\t\t\t);\n\t}\n}\n\nexport { Element };\n"],"mappings":";;;AAGA,SAAS,EAAQ,EAAE,eAAY,aAAU,cAA+B;CACvE,IAAM,IAAQ,EAAE,WAAW,EAAQ,MAAM;CAEzC,QAAQ,EAAQ,MAAhB;EACC,KAAK,cACJ,OACC,kBAAC,cAAD;GACC,WAAU;GACH;GACP,GAAI;GAEH;EACU,CAAA;EAEd,KAAK,gBACJ,OACC,kBAAC,MAAD;GAAI,WAAU;GAAgC;GAAO,GAAI;GACvD;EACE,CAAA;EAEN,KAAK,cACJ,OACC,kBAAC,MAAD;GAAI,WAAU;GAAgC;GAAO,GAAI;GACvD;EACE,CAAA;EAEN,KAAK,cACJ,OACC,kBAAC,MAAD;GAAI,WAAU;GAAgC;GAAO,GAAI;GACvD;EACE,CAAA;EAEN,KAAK,YACJ,OACC,kBAAC,MAAD;GAAI,WAAU;GAA8B;GAAO,GAAI;GACrD;EACE,CAAA;EAEN,KAAK,gBACJ,OACC,kBAAC,MAAD;GAAI,WAAU;GAAkC;GAAO,GAAI;GACzD;EACE,CAAA;EAEN,KAAK,SACJ,OACC,kBAAC,OAAD;GAAY;GAAO,GAAI;aAAvB,CACC,kBAAC,OAAD;IACC,WAAU;IACV,KAAI;IACJ,KAAK,GAAS,OAAO;GACrB,CAAA,GAEA,CACG;;EAEP,KAAK,SACJ,OACC,kBAAC,OAAD;GAAY;GAAO,GAAI;aAAvB,CACC,kBAAC,UAAD;IACC,WAAU;IACV,KAAK,GAAS,OAAO;IACrB,OAAM;IACN,OAAM;IACN,gBAAe;IACf,iBAAA;GACA,CAAA,GAEA,CACG;;EAGP,SACC,OACC,kBAAC,KAAD;GAAG,WAAU;GAA+B;GAAO,GAAI;GACrD;EACC,CAAA;CAEN;AACD"}

package/dist/modules/components/richText/element/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynElementBlockquote,.arkynElementBulletList,.arkynElementListItem,.arkynElementNumberedList,.arkynElementParagraph{color:var(--text-body,#52525b);font-size:14px;font-weight:400}.arkynElementHeadingOne,.arkynElementHeadingTwo{color:var(--text-heading,#09090b);font-weight:600}.arkynElementHeadingOne{font-size:18px}.arkynElementHeadingTwo{font-size:16px}.arkynElementImage{max-width:100%}}

package/dist/modules/components/richText/index.js

@@ -0,0 +1,144 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { FieldTemplate as t } from "../../services/fieldTemplate.js";
+import { extractTextFromNode as n } from "../../services/extractTextFromNode.js";
+import { toggleMark as r } from "../../services/toggleMark.js";
+import { hotKeys as i, initialValue as a } from "../../templates/richTextTemplates.js";
+import { BlockButton as o } from "./blockButton/index.js";
+import { Element as s } from "./element/index.js";
+import { InsertImage as c } from "./insertImage/index.js";
+import { InsertVideo as l } from "./insertVideo/index.js";
+import { Leaf as u } from "./leaf/index.js";
+import { MarkButton as d } from "./markButton/index.js";
+import { Toolbar as ee } from "./toolbar/index.js";
+/* empty css       */
+import { useCallback as f, useId as te, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { AlignCenter as ne, AlignJustify as re, AlignLeft as ie, AlignRight as ae, Bold as oe, Code as se, Heading1 as v, Heading2 as y, Italic as b, Quote as x, Underline as S } from "lucide-react";
+import C from "is-hotkey";
+import { createEditor as w } from "slate";
+import { withHistory as T } from "slate-history";
+import { Editable as E, Slate as D, withReact as O } from "slate-react";
+//#region src/components/richText/index.tsx
+function k(k) {
+	let { name: A, hiddenButtons: j, imageConfig: M, videoConfig: N, className: P = "", defaultValue: F = "[]", enforceCharacterLimit: I = !1, onChangeCharactersCount: L, baseErrorMessage: R, maxLimit: z = 1e4, onChange: B, isError: V, label: ce, showAsterisk: H, id: U, orientation: W = "vertical", unShowFieldTemplate: G = !1 } = k, K = p(() => T(O(w())), []), { fieldErrors: le } = e(), q = p(() => {
+		try {
+			let e = JSON.parse(F);
+			return !Array.isArray(e) || e.length === 0 ? structuredClone(a) : e.every((e) => typeof e == "object" && !!e && "type" in e && "children" in e) ? e : structuredClone(a);
+		} catch {
+			return structuredClone(a);
+		}
+	}, [F]), [J, ue] = h(n(q).length), [de, fe] = h(JSON.stringify(q) || "[]"), [pe, Y] = h(!1), me = m(null), he = te(), ge = U || he, X = R || le?.[A], _e = V || !!X, ve = f(u, []), ye = f(s, []);
+	function Z(e) {
+		let t = n(e);
+		ue(t.length), L?.(t.length), !(I && t.length >= z) && (fe(JSON.stringify(e)), B?.(e));
+	}
+	let be = `arkynRichText ${_e || z < J ? "errorTrue" : "errorFalse"} ${pe ? "focusTrue" : "focusFalse"}`, Q = z - J;
+	function $(e) {
+		return !j?.includes(e);
+	}
+	return /* @__PURE__ */ g(t, {
+		name: A,
+		label: ce,
+		showAsterisk: H,
+		className: P,
+		errorMessage: X,
+		unShowFieldTemplate: G,
+		orientation: W,
+		children: /* @__PURE__ */ _(D, {
+			editor: K,
+			initialValue: q,
+			onChange: Z,
+			onValueChange: Z,
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: be,
+					children: [
+						/* @__PURE__ */ _(ee, { children: [
+							$("headingOne") && /* @__PURE__ */ g(o, {
+								format: "headingOne",
+								icon: v
+							}),
+							$("headingTwo") && /* @__PURE__ */ g(o, {
+								format: "headingTwo",
+								icon: y
+							}),
+							$("blockQuote") && /* @__PURE__ */ g(o, {
+								format: "blockQuote",
+								icon: x
+							}),
+							$("bold") && /* @__PURE__ */ g(d, {
+								format: "bold",
+								icon: oe
+							}),
+							$("italic") && /* @__PURE__ */ g(d, {
+								format: "italic",
+								icon: b
+							}),
+							$("underline") && /* @__PURE__ */ g(d, {
+								format: "underline",
+								icon: S
+							}),
+							$("code") && /* @__PURE__ */ g(d, {
+								format: "code",
+								icon: se
+							}),
+							$("left") && /* @__PURE__ */ g(o, {
+								format: "left",
+								icon: ie
+							}),
+							$("right") && /* @__PURE__ */ g(o, {
+								format: "right",
+								icon: ae
+							}),
+							$("center") && /* @__PURE__ */ g(o, {
+								format: "center",
+								icon: ne
+							}),
+							$("justify") && /* @__PURE__ */ g(o, {
+								format: "justify",
+								icon: re
+							}),
+							M && $("image") && /* @__PURE__ */ g(c, { ...M }),
+							$("video") && /* @__PURE__ */ g(l, { ...N })
+						] }),
+						/* @__PURE__ */ g(E, {
+							className: "editorContainer",
+							renderElement: ye,
+							renderLeaf: ve,
+							spellCheck: !0,
+							ref: me,
+							id: ge,
+							onFocus: () => Y(!0),
+							onBlur: () => Y(!1),
+							onKeyDown: (e) => {
+								for (let t in i) if (C(t, e)) {
+									e.preventDefault();
+									let n = i[t];
+									r(K, n);
+								}
+							}
+						}),
+						Q < 0 && /* @__PURE__ */ g("div", {
+							className: "restatesCharacters",
+							children: Q
+						})
+					]
+				}),
+				/* @__PURE__ */ g("input", {
+					type: "hidden",
+					name: A,
+					value: de.slice(0, z)
+				}),
+				/* @__PURE__ */ g("input", {
+					type: "hidden",
+					name: `${A}Count`,
+					value: J
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { k as RichText };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/richText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/richText/index.tsx"],"sourcesContent":["import isHotkey from \"is-hotkey\";\nimport {\n\tAlignCenter,\n\tAlignJustify,\n\tAlignLeft,\n\tAlignRight,\n\tBold,\n\tCode,\n\tHeading1,\n\tHeading2,\n\tItalic,\n\tQuote,\n\tUnderline,\n} from \"lucide-react\";\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { createEditor, type Descendant } from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport { Editable, Slate, withReact } from \"slate-react\";\nimport { useForm } from \"../../hooks/useForm\";\nimport { extractTextFromNode } from \"../../services/extractTextFromNode\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { toggleMark } from \"../../services/toggleMark\";\nimport { hotKeys, initialValue } from \"../../templates/richTextTemplates\";\nimport type {\n\tRichTextHiddenButtonKey,\n\tRichTextProps,\n} from \"../../types/richTextTypes\";\nimport { BlockButton } from \"./blockButton\";\nimport { Element } from \"./element\";\nimport { InsertImage } from \"./insertImage\";\nimport { InsertVideo } from \"./insertVideo\";\nimport { Leaf } from \"./leaf\";\nimport { MarkButton } from \"./markButton\";\nimport { Toolbar } from \"./toolbar\";\nimport \"./styles.css\";\n\n/**\n * RichText — WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.\n *\n * **Toolbar features:** bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image and video insertion.\n *\n * Editor content is stored as a Slate JSON string in a hidden `<input>` for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed above the editor.\n * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `[\"image\", \"code\"]`).\n * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.\n * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: \"[]\"\n * @param props.maxLimit - Maximum character count. Default: 10000\n * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false\n * @param props.onChangeCharactersCount - Callback fired on every keystroke — receives the current character count.\n * @param props.onChange - Callback fired when editor content changes — receives the Slate `Descendant[]`.\n * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).\n * @param props.isError - Forces the error visual state.\n * @param props.id - Custom id for the editable area element.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns RichText JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <RichText name=\"content\" />\n *\n * // With character limit and hidden toolbar buttons\n * <RichText\n *   name=\"description\"\n *   label=\"Description\"\n *   maxLimit={500}\n *   enforceCharacterLimit\n *   hiddenButtons={[\"image\", \"video\", \"code\"]}\n *   onChangeCharactersCount={(n) => setCharCount(n)}\n * />\n *\n * // With image upload support\n * <RichText\n *   name=\"article\"\n *   label=\"Article Body\"\n *   imageConfig={{ action: \"/api/upload\" }}\n * />\n * ```\n */\n\nfunction RichText(props: RichTextProps) {\n\tconst {\n\t\tname,\n\t\thiddenButtons,\n\t\timageConfig,\n\t\tvideoConfig,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdefaultValue = \"[]\",\n\t\tenforceCharacterLimit = false,\n\t\tonChangeCharactersCount,\n\t\tbaseErrorMessage,\n\t\tmaxLimit = 10000,\n\t\tonChange,\n\t\tisError: baseIsError,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tid,\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t} = props;\n\n\tconst editor = useMemo(() => withHistory(withReact(createEditor())), []);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst defaultNodes = useMemo((): Descendant[] => {\n\t\ttry {\n\t\t\tconst parsedNodes = JSON.parse(defaultValue);\n\t\t\tif (!Array.isArray(parsedNodes) || parsedNodes.length === 0) {\n\t\t\t\treturn structuredClone(initialValue);\n\t\t\t}\n\n\t\t\tconst isValidNodes = parsedNodes.every(\n\t\t\t\t(node) =>\n\t\t\t\t\ttypeof node === \"object\" &&\n\t\t\t\t\tnode !== null &&\n\t\t\t\t\t\"type\" in node &&\n\t\t\t\t\t\"children\" in node,\n\t\t\t);\n\n\t\t\treturn isValidNodes ? parsedNodes : structuredClone(initialValue);\n\t\t} catch (_error) {\n\t\t\treturn structuredClone(initialValue);\n\t\t}\n\t}, [defaultValue]);\n\n\tconst textFromNodes = extractTextFromNode(defaultNodes);\n\n\tconst [charactersCount, setCharactersCount] = useState(textFromNodes.length);\n\tconst [inputValue, setInputValue] = useState(\n\t\tJSON.stringify(defaultNodes) || \"[]\",\n\t);\n\n\tconst [onFocus, setOnFocus] = useState(false);\n\n\tconst ref = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = baseIsError || !!errorMessage;\n\n\tconst renderLeaf = useCallback(Leaf, []);\n\tconst renderElement = useCallback(Element, []);\n\n\tfunction handleChange(value: Descendant[]) {\n\t\tconst text = extractTextFromNode(value);\n\n\t\tsetCharactersCount(text.length);\n\t\tonChangeCharactersCount?.(text.length);\n\n\t\tif (enforceCharacterLimit && text.length >= maxLimit) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInputValue(JSON.stringify(value));\n\t\tonChange?.(value);\n\t}\n\n\tconst focusClass = onFocus ? \"focusTrue\" : \"focusFalse\";\n\tconst errorClass = isError\n\t\t? \"errorTrue\"\n\t\t: maxLimit < charactersCount\n\t\t\t? \"errorTrue\"\n\t\t\t: \"errorFalse\";\n\n\tconst className = `arkynRichText ${errorClass} ${focusClass}`;\n\n\tconst restatesCharacters = maxLimit - charactersCount;\n\n\tfunction buttonIsNotHidden(format: RichTextHiddenButtonKey) {\n\t\treturn !hiddenButtons?.includes(format);\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<Slate\n\t\t\t\teditor={editor}\n\t\t\t\tinitialValue={defaultNodes}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonValueChange={handleChange}\n\t\t\t>\n\t\t\t\t<div className={className}>\n\t\t\t\t\t<Toolbar>\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingOne\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingOne\" icon={Heading1} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"headingTwo\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"headingTwo\" icon={Heading2} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"blockQuote\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"blockQuote\" icon={Quote} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"bold\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"bold\" icon={Bold} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"italic\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"italic\" icon={Italic} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"underline\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"underline\" icon={Underline} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"code\") && (\n\t\t\t\t\t\t\t<MarkButton format=\"code\" icon={Code} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"left\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"left\" icon={AlignLeft} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"right\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"right\" icon={AlignRight} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"center\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"center\" icon={AlignCenter} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"justify\") && (\n\t\t\t\t\t\t\t<BlockButton format=\"justify\" icon={AlignJustify} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{imageConfig && buttonIsNotHidden(\"image\") && (\n\t\t\t\t\t\t\t<InsertImage {...imageConfig} />\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{buttonIsNotHidden(\"video\") && <InsertVideo {...videoConfig} />}\n\t\t\t\t\t</Toolbar>\n\n\t\t\t\t\t<Editable\n\t\t\t\t\t\tclassName=\"editorContainer\"\n\t\t\t\t\t\trenderElement={renderElement}\n\t\t\t\t\t\trenderLeaf={renderLeaf}\n\t\t\t\t\t\tspellCheck\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\tonFocus={() => setOnFocus(true)}\n\t\t\t\t\t\tonBlur={() => setOnFocus(false)}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tfor (const hotkey in hotKeys) {\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\t\t\t\tif (isHotkey(hotkey, event as any)) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tconst mark = hotKeys[hotkey as keyof typeof hotKeys];\n\t\t\t\t\t\t\t\t\ttoggleMark(editor, mark);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{restatesCharacters < 0 && (\n\t\t\t\t\t\t<div className=\"restatesCharacters\">{restatesCharacters}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue.slice(0, maxLimit)}\n\t\t\t\t/>\n\n\t\t\t\t<input type=\"hidden\" name={`${name}Count`} value={charactersCount} />\n\t\t\t</Slate>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RichText };\n"],"mappings":"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"}

package/dist/modules/components/richText/insertImage/index.js

@@ -0,0 +1,97 @@
+import { Button as e } from "../../button/index.js";
+import { Input as t } from "../../input/index.js";
+import { ImageUpload as n } from "../../imageUpload/index.js";
+import { ModalContainer as r } from "../../modal/modalContainer/index.js";
+import { ModalFooter as i } from "../../modal/modalFooter/index.js";
+import { ModalHeader as a } from "../../modal/modalHeader/index.js";
+import { TabButton as o } from "../../tab/tabButton/index.js";
+import { TabContainer as s } from "../../tab/tabContainer/index.js";
+/* empty css       */
+import { useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Image as f } from "lucide-react";
+import { useSlate as p } from "slate-react";
+//#region src/components/richText/insertImage/index.tsx
+function m(m) {
+	let { action: h, tabLabels: g = ["Adicionar URL", "Upload de arquivo"], modalCancelButton: _ = "Cancelar", modalConfirmButton: v = "Confirmar", modalInputImageLabel: y = "Imagem:", modalInputUrlLabel: b = "URL da imagem:", modalTitle: x = "Inserir imagem" } = m, S = p(), [C, w] = c(!1), [T, E] = c(""), [D, O] = c("url");
+	function k(e) {
+		e.preventDefault(), !(!T || T === "") && (S.insertNodes([
+			{
+				type: "paragraph",
+				children: [{ text: "" }]
+			},
+			{
+				type: "image",
+				src: T,
+				children: [{ text: "" }]
+			},
+			{
+				type: "paragraph",
+				children: [{ text: "" }]
+			}
+		]), w(!1));
+	}
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("button", {
+		type: "button",
+		className: "arkynRichTextInsertImage",
+		onMouseDown: () => w(!0),
+		children: /* @__PURE__ */ u(f, {})
+	}), /* @__PURE__ */ d(r, {
+		isVisible: C,
+		makeInvisible: () => w(!1),
+		children: [
+			/* @__PURE__ */ u(a, { children: x }),
+			/* @__PURE__ */ d("div", {
+				className: "arkynRichTextInsertImageModalContent",
+				children: [
+					/* @__PURE__ */ d(s, {
+						defaultValue: D,
+						onChange: O,
+						children: [/* @__PURE__ */ u(o, {
+							value: "url",
+							children: g[0]
+						}), /* @__PURE__ */ u(o, {
+							value: "file",
+							children: g[1]
+						})]
+					}),
+					D === "url" && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+						type: "text",
+						name: "richTextImageURL",
+						label: b,
+						showAsterisk: !0,
+						defaultValue: T,
+						onChange: (e) => E(e.target.value)
+					}), T && /* @__PURE__ */ u("img", {
+						className: "arkynRichTextInsertImageModalPreviewImage",
+						src: T,
+						alt: "preview"
+					})] }),
+					D === "file" && /* @__PURE__ */ u(n, {
+						name: "richTextImageURL",
+						action: h,
+						label: y,
+						showAsterisk: !0,
+						defaultValue: T,
+						onChange: (e) => E(e)
+					})
+				]
+			}),
+			/* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(e, {
+				type: "button",
+				scheme: "danger",
+				variant: "outline",
+				onClick: () => w(!1),
+				children: _
+			}), /* @__PURE__ */ u(e, {
+				type: "button",
+				onClick: k,
+				children: v
+			})] })
+		]
+	})] });
+}
+//#endregion
+export { m as InsertImage };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/richText/insertImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/richText/insertImage/index.tsx"],"sourcesContent":["import { Image } from \"lucide-react\";\nimport { type MouseEvent, useState } from \"react\";\nimport { useSlate } from \"slate-react\";\n\nimport type { RichTextInsertImageProps } from \"../../../types/richTextTypes\";\n\nimport { Button } from \"../../button\";\nimport { ImageUpload } from \"../../imageUpload\";\nimport { Input } from \"../../input\";\nimport { ModalContainer } from \"../../modal/modalContainer\";\nimport { ModalFooter } from \"../../modal/modalFooter\";\nimport { ModalHeader } from \"../../modal/modalHeader\";\nimport { TabButton } from \"../../tab/tabButton\";\nimport { TabContainer } from \"../../tab/tabContainer\";\n\nimport \"./styles.css\";\n\nfunction InsertImage(props: RichTextInsertImageProps) {\n\tconst {\n\t\taction,\n\t\ttabLabels = [\"Adicionar URL\", \"Upload de arquivo\"],\n\t\tmodalCancelButton = \"Cancelar\",\n\t\tmodalConfirmButton = \"Confirmar\",\n\t\tmodalInputImageLabel = \"Imagem:\",\n\t\tmodalInputUrlLabel = \"URL da imagem:\",\n\t\tmodalTitle = \"Inserir imagem\",\n\t} = props;\n\n\tconst editor = useSlate();\n\n\tconst [modalIsVisible, setModalIsVisible] = useState(false);\n\tconst [imageURL, setImageURL] = useState(\"\");\n\tconst [uploadType, setUploadType] = useState(\"url\");\n\n\tfunction handleMouseDown(event: MouseEvent<HTMLButtonElement>) {\n\t\tevent.preventDefault();\n\t\tif (!imageURL || imageURL === \"\") return;\n\n\t\teditor.insertNodes([\n\t\t\t{ type: \"paragraph\", children: [{ text: \"\" }] },\n\t\t\t{ type: \"image\", src: imageURL, children: [{ text: \"\" }] },\n\t\t\t{ type: \"paragraph\", children: [{ text: \"\" }] },\n\t\t]);\n\n\t\tsetModalIsVisible(false);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"arkynRichTextInsertImage\"\n\t\t\t\tonMouseDown={() => setModalIsVisible(true)}\n\t\t\t>\n\t\t\t\t<Image />\n\t\t\t</button>\n\n\t\t\t<ModalContainer\n\t\t\t\tisVisible={modalIsVisible}\n\t\t\t\tmakeInvisible={() => setModalIsVisible(false)}\n\t\t\t>\n\t\t\t\t<ModalHeader>{modalTitle}</ModalHeader>\n\n\t\t\t\t<div className=\"arkynRichTextInsertImageModalContent\">\n\t\t\t\t\t<TabContainer defaultValue={uploadType} onChange={setUploadType}>\n\t\t\t\t\t\t<TabButton value=\"url\">{tabLabels[0]}</TabButton>\n\t\t\t\t\t\t<TabButton value=\"file\">{tabLabels[1]}</TabButton>\n\t\t\t\t\t</TabContainer>\n\n\t\t\t\t\t{uploadType === \"url\" && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tname=\"richTextImageURL\"\n\t\t\t\t\t\t\t\tlabel={modalInputUrlLabel}\n\t\t\t\t\t\t\t\tshowAsterisk\n\t\t\t\t\t\t\t\tdefaultValue={imageURL}\n\t\t\t\t\t\t\t\tonChange={(e) => setImageURL(e.target.value)}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{imageURL && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclassName=\"arkynRichTextInsertImageModalPreviewImage\"\n\t\t\t\t\t\t\t\t\tsrc={imageURL}\n\t\t\t\t\t\t\t\t\talt=\"preview\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{uploadType === \"file\" && (\n\t\t\t\t\t\t<ImageUpload\n\t\t\t\t\t\t\tname=\"richTextImageURL\"\n\t\t\t\t\t\t\taction={action}\n\t\t\t\t\t\t\tlabel={modalInputImageLabel}\n\t\t\t\t\t\t\tshowAsterisk\n\t\t\t\t\t\t\tdefaultValue={imageURL}\n\t\t\t\t\t\t\tonChange={(url) => setImageURL(url)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<ModalFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tscheme=\"danger\"\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tonClick={() => setModalIsVisible(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{modalCancelButton}\n\t\t\t\t\t</Button>\n\n\t\t\t\t\t<Button type=\"button\" onClick={handleMouseDown}>\n\t\t\t\t\t\t{modalConfirmButton}\n\t\t\t\t\t</Button>\n\t\t\t\t</ModalFooter>\n\t\t\t</ModalContainer>\n\t\t</>\n\t);\n}\n\nexport { InsertImage };\n"],"mappings":";;;;;;;;;;;;;;AAiBA,SAAS,EAAY,GAAiC;CACrD,IAAM,EACL,WACA,eAAY,CAAC,iBAAiB,mBAAmB,GACjD,uBAAoB,YACpB,wBAAqB,aACrB,0BAAuB,WACvB,wBAAqB,kBACrB,gBAAa,qBACV,GAEE,IAAS,EAAS,GAElB,CAAC,GAAgB,KAAqB,EAAS,EAAK,GACpD,CAAC,GAAU,KAAe,EAAS,EAAE,GACrC,CAAC,GAAY,KAAiB,EAAS,KAAK;CAElD,SAAS,EAAgB,GAAsC;EAC9D,EAAM,eAAe,GACjB,GAAC,KAAY,MAAa,QAE9B,EAAO,YAAY;GAClB;IAAE,MAAM;IAAa,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC;GAAE;GAC9C;IAAE,MAAM;IAAS,KAAK;IAAU,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC;GAAE;GACzD;IAAE,MAAM;IAAa,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC;GAAE;EAC/C,CAAC,GAED,EAAkB,EAAK;CACxB;CAEA,OACC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAU;EACV,mBAAmB,EAAkB,EAAI;YAEzC,kBAAC,GAAD,CAAQ,CAAA;CACD,CAAA,GAER,kBAAC,GAAD;EACC,WAAW;EACX,qBAAqB,EAAkB,EAAK;YAF7C;GAIC,kBAAC,GAAD,EAAA,UAAc,EAAwB,CAAA;GAEtC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACC,kBAAC,GAAD;MAAc,cAAc;MAAY,UAAU;gBAAlD,CACC,kBAAC,GAAD;OAAW,OAAM;iBAAO,EAAU;MAAc,CAAA,GAChD,kBAAC,GAAD;OAAW,OAAM;iBAAQ,EAAU;MAAc,CAAA,CACpC;;KAEb,MAAe,SACf,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,GAAD;MACC,MAAK;MACL,MAAK;MACL,OAAO;MACP,cAAA;MACA,cAAc;MACd,WAAW,MAAM,EAAY,EAAE,OAAO,KAAK;KAC3C,CAAA,GAEA,KACA,kBAAC,OAAD;MACC,WAAU;MACV,KAAK;MACL,KAAI;KACJ,CAAA,CAED,EAAA,CAAA;KAGF,MAAe,UACf,kBAAC,GAAD;MACC,MAAK;MACG;MACR,OAAO;MACP,cAAA;MACA,cAAc;MACd,WAAW,MAAQ,EAAY,CAAG;KAClC,CAAA;IAEE;;GAEL,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;IACC,MAAK;IACL,QAAO;IACP,SAAQ;IACR,eAAe,EAAkB,EAAK;cAErC;GACM,CAAA,GAER,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAS;cAC7B;GACM,CAAA,CACI,EAAA,CAAA;EACE;GACf,EAAA,CAAA;AAEJ"}