@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/CalloutCard/CalloutCard.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalloutCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utils/css");
+// import { LegacyCard } from '../LegacyCard'
+// eslint-disable-next-line import/no-deprecated
+const Button_1 = require("../Button");
+const ButtonGroup_1 = require("../ButtonGroup");
+// import { Image } from '../Image'
+const Text_1 = require("../Text");
+function CalloutCard({ title, children, illustration, primaryAction, secondaryAction, onDismiss, }) {
+    const primaryActionMarkup = (0, Button_1.buttonFrom)(primaryAction);
+    const secondaryActionMarkup = secondaryAction
+        ? (0, Button_1.buttonFrom)(secondaryAction, { plain: true })
+        : null;
+    const buttonMarkup = secondaryActionMarkup ? ((0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [primaryActionMarkup, secondaryActionMarkup] })) : (primaryActionMarkup);
+    const styles = {
+        Dismiss: 'absolute top-2 right-2',
+        Image: 'w-16 h-16 rounded-full',
+        DismissImage: '',
+        Container: '...',
+        hasDismiss: '',
+        CalloutCard: 'p-4 bg-white rounded-lg shadow-md',
+        Content: '',
+        Title: '',
+        Text: 'text-xl font-bold',
+        Buttons: '',
+    };
+    const dismissButton = onDismiss ? ((0, jsx_runtime_1.jsx)("div", { className: styles.Dismiss, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDismiss, "aria-label": 'Dismiss card', children: "x" }) })) : null;
+    const imageClassName = (0, css_1.classNames)(styles.Image, onDismiss && styles.DismissImage);
+    const containerClassName = (0, css_1.classNames)(styles.Container, onDismiss && styles.hasDismiss);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, children: [dismissButton, (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: styles.CalloutCard, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles.Content, children: [(0, jsx_runtime_1.jsx)("div", { className: styles.Title, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'headingMd', as: 'h2', children: title }) }), (0, jsx_runtime_1.jsx)("div", { children: children }), (0, jsx_runtime_1.jsx)("div", { className: styles.Buttons, children: buttonMarkup })] }), (0, jsx_runtime_1.jsx)("img", { alt: '', className: imageClassName, src: illustration })] }) })] }) }));
+}
+exports.CalloutCard = CalloutCard;

package/dist/src/components/CalloutCard/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CalloutCard"), exports);

package/dist/src/components/Caption/Caption.classnames.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CaptionClassnames = {
+    "Caption": "Caption-Caption"
+};
+exports.default = CaptionClassnames;

package/dist/src/components/Caption/Caption.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Caption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Caption_classnames_1 = __importDefault(require("./Caption.classnames"));
+/**
+ * @deprecated The Caption component will be removed in the next
+ * major version. Use the Text component instead. See the
+ * Polaris component guide on how to use Text.
+ *
+ * https://dev.airsoko.com/components/text
+ */
+function Caption({ children }) {
+    return (0, jsx_runtime_1.jsx)("p", { className: Caption_classnames_1.default.Caption, children: children });
+}
+exports.Caption = Caption;

package/dist/src/components/Caption/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Caption"), exports);

package/dist/src/components/CheckableButton/CheckableButton.classnames.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CheckableButtonClassnames = {
+    "CheckableButton": "CheckableButton-CheckableButton",
+    "Checkbox": "CheckableButton-Checkbox",
+    "Label": "CheckableButton-Label"
+};
+exports.default = CheckableButtonClassnames;

package/dist/src/components/CheckableButton/CheckableButton.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckableButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../utilities/css");
+const Checkbox_1 = require("../Checkbox");
+const CheckableButton_classnames_1 = __importDefault(require("./CheckableButton.classnames"));
+exports.CheckableButton = (0, react_1.forwardRef)(function CheckableButton({ accessibilityLabel, label = '', onToggleAll, selected, disabled, ariaLive, }, ref) {
+    const checkBoxRef = (0, react_1.useRef)(null);
+    function focus() {
+        var _a;
+        (_a = checkBoxRef === null || checkBoxRef === void 0 ? void 0 : checkBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focus,
+        };
+    });
+    const className = (0, css_1.classNames)(CheckableButton_classnames_1.default.CheckableButton);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, onClick: onToggleAll, children: [(0, jsx_runtime_1.jsx)("div", { className: CheckableButton_classnames_1.default.Checkbox, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: accessibilityLabel, labelHidden: true, checked: selected, disabled: disabled, onChange: onToggleAll, ref: checkBoxRef }) }), (0, jsx_runtime_1.jsx)("span", { className: CheckableButton_classnames_1.default.Label, "aria-live": ariaLive, children: label })] }));
+});

