@darajs/components 0.4.8

package/dist/common/overlay/overlay.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicComponent, injectCss, useComponentStyles, useVariable, } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const OverlayWrapper = injectCss(styled.div `
+    position: absolute;
+    z-index: 2000;
+    inset: ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('top')) ? '0' : null); }}
+        ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('right')) ? '0' : null); }}
+        ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('bottom')) ? '0' : null); }}
+        ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('left')) ? '0' : null); }};
+
+    display: ${(props) => (props.render ? 'inline-flex' : 'none')};
+    flex-direction: column;
+
+    max-width: 100%;
+    max-height: 100%;
+    margin: ${(props) => props.margin};
+    padding: ${(props) => (props.padding ? props.padding : '1rem')};
+`);
+/**
+ * The overlay component accepts a set of children and renders them as an overlay depending on the value of the render flag.
+ *
+ * @param props the component props
+ */
+function Overlay(props) {
+    const [styles, css] = useComponentStyles(props);
+    const [show] = useVariable(props.show || true);
+    return (_jsx(OverlayWrapper, { "$rawCss": css, margin: props.margin, padding: props.padding, position: props.position, render: show, style: styles, children: props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `overlay-${idx}-${child.uid}`))) }));
+}
+export default Overlay;
+//# sourceMappingURL=overlay.js.map

package/dist/common/overlay/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../../js/common/overlay/overlay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEH,gBAAgB,EAGhB,SAAS,EACT,kBAAkB,EAClB,WAAW,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAS/C,MAAM,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAY;;;aAG1C,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAC,KAAK,CAAC,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA;UAC5D,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAC,OAAO,CAAC,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA;UAC3D,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAC,QAAQ,CAAC,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA;UAC5D,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAC,MAAM,CAAC,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA;;eAErD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;cAKnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM;eACtB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;CACjE,CAAC,CAAC;AAgBH;;;;GAIG;AACH,SAAS,OAAO,CAAC,KAAmB;IAChC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;IAC/C,OAAO,CACH,KAAC,cAAc,eACF,GAAG,EACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,MAAM,YAEZ,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,IAAO,WAAW,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE,CAAI,CAC7E,CAAC,GACW,CACpB,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC"}

package/dist/common/paragraph/paragraph.d.ts

@@ -0,0 +1,9 @@
+import { ComponentInstance, StyledComponentProps } from '@darajs/core';
+interface ParagraphProps extends StyledComponentProps {
+    align: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';
+    children: Array<ComponentInstance>;
+    className: string;
+}
+declare function Paragraph(props: ParagraphProps): JSX.Element;
+export default Paragraph;
+//# sourceMappingURL=paragraph.d.ts.map

package/dist/common/paragraph/paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../../js/common/paragraph/paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,iBAAiB,EAGjB,oBAAoB,EAGvB,MAAM,cAAc,CAAC;AAItB,UAAU,cAAe,SAAQ,oBAAoB;IACjD,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;CACrB;AAID,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAWrD;AAED,eAAe,SAAS,CAAC"}

package/dist/common/paragraph/paragraph.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DisplayCtx, DynamicComponent, injectCss, useComponentStyles, } from '@darajs/core';
+import { ComponentType } from '../constants';
+const StyledP = injectCss('p');
+function Paragraph(props) {
+    const [style, css] = useComponentStyles(props);
+    return (_jsx(StyledP, { "$rawCss": css, className: props.className, style: Object.assign({ textAlign: props.align }, style), children: _jsx(DisplayCtx.Provider, { value: { component: ComponentType.PARAGRAPH, direction: 'horizontal' }, children: props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `stack-${idx}-${child.name}`))) }) }));
+}
+export default Paragraph;
+//# sourceMappingURL=paragraph.js.map

package/dist/common/paragraph/paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.js","sourceRoot":"","sources":["../../../js/common/paragraph/paragraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEH,UAAU,EACV,gBAAgB,EAEhB,SAAS,EACT,kBAAkB,GACrB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAQ7C,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;AAE/B,SAAS,SAAS,CAAC,KAAqB;IACpC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CACH,KAAC,OAAO,eAAU,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,kBAAI,SAAS,EAAE,KAAK,CAAC,KAAK,IAAK,KAAK,aACxF,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YACtF,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,IAAO,SAAS,GAAG,IAAI,KAAK,CAAC,IAAI,EAAE,CAAI,CAC5E,CAAC,GACgB,GAChB,CACb,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/common/progress-bar/progress-bar.d.ts

