@northlight/ui 2.26.1 → 2.27.0

package/dist/es/northlight.d.ts

@@ -121,6 +121,7 @@ type Size$1 = 'sm' | 'md' | 'lg';
 interface Option<T extends string = string> {
     label: string;
     value: T;
+    isCreation?: boolean;
 }
 interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
     /** Whatever is currently selected by the select will be controlled by value prop, if value is
@@ -4022,13 +4023,16 @@ declare const PaneItem: ({ children, ...rest }: GridItemProps) => JSX.Element;
 declare const PaneDivider: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, BoxProps>;
 
 type EditableSizes = 'sm' | 'md' | 'lg';
+type EditableVariant = 'brand' | 'default';
 interface EditableProps extends EditableProps$1 {
     value?: string;
     size?: EditableSizes;
     leftItem?: ReactElement;
+    variant?: EditableVariant;
 }
 interface EditableControlsProps {
     size: EditableSizes;
+    variant: EditableVariant;
 }
 
 /**
@@ -4061,7 +4065,7 @@ interface EditableControlsProps {
         </p>
  *
  */
-declare const EditableText: ({ size, value: inputValue, onSubmit, leftItem, ...rest }: EditableProps) => JSX.Element;
+declare const EditableText: ({ size, value: inputValue, onSubmit, leftItem, variant, ...rest }: EditableProps) => JSX.Element;
 
 interface StepStackProps extends StackProps {
     children: ReactNode | ReactNode[];
@@ -4194,76 +4198,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
     menuPlacement?: 'top' | 'bottom' | 'auto';
 }
 
-/**
- * A dropdown component that allows users to select a value from given options
- * or create a new one if it doesn't exist.
- * @see {@link https://northlight.dev/reference/creatable-select-dropdown}
- *
- * @example (Example)
- * (?
- * () => {
- *   const [artist, setArtist] = useState(null);
- *   const [element, setElement] = useState({ label: 'Technique', value: 'technique' })
- *   const someOptions = [
- *     { label: 'Scooter', value: 'scooter' },
- *     { label: 'Snoop Doggy Dogg', value: 'snoop-dogg' },
- *   ];
- *
-*   const someOtherOptions = [
- *     { label: 'Vision', value: 'vision' },
- *     { label: 'Technique', value: 'technique' },
- *     { label: 'Expression', value: 'expression' }
- *   ];
- *
- *   return (
- *     <VStack gap={10} alignItems={"flex-start"}>
- *       <Box align="left">
- *         <H1>Basic example</H1>
- *         <H3>Select the best artist</H3>
- *         <CreatableSelectDropdown
- *           standardOptions={someOptions}
- *           onOptionChange={setArtist}
- *           width="300px"
- *           value={artist ? artist.value : undefined}
- *         />
- *         {artist && artist.value !== 'Add option...' && (
- *           <H3 py={8}>The best artist is: {artist.label}</H3>
- *         )}
- *       </Box>
- *       <Box align="left">
- *         <H1>Pre-selected option</H1>
- *         <H3>What is the quintessential element of an exceptional artisan?</H3>
- *         <CreatableSelectDropdown
- *           standardOptions={someOtherOptions}
- *           onOptionChange={setElement}
- *           width="300px"
- *           value={element ? element.value : undefined}
- *         />
- *         {element && element.value !== 'Add option...' && (
- *           <H3 py={8}>
- *             {element.value === 'vision' && (
- *               'The artist\'s vision shapes their creative world.'
- *             )}
- *             {element.value === 'technique' && (
- *               'Technique is the legacy\'s bedrock.'
- *             )}
- *             {element.value === 'expression' && (
- *               'Expression communicates the artist\'s inner voice.'
- *             )}
- *             {element.value !== 'vision' &&
- *                element.value !== 'technique' &&
- *                element.value !== 'expression' && (
- *               'Absent the selection of legitimate alternatives.'
- *              )}
- *           </H3>
- *         )}
- *       </Box>
- *     </VStack>
- *   );
- * }
- * ?)
- */
-declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, defaultValue, value, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
+declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, variant, defaultValue, value, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 
@@ -4329,4 +4264,4 @@ declare const useResizeWidth: ({ stationaryEdge, minWidthPx, maxWidthPx, default
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, EditableVariant, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };

package/dist/es/northlight.js

@@ -1,4 +1,4 @@
-import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$2, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Portal, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, useOutsideClick } from '@chakra-ui/react';
+import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, Popover as Popover$2, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, keyframes, extendTheme, Table as Table$2, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Portal, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableCaption, TableContainer, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, keyframes, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 import React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
@@ -10034,7 +10034,15 @@ var __spreadValues$O = (a, b) => {
     }
   return a;
 };
