@bookjane2/bookjane-design-library 7.0.16 → 7.0.18

package/lib/components/BKJPhoneNumberInput/BKJPhoneNumberInput.stories.js

@@ -1,49 +1,49 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useState } from 'react';
-import { BKJPhoneNumberInput } from './BKJPhoneNumberInput.js';
-const setup = {
-    title: 'Input Elements/BKJPhoneNumberInput',
-    component: BKJPhoneNumberInput,
-    argTypes: {
-        label: {
-            name: 'Label Text',
-        },
-        error: {
-            name: 'Error Message',
-            control: {
-                type: 'text',
-            },
-        },
-        required: {
-            name: 'Required Field',
-        },
-        placeholder: {
-            name: 'Placeholder',
-        },
-        disabled: {
-            name: 'Disabled',
-        },
-        value: {
-            table: {
-                disable: true,
-            },
-        },
-    },
-};
-const Template = (args) => {
-    const [value, setValue] = useState(96969696921112222222222222);
-    const updateValue = useCallback((e) => {
-        setValue(e.target.value);
-    }, []);
-    return _jsx(BKJPhoneNumberInput, Object.assign({}, args, { value: value, onChange: updateValue }), void 0);
-};
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Phone Number',
-    required: false,
-    placeholder: '',
-    ref: React.createRef(),
-    name: 'phone',
-};
-export default setup;
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { BKJPhoneNumberInput } from './BKJPhoneNumberInput.js';
+const setup = {
+    title: 'Input Elements/BKJPhoneNumberInput',
+    component: BKJPhoneNumberInput,
+    argTypes: {
+        label: {
+            name: 'Label Text',
+        },
+        error: {
+            name: 'Error Message',
+            control: {
+                type: 'text',
+            },
+        },
+        required: {
+            name: 'Required Field',
+        },
+        placeholder: {
+            name: 'Placeholder',
+        },
+        disabled: {
+            name: 'Disabled',
+        },
+        value: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+};
+const Template = (args) => {
+    const [value, setValue] = useState(96969696921112222222222222);
+    const updateValue = useCallback((e) => {
+        setValue(e.target.value);
+    }, []);
+    return _jsx(BKJPhoneNumberInput, Object.assign({}, args, { value: value, onChange: updateValue }), void 0);
+};
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Phone Number',
+    required: false,
+    placeholder: '',
+    ref: React.createRef(),
+    name: 'phone',
+};
+export default setup;
 //# sourceMappingURL=BKJPhoneNumberInput.stories.js.map

package/lib/components/BKJPhoneNumberInput/BKJPhoneNumberInput.styled.d.ts

@@ -1,14 +1,14 @@
-export declare const IconTextInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const RequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    isFocused: boolean;
-}, never>;
-export declare const TextInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, any, never>;
-export declare const InputErrorMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconTextInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const RequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isFocused: boolean;
+}, never>;
+export declare const TextInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, any, never>;
+export declare const InputErrorMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=BKJPhoneNumberInput.styled.d.ts.map

package/lib/components/BKJPhoneNumberInput/BKJPhoneNumberInput.styled.js

@@ -1,36 +1,36 @@
-import styled, { css } from 'styled-components';
-import { InputBaseCSS, InputErrorMessageCSS, InputLabelCSS, InputRequiredAsteriskCSS, InputWrapperCSS, } from '../common/index.js';
-export const IconTextInputWrapper = styled.div `
-  ${InputWrapperCSS}
-`;
-export const InputLabel = styled.label `
-  ${InputLabelCSS}
-`;
-export const RequiredAsterisk = styled(InputLabel) `
-  ${InputRequiredAsteriskCSS}
-`;
-export const InputWrapper = styled.div `
-  display: flex;
-  position: relative;
-`;
-export const IconWrapper = styled.div `
-  height: 100%;
-  width: 38px;
-  display: flex;
-  font-size: 14px;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  ${({ isFocused }) => isFocused &&
-    css `
-      color: #342a6a;
-    `};
-`;
-export const TextInput = styled.input `
-  ${InputBaseCSS};
-`;
-export const InputErrorMessage = styled.p `
-  ${InputErrorMessageCSS}
-`;
+import styled, { css } from 'styled-components';
+import { InputBaseCSS, InputErrorMessageCSS, InputLabelCSS, InputRequiredAsteriskCSS, InputWrapperCSS, } from '../common/index.js';
+export const IconTextInputWrapper = styled.div `
+  ${InputWrapperCSS}
+`;
+export const InputLabel = styled.label `
+  ${InputLabelCSS}
+`;
+export const RequiredAsterisk = styled(InputLabel) `
+  ${InputRequiredAsteriskCSS}
+`;
+export const InputWrapper = styled.div `
+  display: flex;
+  position: relative;
+`;
+export const IconWrapper = styled.div `
+  height: 100%;
+  width: 38px;
+  display: flex;
+  font-size: 14px;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  ${({ isFocused }) => isFocused &&
+    css `
+      color: #342a6a;
+    `};
+`;
+export const TextInput = styled.input `
+  ${InputBaseCSS};
+`;
+export const InputErrorMessage = styled.p `
+  ${InputErrorMessageCSS}
+`;
 //# sourceMappingURL=BKJPhoneNumberInput.styled.js.map

