@uni-design-system/uni-react 0.0.3

package/README.md

@@ -0,0 +1,22 @@
+<p align="center">
+  <a href="https://uni-design-system.github.io/uni-react/" target="_blank">
+    <img src="./.github/uni-logo.png" alt="UNI Design System">
+  </a>
+</p>
+
+<p align="center">
+  UNI React is a themed based component library built atop of UNI Design System Core Concepts.
+<p>
+
+<p align="center">
+  <a href="https://uni-design-system.github.io/uni-react/"><strong>Browse the component library &rarr;</strong></a>
+</p>
+
+
+
+
+## Local Development
+If you would like to run the UNI React component library on your local machine, 
+```
+yarn && yarn storybook
+```

package/dist/cjs/components/button/button.component.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { ButtonType } from '@uni-design-system/uni-core';
+import { IconName } from '../../core/icon';
+export interface ButtonProps {
+    text?: string;
+    children?: ReactNode;
+    buttonType?: ButtonType;
+    disabled?: boolean;
+    iconName?: IconName;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    useRipple?: boolean;
+    style?: CSSProperties;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/button/button.component.js

@@ -0,0 +1,104 @@
+"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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../../core");
+const icon_text_row_component_1 = require("../icon-text-row/icon-text-row.component");
+const layout_hook_1 = __importDefault(require("../../core/layout/layout.hook"));
+exports.Button = (0, react_1.forwardRef)((_a, ref) => {
+    var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, useRipple = true, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "useRipple", "style"]);
+    const { deviceSize } = (0, layout_hook_1.default)();
+    const theme = (0, core_1.useTheme)();
+    const buttonProps = theme.buttons[buttonType];
+    const getOnColorToken = (color) => `on-${color}`;
+    const defaultContentColor = getOnColorToken(buttonProps.color);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [click, setClick] = (0, react_1.useState)(false);
+    const [contentColor, setContentColor] = (0, react_1.useState)(defaultContentColor);
+    const style = Style(theme, buttonType, deviceSize, hover, disabled, click, useRipple);
+    (0, react_1.useEffect)(() => {
+        setContentColor(getOnColorToken(disabled ? 'inverse-on-surface' : buttonProps.color));
+    }, [disabled]);
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            setClick(false);
+        }, 250);
+    }, [click]);
+    const handleClick = (event) => {
+        useRipple && (0, core_1.createRipple)(event);
+        setClick(true);
+        onClick && onClick(event);
+    };
+    return (react_1.default.createElement("button", Object.assign({ onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (react_1.default.createElement(icon_text_row_component_1.IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (react_1.default.createElement(core_1.Text, { align: "center", role: "button", color: contentColor }, text || children))));
+});
+exports.Button.displayName = 'Button';
+function Style(theme, buttonType, size = 'md', hover, disabled, click, useRipple) {
+    const { color, horizontalPadding, verticalPadding, borderColor, borderWidth, borderRadius, contentColor } = theme.buttons[buttonType];
+    const styles = {
+        position: useRipple ? 'relative' : undefined,
+        overflow: 'hidden',
+        transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
+        cursor: 'pointer',
+        paddingTop: verticalPadding[size] + 'px',
+        paddingBottom: verticalPadding[size] + 'px',
+        paddingLeft: horizontalPadding[size] + 'px',
+        paddingRight: horizontalPadding[size] + 'px',
+        borderRadius: borderRadius + 'px',
+        backgroundColor: theme.colors[color],
+        borderColor: theme.colors[borderColor],
+        borderWidth: borderWidth + 'px',
+        borderStyle: buttonType === 'outlined' ? 'solid' : 'none',
+    };
+    if (buttonType === 'elevated' && !disabled) {
+        styles.boxShadow = (0, core_1.BoxShadow)(hover ? 'focussed' : 'raised');
+    }
+    if (disabled && buttonType === 'elevated') {
+        styles.boxShadow = (0, core_1.BoxShadow)('pressed');
+        styles.color = theme.colors[contentColor];
+    }
+    if (disabled) {
+        styles.cursor = 'not-allowed';
+    }
+    if (click && buttonType === 'elevated' && !disabled) {
+        styles.boxShadow = (0, core_1.BoxShadow)('pressed');
+    }
+    return styles;
+}
+//# sourceMappingURL=button.component.js.map

package/dist/cjs/components/button/button.component.js.map

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

package/dist/cjs/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button.component';

package/dist/cjs/components/button/index.js

@@ -0,0 +1,18 @@
+"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("./button.component"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC"}

package/dist/cjs/components/card/card.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
+export type CardType = 'elevated' | 'filled' | 'outlined';
+export interface CardProps {
+    children?: ReactNode;
+    cardType?: CardType;
+    colorToken?: ContainerColorToken;
+    elevation?: ShadowElevation;
+    width?: number;
+    height?: number | string | undefined;
+    borderRadius?: Size | 'none';
+}
+export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, }: CardProps): JSX.Element;