-const EditableControls = ({ size }) => {
+const mapEditableVariantsToButtonSubmitVariants = {
+  brand: "brand",
+  default: "success"
+};
+const mapEditableVariantsToButtonCancelVariants = {
+  brand: "ghost",
+  default: "danger"
+};
+const EditableControls = ({ size, variant = "default" }) => {
   const {
     getSubmitButtonProps,
     getCancelButtonProps
@@ -10046,7 +10054,7 @@ const EditableControls = ({ size }) => {
     __spreadValues$O({
       "aria-label": "Cancel",
       sx: button,
-      variant: "danger"
+      variant: mapEditableVariantsToButtonCancelVariants[variant]
     }, getCancelButtonProps()),
     /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: XCloseSolid })
   ), /* @__PURE__ */ React.createElement(
@@ -10054,7 +10062,7 @@ const EditableControls = ({ size }) => {
     __spreadValues$O({
       "aria-label": "Save",
       sx: button,
-      variant: "success"
+      variant: mapEditableVariantsToButtonSubmitVariants[variant]
     }, getSubmitButtonProps()),
     /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: CheckDuo })
   )) : /* @__PURE__ */ React.createElement(
@@ -10102,12 +10110,14 @@ const EditableText = (_a) => {
     size = "md",
     value: inputValue,
     onSubmit,
-    leftItem
+    leftItem,
+    variant = "default"
   } = _b, rest = __objRest$E(_b, [
     "size",
     "value",
     "onSubmit",
-    "leftItem"
+    "leftItem",
+    "variant"
   ]);
   const [value, setValue] = useState(inputValue);
   const { input, preview } = useMultiStyleConfig("EditableText", { size, value });
@@ -10136,7 +10146,7 @@ const EditableText = (_a) => {
         size,
         sx: input
       }
-    ), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size })))
+    ), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size, variant })))
   );
 };
 
@@ -13877,10 +13887,28 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const { Option: ChakraOption } = chakraComponents;
 const customComponents = {
   Option: (_a) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$1({}, props), /* @__PURE__ */ React.createElement(React.Fragment, null, props.data.isCreation ? /* @__PURE__ */ React.createElement(Flex, { mr: 3, width: 1.5, mb: 0.5, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React.createElement(Icon$1, { mb: "4px", as: PlusSolid, color: "brand" })) : /* @__PURE__ */ React.createElement(Box, { mr: 3, width: 1.5 }), children));
+    return /* @__PURE__ */ React.createElement(ChakraOption, __spreadValues$1({}, props), props.data.isCreation && /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        mr: 3,
+        width: 1.5,
+        mb: 0.5,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement(Icon$1, { as: PlusSolid, color: "brand" })
+    ), !props.data.isCreation && /* @__PURE__ */ React.createElement(Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        color: props.data.isCreation ? "text.brand" : "text.default",
+        fontWeight: props.data.isCreation ? "semibold" : "normal"
+      },
+      children
+    ));
   }
 };
 