package/lib/components/BKJPhoneNumberInput/BKJPhoneNumberInput.types.d.ts

@@ -1,14 +1,14 @@
-import { ChangeEvent } from 'react';
-import { IBKJTextInputProps } from '../BKJTextInput/BKJTextInput.types.js';
-declare type ExtendedChangeEvent = ChangeEvent<HTMLInputElement>['target'];
-interface EventTargetWithRawValue extends ExtendedChangeEvent {
-    raw: string;
-}
-interface EventWithRawValue extends Omit<ChangeEvent<HTMLInputElement>, 'target'> {
-    target: EventTargetWithRawValue;
-}
-export interface IBKJPhoneNumberInputProps extends Omit<IBKJTextInputProps, 'onChange'> {
-    onChange: (event: EventWithRawValue) => void;
-}
-export {};
+import { ChangeEvent } from 'react';
+import { IBKJTextInputProps } from '../BKJTextInput/BKJTextInput.types.js';
+declare type ExtendedChangeEvent = ChangeEvent<HTMLInputElement>['target'];
+interface EventTargetWithRawValue extends ExtendedChangeEvent {
+    raw: string;
+}
+interface EventWithRawValue extends Omit<ChangeEvent<HTMLInputElement>, 'target'> {
+    target: EventTargetWithRawValue;
+}
+export interface IBKJPhoneNumberInputProps extends Omit<IBKJTextInputProps, 'onChange'> {
+    onChange: (event: EventWithRawValue) => void;
+}
+export {};
 //# sourceMappingURL=BKJPhoneNumberInput.types.d.ts.map

package/lib/components/BKJPhoneNumberInput/BKJPhoneNumberInput.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=BKJPhoneNumberInput.types.js.map

package/lib/components/BKJPhoneNumberInput/index.d.ts

@@ -1,3 +1,3 @@
-import { BKJPhoneNumberInput } from './BKJPhoneNumberInput.js';
-export { BKJPhoneNumberInput };
+import { BKJPhoneNumberInput } from './BKJPhoneNumberInput.js';
+export { BKJPhoneNumberInput };
 //# sourceMappingURL=index.d.ts.map

package/lib/components/BKJPhoneNumberInput/index.js

@@ -1,3 +1,3 @@
-import { BKJPhoneNumberInput } from './BKJPhoneNumberInput.js';
-export { BKJPhoneNumberInput };
+import { BKJPhoneNumberInput } from './BKJPhoneNumberInput.js';
+export { BKJPhoneNumberInput };
 //# sourceMappingURL=index.js.map

package/lib/components/BKJPillDropdown/BKJPillDropdown.context.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IBKJPillDropdownContext, IBKJPillDropdownProvider } from './BKJPillDropdown.types.js';
-export declare const BKJPillDropdownProvider: FC<IBKJPillDropdownProvider>;
-export declare const useBKJPillDropdownContext: () => IBKJPillDropdownContext;
+import { FC } from 'react';
+import { IBKJPillDropdownContext, IBKJPillDropdownProvider } from './BKJPillDropdown.types.js';
+export declare const BKJPillDropdownProvider: FC<IBKJPillDropdownProvider>;
+export declare const useBKJPillDropdownContext: () => IBKJPillDropdownContext;
 //# sourceMappingURL=BKJPillDropdown.context.d.ts.map

package/lib/components/BKJPillDropdown/BKJPillDropdown.context.js