package/dist/cjs/components/card/card.component.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.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../../core");
+const framer_motion_1 = require("framer-motion");
+function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
+    const { colors, containers } = (0, core_1.useTheme)();
+    const { borderRadii } = containers.card;
+    const style = Object.assign({ height,
+        width, position: 'fixed', backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all'));
+    if (cardType === 'elevated') {
+        style.boxShadow = (0, core_1.BoxShadow)(elevation || 'raised');
+    }
+    if (borderRadii && borderRadius !== 'none') {
+        style.borderRadius = borderRadii[borderRadius || 'md'];
+    }
+    return (react_1.default.createElement(framer_motion_1.motion.div, { style: style, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } }, children));
+}
+exports.Card = Card;
+//# sourceMappingURL=card.component.js.map

package/dist/cjs/components/card/card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../../src/components/card/card.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AAExD,qCAA0D;AAC1D,iDAAuC;AAcvC,SAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,mBAAmB,EAChC,KAAK,EACL,MAAM,EACN,YAAY,GACF;IACV,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,eAAQ,GAAE,CAAC;IAE1C,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC;IAExC,MAAM,KAAK,mBACT,MAAM;QACN,KAAK,EACL,QAAQ,EAAE,OAAO,EACjB,eAAe,EAAE,MAAM,CAAC,UAAU,IAAI,SAAS,CAAC,EAChD,KAAK,EAAE,MAAM,CAAE,MAAM,UAAU,EAAiB,IAAI,YAAY,CAAC,IAC9D,IAAA,cAAO,EAAC,IAAI,EAAE,KAAK,CAAC,CACxB,CAAC;IAEF,IAAI,QAAQ,KAAK,UAAU,EAAE;QAC3B,KAAK,CAAC,SAAS,GAAG,IAAA,gBAAS,EAAC,SAAS,IAAI,QAAQ,CAAC,CAAC;KACpD;IAED,IAAI,WAAW,IAAI,YAAY,KAAK,MAAM,EAAE;QAC1C,KAAK,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,IAAI,IAAI,CAAC,CAAC;KACxD;IAED,OAAO,CACL,8BAAC,sBAAM,CAAC,GAAG,IACT,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC9B,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAC7B,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC3B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAE5B,QAAQ,CACE,CACd,CAAC;AACJ,CAAC;AAzCD,oBAyCC"}

package/dist/cjs/components/card/index.d.ts

@@ -0,0 +1 @@
+export * from './card.component';

package/dist/cjs/components/card/index.js

@@ -0,0 +1,18 @@
+"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("./card.component"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/card/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAiC"}

package/dist/cjs/components/draggable/SortableList/components/DragHandle/dragHandle.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonProps } from '../../../../button';
+export declare const DragHandle: ({ ...rest }: ButtonProps) => JSX.Element;

package/dist/cjs/components/draggable/SortableList/components/DragHandle/dragHandle.component.js

@@ -0,0 +1,49 @@
+"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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandle = void 0;
+const react_1 = __importStar(require("react"));
+const sortableItem_context_1 = require("../SortableItem/sortableItem.context");
+const button_1 = require("../../../../button");
+const core_1 = require("@dnd-kit/core");
+const DragHandle = (_a) => {
+    var rest = __rest(_a, []);
+    const { attributes, listeners, ref } = (0, react_1.useContext)(sortableItem_context_1.SortableItemContext);
+    const dndContext = (0, core_1.useDndContext)();
+    return (react_1.default.createElement(button_1.Button, Object.assign({ style: { cursor: dndContext.activatorEvent ? 'grabbing' : 'grab' }, iconName: "bars3", buttonType: "icon" }, attributes, listeners, { ref: ref }, rest)));
+};
+exports.DragHandle = DragHandle;
+//# sourceMappingURL=dragHandle.component.js.map

