@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

package/public/components/MarkdownEditor/MarkdownHelp.js

@@ -7,20 +7,17 @@ exports.MarkdownHelp = void 0;
 const react_1 = __importDefault(require("react"));
 const bem_1 = require("../../utilities/bem");
 const Box_1 = require("../Box");
-const Fixed_1 = require("../Fixed");
 const Heading_1 = require("../Heading");
 const Paragraph_1 = require("../Paragraph");
-const Relative_1 = require("../Relative");
-const Absolute_1 = require("../Absolute");
 const CloseButton_1 = require("../CloseButton");
 const cn = "MarkdownHelp";
 const CodeExamples = ({ heading, headingLevel = 3, children, }) => (react_1.default.createElement(react_1.default.Fragment, null,
     headingLevel === 3 ? (react_1.default.createElement(Heading_1.Heading.H3, { className: "text-gray-400" }, heading)) : (react_1.default.createElement(Heading_1.Heading.H4, { className: "text-gray-400" }, heading)),
     react_1.default.createElement(Box_1.Box, { as: "pre", className: bem_1.bem(cn, { e: "preformattedText" }) }, react_1.default.Children.map(children, (child) => (react_1.default.createElement(Box_1.Box, { key: child }, child))))));
 const MarkdownHelp = ({ isOpen, onClose, }) => {
-    return isOpen ? (react_1.default.createElement(Fixed_1.Fixed, { className: bem_1.bem(cn) },
-        react_1.default.createElement(Fixed_1.Fixed, { className: bem_1.bem(cn, { e: "panel" }) },
-            react_1.default.createElement(Relative_1.Relative, { className: bem_1.bem(cn, { e: "header" }) },
+    return isOpen ? (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn) },
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "panel" }) },
+            react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "header" }) },
                 react_1.default.createElement(CloseButton_1.CloseButton, { className: bem_1.bem(cn, { e: "closeButton" }), onClick: onClose })),
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "scrollBox" }) },
                 react_1.default.createElement(Heading_1.Heading.H2, { className: "text-gray-400" }, "Markdown help"),
@@ -65,6 +62,6 @@ const MarkdownHelp = ({ isOpen, onClose, }) => {
                     "![alt text][image]",
                     "[image]: https://www.conveyorhq.com/image.jpg",
                 ]))),
-        react_1.default.createElement(Absolute_1.Absolute, { className: bem_1.bem(cn, { e: "cover" }), onClick: onClose }))) : null;
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "cover" }), onClick: onClose }))) : null;
 };
 exports.MarkdownHelp = MarkdownHelp;

package/public/components/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { ModalProps as RoModalProps } from "react-overlays/Modal";
 import { BoxProps } from "../Box";
+import { CloseButtonProps } from "../CloseButton";
 import { StackProps } from "../Stack";
 export declare enum MODAL_SIZE {
     DEFAULT = "default",
@@ -20,6 +21,7 @@ export interface ModalProps extends RoModalProps {
     size?: MODAL_SIZE;
     center?: boolean;
     disableBackdrop?: boolean;
+    noHeader?: boolean;
 }
 export interface ModalBodyProps extends BoxProps {
     padded?: boolean;
@@ -30,15 +32,19 @@ export interface ModalFooterMultiStepProps extends BoxProps {
     leftButtonLabel?: string;
     rightButtonLabel?: string;
 }
+export declare const ModalHeader: (props: BoxProps) => JSX.Element;
 export declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
 export declare const ModalTabs: (props: StackProps) => JSX.Element;
 export declare const ModalFooter: (props: BoxProps) => JSX.Element;
 export declare const ModalFooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
+export declare const ModalCloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
 export declare const Modal: {
     (props: ModalProps): JSX.Element;
     Root: any;
     Tabs: (props: StackProps) => JSX.Element;
+    Header: (props: BoxProps) => JSX.Element;
     Body: (props: ModalBodyProps) => JSX.Element;
     Footer: (props: BoxProps) => JSX.Element;
     FooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
+    CloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
 };

package/public/components/Modal/Modal.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.MODAL_SIZE = void 0;
+exports.Modal = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Modal_1 = __importDefault(require("react-overlays/Modal"));
@@ -15,6 +15,7 @@ const bem_1 = require("../../utilities/bem");
 const Tab_1 = require("../Tab");
 const Heading_1 = require("../Heading");
 const Overlay_1 = require("../Overlay");
+const context_1 = require("./context");
 const cn = "Modal";
 var MODAL_SIZE;
 (function (MODAL_SIZE) {
@@ -26,6 +27,7 @@ const ModalHeader = (props) => {
     const { className, ...rest } = props;
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default([bem_1.bem(cn, { e: "header" }), className]) }, rest)));
 };