@@ -1,75 +1,75 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-const BKJPillDropdownContext = createContext(null);
-export const BKJPillDropdownProvider = ({ children, value = [], onChange, name, max, }) => {
-    const wrapperRef = useRef(null);
-    const inputRef = useRef(null);
-    const mouseDownTargetRef = useRef(null);
-    const [uuid] = useState(uuidv4());
-    const [inputValue, setInputValue] = useState('');
-    const [isFocused, setFocus] = useState(false);
-    const onInputFocused = useCallback((event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        inputRef.current?.focus();
-        setFocus(true);
-        inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        return void 0;
-    }, []);
-    const setNextValue = useCallback((nextValue) => {
-        if (nextValue) {
-            onChange({ target: { name, value: nextValue } });
-            setInputValue('');
-        }
-        return void 0;
-    }, [name, onChange]);
-    const onInputChange = useCallback((e) => {
-        setNextValue(e.target.value);
-        setFocus(false);
-    }, [setNextValue]);
-    const onChipRemove = useCallback((__VALUE__) => {
-        return (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            const index = value.indexOf(__VALUE__);
-            const nextValue = Array.from(value);
-            nextValue.splice(index, 1);
-            onChange({ target: { name, value: nextValue } });
-        };
-    }, [name, onChange, value]);
-    const onInputBlur = useCallback((event) => {
-        const containsTarget = event.currentTarget.contains(mouseDownTargetRef.current);
-        if (containsTarget)
-            event.stopPropagation();
-        if (isFocused) {
-            event.preventDefault();
-            event.stopPropagation();
-            setFocus(false);
-        }
-    }, [isFocused]);
-    const isMaxLimitReached = useMemo(() => {
-        return value.length > max;
-    }, [max, value.length]);
-    const onIsOpenChange = useCallback(({ isOpen }) => {
-        if (!isOpen)
-            setFocus(false);
-    }, []);
-    return (_jsx(BKJPillDropdownContext.Provider, Object.assign({ value: {
-            wrapperRef,
-            inputRef,
-            value,
-            inputValue,
-            onInputFocused,
-            onInputChange,
-            onInputBlur,
-            onChipRemove,
-            isFocused,
-            setInputValue,
-            uuid,
-            isMaxLimitReached,
-            onIsOpenChange,
-        } }, { children: children }), void 0));
-};
-export const useBKJPillDropdownContext = () => useContext(BKJPillDropdownContext);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+const BKJPillDropdownContext = createContext(null);
+export const BKJPillDropdownProvider = ({ children, value = [], onChange, name, max, }) => {
+    const wrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const mouseDownTargetRef = useRef(null);
+    const [uuid] = useState(uuidv4());
+    const [inputValue, setInputValue] = useState('');
+    const [isFocused, setFocus] = useState(false);
+    const onInputFocused = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        inputRef.current?.focus();
+        setFocus(true);
+        inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        return void 0;
+    }, []);
+    const setNextValue = useCallback((nextValue) => {
+        if (nextValue) {
+            onChange({ target: { name, value: nextValue } });
+            setInputValue('');
+        }
+        return void 0;
+    }, [name, onChange]);
+    const onInputChange = useCallback((e) => {
+        setNextValue(e.target.value);
+        setFocus(false);
+    }, [setNextValue]);
+    const onChipRemove = useCallback((__VALUE__) => {
+        return (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const index = value.indexOf(__VALUE__);
+            const nextValue = Array.from(value);
+            nextValue.splice(index, 1);
+            onChange({ target: { name, value: nextValue } });
+        };
+    }, [name, onChange, value]);
+    const onInputBlur = useCallback((event) => {
+        const containsTarget = event.currentTarget.contains(mouseDownTargetRef.current);
+        if (containsTarget)
+            event.stopPropagation();
+        if (isFocused) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocus(false);
+        }
+    }, [isFocused]);
+    const isMaxLimitReached = useMemo(() => {
+        return value.length > max;
+    }, [max, value.length]);
+    const onIsOpenChange = useCallback(({ isOpen }) => {
+        if (!isOpen)
+            setFocus(false);
+    }, []);
+    return (_jsx(BKJPillDropdownContext.Provider, Object.assign({ value: {
+            wrapperRef,
+            inputRef,
+            value,
+            inputValue,
+            onInputFocused,
+            onInputChange,
+            onInputBlur,
+            onChipRemove,
+            isFocused,
+            setInputValue,
+            uuid,
+            isMaxLimitReached,
+            onIsOpenChange,
+        } }, { children: children }), void 0));
+};
+export const useBKJPillDropdownContext = () => useContext(BKJPillDropdownContext);
 //# sourceMappingURL=BKJPillDropdown.context.js.map