@@ -0,0 +1,17 @@
+import { StyledComponentProps, Variable } from '@darajs/core';
+interface ProgressBarProps extends StyledComponentProps {
+    /** Optional color prop for the progress bar, should be a hex code */
+    color?: string;
+    /** The current progress as a percentage */
+    progress: number | Variable<number>;
+    /** Set the progress bar to view as a smaller strip with no label */
+    small?: boolean;
+}
+/**
+ * A simple progress bar component, that displays the current progress to 100% as a bar with a small label
+ *
+ * @param props the component props
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+export default ProgressBar;
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/common/progress-bar/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../js/common/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAA8C,MAAM,cAAc,CAAC;AAY1G,UAAU,gBAAiB,SAAQ,oBAAoB;IACnD,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAQzD;AAED,eAAe,WAAW,CAAC"}

package/dist/common/progress-bar/progress-bar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { injectCss, useComponentStyles, useVariable } from '@darajs/core';
+import styled from '@darajs/styled-components';
+import { ProgressBar as UiProgressBar } from '@darajs/ui-components';
+const ProgressBarWrapper = styled.div `
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+`;
+const StyledProgressBar = injectCss(ProgressBarWrapper);
+/**
+ * A simple progress bar component, that displays the current progress to 100% as a bar with a small label
+ *
+ * @param props the component props
+ */
+function ProgressBar(props) {
+    const [style, css] = useComponentStyles(props);
+    const [progress] = useVariable(props.progress);
+    return (_jsx(StyledProgressBar, { "$rawCss": css, style: style, children: _jsx(UiProgressBar, { color: props.color, progress: progress, small: props.small }) }));
+}
+export default ProgressBar;
+//# sourceMappingURL=progress-bar.js.map

package/dist/common/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../js/common/progress-bar/progress-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1G,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAErE,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKpC,CAAC;AACF,MAAM,iBAAiB,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAC;AAWxD;;;;GAIG;AACH,SAAS,WAAW,CAAC,KAAuB;IACxC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC/C,OAAO,CACH,KAAC,iBAAiB,eAAU,GAAG,EAAE,KAAK,EAAE,KAAK,YACzC,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,GAC7D,CACvB,CAAC;AACN,CAAC;AAED,eAAe,WAAW,CAAC"}

package/dist/common/radio-group/radio-group.d.ts

@@ -0,0 +1,21 @@
+import { Variable } from '@darajs/core';
+import { Item } from '@darajs/ui-components';
+import { FormComponentProps } from '../types';
+interface RadioGroupProps extends FormComponentProps {
+    /** Pass through the className property */
+    className: string;
+    /** An optional value which determines the direction of the radio group components by default is vertical */
+    direction?: 'horizontal' | 'vertical';
+    /** The list of items to choose from */
+    items: Array<Item> | Variable<Item[]>;
+    /** Whether to show radio in list style */
+    list_styling?: boolean;
+}
+/**
+ * The RadioGroup component allows users to choose from a list of radio buttons.
+ *
+ * @param props the component props
+ */
+declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export default RadioGroup;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/common/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../js/common/radio-group/radio-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAyD,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAE,IAAI,EAAyB,MAAM,uBAAuB,CAAC;AAGpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAI9C,UAAU,eAAgB,SAAQ,kBAAkB;IAChD,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,4GAA4G;IAC5G,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID;;;;GAIG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA4BvD;AAED,eAAe,UAAU,CAAC"}

