@darajs/components 1.0.0-a.1

package/dist/common/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../js/common/modal/modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEH,gBAAgB,EAGhB,SAAS,EACT,kBAAkB,EAClB,WAAW,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AASzD,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAEvC;;;;GAIG;AACH,SAAS,KAAK,CAAC,KAAiB;IAC5B,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEhD,SAAS,cAAc;QACnB,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC;IAED,OAAO,CACH,KAAC,WAAW,eAAU,GAAG,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,kBAAI,GAAG,EAAE,SAAS,IAAK,KAAK,aACrG,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,GACQ,CACjB,CAAC;AACN,CAAC;AAED,eAAe,KAAK,CAAC"}

package/dist/common/overlay/overlay.d.ts

@@ -0,0 +1,16 @@
+import { ComponentInstance, StyledComponentProps, Variable } from '@darajs/core';
+interface OverlayProps extends StyledComponentProps {
+    children: Array<ComponentInstance>;
+    margin?: string;
+    padding?: string;
+    position?: string;
+    show: Variable<boolean>;
+}
+/**
+ * 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
+ */
+declare function Overlay(props: OverlayProps): JSX.Element;
+export default Overlay;
+//# sourceMappingURL=overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../js/common/overlay/overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,iBAAiB,EAEjB,oBAAoB,EACpB,QAAQ,EAIX,MAAM,cAAc,CAAC;AA2BtB,UAAU,YAAa,SAAQ,oBAAoB;IAE/C,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAEnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED;;;;GAIG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAiBjD;AAED,eAAe,OAAO,CAAC"}

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;
+    top: ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('top')) ? '0' : null); }};
+    right: ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('right')) ? '0' : null); }};
+    bottom: ${(props) => { var _a; return (((_a = props.position) === null || _a === void 0 ? void 0 : _a.includes('bottom')) ? '0' : null); }};
+    left: ${(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;;;WAG5C,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;aACvD,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;cAC1D,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;YAC9D,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;;eAEvD,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(Object.assign({}, style), { textAlign: props.align }), 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,kCAAO,KAAK,KAAE,SAAS,EAAE,KAAK,CAAC,KAAK,eACxF,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":"AAEA,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,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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) {
+    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: items.find((item) => item.value === value) }));
+}
+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,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,cAAc,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEnD,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,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,GACnD,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<any>, 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":"AAEA,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,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAWvF;AAUD,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,CA8H/C;AAED,eAAe,MAAM,CAAC"}

package/dist/common/select/select.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } 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];
+}
+// 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());
+    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(items);
+    }
+    // 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 [selectedItem, setSelectedItem] = useState({ label: value, value });
+        const onSelect = useCallback((item) => {
+            setSelectedItem(item);
+            setValue(item.value);
+        }, [setValue]);
+        // Handle this way to prevent an infinite loop in the ui component due to referential comparison of selectedItem
+        useEffect(() => {
+            if (value !== selectedItem.value) {
+                setSelectedItem({ label: value, value });
+            }
+        }, [value]);
+        return (_jsx(StyledSectionedList, { "$rawCss": css, items: items, onSelect: onSelect, selectedItem: selectedItem, style: style }));
+    }
+    // We need to redefine items as the type is not known at this point
+    const itemArray = items;
+    if (props.multiselect) {
+        const [selectedItems, setSelectedItems] = useState(getMultiselectItems(value, itemArray));
+        const onSelect = useCallback((_items) => {
+            const currentSelection = _items.map((item) => item.value);
+            setSelectedItems(getMultiselectItems(currentSelection, itemArray));
+            setValue(currentSelection);
+            onChangeAction(currentSelection);
+            formCtx.updateForm(currentSelection);
+        }, [setValue]);
+        // The loop up to the value in recoil state is too slow for downshift and leads to a race condition that makes
+        // it fail to update the value sometimes. By keeping a local copy of the value and updating it like this we fix
+        // the race condition and respect the main value if it is updated elsewhere.
+        useEffect(() => {
+            setSelectedItems(getMultiselectItems(value, itemArray));
+        }, [items, 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, setSelectedItem] = useState(itemArray.find((item) => String(item.value) === String(value)));
+    const onSelect = useCallback((item) => {
+        if (item) {
+            setSelectedItem(item);
+            setValue(item.value);
+            onChangeAction(item.value);
+            formCtx.updateForm(item.value);
+        }
+    }, [setValue, onChangeAction]);
+    // See explanation above
+    useEffect(() => {
+        const selected = itemArray.find((item) => item.value === value);
+        setSelectedItem(selected !== undefined ? selected : null);
+    }, [items, value]);
+    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,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE5C,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;YAChB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC;SAC/B;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,14 @@
+/// <reference types="react" />
+import { ComponentInstance, StyledComponentProps, Variable } from '@darajs/core';
+interface StackProps extends StyledComponentProps {
+    children: Array<ComponentInstance>;
+    className: string;
+    collapsed: Variable<boolean>;
+    direction: 'horizontal' | 'vertical';
+    hug?: boolean;
+    justify?: string;
+    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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACnB;;AAiFD,wBAAiC"}

package/dist/common/stack/stack.js

@@ -0,0 +1,49 @@
+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 alignStyle(props) {
+    if (props.align === 'start') {
+        return 'flex-start';
+    }
+    if (props.align === 'end') {
+        return 'flex-end';
+    }
+    return props.align;
+}
+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: alignStyle(props), 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;AAc/C,SAAS,UAAU,CAAC,KAAiB;IACjC,IAAI,KAAK,CAAC,KAAK,KAAK,OAAO,EAAE;QACzB,OAAO,YAAY,CAAC;KACvB;IACD,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,EAAE;QACvB,OAAO,UAAU,CAAC;KACrB;IACD,OAAO,KAAK,CAAC,KAAK,CAAC;AACvB,CAAC;AAED,SAAS,iBAAiB,CAAC,SAAkB;IACzC,IAAI,SAAS,EAAE;QACX,OAAO;YACH,OAAO,EAAE,MAAM;SAClB,CAAC;KACL;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,UAAU,CAAC,KAAK,CAAC,EAC7B,cAAc,EAAE,KAAK,CAAC,OAAO,IAC1B,iBAAiB,CAAC,SAAS,CAAC,GAC5B,KAAK,aAGX,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACZ,KAAC,SAAS,cACL,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;;gBAAC,OAAA,CACpB,cACI,KAAK,EAAE;wBACH,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;wBAClE,GAAG,EAAE,MAAA,KAAK,CAAC,GAAG,mCAAI,SAAS;wBAC3B,MAAM;wBACN,QAAQ,EAAE,MAAM;wBAChB,KAAK;qBACR,YAEA,YAAY,GACX,CACT,CAAA;aAAA,GACO,CACf,CAAC,CAAC,CAAC,CACA,YAAY,CACf,GACS,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;AAS9C,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,30 @@
+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;
+`;
+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