+exports.ModalHeader = ModalHeader;
 const ModalBody = (props) => {
     const { padded = true, className, ...rest } = props;
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([
@@ -50,7 +52,7 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
         react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "buttonLabels" }) },
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "left" }) }, leftButtonLabel),
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "right" }) }, rightButtonLabel)),
-        react_1.default.createElement(Box_1.Box, { className: "relative" },
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "progressDots-container" }) },
             children,
             react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "progressDots" }) },
                 react_1.default.createElement(Stack_1.Stack, { spacing: 5 }, [...new Array(steps).keys()].map((dot, index) => (react_1.default.createElement(Box_1.Box, { key: dot, className: classnames_1.default([
@@ -60,30 +62,38 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
                     ]) }))))))));
 };
 exports.ModalFooterMultiStep = ModalFooterMultiStep;
+const ModalCloseButton = ({ className, ...rest }) => {
+    const { onClose } = context_1.useModalContext();
+    return (react_1.default.createElement(CloseButton_1.CloseButton, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "close" }), className), onClick: onClose }, rest)));
+};
+exports.ModalCloseButton = ModalCloseButton;
 const Modal = (props) => {
-    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, className, style, ...rest } = props;
+    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, noHeader = false, className, style, ...rest } = props;
     const showHeader = title || secondaryTitle || !hideCloseButton;
-    return (react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
-            bem_1.bem(`${cn}Container`),
-            enableOutsideClick && "pointer-events-none",
-        ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
-        react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
-                bem_1.bem(cn),
-                bem_1.bem(cn, { m: size }),
-                center && bem_1.bem(cn, { m: "center" }),
-                enableOutsideClick && "pointer-events-auto",
-                className,
-            ]), style: style },
-            showHeader && (react_1.default.createElement(ModalHeader, null,
-                title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
-                react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                    secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
-                    !hideCloseButton && (react_1.default.createElement(CloseButton_1.CloseButton, { className: bem_1.bem(cn, { e: "close" }), onClick: onClose }))))),
-            children)));
+    return (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose } },
+        react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
+                bem_1.bem(`${cn}Container`),
+                enableOutsideClick && "pointer-events-none",
+            ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
+                    bem_1.bem(cn),
+                    bem_1.bem(cn, { m: size }),
+                    center && bem_1.bem(cn, { m: "center" }),
+                    enableOutsideClick && "pointer-events-auto",
+                    className,
+                ]), style: style },
+                !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
+                    title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                    react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
+                        secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                        !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
+                children))));
 };
 exports.Modal = Modal;
 exports.Modal.Root = exports.Modal;
 exports.Modal.Tabs = exports.ModalTabs;
+exports.Modal.Header = exports.ModalHeader;
 exports.Modal.Body = exports.ModalBody;
 exports.Modal.Footer = exports.ModalFooter;
 exports.Modal.FooterMultiStep = exports.ModalFooterMultiStep;
+exports.Modal.CloseButton = exports.ModalCloseButton;

package/public/components/Modal/context.d.ts

@@ -0,0 +1,6 @@
+import { Context } from "react";
+import { DisclosureProps } from "../../types";
+declare type ModalContextType = Partial<DisclosureProps>;
+export declare const ModalContext: Context<ModalContextType>;
+export declare function useModalContext(): Partial<DisclosureProps>;
+export {};