package/lib/components/BKJPillDropdown/BKJPillDropdown.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { IBKJPillDropdown } from './BKJPillDropdown.types.js';
-export declare const BKJPillDropdown: FC<IBKJPillDropdown>;
+import { FC } from 'react';
+import { IBKJPillDropdown } from './BKJPillDropdown.types.js';
+export declare const BKJPillDropdown: FC<IBKJPillDropdown>;
 //# sourceMappingURL=BKJPillDropdown.d.ts.map

package/lib/components/BKJPillDropdown/BKJPillDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BKJPillDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AAYjD,OAAO,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AAmIpF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CA0BhD,CAAC"}
+{"version":3,"file":"BKJPillDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AAajD,OAAO,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AA4IpF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CA0BhD,CAAC"}

package/lib/components/BKJPillDropdown/BKJPillDropdown.js

@@ -1,28 +1,29 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef } from 'react';
-import { BKJChip } from '../index.js';
-import { Flex } from '../Flex/index.js';
-import { BKJPillDropdownProvider, useBKJPillDropdownContext } from './BKJPillDropdown.context.js';
-import { BKJPillDropdownComboBox, BKJPillDropdownWrapper, InputLabel, InputMessage, RequiredAsterisk, TextAreaWrapper, } from './BKJPillDropdown.styled.js';
-const InputComponent = forwardRef(({ onInputChange, value, isFocused, onIsOpenChange, options = [], placeholder, ...rest }, ref) => {
-    return (_jsx(BKJPillDropdownComboBox, Object.assign({}, rest, { overrides: ['HIDE_VALUE_LABEL', 'CHECKBOX_VARIANT'], ref: ref, action: "OpenToggle", name: "BKJPillDropdown_InputValue", placeholder: !!value?.length ? '' : placeholder, options: options, type: "Multiple", onIsOpenChange: onIsOpenChange, onChange: onInputChange, value: value, hasValue: value.length > 0, isFocused: isFocused }), void 0));
-});
-const BKJPillDropdownComponent = (props) => {
-    const { value, label, required, disabled, description, name, error, max, options, placeholder, ...rest } = props;
-    const { wrapperRef, inputRef, uuid, onChipRemove, onInputFocused, onInputChange, onInputBlur, isMaxLimitReached, onIsOpenChange, isFocused, } = useBKJPillDropdownContext();
-    return (_jsxs(BKJPillDropdownWrapper, { children: [label && (_jsxs(InputLabel, Object.assign({ disabled: disabled }, { children: [label, required && _jsx(RequiredAsterisk, { children: "\u00A0*" }, void 0)] }), void 0)),
-            value.length !== 0 && (_createElement(TextAreaWrapper, Object.assign({}, rest, { key: `BKJPillDropdown_${uuid}`, id: `BKJPillDropdown_${uuid}_TextAreaWrapper`, ref: wrapperRef, error: !!error || isMaxLimitReached, disabled: disabled, onMouseDown: onInputFocused, hasValue: value.length > 0, isFocused: isFocused }),
-                _jsx(Flex, Object.assign({ flexWrap: "wrap", gap: "4px", padding: value.length > 0 ? '8px 8px 0' : '8px 8px' }, { children: value.map((strValue) => {
-                        const MATCHED = options.find(({ value }) => value === strValue);
-                        if (!MATCHED)
-                            return _jsx(Fragment, {}, void 0);
-                        return (_jsx(BKJChip, Object.assign({ onClose: onChipRemove(MATCHED.value), variant: "Purple" }, { children: MATCHED.label }), MATCHED.value));
-                    }) }), void 0))),
-            value.length === 0 ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange, placeholder: placeholder }, void 0)) : isFocused ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange, placeholder: placeholder }, void 0)) : (_jsx(Fragment, {}, void 0)),
-            description && _jsx(InputMessage, { children: description }, void 0)] }, void 0));
-};
-export const BKJPillDropdown = ({ value = [], onChange, name, validations, max = 10, placeholder = '', ...rest }) => {
-    return (_jsx(BKJPillDropdownProvider, Object.assign({ value: value, onChange: onChange, name: name, validations: validations, max: max }, { children: _jsx(BKJPillDropdownComponent, Object.assign({ name: name, value: value, max: max }, rest, { placeholder: placeholder }), void 0) }), void 0));
-};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef } from 'react';
+import { BKJChip, BKJIcon } from '../index.js';
+import { Flex } from '../Flex/index.js';
+import { BKJPillDropdownProvider, useBKJPillDropdownContext } from './BKJPillDropdown.context.js';
+import { ArrowIconWrapper, BKJPillDropdownComboBox, BKJPillDropdownWrapper, InputLabel, InputMessage, RequiredAsterisk, TextAreaWrapper, } from './BKJPillDropdown.styled.js';
+const InputComponent = forwardRef(({ onInputChange, value, isFocused, onIsOpenChange, options = [], placeholder, ...rest }, ref) => {
+    return (_jsx(BKJPillDropdownComboBox, Object.assign({}, rest, { overrides: ['HIDE_VALUE_LABEL', 'CHECKBOX_VARIANT'], ref: ref, action: "OpenToggle", name: "BKJPillDropdown_InputValue", placeholder: !!value?.length ? '' : placeholder, options: options, type: "Multiple", onIsOpenChange: onIsOpenChange, onChange: onInputChange, value: value, hasValue: value.length > 0, isFocused: isFocused }), void 0));
+});
+const BKJPillDropdownComponent = (props) => {
+    const { value, label, required, disabled, description, name, error, max, options, placeholder, ...rest } = props;
+    const { wrapperRef, inputRef, uuid, onChipRemove, onInputFocused, onInputChange, onInputBlur, isMaxLimitReached, onIsOpenChange, isFocused, } = useBKJPillDropdownContext();
+    return (_jsxs(BKJPillDropdownWrapper, { children: [label && (_jsxs(InputLabel, Object.assign({ disabled: disabled }, { children: [label, required && _jsx(RequiredAsterisk, { children: "\u00A0*" }, void 0)] }), void 0)),
+            value.length !== 0 && (_createElement(TextAreaWrapper, Object.assign({}, rest, { key: `BKJPillDropdown_${uuid}`, id: `BKJPillDropdown_${uuid}_TextAreaWrapper`, ref: wrapperRef, error: !!error || isMaxLimitReached, disabled: disabled, onMouseDown: onInputFocused, hasValue: value.length > 0, isFocused: isFocused }),
+                _jsxs(Flex, Object.assign({ flexWrap: "wrap", gap: "4px", padding: value.length > 0 ? '8px 8px 0' : '8px 8px', margin: "0 17px 0 0" }, { children: [value.map((strValue) => {
+                            const MATCHED = options.find(({ value }) => value === strValue);
+                            if (!MATCHED)
+                                return _jsx(Fragment, {}, void 0);
+                            return (_jsx(BKJChip, Object.assign({ onClose: onChipRemove(MATCHED.value), variant: "Purple" }, { children: MATCHED.label }), MATCHED.value));
+                        }),
+                        _jsx(ArrowIconWrapper, { children: _jsx(BKJIcon, { iconName: isFocused ? 'ArrowUp' : 'ArrowDown' }, void 0) }, void 0)] }), void 0))),
+            value.length === 0 ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange, placeholder: placeholder }, void 0)) : isFocused ? (_jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange, placeholder: placeholder }, void 0)) : (_jsx(Fragment, {}, void 0)),
+            description && _jsx(InputMessage, { children: description }, void 0)] }, void 0));
+};
+export const BKJPillDropdown = ({ value = [], onChange, name, validations, max = 10, placeholder = '', ...rest }) => {
+    return (_jsx(BKJPillDropdownProvider, Object.assign({ value: value, onChange: onChange, name: name, validations: validations, max: max }, { children: _jsx(BKJPillDropdownComponent, Object.assign({ name: name, value: value, max: max }, rest, { placeholder: placeholder }), void 0) }), void 0));
+};
 //# sourceMappingURL=BKJPillDropdown.js.map