package/dist/common/radio-group/radio-group.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback } from 'react';
+import { injectCss, useAction, useComponentStyles, useVariable } from '@darajs/core';
+import { RadioGroup as UiRadio } from '@darajs/ui-components';
+import { useFormContext } from '../context';
+const StyledRadio = injectCss(UiRadio);
+// Disabling rules-of-hook as the assumption is that props changing the type of the select won't change
+/* eslint-disable react-hooks/rules-of-hooks */
+/**
+ * The RadioGroup component allows users to choose from a list of radio buttons.
+ *
+ * @param props the component props
+ */
+function RadioGroup(props) {
+    var _a;
+    const formCtx = useFormContext(props);
+    const [items] = useVariable(props.items);
+    const [value, setValue] = useVariable(formCtx.resolveInitialValue([]));
+    const [style, css] = useComponentStyles(props);
+    const onChangeAction = useAction(props.onchange);
+    const onChange = useCallback((values) => {
+        setValue(values.value);
+        onChangeAction(values.value);
+        formCtx.updateForm(values.value);
+    }, [setValue]);
+    return (_jsx(StyledRadio, { "$rawCss": css, className: props.className, direction: props.direction, isListStyle: props.list_styling, items: items, onChange: onChange, style: style, value: (_a = items.find((item) => item.value === value)) !== null && _a !== void 0 ? _a : null }));
+}
+export default RadioGroup;
+//# sourceMappingURL=radio-group.js.map

package/dist/common/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../js/common/radio-group/radio-group.tsx"],"names":[],"mappings":";AAAA,gDAAgD;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAY,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAQ,UAAU,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAavC,uGAAuG;AACvG,+CAA+C;AAC/C;;;;GAIG;AACH,SAAS,UAAU,CAAC,KAAsB;;IACtC,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,MAAY,EAAE,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,eACC,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,KAAK,CAAC,YAAY,EAC/B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,mCAAI,IAAI,GAC3D,CACL,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}

package/dist/common/select/select.d.ts

@@ -0,0 +1,31 @@
+import { SingleVariable, UrlVariable, Variable } from '@darajs/core';
+import { Item, ListSection } from '@darajs/ui-components';
+import { FormComponentProps } from '../types';
+export declare function getMultiselectItems(values: Array<unknown>, items: Array<Item>): Array<Item>;
+interface SelectProps extends FormComponentProps {
+    /** Pass through the className property */
+    className: string;
+    /** The list of items to choose from */
+    items: Array<Item> | Variable<Item[]> | Array<ListSection> | Variable<Array<ListSection>>;
+    /** Optional number of rows to display in multiselect mode */
+    max_rows?: number;
+    /** Select multiple list items if True */
+    multiselect: boolean;
+    /** Placeholder to show when select is empty */
+    placeholder?: string;
+    /** Searchable list if True */
+    searchable: boolean;
+    /** The selectedItem variable to read and update */
+    value?: SingleVariable<any> | UrlVariable<any>;
+}
+/**
+ * The select component accepts a value Variable from the backend and allows the user to view and edit that variable
+ * from a selection of items provided in another prop. The value shared with the rest of the system is the value field
+ * from the currently selected item. Also takes a multiselect and searchable options that, respectively, enable multiple
+ * items to be selected and the list to be searchable if true.
+ *
+ * @param props the component props
+ */
+declare function Select(props: SelectProps): JSX.Element;
+export default Select;
+//# sourceMappingURL=select.d.ts.map

package/dist/common/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../js/common/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,cAAc,EACd,WAAW,EACX,QAAQ,EAKX,MAAM,cAAc,CAAC;AACtB,OAAO,EAEH,IAAI,EAEJ,WAAW,EAId,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAW3F;AAmBD,UAAU,WAAY,SAAQ,kBAAkB;IAC5C,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1F,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,mDAAmD;IAEnD,KAAK,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;CAClD;AAID;;;;;;;GAOG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAuJ/C;AAED,eAAe,MAAM,CAAC"}