package/public/components/Modal/context.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalContext = exports.ModalContext = void 0;
+const react_1 = require("react");
+const defaultContext = {
+    onClose: () => { },
+};
+exports.ModalContext = react_1.createContext(defaultContext);
+function useModalContext() {
+    const context = react_1.useContext(exports.ModalContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useModalContext = useModalContext;

package/public/components/Modal/index.d.ts

@@ -1 +1,2 @@
 export * from "./Modal";
+export * from "./context";

package/public/components/Modal/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Modal"), exports);
+__exportStar(require("./context"), exports);

package/public/components/OptionButton/OptionButton.d.ts

@@ -1,7 +1,34 @@
 import { HTMLProps } from "react";
+import { BoxProps } from "../Box";
+import { TextProps } from "../Text";
+import { StackProps } from "../Stack";
+export interface OptionButtonGroupProps extends StackProps {
+    name?: string;
+    type?: "radio" | "checkbox";
+}
+export declare const OptionButtonGroup: (props: OptionButtonGroupProps) => JSX.Element;
+export declare type OptionButtonRootProps = HTMLProps<HTMLLabelElement>;
+export declare const OptionButtonRoot: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+export declare type OptionButtonInputProps = HTMLProps<HTMLInputElement>;
+export declare const OptionButtonInput: (props: OptionButtonInputProps) => JSX.Element;
+export declare const OptionButtonContent: ({ className, children, ...rest }: BoxProps) => JSX.Element;
+export declare const OptionButtonHeading: ({ className, children, ...rest }: TextProps) => JSX.Element;
+export declare const OptionButtonDescription: ({ className, children, ...rest }: TextProps) => JSX.Element;
+export declare const OptionButtonBackdrop: ({ className, ...rest }: BoxProps) => JSX.Element;
+export declare const OptionButtonSelectedIcon: ({ className, ...rest }: BoxProps) => JSX.Element;
 interface OptionButtonProps extends HTMLProps<HTMLInputElement> {
     heading: string;
     description?: string;
 }
-export declare const OptionButton: (props: OptionButtonProps) => JSX.Element;
+export declare const OptionButton: {
+    (props: OptionButtonProps): JSX.Element;
+    Group: (props: OptionButtonGroupProps) => JSX.Element;
+    Root: ({ children, className, ...rest }: OptionButtonRootProps) => JSX.Element;
+    Input: (props: OptionButtonInputProps) => JSX.Element;
+    Content: ({ className, children, ...rest }: BoxProps) => JSX.Element;
+    Heading: ({ className, children, ...rest }: TextProps) => JSX.Element;
+    Description: ({ className, children, ...rest }: TextProps) => JSX.Element;
+    Backdrop: ({ className, ...rest }: BoxProps) => JSX.Element;
+    SelectedIcon: ({ className, ...rest }: BoxProps) => JSX.Element;
+};
 export {};

package/public/components/OptionButton/OptionButton.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionButton = void 0;
+exports.OptionButton = exports.OptionButtonSelectedIcon = exports.OptionButtonBackdrop = exports.OptionButtonDescription = exports.OptionButtonHeading = exports.OptionButtonContent = exports.OptionButtonInput = exports.OptionButtonRoot = exports.OptionButtonGroup = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const auto_id_1 = require("@reach/auto-id");
@@ -11,21 +11,73 @@ const Box_1 = require("../Box");
 const Input_1 = require("../Input");
 const Text_1 = require("../Text");
 const Icon_1 = require("../Icon");
+const Stack_1 = require("../Stack");
 const bem_1 = require("../../utilities/bem");
 const isUndefined_1 = __importDefault(require("../../utilities/isUndefined"));
-const cn = "OptionButton";
-const OptionButton = (props) => {
-    const { heading, description, id: idProp, checked, className, defaultValue, ...rest } = props;
+const types_1 = require("../../types");
+const context_1 = require("./context");
+const cn = bem_1.bemHOF("OptionButton");
+const OptionButtonGroup = (props) => {
+    const { name = "", type = "radio", orientation = types_1.ORIENTATION.VERTICAL, ...rest } = props;
+    return (react_1.default.createElement(context_1.OptionButtonContext.Provider, { value: {
+            name,
+            type,
+        } },
+        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest))));
+};
+exports.OptionButtonGroup = OptionButtonGroup;
+const OptionButtonRoot = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement("label", Object.assign({ className: classnames_1.default(cn(), className) }, rest), children));
+};
+exports.OptionButtonRoot = OptionButtonRoot;
+const OptionButtonInput = (props) => {
+    const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
+    const { id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", ...rest } = props;
     const fallbackId = `OptionButton:${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
-    return (react_1.default.createElement(Box_1.Box, { as: "label", className: classnames_1.default(bem_1.bem(cn), className) },
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "content" }) },
-            heading && (react_1.default.createElement(Text_1.Text, { as: "div", className: bem_1.bem(cn, { e: "heading" }) }, heading)),
-            description && (react_1.default.createElement(Text_1.Text, { as: "div", className: bem_1.bem(cn, { e: "description" }) }, description))),
-        react_1.default.createElement(Input_1.Input, Object.assign({ id: id, type: "radio", checked: checked, className: bem_1.bem(cn, { e: "input" }), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)),
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "backdrop" }) }),
-        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "selected" }) },
-            react_1.default.createElement(Icon_1.Icon, { className: bem_1.bem(cn, { e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
-            "Selected")));
+    const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
+    const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
+    return (react_1.default.createElement(Input_1.Input, Object.assign({ id: id, name: name, type: type, checked: checked, className: classnames_1.default([cn({ e: "input" }), className]), defaultValue: defaultValue, "aria-checked": checked ? "true" : "false" }, rest)));
+};
+exports.OptionButtonInput = OptionButtonInput;
+const OptionButtonContent = ({ className, children, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "content" }), className]) }, rest), children));
+exports.OptionButtonContent = OptionButtonContent;
+const OptionButtonHeading = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([cn({ e: "heading" }), className]) }, rest), children));
+exports.OptionButtonHeading = OptionButtonHeading;
+const OptionButtonDescription = ({ className, children, ...rest }) => (react_1.default.createElement(Text_1.Text, Object.assign({ as: "div", className: classnames_1.default([cn({ e: "description" }), className]) }, rest), children));
+exports.OptionButtonDescription = OptionButtonDescription;
+const OptionButtonBackdrop = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "backdrop" }), className]) }, rest)));
+exports.OptionButtonBackdrop = OptionButtonBackdrop;
+const OptionButtonSelectedIcon = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn({ e: "selected" }), className]) }, rest),
+    react_1.default.createElement(Icon_1.Icon, { className: cn({ e: "icon" }), icon: Icon_1.ICON_TYPE.CHECK }),
+    "Selected"));
+exports.OptionButtonSelectedIcon = OptionButtonSelectedIcon;
+const OptionButton = (props) => {
+    const { name: nameFromContext, type: typeFromContext, } = context_1.useOptionButtonContext();
+    const { heading, description, id: idProp, name: nameProp, checked, className, defaultValue, type: typeProp = "radio", disabled = false, ...rest } = props;
+    const fallbackId = `OptionButton-${auto_id_1.useId()}`;
+    const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
+    const name = isUndefined_1.default(nameFromContext) ? nameProp : nameFromContext;
+    const type = isUndefined_1.default(typeFromContext) ? typeProp : typeFromContext;
+    const rootClassName = classnames_1.default([
+        cn(),
+        disabled && cn({ m: "disabled" }),
+        className,
+    ]);
+    return (react_1.default.createElement(exports.OptionButtonRoot, { className: rootClassName },
+        react_1.default.createElement(exports.OptionButtonContent, null,
+            heading && react_1.default.createElement(exports.OptionButtonHeading, null, heading),
+            description && (react_1.default.createElement(exports.OptionButtonDescription, null, description))),
+        react_1.default.createElement(exports.OptionButtonInput, Object.assign({ id: id, name: name, type: type, checked: checked, defaultValue: defaultValue, "aria-checked": checked ? "true" : "false", disabled: disabled }, rest)),
+        react_1.default.createElement(exports.OptionButtonBackdrop, null),
+        react_1.default.createElement(exports.OptionButtonSelectedIcon, null)));
 };
 exports.OptionButton = OptionButton;
+exports.OptionButton.Group = exports.OptionButtonGroup;
+exports.OptionButton.Root = exports.OptionButtonRoot;
+exports.OptionButton.Input = exports.OptionButtonInput;
+exports.OptionButton.Content = exports.OptionButtonContent;
+exports.OptionButton.Heading = exports.OptionButtonHeading;
+exports.OptionButton.Description = exports.OptionButtonDescription;
+exports.OptionButton.Backdrop = exports.OptionButtonBackdrop;
+exports.OptionButton.SelectedIcon = exports.OptionButtonSelectedIcon;

package/public/components/OptionButton/context.d.ts

@@ -0,0 +1,11 @@
+import { Context } from "react";
+declare type OptionButtonContextType = {
+    name?: string;
+    type?: "radio" | "checkbox";
+} | undefined;
+export declare const OptionButtonContext: Context<OptionButtonContextType>;
+export declare function useOptionButtonContext(): {
+    name?: string | undefined;
+    type?: "radio" | "checkbox" | undefined;
+};
+export {};

package/public/components/OptionButton/context.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionButtonContext = exports.OptionButtonContext = void 0;
+const react_1 = require("react");
+const defaultContext = {
+    name: "",
+    type: "radio",
+};
+exports.OptionButtonContext = react_1.createContext(defaultContext);
+function useOptionButtonContext() {
+    const context = react_1.useContext(exports.OptionButtonContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useOptionButtonContext = useOptionButtonContext;

package/public/components/Overlay/Overlay.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Fixed_1 = require("../Fixed");
+const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = "Overlay";
 const Overlay = (props) => {
     const { className, ...rest } = props;
-    return react_1.default.createElement(Fixed_1.Fixed, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
+    return react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
 };
 exports.Overlay = Overlay;

package/public/components/Paragraph/Paragraph.js

@@ -7,14 +7,10 @@ exports.Paragraph = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Text_1 = require("../Text");
+const bem_1 = require("../../utilities/bem");
+const cn = bem_1.bemHOF("Paragraph");
 const Paragraph = (props) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(Text_1.Text, Object.assign({}, rest, { className: classnames_1.default([
-            "text-body",
-            "text-gray-700",
-            "leading-normal",
-            "my-6",
-            className,
-        ]) })));
+    return react_1.default.createElement(Text_1.Text, Object.assign({ className: classnames_1.default([cn(), className]) }, rest));
 };
 exports.Paragraph = Paragraph;

package/public/components/Reference/Reference.d.ts

@@ -1,11 +1,11 @@
 import { ForwardRefExoticComponent } from "react";
 import { BoxProps } from "../Box";
-import { ICON_STYLE_PREFIX, ICON_TYPE } from "../Icon";
+import { ICON_STYLE_PREFIX, IconType } from "../Icon";
 import { STATUS_VARIANT } from "../../types";
 export interface ReferenceProps {
     as?: any;
     disabled?: boolean;
-    icon?: ICON_TYPE;
+    icon?: IconType;
     iconPrefix?: ICON_STYLE_PREFIX;
     badgeVariant?: STATUS_VARIANT;
     badgeLabel?: string;

package/public/components/Select/Select.d.ts

@@ -6,6 +6,7 @@ declare type ArrowSelectProps = {
     menuInPortal?: boolean;
     menuRef?: Ref<HTMLDivElement>;
     height?: number;
+    optionsMessage?: string;
 };
 export declare type SelectProps = ReactSelectProps & ArrowSelectProps;
 export declare type SelectCreatableProps = ReactSelectCreatableProps<any> & ArrowSelectProps;

package/public/components/Select/Select.js

@@ -28,7 +28,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_select_1 = __importStar(require("react-select"));
 const creatable_1 = __importDefault(require("react-select/creatable"));
 const async_1 = __importDefault(require("react-select/async"));
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const Box_1 = require("../Box");
@@ -37,6 +37,7 @@ const FormGroupContext_1 = require("../FormGroup/FormGroupContext");
 const Icon_1 = require("../Icon");
 const CloseButton_1 = require("../CloseButton");
 const Token_1 = require("../Token");
+const Text_1 = require("../Text");
 const theme_1 = require("./theme");
 const cn = utilities_1.bemHOF("Select");
 const MultiValue = ({ removeProps, selectProps, children, }) => {
@@ -71,12 +72,15 @@ const adsComponents = {
 const getClassNames = (classNameProp, variant) => {
     return classnames_1.default([cn(), cn({ m: variant }), classNameProp]);
 };
-const getMenuListComponent = (menuRef) => ({ innerRef, children, ...listRest }) => (react_1.default.createElement(react_select_1.components.MenuList, Object.assign({ innerRef: innerRef }, listRest),
-    react_1.default.createElement(Box_1.Box, { ref: menuRef }, children)));
-const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, components, styles, }) => {
-    const customComponents = menuInPortal
-        ? { ...adsComponents, MenuList: getMenuListComponent(menuRef) }
-        : adsComponents;
+const getMenuListComponent = ({ menuRef, optionsMessage, }) => ({ innerRef, children, options, ...listRest }) => (react_1.default.createElement(react_select_1.components.MenuList, Object.assign({ innerRef: innerRef, options: options }, listRest),
+    react_1.default.createElement(Box_1.Box, { ref: menuRef },
+        react_1.default.createElement(Box_1.Box, null, children),
+        options.length > 0 && optionsMessage && (react_1.default.createElement(Text_1.Text, { className: "text-gray-600 text-icon leading-normal px-3 py-2" }, optionsMessage)))));
+const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, components, optionsMessage, styles, }) => {
+    const customComponents = {
+        ...adsComponents,
+        MenuList: getMenuListComponent({ menuRef, optionsMessage }),
+    };
     return {
         components: { ...customComponents, ...components },
         menuPortalTarget: menuInPortal ? document.body : undefined,
@@ -84,14 +88,14 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
             ...styles,
             menuPortal: (base) => ({
                 ...base,
-                zIndex: tokens_1.zIndex.max,
+                zIndex: tokens_1.tokens.zIndex.max,
             }),
             singleValue: (base, state) => {
                 return {
                     ...base,
                     paddingLeft: state.selectProps.isSearchable ? "2px" : "0",
                     color: state.selectProps.menuIsOpen && state.selectProps.isSearchable
-                        ? tokens_1.colors.gray["600"]
+                        ? tokens_1.tokens.color.gray["600"]
                         : base.color,
                 };
             },
@@ -106,7 +110,7 @@ const generateHardcodedProps = ({ controlHeight, menuInPortal, menuRef, componen
         },
     };
 };
-const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.height["10"]), menuInPortal = false, menuRef, components, styles, ...rest }) => {
+const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id: idProp, className, height: controlHeight = utilities_1.toNumber(tokens_1.tokens.height["10"]), menuInPortal = false, menuRef, components, optionsMessage, styles, ...rest }) => {
     const { variant: variantContext, id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
@@ -116,6 +120,7 @@ const SelectBase = ({ variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, id:
         menuRef,
         styles,
         components,
+        optionsMessage,
     });
     if (rest.type === "async") {
         return (react_1.default.createElement(async_1.default, Object.assign({ className: getClassNames(className, variant), id: id }, rest, hardcodedProps)));

package/public/components/Select/SelectPopover.js

@@ -26,7 +26,7 @@ exports.SelectPopover = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const hooks_1 = require("../../hooks");
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
@@ -49,19 +49,19 @@ const SelectPopover = ({ readView, cancelButton, onCancelEdit, preventOutsideCli
     const selectStyles = {
         control: (provided) => ({
             ...provided,
-            width: `calc(100% - ${tokens_1.tokens.margin[6]})`,
-            margin: tokens_1.tokens.margin[3],
+            width: `calc(100% - ${tokens_1.tokens.spacing[6]})`,
+            margin: tokens_1.tokens.spacing[3],
         }),
         menu: (provided) => ({
             ...provided,
             boxShadow: "none !important",
             borderRadius: "0 !important",
             zIndex: "1 !important",
-            backgroundColor: tokens_1.tokens.colors.white,
+            backgroundColor: tokens_1.tokens.color.white,
             position: "relative",
-            marginTop: tokens_1.tokens.margin[3],
+            marginTop: tokens_1.tokens.spacing[3],
             marginBottom: 0,
-            borderTop: `1px solid ${tokens_1.tokens.colors.gray[300]}`,
+            borderTop: `1px solid ${tokens_1.tokens.color.gray[300]}`,
             maxHeight: "184px",
             overflowY: "auto",
         }),

package/public/components/Select/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Select";
 export * from "./SelectPopover";
+export { components as ReactSelectComponents } from "react-select";
+export type { MenuProps as ReactSelectMenuProps, GroupProps as ReactSelectGroupProps, InputProps as ReactSelectInputProps, OptionProps as ReactSelectOptionProps, ControlProps as ReactSelectControlProps, IndicatorProps as ReactSelectIndicatorProps, MultiValueProps as ReactSelectMultiValueProps, PlaceholderProps as ReactSelectPlaceholderProps, SingleValueProps as ReactSelectSingleValueProps, ValueContainerProps as ReactSelectValueContainerProps, MenuListComponentProps as ReactSelectMenuListComponentProps, } from "react-select";

package/public/components/Select/index.js

@@ -10,5 +10,8 @@ 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 });
+exports.ReactSelectComponents = void 0;
 __exportStar(require("./Select"), exports);
 __exportStar(require("./SelectPopover"), exports);
+var react_select_1 = require("react-select");
+Object.defineProperty(exports, "ReactSelectComponents", { enumerable: true, get: function () { return react_select_1.components; } });

package/public/components/Select/theme.js

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adsTheme = void 0;
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const toNumber_1 = require("../../utilities/toNumber");
 exports.adsTheme = {
-    borderRadius: toNumber_1.toNumber(tokens_1.borderRadius.DEFAULT),
+    borderRadius: toNumber_1.toNumber(tokens_1.tokens.borderRadius.DEFAULT),
     colors: {
-        danger: tokens_1.colors.red["400"],
-        dangerLight: tokens_1.colors.red["300"],
-        neutral0: tokens_1.colors.white,
-        neutral5: tokens_1.colors.gray["100"],
-        neutral10: tokens_1.colors.gray["100"],
-        neutral20: tokens_1.colors.gray["200"],
-        neutral30: tokens_1.colors.gray["400"],
-        neutral40: tokens_1.colors.gray["500"],
-        neutral50: tokens_1.colors.gray["600"],
-        neutral60: tokens_1.colors.gray["700"],
-        neutral70: tokens_1.colors.gray["800"],
-        neutral80: tokens_1.colors.gray["900"],
-        neutral90: tokens_1.colors.gray["900"],
-        primary: tokens_1.colors.blue["500"],
-        primary25: tokens_1.colors.gray["300"],
-        primary50: tokens_1.colors.gray["300"],
-        primary75: tokens_1.colors.blue["400"],
+        danger: tokens_1.tokens.color.red["400"],
+        dangerLight: tokens_1.tokens.color.red["300"],
+        neutral0: tokens_1.tokens.color.white,
+        neutral5: tokens_1.tokens.color.gray["100"],
+        neutral10: tokens_1.tokens.color.gray["100"],
+        neutral20: tokens_1.tokens.color.gray["200"],
+        neutral30: tokens_1.tokens.color.gray["400"],
+        neutral40: tokens_1.tokens.color.gray["500"],
+        neutral50: tokens_1.tokens.color.gray["600"],
+        neutral60: tokens_1.tokens.color.gray["700"],
+        neutral70: tokens_1.tokens.color.gray["800"],
+        neutral80: tokens_1.tokens.color.gray["900"],
+        neutral90: tokens_1.tokens.color.gray["900"],
+        primary: tokens_1.tokens.color.blue["500"],
+        primary25: tokens_1.tokens.color.gray["300"],
+        primary50: tokens_1.tokens.color.gray["300"],
+        primary75: tokens_1.tokens.color.blue["400"],
     },
     spacing: {
-        baseUnit: toNumber_1.toNumber(tokens_1.margin["1"]),
-        controlHeight: toNumber_1.toNumber(tokens_1.height["10"]),
-        menuGutter: toNumber_1.toNumber(tokens_1.margin["1"]),
+        baseUnit: toNumber_1.toNumber(tokens_1.tokens.spacing["1"]),
+        controlHeight: toNumber_1.toNumber(tokens_1.tokens.height["10"]),
+        menuGutter: toNumber_1.toNumber(tokens_1.tokens.spacing["1"]),
     },
 };