@bookjane2/bookjane-design-library 7.2.9 → 7.3.1

package/lib/components/BKJPillDropdown/BKJPillDropdown.js

@@ -1,29 +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, 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))),
-            _jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange, placeholder: placeholder }, 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))),
+            _jsx(InputComponent, { ref: inputRef, options: options, isFocused: isFocused, value: value, onInputChange: onInputChange, onBlur: onInputBlur, onIsOpenChange: onIsOpenChange, placeholder: placeholder }, 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.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

package/lib/components/BKJPillDropdown/BKJPillDropdown.stories.js

@@ -1,72 +1,72 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BKJPillDropdown } from './BKJPillDropdown.js';
-import { useFormBehaviors } from '../../hooks/index.js';
-import uniq from 'lodash/uniq';
-import filter from 'lodash/filter';
-import includes from 'lodash/includes';
-const setup = {
-    title: 'Input Elements/BKJPillDropdown',
-    component: BKJPillDropdown,
-    argTypes: {
-        label: {
-            name: 'Label Text',
-        },
-        error: {
-            name: 'Error Message',
-            control: {
-                type: 'text',
-            },
-        },
-        height: {
-            name: 'Height',
-        },
-        required: {
-            name: 'Required Field',
-        },
-        placeholder: {
-            name: 'Placeholder',
-        },
-        disabled: {
-            name: 'Disabled',
-        },
-        value: {
-            name: 'Array Items',
-        },
-    },
-};
-const initialState = {
-    data: ['1'],
-};
-function VALIDATION_unique(data) {
-    let errs = [];
-    const hasDuplicates = uniq(data).length !== data.length;
-    const duplicates = uniq(filter(data, (val, i, iteratee) => includes(iteratee, val, i + 1)));
-    if (data.length === 0)
-        errs.push('At least 1 option is required');
-    if (hasDuplicates)
-        [`Remove duplicate values`, ...duplicates.map((str) => `\t• ${str}`)].forEach((item) => errs.push(item));
-    if (errs.length)
-        return errs;
-    return '';
-}
-const opts = [...Array(300)].map((_, i) => {
-    return { id: String(i + 1), label: `Item Number #${i + 1}`, value: String(i + 1) };
-});
-const Template = (props) => {
-    const { values: { data }, onChange, fieldErrors, } = useFormBehaviors({
-        initialState,
-        onSubmit: console.log,
-        validations: {
-            data: VALIDATION_unique,
-        },
-    });
-    return (_jsx(BKJPillDropdown, Object.assign({}, props, { options: opts, max: 200, onChange: onChange, name: "data", value: data, error: fieldErrors['data'] }), void 0));
-};
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Employment Status',
-    required: true,
-    placeholder: "Type or paste a list of dropdown values, so that there's one value per line.",
-};
-export default setup;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BKJPillDropdown } from './BKJPillDropdown.js';
+import { useFormBehaviors } from '../../hooks/index.js';
+import uniq from 'lodash/uniq';
+import filter from 'lodash/filter';
+import includes from 'lodash/includes';
+const setup = {
+    title: 'Input Elements/BKJPillDropdown',
+    component: BKJPillDropdown,
+    argTypes: {
+        label: {
+            name: 'Label Text',
+        },
+        error: {
+            name: 'Error Message',
+            control: {
+                type: 'text',
+            },
+        },
+        height: {
+            name: 'Height',
+        },
+        required: {
+            name: 'Required Field',
+        },
+        placeholder: {
+            name: 'Placeholder',
+        },
+        disabled: {
+            name: 'Disabled',
+        },
+        value: {
+            name: 'Array Items',
+        },
+    },
+};
+const initialState = {
+    data: ['1'],
+};
+function VALIDATION_unique(data) {
+    let errs = [];
+    const hasDuplicates = uniq(data).length !== data.length;
+    const duplicates = uniq(filter(data, (val, i, iteratee) => includes(iteratee, val, i + 1)));
+    if (data.length === 0)
+        errs.push('At least 1 option is required');
+    if (hasDuplicates)
+        [`Remove duplicate values`, ...duplicates.map((str) => `\t• ${str}`)].forEach((item) => errs.push(item));
+    if (errs.length)
+        return errs;
+    return '';
+}
+const opts = [...Array(300)].map((_, i) => {
+    return { id: String(i + 1), label: `Item Number #${i + 1}`, value: String(i + 1) };
+});
+const Template = (props) => {
+    const { values: { data }, onChange, fieldErrors, } = useFormBehaviors({
+        initialState,
+        onSubmit: console.log,
+        validations: {
+            data: VALIDATION_unique,
+        },
+    });
+    return (_jsx(BKJPillDropdown, Object.assign({}, props, { options: opts, max: 200, onChange: onChange, name: "data", value: data, error: fieldErrors['data'] }), void 0));
+};
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Employment Status',
+    required: true,
+    placeholder: "Type or paste a list of dropdown values, so that there's one value per line.",
+};
+export default setup;
 //# sourceMappingURL=BKJPillDropdown.stories.js.map

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

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-import { IBKJPillDropdownContext, TextAreaWrapperProps } from './BKJPillDropdown.types.js';
-export declare const InputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, Partial<Pick<IBKJPillDropdownContext, "inputValue" | "isMaxLimitReached">>, never>;
-export declare const RequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const BKJPillDropdownWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const TextAreaWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TextAreaWrapperProps, never>;
-export declare const BKJPillDropdownComboBox: import("styled-components").StyledComponent<import("react").FC<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxProps<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxOption<string | number, string, string | number>>>, import("styled-components").DefaultTheme, {
-    hasValue: boolean;
-    isFocused: boolean;
-}, never>;
-export declare const ArrowIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/// <reference types="react" />
+import { IBKJPillDropdownContext, TextAreaWrapperProps } from './BKJPillDropdown.types.js';
+export declare const InputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputMessage: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, Partial<Pick<IBKJPillDropdownContext, "inputValue" | "isMaxLimitReached">>, never>;
+export declare const RequiredAsterisk: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const BKJPillDropdownWrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextAreaWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TextAreaWrapperProps, never>;
+export declare const BKJPillDropdownComboBox: import("styled-components").StyledComponent<import("react").FC<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxProps<import("../BKJComboBox/BKJComboBox.types.js").IBKJComboBoxOption<string | number, string, string | number>>>, import("styled-components").DefaultTheme, {
+    hasValue: boolean;
+    isFocused: boolean;
+}, never>;
+export declare const ArrowIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=BKJPillDropdown.styled.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BKJPillDropdown.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.styled.ts"],"names":[],"mappings":";AASA,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGxF,eAAO,MAAM,UAAU;;SAEtB,CAAC;AAEF,eAAO,MAAM,YAAY,2GAExB,CAAC;AAEF,eAAO,MAAM,YAAY,mLAYxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SAE5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,2GAIlC,CAAC;AAEF,eAAO,MAAM,eAAe,2HA8C3B,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,OAAO;eACN,OAAO;SAkBnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC"}
+{"version":3,"file":"BKJPillDropdown.styled.d.ts","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.styled.ts"],"names":[],"mappings":";AASA,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGxF,eAAO,MAAM,UAAU;;SAEtB,CAAC;AAEF,eAAO,MAAM,YAAY,2GAExB,CAAC;AAEF,eAAO,MAAM,YAAY,mLAYxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SAE5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,2GAIlC,CAAC;AAEF,eAAO,MAAM,eAAe,2HAwB3B,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,OAAO;eACN,OAAO;SAuBnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC"}