package/dist/src/components/CheckableButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CheckableButton"), exports);

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../utils");
+const react_1 = __importDefault(require("react"));
+const Checkbox = react_1.default.forwardRef(({ label, text, name, disabled, isIndeterminate, error, className, info, model = 'box', rootClassName, ...rest }, ref) => {
+    const definedLabel = text || label;
+    const modelTypes = {
+        circle: 'rounded-full',
+        box: 'rounded',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(' ', rootClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'dspace-x-4 group relative flex items-center', children: [(0, jsx_runtime_1.jsx)("input", { id: name, name: name, type: 'checkbox', ref: ref, disabled: disabled, className: (0, utils_1.cn)('absolute h-5 w-5 border border-emerald-600 opacity-0 group-hover:cursor-pointer'), ...rest }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('dmr-2 flex h-5 w-5 flex-shrink-0 items-center justify-center  border-2  focus-within:border-blue-500 group-hover:cursor-pointer', disabled
+                            ? '!cursor-not-allowed border-gray-300 bg-gray-200'
+                            : 'border-gray-500 bg-white', 
+                        // modelTypes[model],
+                        className, isIndeterminate && '!border-[#2c6ecb] text-[#2c6ecb]', rest.type == 'radio' && 'rounded-full'), children: [rest.type == 'radio' && ((0, jsx_runtime_1.jsx)("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 10 10', className: 'pointer-events-none hidden  h-3 w-3 fill-current ', children: (0, jsx_runtime_1.jsx)("circle", { cx: '5', cy: '5', r: '4', fill: 'white' }) })), !(rest.type == 'radio') && ((0, jsx_runtime_1.jsx)("svg", { className: 'pointer-events-none hidden h-3 w-3 fill-current ', version: '1.1', viewBox: '0 0 17 12', xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("g", { fill: 'none', fillRule: 'evenodd', children: (0, jsx_runtime_1.jsx)("g", { transform: 'translate(-9 -11)', fill: 'white', fillRule: 'nonzero', children: (0, jsx_runtime_1.jsx)("path", { d: 'm25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z' }) }) }) }))] }), definedLabel && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: (0, utils_1.cn)(disabled && '!cursor-not-allowed !text-gray-400 dark:!text-gray-600', 'ml-2 mb-[3px] group-hover:cursor-pointer '), children: definedLabel }))] }), (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
+            input:checked + div {
+              border-color: #2c6ecb;
+              background-color: #2c6ecb;
+            }
+            input:checked + div svg {
+              display: block;
+            }
+          ` }), error && (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-end text-xs text-red-500', children: error })] }));
+});
+exports.Checkbox = Checkbox;
+Checkbox.displayName = 'CustomCheckbox';

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CheckboxClassnames = {
+    "Checkbox": "Checkbox-Checkbox",
+    "Backdrop": "Checkbox-Backdrop",
+    "Input": "Checkbox-Input",
+    "Input-indeterminate": "Checkbox-Input-indeterminate",
+    "Icon": "Checkbox-Icon",
+    "animated": "Checkbox-animated",
+    "toneMagic": "Checkbox-toneMagic",
+    "error": "Checkbox-error",
+    "Input.Input-indeterminate": "Checkbox-Input.Input-indeterminate",
+    "Input:active": "Checkbox-Input:active",
+    "Input:focus-visible+.Backdrop": "Checkbox-Input:focus-visible+.Backdrop",
+    "checked": "Checkbox-checked"
+};
+exports.default = CheckboxClassnames;

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

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../utilities/css");
+const context_1 = require("../../utilities/listbox/context");
+const unique_id_1 = require("../../utilities/unique-id");
+const use_toggle_1 = require("../../utilities/use-toggle");
+const Choice_1 = require("../Choice");
+const InlineError_1 = require("../InlineError");
+const utils_1 = require("../../utils");
+const Icons_1 = require("../Icons");
+const Checkbox_styles_1 = __importDefault(require("./Checkbox.styles"));
+exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ariaControls, ariaDescribedBy: ariaDescribedByProp, label, labelHidden, checked = false, helpText, disabled, id: idProp, name, value, error, onChange, onFocus, onBlur, legacy, }, ref) {
+    const inputNode = (0, react_1.useRef)(null);
+    const id = (0, unique_id_1.useUniqueId)('Checkbox', idProp);
+    const { value: mouseOver, setTrue: handleMouseOver, setFalse: handleMouseOut } = (0, use_toggle_1.useToggle)(false);
+    const isWithinListbox = (0, react_1.useContext)(context_1.WithinListboxContext);
+    (0, react_1.useImperativeHandle)(!legacy ? ref : null, () => ({
+        focus: () => {
+            if (inputNode.current) {
+                inputNode.current.focus();
+            }
+        },
+    }));
+    const handleBlur = () => {
+        onBlur && onBlur();
+    };
+    const handleOnClick = () => {
+        if (onChange == null || inputNode.current == null || disabled) {
+            return;
+        }
+        //@ts-expect-error beacuse of legacy
+        onChange(inputNode.current.checked, id);
+        inputNode.current.focus();
+    };
+    const describedBy = [];
+    if (error && typeof error !== 'boolean') {
+        describedBy.push((0, InlineError_1.errorTextID)(id));
+    }
+    if (helpText) {
+        describedBy.push((0, Choice_1.helpTextID)(id));
+    }
+    if (ariaDescribedByProp) {
+        describedBy.push(ariaDescribedByProp);
+    }
+    const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
+    const wrapperClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Checkbox, error && Checkbox_styles_1.default.error);
+    const backdropClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Backdrop, mouseOver && Checkbox_styles_1.default.hover);
+    const isIndeterminate = checked === 'indeterminate';
+    const isChecked = !isIndeterminate && Boolean(checked);
+    const indeterminateAttributes = isIndeterminate
+        ? { indeterminate: 'true', 'aria-checked': 'mixed' }
+        : { 'aria-checked': isChecked };
+    const iconSource = isIndeterminate ? Icons_1.MaMinus : Icons_1.MaCheck;
+    const inputClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Input, isIndeterminate && Checkbox_styles_1.default['Input-indeterminate']);
+    const legacyProps = legacy
+        ? {
+            ref: ref,
+            onChange: onChange,
+        }
+        : {
+            onChange: noop,
+            onClick: handleOnClick,
+            checked: isChecked,
+            ref: inputNode,
+        };
+    return ((0, jsx_runtime_1.jsx)(Choice_1.Choice, { id: id, label: label, labelHidden: labelHidden, helpText: helpText, error: error, disabled: disabled, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, children: (0, jsx_runtime_1.jsxs)("div", { className: wrapperClassName, children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, value: value, type: 'checkbox', disabled: disabled, className: inputClassName, onBlur: handleBlur, ...legacyProps, onFocus: onFocus, "aria-invalid": error != null, "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, hidden: true, role: isWithinListbox ? 'presentation' : 'checkbox', ...indeterminateAttributes }), isIndeterminate && ((0, jsx_runtime_1.jsx)("div", { onClick: stopPropagation, onKeyUp: stopPropagation, className: (0, utils_1.cn)('dmr-2 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border-2  border-blue-500 bg-white  focus-within:border-blue-500 group-hover:cursor-pointer'), children: (0, jsx_runtime_1.jsx)(MinusSquareIcon, { className: 'pointer-events-none  h-4 w-4 fill-current  text-blue-500' }) })), !isIndeterminate && ((0, jsx_runtime_1.jsxs)("div", { onClick: stopPropagation, onKeyUp: stopPropagation, className: (0, utils_1.cn)('dmr-2 flex  h-5 w-5 flex-shrink-0 items-center justify-center rounded  border-2  focus-within:border-blue-500 group-hover:cursor-pointer'), children: [isIndeterminate && ((0, jsx_runtime_1.jsx)(MinusSquareIcon, { className: 'pointer-events-none hidden h-4 w-4 fill-current text-white  ' })), (0, jsx_runtime_1.jsx)(TickIcon, { className: 'pointer-events-none hidden h-5 w-5 fill-current ' })] })), (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
+            input:checked + div {
+              border-color: #2c6ecb;
+              background-color: #2c6ecb;
+            }
+            input:checked + div svg {
+              display: block;
+            }
+          ` })] }) }));
+});
+function noop() { }
+function stopPropagation(event) {
+    event.stopPropagation();
+}
+const MinusSquareIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 448 512', height: '1.75em', width: '1.75em', xmlns: 'http://www.w3.org/2000/svg', ...props, children: (0, jsx_runtime_1.jsx)("path", { d: 'M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z' }) }));
+};
+const TickIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, version: '1.1', viewBox: '0 0 17 12', xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("g", { fill: 'none', fillRule: 'evenodd', children: (0, jsx_runtime_1.jsx)("g", { transform: 'translate(-9 -11)', fill: 'white', fillRule: 'nonzero', children: (0, jsx_runtime_1.jsx)("path", { d: 'm25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z' }) }) }) }));
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Checkbox: 'relative m-1 group relative flex items-center',
+    Input: '',
+    'Input-indeterminate': '',
+    Icon: 'absolute left-1/2 top-1/2 transform transform-origin pointer-none transition-0',
+    Backdrop: 'relative block w-full h-full  focus:ring',
+    error: 'bg-red-500 text-red-400',
+    hover: 'hover-class',
+};
+exports.default = styles;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Checkbox"), exports);