package/dist/cjs/components/draggable/SortableList/components/DragHandle/dragHandle.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragHandle.component.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/DragHandle/dragHandle.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,+EAA2E;AAC3E,+CAAyD;AACzD,wCAA8C;AAEvC,MAAM,UAAU,GAAG,CAAC,EAAwB,EAAe,EAAE;QAApC,IAAI,cAAT,EAAW,CAAF;IAClC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAA,kBAAU,EAAC,0CAAmB,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,IAAA,oBAAa,GAAE,CAAC;IAEnC,OAAO,CACL,8BAAC,eAAM,kBACL,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,EAClE,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAC,MAAM,IACb,UAAU,EACV,SAAS,IACb,GAAG,EAAE,GAAG,IACJ,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB"}

package/dist/cjs/components/draggable/SortableList/components/DragHandle/index.d.ts

@@ -0,0 +1 @@
+export { DragHandle } from './dragHandle.component';

package/dist/cjs/components/draggable/SortableList/components/DragHandle/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandle = void 0;
+var dragHandle_component_1 = require("./dragHandle.component");
+Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return dragHandle_component_1.DragHandle; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/DragHandle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/DragHandle/index.ts"],"names":[],"mappings":";;;AAAA,+DAAoD;AAA3C,kHAAA,UAAU,OAAA"}

package/dist/cjs/components/draggable/SortableList/components/SortableItem/index.d.ts

@@ -0,0 +1 @@
+export { SortableItem } from './sortableItem.component';