package/lib/components/BKJPillDropdown/BKJPillDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BKJPillDropdown.js","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BKJPillDropdown.js","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAM,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAC/F,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAGlC,MAAM,cAAc,GAAG,UAAU,CAa/B,CACE,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,GAAG,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,EACvF,GAAG,EACH,EAAE;IACF,OAAO,CACL,KAAC,uBAAuB,oBAClB,IAAI,IACR,SAAS,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,EACnD,GAAG,EAAE,GAAG,EACR,MAAM,EAAC,YAAY,EACnB,IAAI,EAAC,4BAA4B,EACjC,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAC/C,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,UAAU,EACf,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,EAC1B,SAAS,EAAE,SAAS,YACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,wBAAwB,GAA2D,CACvF,KAAK,EACL,EAAE;IACF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,GAAG,EACH,OAAO,EACP,WAAW,EACX,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,MAAM,EACJ,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,SAAS,GACV,GAAG,yBAAyB,EAAE,CAAC;IAEhC,OAAO,CACL,MAAC,sBAAsB,eACpB,KAAK,IAAI,CACR,MAAC,UAAU,kBAAC,QAAQ,EAAE,QAAQ,iBAC3B,KAAK,EACL,QAAQ,IAAI,KAAC,gBAAgB,kCAA2B,aAC9C,CACd;YACA,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CACrB,eAAC,eAAe,oBACV,IAAI,IACR,GAAG,EAAE,mBAAmB,IAAI,EAAE,EAC9B,EAAE,EAAE,mBAAmB,IAAI,kBAAkB,EAC7C,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,iBAAiB,EACnC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,cAAc,EAC3B,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,EAC1B,SAAS,EAAE,SAAS;gBAEpB,MAAC,IAAI,kBACH,QAAQ,EAAC,MAAM,EACf,GAAG,EAAC,KAAK,EACT,OAAO,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACnD,MAAM,EAAC,YAAY,iBAElB,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;4BACtB,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC;4BAChE,IAAI,CAAC,OAAO;gCAAE,OAAO,KAAC,QAAQ,aAAG,CAAC;4BAClC,OAAO,CACL,KAAC,OAAO,kBAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAC,QAAQ,gBAC5D,OAAO,CAAC,KAAK,KADqD,OAAO,CAAC,KAAK,CAExE,CACX,CAAC;wBACJ,CAAC,CAAC;wBAEF,KAAC,gBAAgB,cACf,KAAC,OAAO,IAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,WAAI,WACzC,aACd,CACS,CACnB;YACA,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,KAAC,cAAc,IACb,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,WACxB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACd,KAAC,cAAc,IACb,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,WACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,aAAG,CACb;YACA,WAAW,IAAI,KAAC,YAAY,cAAE,WAAW,WAAgB,YACnC,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,EACpD,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,GAAG,GAAG,EAAE,EACR,WAAW,GAAG,EAAE,EAChB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,KAAC,uBAAuB,kBACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,gBAER,KAAC,wBAAwB,kBACvB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,WAAW,EAAE,WAAW,YACxB,YACsB,CAC3B,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/BKJPillDropdown/BKJPillDropdown.stories.d.ts