package/dist/src/components/CheckboxTree/CheckboxList.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Checkbox_1 = require("../Checkbox");
+const FlexBox_1 = require("../FlexBox");
+const Tree_1 = require("./Tree");
+const CheckboxList = ({ items, getStateForId, idsToRender = [], indentLevel = 0, onClick = () => { }, }) => {
+    const [openIds, setOpenIds] = (0, react_1.useState)([]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [counts, setCounts] = (0, react_1.useState)({});
+    if (!idsToRender.length) {
+        idsToRender = items.filter((i) => !i.parentId).map((i) => i.id);
+    }
+    const getChildNodes = (parentId) => {
+        const nodeItems = items.filter((i) => i.parentId === parentId);
+        if (!nodeItems.length)
+            return null;
+        //   setCounts({ ...counts, [parentId]: nodeItems.length });
+        return ((0, jsx_runtime_1.jsx)(CheckboxList, { items: items, idsToRender: nodeItems.map((i) => i.id), indentLevel: indentLevel + 1, onClick: onClick, getStateForId: getStateForId }));
+    };
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(FlexBox_1.FlexBox, { as: 'ul', direction: 'col', gap: 2, 
+        //   divide={indentLevel == 0}
+        //   className={indentLevel == 0 ? 'border-t' : ''}
+        // className={styles.list}
+        style: { paddingLeft: indentLevel * 20 }, children: idsToRender.map((id) => {
+            const item = items.find((i) => i.id === id);
+            const checkboxState = getStateForId(id);
+            const hasChildren = items.some((i) => i.parentId === id);
+            const isNodeOpen = openIds.includes(id);
+            const handleToggle = () => {
+                if (openIds.includes(id)) {
+                    setOpenIds(openIds.filter((openId) => openId !== id));
+                }
+                else {
+                    setOpenIds([...openIds, id]);
+                }
+            };
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FlexBox_1.FlexBox, { className: indentLevel == 0 ? 'border-t first:border-t-0' : '', gap: 4, align: 'center', style: { padding: indentLevel == 0 ? '4px' : '4px' }, as: 'li', children: [hasChildren ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleToggle, children: isNodeOpen ? (0, jsx_runtime_1.jsx)("span", { children: "\u2212" }) : (0, jsx_runtime_1.jsx)("span", { children: "+" }) })) : ((0, jsx_runtime_1.jsx)("span", { className: 'text-transparent', children: "+" })), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox
+                            //TODO::check if it works
+                            // readOnly
+                            , { 
+                                //TODO::check if it works
+                                // readOnly
+                                ref: ref, label: item.name, name: item.id, onChange: () => onClick(item.id), checked: checkboxState === Tree_1.CheckboxState.CHECKED ||
+                                    (checkboxState === Tree_1.CheckboxState.INDETERMINATE && 'indeterminate') })] }), isNodeOpen && getChildNodes(item.id)] }, item.id));
+        }) }));
+};
+exports.default = CheckboxList;

