xmlui 0.7.21 → 0.7.23

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -7,18 +7,16 @@ exports.AutoComplete = void 0;
 exports.useDebounce = useDebounce;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
-const react_3 = require("react");
-const constants_1 = require("@components-core/constants");
-const cmdk_1 = require("cmdk");
-const AutoComplete_module_scss_1 = __importDefault(require("@components/AutoComplete/AutoComplete.module.scss"));
-const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
-const SelectNative_1 = require("@components/Select/SelectNative");
-const OptionTypeProvider_1 = __importDefault(require("@components/Option/OptionTypeProvider"));
-const AutoCompleteContext_1 = require("@components/AutoComplete/AutoCompleteContext");
-const OptionContext_1 = require("@components/Select/OptionContext");
 const classnames_1 = __importDefault(require("classnames"));
-const misc_1 = require("@components-core/utils/misc");
+const cmdk_1 = require("cmdk");
+const constants_1 = require("../../components-core/constants");
+const misc_1 = require("../../components-core/utils/misc");
+const AutoComplete_module_scss_1 = __importDefault(require("../../components/AutoComplete/AutoComplete.module.scss"));
+const IconNative_1 = __importDefault(require("../../components/Icon/IconNative"));
+const SelectNative_1 = require("../../components/Select/SelectNative");
+const OptionTypeProvider_1 = __importDefault(require("../../components/Option/OptionTypeProvider"));
+const AutoCompleteContext_1 = require("../../components/AutoComplete/AutoCompleteContext");
+const OptionContext_1 = require("../../components/Select/OptionContext");
 function defaultRenderer(item) {
     return (0, jsx_runtime_1.jsx)("div", { children: item.label });
 }