package/dist/common/select/select.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { isArray, isEmpty, isEqual } from 'lodash';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { injectCss, useAction, useComponentStyles, useVariable, } from '@darajs/core';
+import { ComboBox, MultiSelect, SectionedList, Select as UiSelect, } from '@darajs/ui-components';
+import { useFormContext } from '../context';
+export function getMultiselectItems(values, items) {
+    if (!values) {
+        return;
+    }
+    return items.reduce((acc, item) => {
+        const stringOfValues = values.map((value) => String(value));
+        if (stringOfValues.includes(String(item.value))) {
+            return [...acc, item];
+        }
+        return acc;
+    }, []);
+}
+const StyledSelect = injectCss(UiSelect);
+const StyledMultiSelect = injectCss(MultiSelect);
+const StyledComboBox = injectCss(ComboBox);
+const StyledSectionedList = injectCss(SectionedList);
+function hasListSection(items) {
+    return items.length > 0 && 'items' in items[0];
+}
+function isStringArray(value) {
+    return Array.isArray(value) && value.every((item) => typeof item === 'string');
+}
+/** Type guard to check if an object is an Item */
+function isItem(obj) {
+    return obj && Object.prototype.hasOwnProperty.call(obj, 'value');
+}
+// Disabling rules-of-hook as the assumption is that props changing the type of the select won't change
+/* eslint-disable react-hooks/rules-of-hooks */
+/**
+ * The select component accepts a value Variable from the backend and allows the user to view and edit that variable
+ * from a selection of items provided in another prop. The value shared with the rest of the system is the value field
+ * from the currently selected item. Also takes a multiselect and searchable options that, respectively, enable multiple
+ * items to be selected and the list to be searchable if true.
+ *
+ * @param props the component props
+ */
+function Select(props) {
+    const formCtx = useFormContext(props);
+    const [items] = useVariable(props.items);
+    const [style, css] = useComponentStyles(props);
+    const [value, setValue] = useVariable(formCtx.resolveInitialValue());
+    // Some combination of recoil state changes and downshift can cause an infinite loop when selecting a new value
+    // This prevents infinite rerenders by always using the latest value
+    const valueRef = useRef(value);
+    useLayoutEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    // In the case of a Variable or DerivedVariable we could end up with an array of strings instead of items, so we need to convert them if that happens
+    const formattedItems = useMemo(() => {
+        if (isStringArray(items)) {
+            return items.map((item) => ({ badge: null, image: null, label: item, value: item }));
+        }
+        return items;
+    }, [items]);
+    /**
+     * Converts a value to an Item, or finds a matching Item in formattedItems based on value.
+     * @param val - The value to be converted or matched.
+     */
+    const toItem = (val) => {
+        // Tries to get matching item based on value from formattedItems
+        const matchingItem = formattedItems.find((item) => isItem(item) && String(item.value) === String(val));
+        // If a matching Item is found return it
+        if (matchingItem) {
+            return matchingItem;
+        }
+        // Otherwise return the item as an Item type with the value as the label, so that select can still show a value even if not present in the list
+        return typeof val === 'string' || typeof val === 'number' ? { label: String(val), value } : val;
+    };
+    const onChangeAction = useAction(props.onchange);
+    //  if someone were to update the component rule of Hooks could be broken if items switched from having sections to not, so we use a ref for this to be only run once
+    const itemHasListSection = useRef(null);
+    if (itemHasListSection.current === null) {
+        itemHasListSection.current = hasListSection(formattedItems);
+    }
+    // For multiselect we want to keep the initial value type consistent with later selections
+    useEffect(() => {
+        if (props.multiselect && value !== undefined && !Array.isArray(value)) {
+            throw new Error('Value for multiselect should be a Variable instance of an array');
+        }
+    }, []);
+    if (itemHasListSection.current) {
+        const onSelect = useCallback((item) => {
+            if (item && item.value !== valueRef.current) {
+                setValue(item.value);
+            }
+        }, [setValue]);
+        const selectedItem = useMemo(() => toItem(value), [value]);
+        return (_jsx(StyledSectionedList, { "$rawCss": css, items: formattedItems, onSelect: onSelect, selectedItem: selectedItem, style: style }));
+    }
+    // We need to redefine items as the type is not known at this point
+    const itemArray = formattedItems;
+    if (props.multiselect) {
+        const onSelect = useCallback((_items) => {
+            const currentSelection = _items.map((item) => item.value);
+            if (!isEqual(currentSelection, isArray(valueRef.current) ? valueRef.current : [valueRef.current])) {
+                setValue(currentSelection);
+                onChangeAction(currentSelection);
+                formCtx.updateForm(currentSelection);
+            }
+        }, [setValue]);
+        const selectedItems = useMemo(() => {
+            const found = getMultiselectItems(value, itemArray);
+            const explicitValues = isArray(value) ? value.map(toItem) : value;
+            return isEmpty(found) ? explicitValues !== null && explicitValues !== void 0 ? explicitValues : null : found;
+        }, [formattedItems, value]);
+        return (_jsx(StyledMultiSelect, { "$rawCss": css, className: props.className, items: itemArray, maxRows: props.max_rows, onSelect: onSelect, placeholder: props.placeholder, selectedItems: selectedItems, style: style }));
+    }
+    const selectedItem = useMemo(() => { var _a, _b; return (_b = (_a = itemArray.find((item) => String(item.value) === String(value))) !== null && _a !== void 0 ? _a : toItem(value)) !== null && _b !== void 0 ? _b : null; }, [value]);
+    const onSelect = useCallback((item) => {
+        if (item && item.value !== valueRef.current) {
+            setValue(item.value);
+            onChangeAction(item.value);
+            formCtx.updateForm(item.value);
+        }
+    }, [setValue, onChangeAction]);
+    if (props.searchable) {
+        return (_jsx(StyledComboBox, { "$rawCss": css, className: props.className, items: itemArray, onSelect: onSelect, placeholder: props.placeholder, selectedItem: selectedItem, style: style }));
+    }
+    return (_jsx(StyledSelect, { "$rawCss": css, className: props.className, items: itemArray, onSelect: onSelect, placeholder: props.placeholder, selectedItem: selectedItem, style: style }));
+}
+export default Select;
+//# sourceMappingURL=select.js.map