package/lib/components/BKJPillDropdown/BKJPillDropdown.styled.js

@@ -1,94 +1,80 @@
-import styled, { css } from 'styled-components';
-import { InputBaseCSS, InputErrorMessageCSS, InputLabelCSS, InputMessageCSS, InputRequiredAsteriskCSS, InputWrapperCSS, } from '../common/index.js';
-import { BKJComboBox } from '../BKJComboBox/index.js';
-export const InputLabel = styled.label `
-  ${InputLabelCSS}
-`;
-export const ErrorMessage = styled.label `
-  ${InputErrorMessageCSS}
-`;
-export const InputMessage = styled.label `
-  ${InputMessageCSS};
-
-  ${({ isMaxLimitReached }) => {
-    if (isMaxLimitReached)
-        return css `
-        color: ${({ theme }) => theme.colors.ErrorDefault};
-      `;
-    return css ``;
-}}
-`;
-export const RequiredAsterisk = styled(InputLabel) `
-  ${InputRequiredAsteriskCSS}
-`;
-export const BKJPillDropdownWrapper = styled.label `
-  ${InputWrapperCSS};
-  display: flex;
-  flex-direction: column;
-`;
-export const TextAreaWrapper = styled.div `
-  ${InputBaseCSS};
-  border: 1px solid ${({ theme }) => theme.colors.Grey6};
-
-  height: auto;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: overlay;
-  position: relative;
-
-  z-index: 1;
-
-  ${({ isFocused, theme }) => !isFocused &&
-    css `
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-      border-bottom: 1px solid ${theme.colors.Grey6};
-      padding-bottom: 8px;
-      margin-bottom: -16px;
-    `};
-  ${({ hasValue }) => !hasValue &&
-    css `
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-      border-bottom: none;
-    `};
-  ${({ isFocused, hasValue }) => isFocused &&
-    hasValue &&
-    css `
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-      border-bottom: none;
-    `};
-  ${({ isFocused, hasValue, theme }) => !isFocused &&
-    !hasValue &&
-    css `
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-      border-bottom: 1px solid ${theme.colors.Grey6};
-    `};
-`;
-export const BKJPillDropdownComboBox = styled(BKJComboBox) `
-  ${({ hasValue }) => hasValue &&
-    css `
-      input {
-        border-top-left-radius: 0px !important;
-        border-top-right-radius: 0px !important;
-        border-top: none !important;
-        margin-top: -27px;
-        color: transparent;
-      }
-      .bkj-combobox-dropdown-icon {
-        svg {
-          display: none;
-        }
-      }
-    `};
-`;
-export const ArrowIconWrapper = styled.div `
-  position: absolute;
-  top: 7px;
-  right: 8px;
-`;
+import styled, { css } from 'styled-components';
+import { InputBaseCSS, InputErrorMessageCSS, InputLabelCSS, InputMessageCSS, InputRequiredAsteriskCSS, InputWrapperCSS, } from '../common/index.js';
+import { BKJComboBox } from '../BKJComboBox/index.js';
+export const InputLabel = styled.label `
+  ${InputLabelCSS}
+`;
+export const ErrorMessage = styled.label `
+  ${InputErrorMessageCSS}
+`;
+export const InputMessage = styled.label `
+  ${InputMessageCSS};
+
+  ${({ isMaxLimitReached }) => {
+    if (isMaxLimitReached)
+        return css `
+        color: ${({ theme }) => theme.colors.ErrorDefault};
+      `;
+    return css ``;
+}}
+`;
+export const RequiredAsterisk = styled(InputLabel) `
+  ${InputRequiredAsteriskCSS}
+`;
+export const BKJPillDropdownWrapper = styled.label `
+  ${InputWrapperCSS};
+  display: flex;
+  flex-direction: column;
+`;
+export const TextAreaWrapper = styled.div `
+  ${InputBaseCSS};
+  border: 1px solid ${({ theme }) => theme.colors.Grey6};
+
+  height: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: overlay;
+  position: relative;
+
+  z-index: 1;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+
+  ${({ isFocused, hasValue, theme }) => !isFocused &&
+    !hasValue &&
+    css `
+      border-bottom: 1px solid ${theme.colors.Grey6};
+    `};
+`;
+export const BKJPillDropdownComboBox = styled(BKJComboBox) `
+  ${({ hasValue }) => hasValue
+    ? css `
+          input {
+            border-top-left-radius: 0px !important;
+            border-top-right-radius: 0px !important;
+            border-top: none !important;
+            margin-top: -30px;
+            color: transparent;
+          }
+          .bkj-combobox-dropdown-icon {
+            svg {
+              display: none;
+            }
+          }
+        `
+    : css `
+          input {
+            height: 46px;
+          }
+        `};
+`;
+export const ArrowIconWrapper = styled.div `
+  position: absolute;
+  top: 7px;
+  right: 8px;
+`;
 //# sourceMappingURL=BKJPillDropdown.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BKJPillDropdown.styled.js","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,eAAe,EACf,wBAAwB,EACxB,eAAe,GAChB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;IAClC,aAAa;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;IACpC,oBAAoB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAEvC;IACG,eAAe;;IAEf,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAC1B,IAAI,iBAAiB;QACnB,OAAO,GAAG,CAAA;iBACC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;OAClD,CAAC;IACJ,OAAO,GAAG,CAAA,EAAE,CAAC;AACf,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;IAC9C,wBAAwB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,KAAK,CAAA;IAC9C,eAAe;;;CAGlB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAsB;IAC3D,YAAY;sBACM,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;IAYnD,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CACzB,CAAC,SAAS;IACV,GAAG,CAAA;;;iCAG0B,KAAK,CAAC,MAAM,CAAC,KAAK;;;KAG9C;IACD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,CAAC,QAAQ;IACT,GAAG,CAAA;;;;KAIF;IACD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC5B,SAAS;IACT,QAAQ;IACR,GAAG,CAAA;;;;KAIF;IACD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACnC,CAAC,SAAS;IACV,CAAC,QAAQ;IACT,GAAG,CAAA;;;iCAG0B,KAAK,CAAC,MAAM,CAAC,KAAK;KAC9C;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CAGxD;IACE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIzC,CAAC"}