package/dist/src/components/CheckboxTree/Tree.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxTree = exports.CheckboxState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FlexBox_1 = require("../FlexBox");
+const react_1 = require("react");
+const CheckboxList_1 = __importDefault(require("./CheckboxList"));
+const updateItemStates_1 = require("./updateItemStates");
+var CheckboxState;
+(function (CheckboxState) {
+    CheckboxState[CheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
+    CheckboxState[CheckboxState["CHECKED"] = 1] = "CHECKED";
+    CheckboxState[CheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
+})(CheckboxState = exports.CheckboxState || (exports.CheckboxState = {}));
+const CheckboxTree = ({ defaultItemStates, onDataChange, items, values, }) => {
+    const [itemStates, setItemStates] = (0, react_1.useState)(defaultItemStates);
+    const getStateForId = (0, react_1.useCallback)((id) => {
+        var _a;
+        return (_a = itemStates === null || itemStates === void 0 ? void 0 : itemStates.find((i) => (i === null || i === void 0 ? void 0 : i.id) === id)) === null || _a === void 0 ? void 0 : _a.state;
+    }, [itemStates]);
+    (0, react_1.useEffect)(() => {
+        const dd = itemStates === null || itemStates === void 0 ? void 0 : itemStates.filter((obj) => {
+            return obj.state === 1;
+        });
+        const ff = values === null || values === void 0 ? void 0 : values.filter((obj) => {
+            return obj.state === 1;
+        });
+        if ((ff === null || ff === void 0 ? void 0 : ff.length) !== (dd === null || dd === void 0 ? void 0 : dd.length)) {
+            setItemStates(values);
+        }
+    }, [values, itemStates]);
+    const clickHandler = (0, react_1.useCallback)((id) => {
+        const newItems = (0, updateItemStates_1.updateItemStates)(itemStates, items, id);
+        setItemStates(newItems);
+        onDataChange(newItems);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemStates]);
+    return ((0, jsx_runtime_1.jsx)(FlexBox_1.FlexBox, { divide: true, dir: 'col', spacing: 'standard', children: (0, jsx_runtime_1.jsx)(CheckboxList_1.default, { items: items, onClick: clickHandler, getStateForId: getStateForId }) }));
+};
+exports.CheckboxTree = CheckboxTree;

package/dist/src/components/CheckboxTree/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxTree = void 0;
+var Tree_1 = require("./Tree");
+Object.defineProperty(exports, "CheckboxTree", { enumerable: true, get: function () { return Tree_1.CheckboxTree; } });

package/dist/src/components/CheckboxTree/updateItemStates.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateItemStates = void 0;
+const Tree_1 = require("./Tree");
+const updateItemStates = (oldState, items, clickedId) => {
+    const newState = oldState.map((i) => ({ ...i }));
+    // getters
+    const getItemState = (id) => {
+        var _a;
+        return (_a = newState.find((i) => (i === null || i === void 0 ? void 0 : i.id) === id)) === null || _a === void 0 ? void 0 : _a.state;
+    };
+    // setters
+    const updateParent = (id) => {
+        const item = items.find((i) => i.id === id);
+        const parent = items.find((i) => i.id === (item === null || item === void 0 ? void 0 : item.parentId));
+        if (!parent)
+            return;
+        const childIds = items.filter((i) => i.parentId === parent.id).map((i) => i.id);
+        const childStates = childIds.map((childId) => getItemState(childId));
+        if (childStates.length === childStates.filter((s) => s === Tree_1.CheckboxState.CHECKED).length) {
+            //@ts-expect-error
+            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxState.CHECKED;
+        }
+        else if (childStates.length === childStates.filter((s) => s === Tree_1.CheckboxState.UNCHECKED).length) {
+            //@ts-expect-error
+            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxState.UNCHECKED;
+        }
+        else {
+            //@ts-expect-error
+            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxState.INDETERMINATE;
+        }
+        updateParent(parent.id);
+    };
+    const setUnchecked = (id) => {
+        //@ts-expect-error
+        newState.find((i) => i.id === id).state = Tree_1.CheckboxState.UNCHECKED;
+        items
+            .filter((i) => i.parentId === id)
+            .map((i) => i.id)
+            .forEach((childId) => setUnchecked(childId));
+        updateParent(id);
+    };
+    const setChecked = (id) => {
+        //@ts-expect-error
+        newState.find((i) => i.id === id).state = Tree_1.CheckboxState.CHECKED;
+        items
+            .filter((i) => i.parentId === id)
+            .map((i) => i.id)
+            .forEach((childId) => setChecked(childId));
+        updateParent(id);
+    };
+    // actual logic
+    const itemState = getItemState(clickedId);
+    if (itemState === Tree_1.CheckboxState.CHECKED) {
+        setUnchecked(clickedId);
+    }
+    else {
+        setChecked(clickedId);
+    }
+    return newState;
+};
+exports.updateItemStates = updateItemStates;

package/dist/src/components/Choice/Choice.classnames.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ChoiceClassnames = {
+    "Choice": "Choice-Choice",
+    "Error": "Choice-Error",
+    "labelHidden": "Choice-labelHidden",
+    "Label": "Choice-Label",
+    "Control": "Choice-Control",
+    "disabled": "Choice-disabled",
+    "Descriptions": "Choice-Descriptions",
+    "HelpText": "Choice-HelpText"
+};
+exports.default = ChoiceClassnames;

package/dist/src/components/Choice/Choice.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.helpTextID = exports.Choice = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utilities/css");
+const InlineError_1 = require("../InlineError");
+const Text_1 = require("../Text");
+const Choice_classnames_1 = __importDefault(require("./Choice.classnames"));
+function Choice({ id, label, disabled, error, children, labelHidden, helpText, onClick, onMouseOut, onMouseOver, }) {
+    const className = (0, css_1.classNames)(Choice_classnames_1.default.Choice, labelHidden && Choice_classnames_1.default.labelHidden, disabled && Choice_classnames_1.default.disabled);
+    const labelMarkup = ((0, jsx_runtime_1.jsxs)("label", { className: className, htmlFor: id, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, children: [(0, jsx_runtime_1.jsx)("span", { className: Choice_classnames_1.default.Control, children: children }), !labelHidden && ((0, jsx_runtime_1.jsx)("span", { className: Choice_classnames_1.default.Label, children: (0, jsx_runtime_1.jsx)("span", { children: label }) }))] }));
+    const helpTextMarkup = helpText ? ((0, jsx_runtime_1.jsx)("div", { className: Choice_classnames_1.default.HelpText, id: helpTextID(id), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', color: 'subdued', children: helpText }) })) : null;
+    const errorMarkup = error && typeof error !== 'boolean' && ((0, jsx_runtime_1.jsx)("div", { className: Choice_classnames_1.default.Error, children: (0, jsx_runtime_1.jsx)(InlineError_1.InlineError, { message: error, fieldID: id }) }));
+    const descriptionMarkup = helpTextMarkup || errorMarkup ? ((0, jsx_runtime_1.jsxs)("div", { className: Choice_classnames_1.default.Descriptions, children: [errorMarkup, helpTextMarkup] })) : null;
+    return descriptionMarkup ? ((0, jsx_runtime_1.jsxs)("div", { children: [labelMarkup, descriptionMarkup] })) : (labelMarkup);
+}
+exports.Choice = Choice;
+function helpTextID(id) {
+    return `${id}HelpText`;
+}
+exports.helpTextID = helpTextID;

package/dist/src/components/Choice/ChoiceCard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChoiceCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utils/css");
+const Checkbox_1 = require("../Checkbox");
+const RadioButton_1 = require("../RadioButton");
+const Text_1 = require("../Text");
+const VerticalStack_1 = require("../VerticalStack");
+function ChoiceCard({ value, selected, handleOnChange, description, label, type = 'radio', fixedDescription, }) {
+    const activeValue = selected === value;
+    const activeClasses = 'border border-primary-purplish-blue bg-neutral-magnolia';
+    const isDescOpen = fixedDescription ? description && true : activeValue && description;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(`hover:border-primary-purplish-blue hover:bg-neutral-magnolia relative flex w-full cursor-pointer  gap-4 rounded-md p-4 transition-all`, activeValue ? activeClasses : 'border-neutral-light-gray border'), onClick: () => handleOnChange(value), children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: '2', children: [type == 'checkbox' ? ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: label })), checked: activeValue })) : ((0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onChange: () => handleOnChange(value), label: ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: label })), checked: activeValue })), isDescOpen && (0, jsx_runtime_1.jsxs)("div", { className: '', children: [" ", description] })] }) }, value));
+}
+exports.ChoiceCard = ChoiceCard;

package/dist/src/components/Choice/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Choice"), exports);

package/dist/src/components/ChoiceList/ChoiceList.classnames.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ChoiceListClassnames = {
+    "ChoiceChildren": "ChoiceList-ChoiceChildren"
+};
+exports.default = ChoiceListClassnames;