package/dist/common/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../js/common/select/select.tsx"],"names":[],"mappings":"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"}

package/dist/common/slider/slider.d.ts

@@ -0,0 +1,29 @@
+import { Variable } from '@darajs/core';
+import { FormComponentProps } from '../types';
+interface SliderProps extends FormComponentProps {
+    /** An optional flag to disable the input alternative switch render, its false by default */
+    disable_input_alternative?: boolean;
+    /** The range of the slider */
+    domain: [number, number];
+    /** Draw track from leftmost handle to start */
+    rail_from_start?: boolean;
+    /** Track labels */
+    rail_labels?: Array<string>;
+    /** Draw track from rightmost handle to end */
+    rail_to_end: boolean;
+    /** Slider step size */
+    step?: number;
+    /** Slider tick positions */
+    ticks?: Array<number>;
+    /** Slider handle values - interactive */
+    value?: Variable<Array<number> | number>;
+}
+/**
+ * A component for rendering a slider bar with handles. This component is interactive, so the value of each handle
+ * is updated when they are moved.
+ *
+ * @param props - the component props
+ */
+declare function Slider(props: SliderProps): JSX.Element;
+export default Slider;
+//# sourceMappingURL=slider.d.ts.map

package/dist/common/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../js/common/slider/slider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAyD,MAAM,cAAc,CAAC;AAI/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,UAAU,WAAY,SAAQ,kBAAkB;IAC5C,4FAA4F;IAC5F,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,8BAA8B;IAC9B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,8CAA8C;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,yCAAyC;IAEzC,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;CAC5C;AAID;;;;;GAKG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2C/C;AAED,eAAe,MAAM,CAAC"}