@@ -13903,70 +13931,67 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const CREATION_OPTION_VALUE = "add_field";
 const CreatableSelectDropdown = ({
   standardOptions,
   initialPlaceholder = "Select or create...",
-  addOptionPlaceholder = "Enter text...",
+  addOptionPlaceholder = "Select or create...",
   creationOption = {
-    label: "Add option...",
-    value: "Add option...",
+    label: "Add field",
+    value: CREATION_OPTION_VALUE,
     isCreation: true
   },
   onOptionChange,
-  width = "100%",
   variant = "outline",
   defaultValue,
   value,
   menuPlacement = "bottom"
 }) => {
-  const initialSelectedOption = useMemo(
-    () => {
-      var _a, _b;
-      if (!isNil(value)) {
-        return (_a = standardOptions.find((option) => option.value === value)) != null ? _a : null;
-      }
-      if (!isNil(defaultValue)) {
-        return (_b = standardOptions.find((option) => option.value === defaultValue)) != null ? _b : null;
-      }
-      return null;
-    },
-    [value]
-  );
-  const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
-  const [newOptionText, setNewOptionText] = useState("");
+  const [selectedOption, setSelectedOption] = useState(() => {
+    var _a, _b;
+    const targetValue = (_a = value != null ? value : defaultValue) != null ? _a : null;
+    return targetValue ? (_b = standardOptions.find((option) => option.value === targetValue)) != null ? _b : null : null;
+  });
   const [newOptionPlaceholder, setNewOptionPlaceholder] = useState(initialPlaceholder);
   const [createdOptions, setCreatedOptions] = useState([]);
+  const [createNewOption, setCreateNewOption] = useState(false);
+  const [addFieldInputValue, setAddFieldInputValue] = useState("");
   function isCreationOption(option) {
     return option && typeof option.isCreation === "boolean";
   }
   const ref = useRef(null);
-  useOutsideClick({
-    ref,
-    handler: () => {
-      if (isCreationOption(selectedOption)) {
-        setSelectedOption(initialSelectedOption);
-        setNewOptionPlaceholder(initialPlaceholder);
-      }
+  const checkIfNewOptionTextExistsInOptions = (string, options) => any((option) => toLower(option.value) === string, options);
+  const handleCreateOption = (newOptionTextString) => {
+    setCreateNewOption(true);
+    if (isEmpty(trim(newOptionTextString))) {
+      return;
     }
-  });
-  const handleInputChange = (newValue) => {
-    setNewOptionText(newValue);
-  };
-  const handleCreateOption = () => {
-    const newOptionTextLower = newOptionText.toLowerCase();
-    const newOptionExists = standardOptions.some((option) => option.value.toLowerCase() === newOptionTextLower);
-    if (!newOptionExists) {
-      const newOption = { label: newOptionText, value: newOptionText };
-      setCreatedOptions((currentCreatedOptions) => [...currentCreatedOptions, newOption]);
+    const newOptionTextLower = toLower(newOptionTextString);
+    const newOptionExistsInStandardOptions = checkIfNewOptionTextExistsInOptions(newOptionTextLower, standardOptions);
+    const newOptionExistsInCreatedOptions = checkIfNewOptionTextExistsInOptions(
+      newOptionTextLower,
+      createdOptions
+    );
+    if (!newOptionExistsInCreatedOptions && !newOptionExistsInStandardOptions) {
+      const newOption = {
+        label: newOptionTextString,
+        value: newOptionTextString
+      };
+      setCreatedOptions((currentCreatedOptions) => [
+        ...currentCreatedOptions,
+        newOption
+      ]);
       setSelectedOption(newOption);
       onOptionChange(newOption);
     }
-    setNewOptionText("");
     setNewOptionPlaceholder(initialPlaceholder);
   };
   const handleChange = (newValue, _actionMeta) => {
     const option = newValue;
-    if (option === null) {
+    if (newValue == null ? void 0 : newValue.isCreation) {
+      setCreateNewOption(true);
+    }
+    if (option == null) {
       return;
     }
     if (isCreationOption(option)) {
@@ -13974,14 +13999,10 @@ const CreatableSelectDropdown = ({
     } else {
       setNewOptionPlaceholder(initialPlaceholder);
     }
-    setSelectedOption(option);
-    onOptionChange(option);
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" && newOptionText) {
-      handleCreateOption();
-      event.preventDefault();
+    if (option.value !== CREATION_OPTION_VALUE) {
+      setSelectedOption(option);
     }
+    onOptionChange(option);
   };
   const combinedOptions = [...standardOptions, ...createdOptions];
   const customOptions = [
@@ -13990,13 +14011,36 @@ const CreatableSelectDropdown = ({
     }),
     ...combinedOptions
   ];
-  return /* @__PURE__ */ React.createElement(Box, { ref }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { ref, w: "sm", maxW: "full" }, createNewOption && /* @__PURE__ */ React.createElement(
+    EditableText,
+    {
+      value: addFieldInputValue,
+      startWithEditView: true,
+      onChange: (v) => {
+        setAddFieldInputValue(v);
+      },
+      submitOnBlur: false,
+      onCancel: () => {
+        setAddFieldInputValue("");
+        setCreateNewOption(false);
+      },
+      onSubmit: (v) => {
+        handleCreateOption(v);
+        setCreateNewOption(false);
+      },
+      variant: "brand",
+      sx: {
+        minWidth: "100%",
+        width: "100%"
+      }
+    }
+  ), !createNewOption && /* @__PURE__ */ React.createElement(
     CreatableSelect,
     {
       menuPlacement,
       chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
         container: (provided) => __spreadProps(__spreadValues({}, provided), {
-          width
+          width: "100%"
         }),
         option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
           color: "black"
@@ -14007,11 +14051,11 @@ const CreatableSelectDropdown = ({
       value: selectedOption,
       onChange: handleChange,
       isMulti: false,
-      onInputChange: handleInputChange,
-      onKeyDown: handleKeyDown,
-      onCreateOption: handleCreateOption,
+      onCreateOption: (v) => {
+        setCreateNewOption(true);
+        setAddFieldInputValue(v);
+      },
       placeholder: newOptionPlaceholder,
-      inputValue: newOptionText,
       useBasicStyles: true,
       variant
     }