package/dist/cjs/components/draggable/SortableList/components/SortableItem/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableItem = void 0;
+var sortableItem_component_1 = require("./sortableItem.component");
+Object.defineProperty(exports, "SortableItem", { enumerable: true, get: function () { return sortableItem_component_1.SortableItem; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/SortableItem/index.ts"],"names":[],"mappings":";;;AAAA,mEAAwD;AAA/C,sHAAA,YAAY,OAAA"}

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.component.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties, PropsWithChildren } from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+export interface SortableItemProps {
+    id: UniqueIdentifier;
+    style?: CSSProperties;
+    onRemove?(id: UniqueIdentifier): void;
+}
+export declare const SortableItem: ({ children, id, style: userStyle, onRemove, }: PropsWithChildren<SortableItemProps>) => JSX.Element;

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.component.js

@@ -0,0 +1,45 @@
+"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 });
+exports.SortableItem = void 0;
+const react_1 = __importStar(require("react"));
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const sortableItem_context_1 = require("./sortableItem.context");
+const SortableItem = ({ children, id, style: userStyle, onRemove, }) => {
+    const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = (0, sortable_1.useSortable)({
+        id,
+    });
+    const context = (0, react_1.useMemo)(() => ({
+        attributes,
+        listeners,
+        ref: setActivatorNodeRef,
+    }), [attributes, listeners, setActivatorNodeRef]);
+    const style = Object.assign({ opacity: isDragging ? 0.4 : undefined, transform: utilities_1.CSS.Translate.toString(transform), transition, listStyle: 'none' }, userStyle);
+    return (react_1.default.createElement(sortableItem_context_1.SortableItemContext.Provider, { value: context },
+        react_1.default.createElement("li", { className: "SortableItem", ref: setNodeRef, style: style }, children)));
+};
+exports.SortableItem = SortableItem;
+//# sourceMappingURL=sortableItem.component.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableItem.component.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/SortableItem/sortableItem.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAGvC,gDAAgD;AAChD,kDAAyC;AACzC,iEAA6D;AAQtD,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,KAAK,EAAE,SAAS,EAChB,QAAQ,GAC6B,EAAe,EAAE;IACtD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,mBAAmB,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAA,sBAAW,EAAC;QAChH,EAAE;KACH,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU;QACV,SAAS;QACT,GAAG,EAAE,mBAAmB;KACzB,CAAC,EACF,CAAC,UAAU,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAC7C,CAAC;IACF,MAAM,KAAK,mBACT,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACrC,SAAS,EAAE,eAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC5C,UAAU,EACV,SAAS,EAAE,MAAM,IACd,SAAS,CACb,CAAC;IAEF,OAAO,CACL,8BAAC,0CAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAC1C,sCAAI,SAAS,EAAC,cAAc,EAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,IACvD,QAAQ,CACN,CACwB,CAChC,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,YAAY,gBAgCvB"}

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.context.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+interface Context {
+    attributes: Record<string, any>;
+    listeners: DraggableSyntheticListeners;
+    ref(node: HTMLElement | null): void;
+}
+export declare const SortableItemContext: import("react").Context<Context>;
+export {};

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.context.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableItemContext = void 0;
+const react_1 = require("react");
+exports.SortableItemContext = (0, react_1.createContext)({
+    attributes: {},
+    listeners: undefined,
+    ref() { },
+});
+//# sourceMappingURL=sortableItem.context.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableItem.context.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/SortableItem/sortableItem.context.ts"],"names":[],"mappings":";;;AACA,iCAAsC;AAQzB,QAAA,mBAAmB,GAAG,IAAA,qBAAa,EAAU;IACxD,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,SAAS;IACpB,GAAG,KAAI,CAAC;CACT,CAAC,CAAC"}

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/index.d.ts

@@ -0,0 +1 @@
+export { SortableOverlay } from './sortableOverlay.component';

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableOverlay = void 0;
+var sortableOverlay_component_1 = require("./sortableOverlay.component");
+Object.defineProperty(exports, "SortableOverlay", { enumerable: true, get: function () { return sortableOverlay_component_1.SortableOverlay; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/SortableOverlay/index.ts"],"names":[],"mappings":";;;AAAA,yEAA8D;AAArD,4HAAA,eAAe,OAAA"}

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+interface Props {
+}
+export declare const SortableOverlay: ({ children }: PropsWithChildren<Props>) => JSX.Element;
+export {};

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableOverlay = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@dnd-kit/core");
+const dropAnimationConfig = {
+    sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
+        styles: {
+            active: {
+                opacity: '0.4',
+            },
+        },
+    }),
+};
+const SortableOverlay = ({ children }) => (react_1.default.createElement(core_1.DragOverlay, { dropAnimation: dropAnimationConfig }, children));
+exports.SortableOverlay = SortableOverlay;
+//# sourceMappingURL=sortableOverlay.component.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableOverlay.component.js","sourceRoot":"","sources":["../../../../../../../src/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,wCAA6E;AAG7E,MAAM,mBAAmB,GAAkB;IACzC,WAAW,EAAE,IAAA,sCAA+B,EAAC;QAC3C,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,OAAO,EAAE,KAAK;aACf;SACF;KACF,CAAC;CACH,CAAC;AAIK,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA4B,EAAe,EAAE,CAAC,CACtF,8BAAC,kBAAW,IAAC,aAAa,EAAE,mBAAmB,IAAG,QAAQ,CAAe,CAC1E,CAAC;AAFW,QAAA,eAAe,mBAE1B"}

package/dist/cjs/components/draggable/SortableList/components/index.d.ts

@@ -0,0 +1,3 @@
+export { DragHandle } from './DragHandle';
+export { SortableItem } from './SortableItem';
+export { SortableOverlay } from './SortableOverlay';

package/dist/cjs/components/draggable/SortableList/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableOverlay = exports.SortableItem = exports.DragHandle = void 0;
+var DragHandle_1 = require("./DragHandle");
+Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return DragHandle_1.DragHandle; } });
+var SortableItem_1 = require("./SortableItem");
+Object.defineProperty(exports, "SortableItem", { enumerable: true, get: function () { return SortableItem_1.SortableItem; } });
+var SortableOverlay_1 = require("./SortableOverlay");
+Object.defineProperty(exports, "SortableOverlay", { enumerable: true, get: function () { return SortableOverlay_1.SortableOverlay; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/draggable/SortableList/components/index.ts"],"names":[],"mappings":";;;AAAA,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AACrB,qDAAoD;AAA3C,kHAAA,eAAe,OAAA"}

package/dist/cjs/components/draggable/SortableList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sortableList.component';
+export * from './components';

package/dist/cjs/components/draggable/SortableList/index.js

@@ -0,0 +1,19 @@
+"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("./sortableList.component"), exports);
+__exportStar(require("./components"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/draggable/SortableList/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2DAAyC;AACzC,+CAA6B"}

package/dist/cjs/components/draggable/SortableList/mockData.d.ts

@@ -0,0 +1,4 @@
+export declare const findManyChannelStatus: {
+    id: string;
+    name: string;
+}[];

package/dist/cjs/components/draggable/SortableList/mockData.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findManyChannelStatus = void 0;
+exports.findManyChannelStatus = [
+    {
+        id: 'ckj03ha63t2760708sl9i1wrt',
+        name: 'Open',
+    },
+    {
+        id: 'ckkis9tk41bjc07776r52w8vi',
+        name: 'Arrived',
+    },
+    {
+        id: 'cl0myohr5153501vkyhdttc84',
+        name: 'Completed Workflow',
+    },
+    {
+        id: 'ckziqok792091401wchnc8w0x6',
+        name: 'Confirmed',
+    },
+    {
+        id: 'cl0hr30kt2157201za2zu4z22e',
+        name: 'Connect Request',
+    },
+    {
+        id: 'cl8ow0o5q14155je153hnxnkep',
+        name: 'Service Reminder Response',
+    },
+    {
+        id: 'ckkisaejj1bkp0777q7tz03en',
+        name: 'Needs Consult',
+    },
+    {
+        id: 'cl0hqr4x91927701zaaqtpeq97',
+        name: 'Scheduled',
+    },
+    {
+        id: 'clalb5upd6062601xqa9ww3zi4',
+        name: 'Incoming Triage',
+    },
+    {
+        id: 'clcnp56pq489001wka1zxwm0k',
+        name: 'Survey Sent',
+    },
+    {
+        id: 'clcgj0vp75288301yy99juvg1f',
+        name: 'Closed w/comments',
+    },
+    {
+        id: 'ckj03ha67t2780708l1lccn1a',
+        name: 'Archived',
+    },
+];
+//# sourceMappingURL=mockData.js.map

package/dist/cjs/components/draggable/SortableList/mockData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../../src/components/draggable/SortableList/mockData.ts"],"names":[],"mappings":";;;AAAa,QAAA,qBAAqB,GAAG;IACnC;QACE,EAAE,EAAE,2BAA2B;QAC/B,IAAI,EAAE,MAAM;KACb;IACD;QACE,EAAE,EAAE,2BAA2B;QAC/B,IAAI,EAAE,SAAS;KAChB;IACD;QACE,EAAE,EAAE,2BAA2B;QAC/B,IAAI,EAAE,oBAAoB;KAC3B;IACD;QACE,EAAE,EAAE,4BAA4B;QAChC,IAAI,EAAE,WAAW;KAClB;IACD;QACE,EAAE,EAAE,4BAA4B;QAChC,IAAI,EAAE,iBAAiB;KACxB;IACD;QACE,EAAE,EAAE,4BAA4B;QAChC,IAAI,EAAE,2BAA2B;KAClC;IACD;QACE,EAAE,EAAE,2BAA2B;QAC/B,IAAI,EAAE,eAAe;KACtB;IACD;QACE,EAAE,EAAE,4BAA4B;QAChC,IAAI,EAAE,WAAW;KAClB;IACD;QACE,EAAE,EAAE,4BAA4B;QAChC,IAAI,EAAE,iBAAiB;KACxB;IACD;QACE,EAAE,EAAE,2BAA2B;QAC/B,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,4BAA4B;QAChC,IAAI,EAAE,mBAAmB;KAC1B;IACD;QACE,EAAE,EAAE,2BAA2B;QAC/B,IAAI,EAAE,UAAU;KACjB;CACF,CAAC"}

package/dist/cjs/components/draggable/SortableList/sortableList.component.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import type { ReactNode } from 'react';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+export interface SortableItemProps {
+    id: UniqueIdentifier;
+}
+export interface SortableProps<T extends SortableItemProps> {
+    items: T[];
+    onChange(items: T[]): void;
+    renderItem(item: T, index?: number): ReactNode;
+    style?: CSSProperties;
+}
+export declare const SortableList: <T extends SortableItemProps>({ items, onChange, renderItem, style: userStyle, }: SortableProps<T>) => JSX.Element;