+{"version":3,"file":"BKJPillDropdown.styled.js","sourceRoot":"","sources":["../../../src/components/BKJPillDropdown/BKJPillDropdown.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,eAAe,EACf,wBAAwB,EACxB,eAAe,GAChB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;IAClC,aAAa;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;IACpC,oBAAoB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAEvC;IACG,eAAe;;IAEf,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAC1B,IAAI,iBAAiB;QACnB,OAAO,GAAG,CAAA;iBACC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;OAClD,CAAC;IACJ,OAAO,GAAG,CAAA,EAAE,CAAC;AACf,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;IAC9C,wBAAwB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,KAAK,CAAA;IAC9C,eAAe;;;CAGlB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAsB;IAC3D,YAAY;sBACM,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;;IAgBnD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACnC,CAAC,SAAS;IACV,CAAC,QAAQ;IACT,GAAG,CAAA;iCAC0B,KAAK,CAAC,MAAM,CAAC,KAAK;KAC9C;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CAGxD;IACE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACN,CAAC,CAAC,GAAG,CAAA;;;;;;;;;;;;;SAaF;IACH,CAAC,CAAC,GAAG,CAAA;;;;SAIF;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIzC,CAAC"}

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

@@ -1,48 +1,48 @@
-import { Dispatch, FocusEventHandler, InputHTMLAttributes, MouseEventHandler, RefObject, SetStateAction } from 'react';
-import { BKJTextInputValueType, ChangeFunctionType, FormValidationErrorMessageType } from '../../common.types.js';
-import { IBKJComboBoxOption, IBKJComboBoxProps } from '../BKJComboBox/BKJComboBox.types.js';
-export interface IBKJPillDropdownProvider {
-    readonly value?: string[];
-    readonly onChange: IBKJPillDropdownContext['onInputChange'];
-    readonly name: string;
-    readonly validations: IBKJPillDropdown['validations'];
-    readonly max: IBKJPillDropdown['max'];
-}
-export interface IBKJPillDropdownContext extends InputHTMLAttributes<HTMLInputElement> {
-    wrapperRef: RefObject<HTMLDivElement>;
-    inputRef: RefObject<HTMLInputElement>;
-    readonly value: string[];
-    inputValue: string;
-    setInputValue: Dispatch<SetStateAction<string>>;
-    onInputFocused: MouseEventHandler<HTMLDivElement>;
-    onInputChange: ChangeFunctionType;
-    onInputBlur: FocusEventHandler<HTMLInputElement>;
-    isFocused: boolean;
-    onIsOpenChange: (args: {}) => void;
-    onChipRemove: (label: string) => MouseEventHandler<HTMLDivElement>;
-    uuid: string;
-    isMaxLimitReached: boolean;
-    options?: IBKJComboBoxProps['options'];
-}
-export interface IBKJPillDropdown extends InputHTMLAttributes<any> {
-    readonly options: IBKJComboBoxProps<IBKJComboBoxOption<string>>['options'];
-    readonly label?: string;
-    readonly required?: boolean;
-    readonly disabled?: boolean;
-    readonly description?: string;
-    readonly error?: FormValidationErrorMessageType;
-    readonly value: BKJTextInputValueType[];
-    readonly onChange: ChangeFunctionType;
-    readonly name: string;
-    readonly placeholder?: string;
-    readonly validations: Array<() => string | string[] | true>;
-    readonly max: number;
-    children?: JSX.Element | JSX.Element[] | any;
-}
-export interface TextAreaWrapperProps {
-    disabled?: boolean;
-    hasValue?: boolean;
-    isFocused?: boolean;
-    error?: FormValidationErrorMessageType;
-}
+import { Dispatch, FocusEventHandler, InputHTMLAttributes, MouseEventHandler, RefObject, SetStateAction } from 'react';
+import { BKJTextInputValueType, ChangeFunctionType, FormValidationErrorMessageType } from '../../common.types.js';
+import { IBKJComboBoxOption, IBKJComboBoxProps } from '../BKJComboBox/BKJComboBox.types.js';
+export interface IBKJPillDropdownProvider {
+    readonly value?: string[];
+    readonly onChange: IBKJPillDropdownContext['onInputChange'];
+    readonly name: string;
+    readonly validations: IBKJPillDropdown['validations'];
+    readonly max: IBKJPillDropdown['max'];
+}
+export interface IBKJPillDropdownContext extends InputHTMLAttributes<HTMLInputElement> {
+    wrapperRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLInputElement>;
+    readonly value: string[];
+    inputValue: string;
+    setInputValue: Dispatch<SetStateAction<string>>;
+    onInputFocused: MouseEventHandler<HTMLDivElement>;
+    onInputChange: ChangeFunctionType;
+    onInputBlur: FocusEventHandler<HTMLInputElement>;
+    isFocused: boolean;
+    onIsOpenChange: (args: {}) => void;
+    onChipRemove: (label: string) => MouseEventHandler<HTMLDivElement>;
+    uuid: string;
+    isMaxLimitReached: boolean;
+    options?: IBKJComboBoxProps['options'];
+}
+export interface IBKJPillDropdown extends InputHTMLAttributes<any> {
+    readonly options: IBKJComboBoxProps<IBKJComboBoxOption<string>>['options'];
+    readonly label?: string;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly description?: string;
+    readonly error?: FormValidationErrorMessageType;
+    readonly value: BKJTextInputValueType[];
+    readonly onChange: ChangeFunctionType;
+    readonly name: string;
+    readonly placeholder?: string;
+    readonly validations: Array<() => string | string[] | true>;
+    readonly max: number;
+    children?: JSX.Element | JSX.Element[] | any;
+}
+export interface TextAreaWrapperProps {
+    disabled?: boolean;
+    hasValue?: boolean;
+    isFocused?: boolean;
+    error?: FormValidationErrorMessageType;
+}
 //# sourceMappingURL=BKJPillDropdown.types.d.ts.map

package/lib/components/BKJPillDropdown/BKJPillDropdown.types.js

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

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

@@ -1,2 +1,2 @@
-export * from './BKJPillDropdown.js';
+export * from './BKJPillDropdown.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/BKJPillDropdown/index.js

@@ -1,2 +1,2 @@
-export * from './BKJPillDropdown.js';
+export * from './BKJPillDropdown.js';
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IBKJPillSelectContext, IBKJPillSelectProvider } from './BKJPillSelect.types.js';
-export declare const BKJPillSelectProvider: FC<IBKJPillSelectProvider>;
-export declare const useBKJPillSelectContext: () => IBKJPillSelectContext;
+import { FC } from 'react';
+import { IBKJPillSelectContext, IBKJPillSelectProvider } from './BKJPillSelect.types.js';
+export declare const BKJPillSelectProvider: FC<IBKJPillSelectProvider>;
+export declare const useBKJPillSelectContext: () => IBKJPillSelectContext;
 //# sourceMappingURL=BKJPillSelect.context.d.ts.map