@kaizen/components 1.24.1 → 1.25.0

package/dist/cjs/dts/SearchField/SearchField.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { InputSearchProps } from "../Input/InputSearch";
+export type SearchFieldProps = Omit<InputSearchProps, "id"> & {
+    id?: string;
+    labelText: string;
+    disabled?: boolean;
+    reversed?: boolean;
+    secondary?: boolean;
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896613/Search+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-search-field--docs Storybook}
+ */
+export declare const SearchField: {
+    ({ id: propsId, labelText, disabled, reversed, secondary, classNameOverride, ...restProps }: SearchFieldProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/SearchField/index.d.ts

@@ -0,0 +1 @@
+export * from "./SearchField";

package/dist/cjs/dts/Slider/Slider.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { InputRangeProps } from "../Input/InputRange";
+export type SliderFieldProps = {
+    id?: string;
+    labelText: ReactNode;
+    description?: ReactNode;
+    labelPosition?: "inline" | "block";
+    variant?: "default" | "prominent";
+    disabled?: boolean;
+    readOnlyMessage?: ReactNode;
+} & Omit<InputRangeProps, "id">;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896335/Slider Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-slider--docs Storybook}
+ */
+export declare const Slider: {
+    ({ id: propsId, labelText, description, labelPosition, variant, disabled, readOnlyMessage, ...restProps }: SliderFieldProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/Slider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Slider";

package/dist/cjs/dts/Text/Text.d.ts

@@ -20,4 +20,7 @@ export interface TextProps extends OverrideClassName<HTMLAttributes<HTMLElement>
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3074885298/Typography#Paragraph Guidance}
  * {@link https://cultureamp.design/?path=/docs/components-typography-text--body Storybook}
  */
-export declare const Text: ({ children, tag, variant, color, classNameOverride, ...restProps }: TextProps) => JSX.Element;
+export declare const Text: {
+    ({ children, tag, variant, color, classNameOverride, ...restProps }: TextProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/__future__/Select/Select.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+import { UseFloatingReturn } from "@floating-ui/react-dom";
+import { SelectProps as AriaSelectProps } from "@react-stately/select";
+import { OverrideClassName } from "../../types/OverrideClassName";
+import { SelectPopoverContentsProps, SelectToggleProps } from "./subcomponents";
+import { SelectItem, SelectOption } from "./types";
+type OmittedAriaSelectProps = "children" | "items";
+export type SelectProps<Option extends SelectOption = SelectOption> = {
+    /**
+     * Item objects in the collection.
+     */
+    items: Array<SelectItem<Option>>;
+    id?: string;
+    trigger?: (selectToggleProps: SelectToggleProps & {
+        ref: UseFloatingReturn<HTMLButtonElement>["refs"]["setReference"];
+    }, ref: UseFloatingReturn<HTMLButtonElement>["refs"]["setReference"]) => JSX.Element;
+    children?: SelectPopoverContentsProps<Option>["children"];
+    /**
+     * Updates the styling of the validation FieldMessage.
+     */
+    status?: "error" | "caution";
+    /**
+     * A descriptive message for the 'status' states.
+     */
+    validationMessage?: React.ReactNode | undefined;
+    /**
+     * Use the `reversed` styles.
+     */
+    isReversed?: boolean;
+    /**
+     * Use the `fullWidth` styles.
+     */
+    isFullWidth?: boolean;
+    /**
+     * @deprecated: Either define `disabled` in your `Option` (in `items`), or use `disabledKeys`
+     */
+    disabledValues?: React.Key[];
+} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
+ */
+export declare const Select: {
+    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, ...restProps }: SelectProps<Option>): JSX.Element;
+    displayName: string;
+    Section: {
+        <Option_1 extends SelectOption = SelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option_1>): JSX.Element;
+        displayName: string;
+    };
+    SectionDivider: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        <Option_2 extends SelectOption = SelectOption>({ item, classNameOverride, ...props }: import("./subcomponents").OptionProps<Option_2>): JSX.Element;
+        displayName: string;
+    };
+    ItemDefaultRender: {
+        <Option_3 extends SelectOption = SelectOption>({ item, }: import("./subcomponents").ListItemProps<Option_3>): JSX.Element;
+        displayName: string;
+    };
+    TriggerButton: React.ForwardRefExoticComponent<{
+        label: React.ReactNode;
+        labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+        value: React.ReactNode;
+        valueProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+        isOpen?: boolean | undefined;
+        placeholder?: string | undefined;
+        status?: "error" | "caution" | undefined;
+        isDisabled?: boolean | undefined;
+        isReversed?: boolean | undefined;
+    } & Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> & {
+        classNameOverride?: string | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    ListBox: {
+        <Option_4 extends SelectOption>({ children, menuProps, classNameOverride, ...restProps }: import("./subcomponents").SingleListBoxProps<Option_4>): JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/dist/cjs/dts/__future__/Select/_docs/mockData.d.ts

@@ -0,0 +1,6 @@
+import { SelectItem } from "../types";
+export declare const singleMockItems: SelectItem[];
+export declare const groupedMockItems: SelectItem[];
+export declare const mixedMockItemsDisabled: SelectItem[];
+export declare const mixedMockItemsUngroupedFirst: SelectItem[];
+export declare const mixedMockItemsUnordered: SelectItem[];

package/dist/cjs/dts/__future__/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./types";

package/dist/{esm/dts/FilterSelect → cjs/dts/__future__/Select}/subcomponents/ListBox/ListBox.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { AriaListBoxOptions } from "@react-aria/listbox";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption, SelectItem } from "../../types";
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<HTMLAttributes<HTMLUListElement>> & {
     children: React.ReactNode;

package/dist/{esm/dts/FilterSelect → cjs/dts/__future__/Select}/subcomponents/Option/Option.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption, SelectOptionNode } from "../../types";
 export type OptionProps<Option extends SelectOption = SelectOption> = {
     item: SelectOptionNode<Option>;

package/dist/cjs/dts/{FilterSelect → __future__/Select}/subcomponents/Overlay/Overlay.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "../../../types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption } from "../../types";
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;

package/dist/cjs/dts/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { AriaListBoxOptions } from "@react-aria/listbox";
+import { SelectOption, SelectItem, SelectItemNode } from "../../types";
+export type SelectPopoverContentsProps<Option extends SelectOption> = {
+    children?: (args: {
+        items: Array<SelectItemNode<Option>>;
+    }) => React.ReactNode;
+    menuProps: AriaListBoxOptions<SelectItem<Option>>;
+};
+export declare const SelectPopoverContents: {
+    <Option extends SelectOption>({ children, menuProps, }: SelectPopoverContentsProps<Option>): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/__future__/Select/subcomponents/SelectPopoverContents/index.d.ts

@@ -0,0 +1 @@
+export * from "./SelectPopoverContents";

package/dist/cjs/dts/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes } from "react";
+import { DOMAttributes, FocusableElement } from "@react-types/shared";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
+export type SelectToggleProps = {
+    label: React.ReactNode;
+    labelProps: DOMAttributes<FocusableElement>;
+    value: React.ReactNode;
+    /** Props for the element representing the selected value. */
+    valueProps: DOMAttributes<FocusableElement>;
+    isOpen?: boolean;
+    placeholder?: string;
+    /** Updates the styling of the validation. */
+    status?: "error" | "caution";
+    isDisabled?: boolean;
+    /** Use the `reversed` styles. */
+    isReversed?: boolean;
+} & OverrideClassName<HTMLAttributes<HTMLButtonElement>>;
+export declare const SelectToggle: React.ForwardRefExoticComponent<{
+    label: React.ReactNode;
+    labelProps: DOMAttributes<FocusableElement>;
+    value: React.ReactNode;
+    /** Props for the element representing the selected value. */
+    valueProps: DOMAttributes<FocusableElement>;
+    isOpen?: boolean | undefined;
+    placeholder?: string | undefined;
+    /** Updates the styling of the validation. */
+    status?: "error" | "caution" | undefined;
+    isDisabled?: boolean | undefined;
+    /** Use the `reversed` styles. */
+    isReversed?: boolean | undefined;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> & {
+    classNameOverride?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/dts/__future__/Select/subcomponents/SelectToggle/index.d.ts

@@ -0,0 +1 @@
+export * from "./SelectToggle";

package/dist/cjs/dts/__future__/Select/subcomponents/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./ListBox";
+export * from "./ListBoxSection";
+export * from "./ListItem";
+export * from "./ListItems";
+export * from "./Option";
+export * from "./Overlay";
+export * from "./SectionDivider";
+export * from "./SelectPopoverContents";
+export * from "./SelectToggle";

package/dist/cjs/dts/__future__/Select/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Node } from "@react-types/shared";
+export type SelectOption = {
+    label: string;
+    value: React.Key;
+    disabled?: boolean;
+    options?: never;
+};
+export type SelectOptionGroup<Option extends SelectOption> = {
+    label: string;
+    options: Iterable<Option>;
+};
+export type SelectItem<Option extends SelectOption = SelectOption> = Option | SelectOptionGroup<Option>;
+export type SelectOptionNode<Option extends SelectOption = SelectOption> = Node<Option> & {
+    type: "item";
+    hasChildNodes: false;
+};
+export type SelectOptionGroupNode<Option extends SelectOption = SelectOption> = Omit<Node<SelectOptionGroup<Option>>, "childNodes"> & {
+    type: "section";
+    hasChildNodes: true;
+    childNodes: Array<SelectOptionNode<Option>>;
+};
+export type SelectItemNode<Option extends SelectOption = SelectOption> = SelectOptionNode<Option> | SelectOptionGroupNode<Option>;

package/dist/cjs/dts/__future__/Select/utils/getDisabledKeysFromItems.d.ts

@@ -0,0 +1,2 @@
+import { SelectItem, SelectOption } from "../types";
+export declare const getDisabledKeysFromItems: <Option extends SelectOption = SelectOption>(items: SelectItem<Option>[]) => React.Key[];

package/dist/cjs/dts/__future__/Tag/Tag.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+import { OverrideClassName } from "../../types/OverrideClassName";
+import { TagColors } from "./types";
+export type TagProps = {
+    children: ReactNode;
+    color?: TagColors;
+    icon?: React.ReactElement;
+} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
+export declare const Tag: {
+    ({ children, classNameOverride, icon, color, }: TagProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/__future__/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tag";

package/dist/cjs/dts/__future__/Tag/types.d.ts

@@ -0,0 +1,2 @@
+export declare const TagColorKeys: readonly ["gray", "blue", "green", "yellow", "orange", "red", "purple"];
+export type TagColors = (typeof TagColorKeys)[number];

package/dist/cjs/dts/__future__/index.d.ts

@@ -1 +1,3 @@
+export * from "./Select";
+export * from "./Tag";
 export * from "./Workflow";

package/dist/cjs/dts/index.d.ts

@@ -1,7 +1,20 @@
 export * from "./types/DatePicker";
+export * from "./Avatar";
+export * from "./AvatarGroup";
+export * from "./Badge";
+export * from "./Brand";
+export * from "./BrandMoment";
 export * from "./Button";
+export * from "./ButtonGroup";
+export * from "./Card";
+export * from "./Checkbox";
 export * from "./ClearButton";
+export * from "./Collapsible";
+export * from "./Divider";
+export * from "./EmptyState";
 export * from "./ErrorPage";
+export * from "./FieldGroup";
+export * from "./FieldMessage";
 export * from "./Filter";
 export * from "./FilterBar";
 export * from "./FilterButton";
@@ -9,7 +22,15 @@ export * from "./FilterDatePicker";
 export * from "./FilterDateRangePicker";
 export * from "./FilterMultiSelect";
 export * from "./FilterSelect";
+export * from "./Heading";
 export * from "./Icons";
-export * from "./InputSearch";
+export * from "./Input";
 export * from "./KaizenProvider";
+export * from "./Label";
+export * from "./LabelledMessage";
+export * from "./Notification";
+export * from "./Radio";
+export * from "./SearchField";
+export * from "./Slider";
+export * from "./Text";
 export * from "./Workflow";

package/dist/cjs/future.js

@@ -1,18 +1,108 @@
 'use strict';
 
-var SuccessIcon = require('./SuccessIcon-d357871a.js');
+var transformSelectItemToCollectionElement = require('./transformSelectItemToCollectionElement-a76aaebf.js');
 var React = require('react');
+var button = require('@react-aria/button');
+var select$1 = require('@react-aria/select');
+var select = require('@react-stately/select');
 var classnames = require('classnames');
+var reactDom$1 = require('react-dom');
+var reactDom = require('@floating-ui/react-dom');
+var reactFocusOn = require('react-focus-on');
 var typography = require('@kaizen/typography');
 require('uuid');
 var draftTag = require('@kaizen/draft-tag');
 var brand = require('@kaizen/brand');
+require('@kaizen/draft-divider');
+require('@react-aria/listbox');
+require('@react-aria/focus');
+require('@react-aria/utils');
+require('@react-aria/overlays');
+require('@react-stately/collections');
+
+var styles$b = {"popover":"Popover-module_popover__B7k5I"};
+
+var Popover = function(_a) {
+  var children = _a.children, refs = _a.refs, floatingOptions = _a.floatingOptions, focusOnProps = _a.focusOnProps, portalContainer = _a.portalContainer, classNameOverride = _a.classNameOverride, restProps = transformSelectItemToCollectionElement.__rest(_a, ["children", "refs", "floatingOptions", "focusOnProps", "portalContainer", "classNameOverride"]);
+  var floatingStyles = reactDom.useFloating(transformSelectItemToCollectionElement.__assign({ elements: {
+    reference: refs.reference.current,
+    floating: refs.floating.current
+  }, placement: "bottom-start", middleware: [reactDom.offset(15), reactDom.flip()], whileElementsMounted: reactDom.autoUpdate }, floatingOptions)).floatingStyles;
+  return reactDom$1.createPortal(React.createElement(
+    reactFocusOn.FocusOn,
+    transformSelectItemToCollectionElement.__assign({ scrollLock: false }, focusOnProps),
+    React.createElement("div", transformSelectItemToCollectionElement.__assign({ ref: refs.setFloating, style: floatingStyles, className: classnames(styles$b.popover, classNameOverride), role: "dialog", "aria-modal": "true" }, restProps), children)
+  ), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+};
+Popover.displayName = "Popover";
+
+var styles$a = {"container":"Select-module_container__TaMKg","notFullWidth":"Select-module_notFullWidth__Mr-3G"};
+
+var Select = function(_a) {
+  var _b;
+  var label = _a.label, items = _a.items, propsId = _a.id, trigger = _a.trigger, children = _a.children, status = _a.status, validationMessage = _a.validationMessage, isReversed = _a.isReversed, isFullWidth = _a.isFullWidth, disabledValues = _a.disabledValues, classNameOverride = _a.classNameOverride, selectedKey = _a.selectedKey, description = _a.description, placeholder = _a.placeholder, isDisabled = _a.isDisabled, restProps = transformSelectItemToCollectionElement.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled"]);
+  var refs = reactDom.useFloating().refs;
+  var triggerRef = refs.reference;
+  var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+  var descriptionId = "".concat(id, "--description");
+  var disabledKeys = transformSelectItemToCollectionElement.getDisabledKeysFromItems(items);
+  var ariaSelectProps = transformSelectItemToCollectionElement.__assign({ label, items, children: transformSelectItemToCollectionElement.transformSelectItemToCollectionElement, disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys, selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey, description, placeholder, isDisabled }, restProps);
+  var state = select.useSelectState(ariaSelectProps);
+  var _c = select$1.useSelect(ariaSelectProps, state, triggerRef), labelProps = _c.labelProps, triggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps, errorMessageProps = _c.errorMessageProps, descriptionProps = _c.descriptionProps;
+  var buttonProps = button.useButton(triggerProps, triggerRef).buttonProps;
+  var selectToggleProps = transformSelectItemToCollectionElement.__assign(transformSelectItemToCollectionElement.__assign({}, buttonProps), { label, labelProps, value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered, valueProps, isOpen: state.isOpen, placeholder, status, isDisabled: triggerProps.isDisabled, isReversed, ref: refs.setReference });
+  return React.createElement(
+    "div",
+    { className: classnames(!isFullWidth && styles$a.notFullWidth, classNameOverride) },
+    React.createElement(select$1.HiddenSelect, { label, name: id, state, triggerRef }),
+    React.createElement(
+      "div",
+      { className: styles$a.container },
+      trigger === void 0 ? React.createElement(transformSelectItemToCollectionElement.SelectToggle, transformSelectItemToCollectionElement.__assign({}, selectToggleProps)) : trigger(selectToggleProps, selectToggleProps.ref),
+      state.isOpen && React.createElement(
+        Popover,
+        { refs, focusOnProps: {
+          onEscapeKey: state.close,
+          onClickOutside: state.close,
+          noIsolation: true
+        } },
+        React.createElement(
+          transformSelectItemToCollectionElement.SelectProvider,
+          { state },
+          React.createElement(transformSelectItemToCollectionElement.SelectPopoverContents, { menuProps }, children)
+        )
+      )
+    ),
+    validationMessage && React.createElement(transformSelectItemToCollectionElement.FieldMessage, transformSelectItemToCollectionElement.__assign({}, errorMessageProps, { message: validationMessage, status, reversed: isReversed })),
+    description && React.createElement(transformSelectItemToCollectionElement.FieldMessage, transformSelectItemToCollectionElement.__assign({}, descriptionProps, { id: descriptionId, message: description, reversed: isReversed }))
+  );
+};
+Select.displayName = "Select";
+Select.Section = transformSelectItemToCollectionElement.ListBoxSection;
+Select.SectionDivider = transformSelectItemToCollectionElement.SectionDivider;
+Select.Option = transformSelectItemToCollectionElement.Option;
+Select.ItemDefaultRender = transformSelectItemToCollectionElement.ListItem;
+Select.TriggerButton = transformSelectItemToCollectionElement.SelectToggle;
+Select.ListBox = transformSelectItemToCollectionElement.ListBox;
+
+var styles$9 = {"tag":"Tag-module_tag__tuT2O","iconContainer":"Tag-module_iconContainer__OmQRU","gray":"Tag-module_gray__VqJ2M","blue":"Tag-module_blue__u3vnu","green":"Tag-module_green__7bcu7","yellow":"Tag-module_yellow__Br-2V","orange":"Tag-module_orange__LdmPX","red":"Tag-module_red__VB5dE","purple":"Tag-module_purple__A3Uy5"};
+
+var Tag = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, icon = _a.icon, _b = _a.color, color = _b === void 0 ? "gray" : _b;
+  return React.createElement(
+    "span",
+    { className: classnames(styles$9.tag, styles$9[color], classNameOverride) },
+    icon && React.createElement("span", { className: styles$9.iconContainer }, icon),
+    children
+  );
+};
+Tag.displayName = "Tag";
 
 var styles$8 = {"footerRoot":"FooterRoot-module_footerRoot__N-6nQ"};
 
 var FooterRoot = function(_a) {
-  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("footer", SuccessIcon.__assign({ className: classnames(styles$8.footerRoot, classNameOverride) }, restProps), children);
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = transformSelectItemToCollectionElement.__rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("footer", transformSelectItemToCollectionElement.__assign({ className: classnames(styles$8.footerRoot, classNameOverride) }, restProps), children);
 };
 FooterRoot.displayName = "Workflow.FooterRoot";
 
@@ -21,30 +111,30 @@ var styles$7 = {"stepsContainer":"ProgressStepper-module_stepsContainer__WMxXN",
 var getStepStatus = function(isComplete, isCurrentStep, step, index) {
   if (isComplete) {
     return {
-      icon: React.createElement(SuccessIcon.SuccessIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "success" }),
+      icon: React.createElement(transformSelectItemToCollectionElement.SuccessIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "success" }),
       accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
     return {
-      icon: React.createElement(SuccessIcon.IndicatorActiveIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "active" }),
+      icon: React.createElement(transformSelectItemToCollectionElement.IndicatorActiveIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "active" }),
       accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
-    icon: React.createElement(SuccessIcon.IndicatorInactiveIcon, { key: index, inheritSize: true, classNameOverride: "incomplete", role: "presentation" }),
+    icon: React.createElement(transformSelectItemToCollectionElement.IndicatorInactiveIcon, { key: index, inheritSize: true, classNameOverride: "incomplete", role: "presentation" }),
     accessibleName: "Not started: ".concat(step.label)
   };
 };
 var ProgressStepper = function(_a) {
-  var currentStepId = _a.currentStepId, steps = _a.steps, _b = _a.isComplete, isComplete = _b === void 0 ? false : _b, restprops = SuccessIcon.__rest(_a, ["currentStepId", "steps", "isComplete"]);
+  var currentStepId = _a.currentStepId, steps = _a.steps, _b = _a.isComplete, isComplete = _b === void 0 ? false : _b, restprops = transformSelectItemToCollectionElement.__rest(_a, ["currentStepId", "steps", "isComplete"]);
   var currentStepIndex = steps.findIndex(function(stepItem) {
     return stepItem.id === currentStepId;
   });
   return React.createElement(
     "div",
     { className: styles$7.stepsContainer },
-    React.createElement("ol", SuccessIcon.__assign({ className: styles$7.stepList }, restprops, { "aria-labelledby": "stepper-description" }), steps.map(function(step, index) {
+    React.createElement("ol", transformSelectItemToCollectionElement.__assign({ className: styles$7.stepList }, restprops, { "aria-labelledby": "stepper-description" }), steps.map(function(step, index) {
       var isCurrentStep = currentStepIndex === index;
       var isCompletedStep = index < currentStepIndex || isComplete;
       var _a2 = getStepStatus(isCompletedStep, isCurrentStep, step, index), accessibleName = _a2.accessibleName, Icon = _a2.icon;
@@ -83,8 +173,8 @@ ProgressStepper.displayName = "Workflow.ProgressStepper";
 var styles$6 = {"footerAction":"FooterActions-module_footerAction__v7eL-","footerActionPrevious":"FooterActions-module_footerActionPrevious__2XByZ","footerActionNext":"FooterActions-module_footerActionNext__IKRta"};
 
 var FooterAction = function(_a) {
-  var _b = _a.actionType, actionType = _b === void 0 ? "Previous" : _b, action = _a.action, restProps = SuccessIcon.__rest(_a, ["actionType", "action"]);
-  return React.createElement("div", SuccessIcon.__assign({ className: classnames([
+  var _b = _a.actionType, actionType = _b === void 0 ? "Previous" : _b, action = _a.action, restProps = transformSelectItemToCollectionElement.__rest(_a, ["actionType", "action"]);
+  return React.createElement("div", transformSelectItemToCollectionElement.__assign({ className: classnames([
     styles$6.footerAction,
     styles$6["footerAction".concat(actionType)]
   ]) }, restProps), action);
@@ -92,10 +182,10 @@ var FooterAction = function(_a) {
 FooterAction.displayName = "Workflow.FooterActions";
 
 var Footer = function(_a) {
-  var steps = _a.steps, currentStepId = _a.currentStepId, isComplete = _a.isComplete, previousAction = _a.previousAction, nextAction = _a.nextAction, restProps = SuccessIcon.__rest(_a, ["steps", "currentStepId", "isComplete", "previousAction", "nextAction"]);
+  var steps = _a.steps, currentStepId = _a.currentStepId, isComplete = _a.isComplete, previousAction = _a.previousAction, nextAction = _a.nextAction, restProps = transformSelectItemToCollectionElement.__rest(_a, ["steps", "currentStepId", "isComplete", "previousAction", "nextAction"]);
   return React.createElement(
     FooterRoot,
-    SuccessIcon.__assign({}, restProps),
+    transformSelectItemToCollectionElement.__assign({}, restProps),
     React.createElement(FooterAction, { action: previousAction, actionType: "Previous" }),
     React.createElement(ProgressStepper, { steps, currentStepId, isComplete }),
     React.createElement(FooterAction, { action: nextAction, actionType: "Next" })
@@ -106,10 +196,10 @@ Footer.displayName = "Workflow.Footer";
 var styles$5 = {"titles":"Titles-module_titles__JYwU0","pageTitle":"Titles-module_pageTitle__YDp9S","prefix":"Titles-module_prefix__40x8n","status":"Titles-module_status__huuP7"};
 
 var Titles = function(_a) {
-  var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, restProps = SuccessIcon.__rest(_a, ["workflowName", "stepName", "status"]);
+  var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, restProps = transformSelectItemToCollectionElement.__rest(_a, ["workflowName", "stepName", "status"]);
   return React.createElement(
     "div",
-    SuccessIcon.__assign({ className: styles$5.titles }, restProps),
+    transformSelectItemToCollectionElement.__assign({ className: styles$5.titles }, restProps),
     React.createElement(
       typography.Heading,
       { variant: "heading-1", tag: "h1", color: "dark", classNameOverride: styles$5.pageTitle },
@@ -134,9 +224,9 @@ Titles.displayName = "Workflow.Titles";
 var styles$4 = {"actions":"Actions-module_actions__Prrp0"};
 
 var Actions = function(_a) {
-  var headerActions = _a.headerActions, restProps = SuccessIcon.__rest(_a, ["headerActions"]);
-  return React.createElement("div", SuccessIcon.__assign({ className: styles$4.actions }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function(action, index) {
-    return React.createElement(action.type, SuccessIcon.__assign({ key: "header-actions ".concat(index) }, action.props));
+  var headerActions = _a.headerActions, restProps = transformSelectItemToCollectionElement.__rest(_a, ["headerActions"]);
+  return React.createElement("div", transformSelectItemToCollectionElement.__assign({ className: styles$4.actions }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function(action, index) {
+    return React.createElement(action.type, transformSelectItemToCollectionElement.__assign({ key: "header-actions ".concat(index) }, action.props));
   }));
 };
 Actions.displayName = "Workflow.Actions";
@@ -156,16 +246,16 @@ Branding.displayName = "Workflow.Branding";
 var styles$2 = {"root":"Root-module_root__7DVw5"};
 
 var HeaderRoot = function(_a) {
-  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("header", SuccessIcon.__assign({ className: classnames(styles$2.root, classNameOverride) }, restProps), children);
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = transformSelectItemToCollectionElement.__rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("header", transformSelectItemToCollectionElement.__assign({ className: classnames(styles$2.root, classNameOverride) }, restProps), children);
 };
 HeaderRoot.displayName = "Workflow.HeaderRoot";
 
 var Header = function(_a) {
-  var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, headerActions = _a.headerActions, restProps = SuccessIcon.__rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
+  var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, headerActions = _a.headerActions, restProps = transformSelectItemToCollectionElement.__rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
   return React.createElement(
     HeaderRoot,
-    SuccessIcon.__assign({}, restProps),
+    transformSelectItemToCollectionElement.__assign({}, restProps),
     React.createElement(Branding, { alt: "Cultureamp" }),
     React.createElement(Titles, { workflowName, stepName, status }),
     React.createElement(Actions, { headerActions })
@@ -176,27 +266,27 @@ Header.displayName = "Workflow.Header";
 var styles$1 = {"main":"Main-module_main__hMyB1"};
 
 var Main = function(_a) {
-  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("main", SuccessIcon.__assign({ className: classnames([styles$1.main, classNameOverride]) }, restProps), children);
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = transformSelectItemToCollectionElement.__rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("main", transformSelectItemToCollectionElement.__assign({ className: classnames([styles$1.main, classNameOverride]) }, restProps), children);
 };
 Main.displayName = "Workflow.Main";
 
 var styles = {"wrapper":"Wrapper-module_wrapper__89WmC"};
 
 var Wrapper = function(_a) {
-  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["children", "classNameOverride"]);
-  return React.createElement("div", SuccessIcon.__assign({ className: classnames(styles.wrapper, classNameOverride) }, restProps), children);
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = transformSelectItemToCollectionElement.__rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("div", transformSelectItemToCollectionElement.__assign({ className: classnames(styles.wrapper, classNameOverride) }, restProps), children);
 };
 Wrapper.displayName = "Workflow.Wrapper";
 
 var WorkflowComponent = function(_a) {
-  var steps = _a.steps, currentStepId = _a.currentStepId, isComplete = _a.isComplete, workflowName = _a.workflowName, status = _a.status, headerActions = _a.headerActions, children = _a.children, nextAction = _a.nextAction, previousAction = _a.previousAction, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["steps", "currentStepId", "isComplete", "workflowName", "status", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+  var steps = _a.steps, currentStepId = _a.currentStepId, isComplete = _a.isComplete, workflowName = _a.workflowName, status = _a.status, headerActions = _a.headerActions, children = _a.children, nextAction = _a.nextAction, previousAction = _a.previousAction, classNameOverride = _a.classNameOverride, restProps = transformSelectItemToCollectionElement.__rest(_a, ["steps", "currentStepId", "isComplete", "workflowName", "status", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
   var currentStep = steps.find(function(step) {
     return step.id === currentStepId;
   });
   return React.createElement(
     Workflow.Wrapper,
-    SuccessIcon.__assign({ classNameOverride }, restProps),
+    transformSelectItemToCollectionElement.__assign({ classNameOverride }, restProps),
     React.createElement(Workflow.Header, { workflowName, stepName: currentStep.label, status, headerActions }),
     React.createElement(Workflow.Main, null, children),
     React.createElement(Workflow.Footer, { currentStepId, steps, isComplete, nextAction, previousAction })
@@ -210,5 +300,7 @@ var Workflow = Object.assign(WorkflowComponent, {
   Wrapper
 });
 
+exports.Select = Select;
+exports.Tag = Tag;
 exports.Workflow = Workflow;
 //# sourceMappingURL=future.js.map