package/dist/common/slider/slider.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import _debounce from 'lodash/debounce';
+import { useMemo } from 'react';
+import { injectCss, useAction, useComponentStyles, useVariable } from '@darajs/core';
+import { Slider as UISlider } from '@darajs/ui-components';
+import { useFormContext } from '../context';
+const StyledSlider = injectCss(UISlider);
+/**
+ * A component for rendering a slider bar with handles. This component is interactive, so the value of each handle
+ * is updated when they are moved.
+ *
+ * @param props - the component props
+ */
+function Slider(props) {
+    const formCtx = useFormContext(props);
+    const [style, css] = useComponentStyles(props);
+    const [value, setValue] = useVariable(formCtx.resolveInitialValue(props.domain[0]));
+    const onTrack = useAction(props.onchange);
+    const debouncedSetValue = useMemo(() => _debounce(setValue, 300), [setValue]);
+    const debouncedOnTrack = useMemo(() => _debounce(onTrack, 300), [onTrack]);
+    const debouncedUpdateForm = useMemo(() => _debounce(formCtx.updateForm, 300), [formCtx.updateForm]);
+    const isOutputNumber = typeof value === 'number';
+    function onChange(values) {
+        let serialisedValues = values;
+        // if we're supposed to output a number, unwrap the array
+        if (isOutputNumber) {
+            [serialisedValues] = values;
+        }
+        debouncedSetValue(serialisedValues);
+        debouncedOnTrack === null || debouncedOnTrack === void 0 ? void 0 : debouncedOnTrack(serialisedValues);
+        debouncedUpdateForm(serialisedValues);
+    }
+    // Values passed to the UI component must always be an array
+    const parsedValues = isOutputNumber ? [value] : value;
+    return (_jsx(StyledSlider, { "$rawCss": css, disableInputAlternative: props.disable_input_alternative, domain: props.domain, onChange: onChange, step: props.step, style: style, ticks: props.ticks, trackLabels: props.rail_labels, trackToEnd: props.rail_to_end, trackToStart: props.rail_from_start, values: parsedValues }));
+}
+export default Slider;
+//# sourceMappingURL=slider.js.map

package/dist/common/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../js/common/slider/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAY,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAuB5C,MAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAEzC;;;;;GAKG;AACH,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpF,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC9E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3E,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAEpG,MAAM,cAAc,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC;IAEjD,SAAS,QAAQ,CAAC,MAAgB;QAC9B,IAAI,gBAAgB,GAAsB,MAAM,CAAC;QAEjD,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACjB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC;QAChC,CAAC;QAED,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;QACpC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,gBAAgB,CAAC,CAAC;QACrC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC1C,CAAC;IAED,4DAA4D;IAC5D,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEtD,OAAO,CACH,KAAC,YAAY,eACA,GAAG,EACZ,uBAAuB,EAAE,KAAK,CAAC,yBAAyB,EACxD,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,WAAW,EAC7B,YAAY,EAAE,KAAK,CAAC,eAAe,EACnC,MAAM,EAAE,YAAY,GACtB,CACL,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/common/spacer/spacer.d.ts

@@ -0,0 +1,10 @@
+import { StyledComponentProps } from '@darajs/core';
+interface SpacerProps extends StyledComponentProps {
+    className: string;
+    inset: string;
+    line: boolean;
+    size: string;
+}
+declare function Spacer(props: SpacerProps): JSX.Element;
+export default Spacer;
+//# sourceMappingURL=spacer.d.ts.map

package/dist/common/spacer/spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../js/common/spacer/spacer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,oBAAoB,EAAiC,MAAM,cAAc,CAAC;AAG/F,UAAU,WAAY,SAAQ,oBAAoB;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAiCD,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAS/C;AAED,eAAe,MAAM,CAAC"}

package/dist/common/spacer/spacer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { DisplayCtx, injectCss, useComponentStyles } from '@darajs/core';
+import styled from '@darajs/styled-components';
+const StyledLine = styled.div `
+    flex: 0 0 auto;
+
+    width: ${(p) => (p.isHStack ? '1px' : `calc(100% - 2*${p.inset})`)};
+    height: ${(p) => (p.isHStack ? `calc(100% - 2*${p.inset})` : '1px')};
+    margin: ${(p) => (p.isHStack ? `${p.inset} 0` : `0 ${p.inset}`)};
+
+    background-color: ${(p) => p.theme.colors.grey3};
+`;
+const _StyledSpacer = styled.div `
+    display: flex;
+    flex: 0 0 auto !important;
+    align-items: center;
+
+    ${(p) => p.isHStack && 'flex-direction: column; align-self: stretch'};
+    ${(p) => (p.isHStack ? `width: ${p.size}` : `height:${p.size}`)};
+`;
+const StyledSpacer = injectCss(_StyledSpacer);
+function Spacer(props) {
+    const [style, css] = useComponentStyles(props);
+    const displayCtx = useContext(DisplayCtx);
+    const isHStack = displayCtx.direction === 'horizontal';
+    return (_jsx(StyledSpacer, { "$rawCss": css, className: props.className, isHStack: isHStack, size: props.size, style: style, children: props.line && _jsx(StyledLine, { inset: props.inset, isHStack: isHStack }) }));
+}
+export default Spacer;
+//# sourceMappingURL=spacer.js.map