@@ -1,36 +1,36 @@
-/// <reference types="react" />
-import { IBKJPillDropdown } from './BKJPillDropdown.types.js';
-import { Story } from '@storybook/react';
-declare const setup: {
-    title: string;
-    component: import("react").FC<IBKJPillDropdown>;
-    argTypes: {
-        label: {
-            name: string;
-        };
-        error: {
-            name: string;
-            control: {
-                type: string;
-            };
-        };
-        height: {
-            name: string;
-        };
-        required: {
-            name: string;
-        };
-        placeholder: {
-            name: string;
-        };
-        disabled: {
-            name: string;
-        };
-        value: {
-            name: string;
-        };
-    };
-};
-export declare const Default: Story<IBKJPillDropdown>;
-export default setup;
+/// <reference types="react" />
+import { IBKJPillDropdown } from './BKJPillDropdown.types.js';
+import { Story } from '@storybook/react';
+declare const setup: {
+    title: string;
+    component: import("react").FC<IBKJPillDropdown>;
+    argTypes: {
+        label: {
+            name: string;
+        };
+        error: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        height: {
+            name: string;
+        };
+        required: {
+            name: string;
+        };
+        placeholder: {
+            name: string;
+        };
+        disabled: {
+            name: string;
+        };
+        value: {
+            name: string;
+        };
+    };
+};
+export declare const Default: Story<IBKJPillDropdown>;
+export default setup;
 //# sourceMappingURL=BKJPillDropdown.stories.d.ts.map