@@ -26,8 +24,8 @@ function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
 function useDebounce(value, delay) {
-    const [debouncedValue, setDebouncedValue] = (0, react_3.useState)(value);
-    (0, react_3.useEffect)(() => {
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
         const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
         return () => {
             clearTimeout(timer);
@@ -36,18 +34,18 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, optionRenderer = defaultRenderer, emptyListTemplate, style, children, autoFocus = false, dropdownHeight, multi = false, }, forwardedRef) {
-    const inputRef = (0, react_3.useRef)(null);
-    const [open, setOpen] = (0, react_3.useState)(false);
-    const dropdownRef = (0, react_3.useRef)(null); // Added this
-    const [options, setOptions] = (0, react_3.useState)(new Set());
-    const [inputValue, setInputValue] = (0, react_3.useState)("");
+    const inputRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const dropdownRef = (0, react_1.useRef)(null); // Added this
+    const [options, setOptions] = (0, react_1.useState)(new Set());
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
     // Set initial state based on the initialValue prop
-    (0, react_3.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
             updateState({ value: initialValue || [] }, { initial: true });
         }
     }, [initialValue, updateState]);
-    const toggleOption = (0, react_3.useCallback)((selectedValue) => {
+    const toggleOption = (0, react_1.useCallback)((selectedValue) => {
         if (multi) {
             setInputValue("");
         }
@@ -68,23 +66,23 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
         updateState({ value: newSelectedValue });
         onDidChange(newSelectedValue);
     }, [multi, value, updateState, onDidChange]);
-    (0, react_3.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         if (!multi) {
             setInputValue(((_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.labelText) || "");
         }
     }, [multi, options, value]);
     // Clear selected value
-    const clearValue = (0, react_3.useCallback)(() => {
+    const clearValue = (0, react_1.useCallback)(() => {
         const newValue = multi ? [] : "";
         setInputValue("");
         updateState({ value: newValue });
         onDidChange(newValue);
     }, [multi, updateState, onDidChange]);
-    const onOptionAdd = (0, react_3.useCallback)((option) => {
+    const onOptionAdd = (0, react_1.useCallback)((option) => {
         setOptions((prev) => new Set(prev).add(option));
     }, []);
-    const onOptionRemove = (0, react_3.useCallback)((option) => {
+    const onOptionRemove = (0, react_1.useCallback)((option) => {
         setOptions((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -100,7 +98,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
             inputRef.current.blur();
         }
     };
-    (0, react_3.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (open) {
             document.addEventListener("mousedown", handleClickOutside);
             document.addEventListener("touchend", handleClickOutside);
@@ -115,26 +113,26 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
         };
     }, [open]);
     // Render the "empty list" message
-    const emptyListNode = (0, react_3.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.autoCompleteEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
+    const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.autoCompleteEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
     // Register component API for external interactions
-    const focus = (0, react_3.useCallback)(() => {
+    const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [inputRef]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         updateState({ value: Array.isArray(newValue) ? newValue : [newValue] });
     });
-    (0, react_3.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    const optionContextValue = (0, react_3.useMemo)(() => ({
+    const optionContextValue = (0, react_1.useMemo)(() => ({
         onOptionAdd,
         onOptionRemove,
     }), [onOptionAdd, onOptionRemove]);
-    const autoCompleteContextValue = (0, react_3.useMemo)(() => {
+    const autoCompleteContextValue = (0, react_1.useMemo)(() => {
         return {
             multi,
             value,
@@ -213,7 +211,7 @@ function CreatableItem() {
     return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
 }
 function AutoCompleteOption({ value, label, enabled = true, keywords }) {
-    const id = (0, react_2.useId)();
+    const id = (0, react_1.useId)();
     const { value: selectedValue, onChange, optionRenderer, multi } = (0, AutoCompleteContext_1.useAutoComplete)();
     const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
     return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: `${value}`, className: AutoComplete_module_scss_1.default.autoCompleteOption, onMouseDown: (e) => {

package/dist/scripts/src/components/Avatar/Avatar.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.avatarComponentRenderer = exports.AvatarMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const abstractions_1 = require("../../components/abstractions");
 const AvatarNative_1 = require("./AvatarNative");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const abstractions_1 = require("@components/abstractions");
 const COMP = "Avatar";
 exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component represents a user, group (or other entity's) avatar with a small image or initials.`,

package/dist/scripts/src/components/Avatar/AvatarNative.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const classnames_1 = __importDefault(require("classnames"));
 const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
 exports.Avatar = (0, react_1.forwardRef)(function Avatar(_a, ref) {
     var { size = "sm", url, name, style, onClick } = _a, rest = __rest(_a, ["size", "url", "name", "style", "onClick"]);

package/dist/scripts/src/components/Backdrop/Backdrop.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.backdropComponentRenderer = exports.BackdropMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
 const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../../components/metadata-helpers");
 const BackdropNative_1 = require("./BackdropNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Backdrop";
 // See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
 exports.BackdropMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/Badge/Badge.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.badgeComponentRenderer = exports.BadgeMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const BadgeNative_1 = require("./BadgeNative");
 const COMP = "Badge";
 exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
@@ -50,9 +50,9 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BadgeMd, ({ node, extractValue, renderChild }) => {
+exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BadgeMd, ({ node, extractValue, renderChild, layoutCss }) => {
     var _a;
     const value = extractValue.asDisplayText(node.props.value);
     const colorMap = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.colorMap);
-    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorMap === null || colorMap === void 0 ? void 0 : colorMap[value], children: value || renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorMap === null || colorMap === void 0 ? void 0 : colorMap[value], style: layoutCss, children: value || renderChild(node.children) }));
 });

package/dist/scripts/src/components/Badge/BadgeNative.js

@@ -5,18 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = exports.badgeVariantNames = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
 const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
 const badgeVariantValues = ["badge", "pill"];
 exports.badgeVariantNames = [...badgeVariantValues];
-exports.Badge = (0, react_1.forwardRef)(function Badge({ children, color, variant = "badge" }, forwardedRef) {
+exports.Badge = (0, react_1.forwardRef)(function Badge({ children, color, variant = "badge", style }, forwardedRef) {
     return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)({
             [Badge_module_scss_1.default.badge]: variant === "badge",
             [Badge_module_scss_1.default.pill]: variant === "pill",
-        }), style: color
+        }), style: Object.assign(Object.assign({}, (color
             ? typeof color === "string"
                 ? { backgroundColor: color }
                 : { backgroundColor: color.background, color: color.label }
-            : undefined, children: children }));
+            : {})), style), children: children }));
 });

package/dist/scripts/src/components/Bookmark/Bookmark.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bookmarkComponentRenderer = exports.BookmarkMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("@components-core/renderers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const BookmarkNative_1 = require("./BookmarkNative");
 const COMP = "Bookmark";
 exports.BookmarkMd = (0, ComponentDefs_1.createMetadata)({
@@ -15,9 +15,13 @@ exports.BookmarkMd = (0, ComponentDefs_1.createMetadata)({
             `to this component's location.`),
         level: (0, ComponentDefs_1.d)(`The level of the bookmark. The level is used to determine the bookmark's ` +
             `position in the table of contents.`),
+        title: (0, ComponentDefs_1.d)("Defines the text to display the bookmark in the table of contents. If this property is " +
+            "empty, the text falls back to the value of `id`."),
+        omitFromToc: (0, ComponentDefs_1.d)("If true, this bookmark will be excluded from the table of contents.", null, "boolean", false),
     },
 });
 exports.bookmarkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BookmarkMd, (rendererContext) => {
+    var _a, _b;
     const { node, renderChild, extractValue, layoutContext } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(BookmarkNative_1.Bookmark, { uid: extractValue(node.uid), level: extractValue(node.props.level), children: renderChild(node.children, layoutContext) }));
+    return ((0, jsx_runtime_1.jsx)(BookmarkNative_1.Bookmark, { uid: extractValue(node.uid), level: extractValue(node.props.level), title: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.title), omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc), children: renderChild(node.children, layoutContext) }));
 });

package/dist/scripts/src/components/Bookmark/BookmarkNative.js

@@ -3,22 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bookmark = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const TableOfContentsContext_1 = require("@components-core/TableOfContentsContext");
-const Bookmark = ({ uid, level, children }) => {
+const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
+const Bookmark = ({ uid, level = 1, children, title, omitFromToc = false }) => {
     const elementRef = (0, react_1.useRef)(null);
     const tableOfContentsContext = (0, react_1.useContext)(TableOfContentsContext_1.TableOfContentsContext);
     const registerHeading = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.registerHeading;
     const observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.observeIntersection;
     (0, react_1.useEffect)(() => {
-        if (observeIntersection && elementRef.current && uid) {
+        var _a, _b;
+        if (observeIntersection && elementRef.current && uid && !omitFromToc) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: uid,
                 level,
-                text: uid,
+                text: title || ((_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || uid,
                 anchor: elementRef.current,
             });
         }
-    }, [uid, observeIntersection, registerHeading, level]);
+    }, [uid, observeIntersection, registerHeading, level, title, omitFromToc]);
     return ((0, jsx_runtime_1.jsx)("span", { ref: elementRef, id: uid, children: children }));
 };
 exports.Bookmark = Bookmark;

package/dist/scripts/src/components/Breakout/Breakout.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breakoutComponentRenderer = exports.BreakoutMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
 const BreakoutNative_1 = require("./BreakoutNative");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
 const COMP = "Breakout";
 exports.BreakoutMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component creates a breakout section. It allows its child to ` +

package/dist/scripts/src/components/Button/Button.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonComponentRenderer = exports.ButtonMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const abstractions_1 = require("@components/abstractions");
-const IconNative_1 = require("@components/Icon/IconNative");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const abstractions_1 = require("../abstractions");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../../components/metadata-helpers");
+const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("./ButtonNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Button";
 exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
     description: `Button is an interactive element that triggers an action when clicked.`,

package/dist/scripts/src/components/Button/ButtonNative.js

@@ -49,10 +49,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const abstractions_1 = require("@components/abstractions");
 const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const abstractions_1 = require("../abstractions");
 exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
     var { id, type = abstractions_1.defaultButtonType, icon, iconPosition = "start", contentPosition = "center", orientation = "horizontal", variant = "solid", themeColor = "primary", size = "sm", disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus"]);
     const innerRef = (0, react_1.useRef)(null);

package/dist/scripts/src/components/ButtonGroup/ButtonGroup.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buttonGroupComponentRenderer = exports.ButtonGroupMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
 const ButtonGroup_module_scss_1 = __importDefault(require("./ButtonGroup.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const abstractions_1 = require("../abstractions");
+const metadata_helpers_1 = require("../metadata-helpers");
 const ButtonGroupNative_1 = require("./ButtonGroupNative");
-const abstractions_1 = require("@components/abstractions");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "ButtonGroup";
 // See reference implementation here: https://getbootstrap.com/docs/5.3/components/button-group/
 // Use the same techinque for borders and radius as the Accordion component.

package/dist/scripts/src/components/Card/Card.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.cardComponentRenderer = exports.CardMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const themeVars_1 = require("@components-core/theming/themeVars");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const abstractions_1 = require("../abstractions");
 const CardNative_1 = require("./CardNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
-const abstractions_1 = require("@components/abstractions");
 const COMP = "Card";
 exports.CardMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component is a container for cohesive elements, often rendered visually as a card.`,

package/dist/scripts/src/components/Card/CardNative.js

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = exports.DEFAULT_ORIENTATION = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 const react_1 = require("react");
-const AvatarNative_1 = require("@components/Avatar/AvatarNative");
-const LinkNative_1 = require("@components/Link/LinkNative");
-const HeadingNative_1 = require("@components/Heading/HeadingNative");
-const StackNative_1 = require("@components/Stack/StackNative");
-const TextNative_1 = require("@components/Text/TextNative");
+const classnames_1 = __importDefault(require("classnames"));
+const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
+const AvatarNative_1 = require("../Avatar/AvatarNative");
+const LinkNative_1 = require("../Link/LinkNative");
+const HeadingNative_1 = require("../Heading/HeadingNative");
+const StackNative_1 = require("../Stack/StackNative");
+const TextNative_1 = require("../Text/TextNative");
 exports.DEFAULT_ORIENTATION = "vertical";
 exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.DEFAULT_ORIENTATION, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || false, onClick, }, forwardedRef) {
     const titleProps = {

package/dist/scripts/src/components/Carousel/Carousel.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.carouselComponentRenderer = exports.CarouselMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
 const CarouselNative_1 = require("./CarouselNative");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const Carousel_module_scss_1 = __importDefault(require("@components/Carousel/Carousel.module.scss"));
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "Carousel";
 exports.CarouselMd = (0, ComponentDefs_1.createMetadata)({
     status: "in progress",

package/dist/scripts/src/components/Carousel/CarouselItem.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.carouselItemComponentRenderer = exports.CarouselItemMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
-const CarouselItemNative_1 = require("@components/Carousel/CarouselItemNative");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const CarouselItemNative_1 = require("./CarouselItemNative");
 const COMP = "CarouselItem";
 exports.CarouselItemMd = (0, ComponentDefs_1.createMetadata)({});
 exports.carouselItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselItemMd, (rendererContext) => {

package/dist/scripts/src/components/Carousel/CarouselItemNative.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselItemComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const CarouselContext_1 = require("@components/Carousel/CarouselContext");
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const Carousel_module_scss_1 = __importDefault(require("@components/Carousel/Carousel.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
+const CarouselContext_1 = require("./CarouselContext");
 exports.CarouselItemComponent = (0, react_1.forwardRef)(function CarouselItemComponent({ children, style }, forwardedRef) {
     const id = (0, react_1.useId)();
     const { register, unRegister } = (0, CarouselContext_1.useCarousel)();

package/dist/scripts/src/components/Carousel/CarouselNative.js

@@ -39,15 +39,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const embla_carousel_react_1 = __importDefault(require("embla-carousel-react"));
-const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
 const react_1 = require("react");
-const IconNative_1 = __importDefault(require("@components/Icon/IconNative"));
-const constants_1 = require("@components-core/constants");
+const embla_carousel_react_1 = __importDefault(require("embla-carousel-react"));
 const embla_carousel_autoplay_1 = __importDefault(require("embla-carousel-autoplay"));
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const CarouselContext_1 = require("@components/Carousel/CarouselContext");
+const classnames_1 = __importDefault(require("classnames"));
+const Carousel_module_scss_1 = __importDefault(require("./Carousel.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const CarouselContext_1 = require("./CarouselContext");
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 exports.CarouselComponent = (0, react_1.forwardRef)(function CarouselComponent({ orientation = "horizontal", children, style, indicators = true, onDisplayDidChange = constants_1.noop, autoplay = false, controls = true, loop = false, startIndex = 0, prevIcon, nextIcon, transitionDuration = 25, autoplayInterval = 5000, stopAutoplayOnInteraction = true, registerComponentApi, }, forwardedRef) {
     const referenceElement = (0, react_1.useRef)(null);
     const [activeSlide, setActiveSlide] = (0, react_1.useState)(0);

package/dist/scripts/src/components/ChangeListener/ChangeListener.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.changeListenerComponentRenderer = exports.ChangeListenerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const ChangeListenerNative_1 = require("./ChangeListenerNative");
-const metadata_helpers_1 = require("@components/metadata-helpers");
 const COMP = "ChangeListener";
 exports.ChangeListenerMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a functional component (it renders no UI) to trigger an action when a ` +

package/dist/scripts/src/components/ChangeListener/ChangeListenerNative.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChangeListener = ChangeListener;
 const react_1 = require("react");
 const lodash_es_1 = require("lodash-es");
-const hooks_1 = require("@components-core/utils/hooks");
+const hooks_1 = require("../../components-core/utils/hooks");
 function ChangeListener({ listenTo, onChange, throttleWaitInMs = 0 }) {
     const prevValue = (0, hooks_1.usePrevious)(listenTo);
     const throttledOnChange = (0, react_1.useMemo)(() => {

package/dist/scripts/src/components/Checkbox/Checkbox.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkboxComponentRenderer = exports.CheckboxMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Toggle_module_scss_1 = __importDefault(require("@components/Toggle/Toggle.module.scss"));
-const renderers_1 = require("@components-core/renderers");
-const Toggle_1 = require("@components/Toggle/Toggle");
-const themeVars_1 = require("@components-core/theming/themeVars");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const metadata_helpers_1 = require("@components/metadata-helpers");
+const Toggle_module_scss_1 = __importDefault(require("../Toggle/Toggle.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../../components/metadata-helpers");
+const Toggle_1 = require("../Toggle/Toggle");
 const COMP = "Checkbox";
 exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",

package/dist/scripts/src/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorPickerComponentRenderer = exports.ColorPickerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const ColorPickerNative_1 = require("./ColorPickerNative");
+const metadata_helpers_1 = require("../metadata-helpers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
+const COMP = "ColorPicker";
+exports.ColorPickerMd = (0, ComponentDefs_1.createMetadata)({
+    description: ``,
+    props: {
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+    },
+    events: {
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, metadata_helpers_1.dValue)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ColorPicker_module_scss_1.default.themeVars),
+});
+exports.colorPickerComponentRenderer = (0, renderers_1.createComponentRenderer)("ColorPicker", exports.ColorPickerMd, ({ node, extractValue, layoutCss, state, lookupEventHandler, registerComponentApi, updateState, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const enabled = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.enabled, true);
+    const readonly = extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.readOnly, false);
+    return ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, { validationStatus: extractValue(node.props.validationStatus), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, style: layoutCss, required: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.required), enabled: enabled && !readonly, autoFocus: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoFocus), label: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.label), labelPosition: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.labelPosition), labelBreak: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.labelBreak), labelWidth: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.labelWidth) }));
+});