package/dist/common/spacer/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../../js/common/spacer/spacer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,UAAU,EAAwB,SAAS,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAc/C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAiB;;;aAGjC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,KAAK,GAAG,CAAC;cACxD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;cACzD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;;wBAE3C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;CAClD,CAAC;AAQF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAoB;;;;;MAK9C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,6CAA6C;MAClE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC;CAClE,CAAC;AACF,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAE9C,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,KAAK,YAAY,CAAC;IACvD,OAAO,CACH,KAAC,YAAY,eAAU,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,YACrG,KAAK,CAAC,IAAI,IAAI,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC1D,CAClB,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/common/stack/stack.d.ts

@@ -0,0 +1,12 @@
+import { ComponentInstance, LayoutComponentProps, Variable } from '@darajs/core';
+interface StackProps extends LayoutComponentProps {
+    children: Array<ComponentInstance>;
+    className: string;
+    collapsed: Variable<boolean>;
+    direction: 'horizontal' | 'vertical';
+    hug?: boolean;
+    scroll: boolean;
+}
+declare const _default: import("react").ForwardRefExoticComponent<Omit<StackProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=stack.d.ts.map

package/dist/common/stack/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../js/common/stack/stack.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,iBAAiB,EAGjB,oBAAoB,EACpB,QAAQ,EAIX,MAAM,cAAc,CAAC;AAKtB,UAAU,UAAW,SAAQ,oBAAoB;IAC7C,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;IACrC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACnB;;AAqED,wBAAiC"}

package/dist/common/stack/stack.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { DisplayCtx, DynamicComponent, injectCss, useComponentStyles, useVariable, } from '@darajs/core';
+import styled from '@darajs/styled-components';
+function getCollapseStyles(collapsed) {
+    if (collapsed) {
+        return {
+            display: 'none',
+        };
+    }
+    return {};
+}
+const StyledStack = injectCss(styled.div `
+    display: flex;
+    flex: 1 1 100%;
+    flex-direction: ${(props) => (props.direction === 'horizontal' ? 'row' : 'column')};
+    gap: 0.75rem;
+
+    width: ${(props) => (props.direction === 'horizontal' ? undefined : '100%')};
+    height: ${(props) => (props.direction === 'horizontal' ? '100%' : undefined)};
+`);
+function Stack(props, ref) {
+    const [collapsed] = useVariable(props.collapsed);
+    const [style, css] = useComponentStyles(props);
+    const stackContent = (_jsx(DisplayCtx.Provider, { value: { component: 'stack', direction: props.direction }, children: props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, `stack-${idx}-${child.uid}`))) }));
+    return (_jsx(StyledStack, { "$rawCss": css, className: props.className, "data-type": "children-wrapper", direction: props.direction, ref: ref, style: Object.assign(Object.assign({ alignItems: props.align, justifyContent: props.justify }, getCollapseStyles(collapsed)), style), children: props.scroll ?
+            _jsx(AutoSizer, { children: ({ height, width }) => {
+                    var _a;
+                    return (_jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: props.direction === 'horizontal' ? 'row' : 'column',
+                            gap: (_a = style.gap) !== null && _a !== void 0 ? _a : '0.75rem',
+                            height,
+                            overflow: 'auto',
+                            width,
+                        }, children: stackContent }));
+                } })
+            : stackContent }));
+}
+export default forwardRef(Stack);
+//# sourceMappingURL=stack.js.map

package/dist/common/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../js/common/stack/stack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAEH,UAAU,EACV,gBAAgB,EAGhB,SAAS,EACT,kBAAkB,EAClB,WAAW,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAa/C,SAAS,iBAAiB,CAAC,SAAkB;IACzC,IAAI,SAAS,EAAE,CAAC;QACZ,OAAO;YACH,OAAO,EAAE,MAAM;SAClB,CAAC;IACN,CAAC;IACD,OAAO,EAAE,CAAC;AACd,CAAC;AAED,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAY;;;sBAG9B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;;;aAGzE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;cACjE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;CAC/E,CAAC,CAAC;AAEH,SAAS,KAAK,CAAC,KAAiB,EAAE,GAAiC;IAC/D,MAAM,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,CACjB,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YACzE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK,IAAO,SAAS,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE,CAAI,CAC3E,CAAC,GACgB,CACzB,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,eACC,GAAG,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,eAChB,kBAAkB,EAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,GAAG,EAAE,GAAG,EACR,KAAK,gCACD,UAAU,EAAE,KAAK,CAAC,KAAK,EACvB,cAAc,EAAE,KAAK,CAAC,OAAO,IAC1B,iBAAiB,CAAC,SAAS,CAAC,GAC5B,KAAK,aAGX,KAAK,CAAC,MAAM,CAAC,CAAC;YACX,KAAC,SAAS,cACL,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;;oBAAC,OAAA,CACpB,cACI,KAAK,EAAE;4BACH,OAAO,EAAE,MAAM;4BACf,aAAa,EAAE,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;4BAClE,GAAG,EAAE,MAAA,KAAK,CAAC,GAAG,mCAAI,SAAS;4BAC3B,MAAM;4BACN,QAAQ,EAAE,MAAM;4BAChB,KAAK;yBACR,YAEA,YAAY,GACX,CACT,CAAA;iBAAA,GACO;YAChB,CAAC,CAAG,YAAY,GACN,CACjB,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC,KAAK,CAAC,CAAC"}

package/dist/common/switch/switch.d.ts

@@ -0,0 +1,14 @@
+import { Variable } from '@darajs/core';
+import { FormComponentProps } from '../types';
+interface SwitchProps extends FormComponentProps {
+    /** Switch position - interactive */
+    value?: Variable<boolean>;
+}
+/**
+ * A component for rendering a switch. Takes an optional label that will be rendered to its left.
+ *
+ * @param props - the component props
+ */
+declare function Switch(props: SwitchProps): JSX.Element;
+export default Switch;
+//# sourceMappingURL=switch.d.ts.map

package/dist/common/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../js/common/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyD,MAAM,cAAc,CAAC;AAK/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAU9C,UAAU,WAAY,SAAQ,kBAAkB;IAC5C,oCAAoC;IAEpC,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC7B;AACD;;;;GAIG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAiB/C;AAED,eAAe,MAAM,CAAC"}

package/dist/common/switch/switch.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { injectCss, useAction, useComponentStyles, useVariable } from '@darajs/core';
+import styled from '@darajs/styled-components';
+import { Switch as UISwitch } from '@darajs/ui-components';
+import { useFormContext } from '../context';
+const _SwitchDiv = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0.5rem 0;
+`;
+const SwitchDiv = injectCss(_SwitchDiv);
+/**
+ * A component for rendering a switch. Takes an optional label that will be rendered to its left.
+ *
+ * @param props - the component props
+ */
+function Switch(props) {
+    const formCtx = useFormContext(props);
+    const [style, css] = useComponentStyles(props);
+    const [value, setValue] = useVariable(formCtx.resolveInitialValue());
+    const onChangeAction = useAction(props.onchange);
+    function onChange(enabled) {
+        setValue(enabled);
+        onChangeAction(enabled);
+        formCtx.updateForm(enabled);
+    }
+    return (_jsx(SwitchDiv, { "$rawCss": css, style: style, children: _jsx(UISwitch, { onChange: onChange, value: value }) }));
+}
+export default Switch;
+//# sourceMappingURL=switch.js.map

package/dist/common/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../js/common/switch/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK5B,CAAC;AACF,MAAM,SAAS,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;AAOxC;;;;GAIG;AACH,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACrE,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEjD,SAAS,QAAQ,CAAC,OAAgB;QAC9B,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,cAAc,CAAC,OAAO,CAAC,CAAC;QACxB,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,CACH,KAAC,SAAS,eAAU,GAAG,EAAE,KAAK,EAAE,KAAK,YACjC,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,GACtC,CACf,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}