bianic-ui 1.9.2 → 1.10.0

package/dist/esm/types/components/Forms/DatePicker/DatePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DatePickerProps extends React.HTMLAttributes<HTMLInputElement> {
+    value?: Date;
+}
+declare function DatePicker({ value, onChange }: DatePickerProps): React.JSX.Element;
+export default DatePicker;

package/dist/esm/types/components/Forms/DatePicker/DatePickerSimulation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Simulation: () => React.JSX.Element;
+export default Simulation;

package/dist/esm/types/components/Forms/DatePicker/PickerCalendar.d.ts

@@ -0,0 +1,7 @@
+import React, { ChangeEvent, ComponentPropsWithRef } from 'react';
+interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
+    selectedDate?: Date;
+    onDateChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const PickerCalendar: ({ selectedDate, onDateChange, ref, }: PickerCalendarProps) => React.JSX.Element;
+export default PickerCalendar;

package/dist/esm/types/components/Forms/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker';

package/dist/esm/types/components/Forms/Dropdown/DropdownItem.d.ts

@@ -1,12 +1,15 @@
 import React, { ComponentPropsWithRef, ReactNode } from 'react';
+interface valueObject {
+    [key: string]: any;
+}
 export interface DropdownItemProps extends Omit<ComponentPropsWithRef<'button'>, 'content'> {
     children?: ReactNode | undefined;
     content: string | ReactNode;
     className?: string;
-    onClickItem?: (event: React.MouseEvent<HTMLElement>, val: string | number) => void;
+    onClickItem?: (event: React.MouseEvent<HTMLElement>, val: string | number | valueObject) => void;
     onClose?: () => void;
     size?: 'sm' | 'md';
-    value?: string | number;
+    value?: string | number | valueObject;
     disabled?: boolean;
     zIndex?: number;
 }

package/dist/esm/types/components/Forms/Dropdown/config.d.ts

@@ -1,4 +1,8 @@
-declare const sizeConfig: {
+declare const containerSizeConfig: {
+    sm: string;
+    md: string;
+};
+declare const itemSizeConfig: {
     sm: string;
     md: string;
 };
@@ -6,4 +10,4 @@ declare const fontConfig: {
     sm: string;
     md: string;
 };
-export { sizeConfig, fontConfig };
+export { containerSizeConfig, fontConfig, itemSizeConfig };

package/dist/esm/types/components/Forms/SegmentButton/SegmentButtonItem.d.ts

@@ -7,4 +7,4 @@ export interface SegmentButtonItemProps extends ComponentPropsWithoutRef<'button
     isfitContent?: boolean;
     onClick: () => void;
 }
-export default function SegmentButtonItem({ selected, size, children, disabled, isfitContent, onClick, }: SegmentButtonItemProps): React.JSX.Element;
+export default function SegmentButtonItem({ className, selected, size, children, disabled, isfitContent, onClick, }: SegmentButtonItemProps): React.JSX.Element;

package/dist/esm/types/components/Forms/SegmentButton/config.d.ts

@@ -20,4 +20,10 @@ declare const minWidthConfig: {
     sm: string;
     tn: string;
 };
-export { isSelectedConfig, roundedConfig, sizeConfig, minWidthConfig };
+declare const minHeightConfig: {
+    lg: string;
+    md: string;
+    sm: string;
+    tn: string;
+};
+export { isSelectedConfig, roundedConfig, sizeConfig, minWidthConfig, minHeightConfig, };

package/dist/esm/types/components/Forms/SelectInput/Example/CustomDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CustomDropdown: () => React.JSX.Element;
+export default CustomDropdown;

package/dist/esm/types/components/Forms/SelectInput/PropsInterface.d.ts

@@ -1,16 +1,19 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { DropdownContainerProps } from '../Dropdown/DropdownContainer';
 interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     descText?: string;
     disabled?: boolean;
     id?: string;
     size?: 'md' | 'sm';
     label?: string;
-    options: any;
+    options?: any;
     required?: boolean;
     selected?: string | number | {
         label: string | null;
     };
     setSelected?: any;
     onClickDropdown?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    children?: React.ReactNode;
+    dropContProps?: Omit<DropdownContainerProps, 'children'>;
 }
 export default SelectInputProps;

package/dist/esm/types/components/Forms/SelectInput/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import SelectInputProps from './PropsInterface';
-declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, ...props }: SelectInputProps): React.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;

package/dist/esm/types/components/Forms/TextInput/PropsInterface.d.ts

@@ -1,5 +1,5 @@
-import { ChangeEvent, ComponentPropsWithoutRef } from 'react';
-interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+import { ChangeEvent, ComponentPropsWithRef } from 'react';
+interface TextInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
     descText?: string;
     disabled?: boolean;
     icon?: React.ReactNode;

package/dist/esm/types/components/Forms/TextInput/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import TextInputProps from './PropsInterface';
 import './style.css';
-declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ...props }: TextInputProps): React.JSX.Element;
+declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ref, ...props }: TextInputProps): React.JSX.Element;
 declare namespace TextInput {
     var defaultProps: {
         descText: string;

package/dist/esm/types/components/Forms/index.d.ts

@@ -8,3 +8,4 @@ export { default as Toggle } from './Toggle';
 export { SegmentButtonItem, SegmentButtonGroup } from './SegmentButton';
 export { FormGroup, FormGroupButton, FormGroupLabel } from './Group';
 export { DropdownContainer, DropdownItem } from './Dropdown';
+export { default as DatePicker } from './DatePicker/DatePicker';

package/dist/esm/types/components/index.d.ts

@@ -10,7 +10,7 @@ export { default as Color } from './Color';
 export { default as Divider } from './Divider/Divider';
 export { default as FileTree } from './FileTree';
 export { MenuContainer, MenuItem } from './Menu';
-export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, } from './Forms';
+export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, } from './Forms';
 export * from './Icons';
 export { default as Modal } from './Modal/Modal';
 export { default as PaginationBar } from './PaginationBar/PaginationBar';

package/dist/esm/types/stories/Form/DatePicker/Datepicker.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { DatePicker } from '../../../components';
+declare const meta: {
+    title: string;
+    component: typeof DatePicker;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DateInputDemo: Story;

package/dist/esm/types/stories/Form/DatePicker/DatepickerSimulation.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SimulationDemo: Story;

package/dist/esm/types/stories/Form/SegmentButton.stories.d.ts

@@ -12,3 +12,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Demo: Story;
+export declare const IconOnlyDemo: Story;

package/dist/esm/types/stories/Form/SelectInput/SelectInput.stories.d.ts

@@ -12,4 +12,3 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Demo: Story;
 export declare const WithCaption: Story;
-export declare const CustomOption: Story;

package/dist/esm/types/stories/Form/SelectInput/SelectInputCustom.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CustomDropdown: Story;

package/dist/esm/types/utility/helper.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 declare const childrenElement: (element: any) => any;
 declare const validUnion: (value: any, union: any) => any;
-declare const useDetectOutsideClick: (ref: React.RefObject<HTMLElement>, initialState: boolean, event?: string) => (boolean | import("react").Dispatch<import("react").SetStateAction<boolean>>)[];
+declare const useDetectOutsideClick: (ref: React.RefObject<HTMLElement>, initialState: boolean, ignoreRef: React.RefObject<HTMLElement>, event?: string) => (boolean | import("react").Dispatch<import("react").SetStateAction<boolean>>)[];
 export { childrenElement, validUnion, useDetectOutsideClick };

package/dist/index.d.ts

@@ -194,7 +194,7 @@ declare namespace MenuItem {
     };
 }
 
-interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+interface TextInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
     descText?: string;
     disabled?: boolean;
     icon?: React.ReactNode;
@@ -213,7 +213,7 @@ interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>
     actionElement?: React.ReactNode;
 }
 
-declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ...props }: TextInputProps): React$1.JSX.Element;
+declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ref, ...props }: TextInputProps): React$1.JSX.Element;
 declare namespace TextInput {
     var defaultProps: {
         descText: string;
@@ -303,22 +303,37 @@ declare namespace Checkbox {
     };
 }
 
+interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
+    isTopFlat?: boolean;
+    children: React$1.ReactNode | undefined;
+    open?: boolean;
+    onClose?: () => void;
+    className?: string;
+    isWithOverlay?: boolean;
+    size?: 'sm' | 'md';
+    zIndex?: number;
+    onClickItem?: (event: React$1.MouseEvent<HTMLDivElement>, val: string | number) => void;
+}
+declare const DropdownContainer: React$1.ForwardRefExoticComponent<Omit<DropdownContainerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     descText?: string;
     disabled?: boolean;
     id?: string;
     size?: 'md' | 'sm';
     label?: string;
-    options: any;
+    options?: any;
     required?: boolean;
     selected?: string | number | {
         label: string | null;
     };
     setSelected?: any;
     onClickDropdown?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    children?: React.ReactNode;
+    dropContProps?: Omit<DropdownContainerProps, 'children'>;
 }
 
-declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, ...props }: SelectInputProps): React$1.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React$1.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;
@@ -332,19 +347,6 @@ declare namespace SelectInput {
     };
 }
 
-interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
-    isTopFlat?: boolean;
-    children: React$1.ReactNode | undefined;
-    open?: boolean;
-    onClose?: () => void;
-    className?: string;
-    isWithOverlay?: boolean;
-    size?: 'sm' | 'md';
-    zIndex?: number;
-    onClickItem?: (event: React$1.MouseEvent<HTMLDivElement>, val: string | number) => void;
-}
-declare const DropdownContainer: React$1.ForwardRefExoticComponent<Omit<DropdownContainerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-
 interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     descText?: string;
     disabled?: boolean;
@@ -410,7 +412,7 @@ interface SegmentButtonItemProps extends ComponentPropsWithoutRef<'button'> {
     isfitContent?: boolean;
     onClick: () => void;
 }
-declare function SegmentButtonItem({ selected, size, children, disabled, isfitContent, onClick, }: SegmentButtonItemProps): React$1.JSX.Element;
+declare function SegmentButtonItem({ className, selected, size, children, disabled, isfitContent, onClick, }: SegmentButtonItemProps): React$1.JSX.Element;
 
 declare function SegmentButtonGroup({ children }: {
     children: React$1.ReactNode;
@@ -432,14 +434,17 @@ interface FormGroupLabelProps extends ComponentPropsWithoutRef<'label'> {
 }
 declare const FormGroupLabel: ({ iconLeft, iconRight, size, text, ...props }: FormGroupLabelProps) => React$1.JSX.Element;
 
+interface valueObject {
+    [key: string]: any;
+}
 interface DropdownItemProps extends Omit<ComponentPropsWithRef<'button'>, 'content'> {
     children?: ReactNode | undefined;
     content: string | ReactNode;
     className?: string;
-    onClickItem?: (event: React$1.MouseEvent<HTMLElement>, val: string | number) => void;
+    onClickItem?: (event: React$1.MouseEvent<HTMLElement>, val: string | number | valueObject) => void;
     onClose?: () => void;
     size?: 'sm' | 'md';
-    value?: string | number;
+    value?: string | number | valueObject;
     disabled?: boolean;
     zIndex?: number;
 }
@@ -451,6 +456,11 @@ declare namespace DropdownItem {
     };
 }
 
+interface DatePickerProps extends React$1.HTMLAttributes<HTMLInputElement> {
+    value?: Date;
+}
+declare function DatePicker({ value, onChange }: DatePickerProps): React$1.JSX.Element;
+
 interface IconProps {
     className?: string;
     size?: number | string;
@@ -754,4 +764,4 @@ interface WindowProps extends ComponentPropsWithRef<'div'> {
 }
 declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps): React$1.JSX.Element;
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, Window };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",

package/src/style/color.css

@@ -425,64 +425,64 @@
   --sky-dark-80: color-mix(in srgb, var(--sky), var(--dark) 80%);
   --sky-dark-90: color-mix(in srgb, var(--sky), var(--dark) 90%);
 
-  /* olymipic */
-  --olympic: #1661ea;
+  /* crayola */
+  --crayola: #1661ea;
 
-  --olympic-light-10: color-mix(
+  --crayola-light-10: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 10%
   );
-  --olympic-light-20: color-mix(
+  --crayola-light-20: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 20%
   );
-  --olympic-light-30: color-mix(
+  --crayola-light-30: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 30%
   );
-  --olympic-light-40: color-mix(
+  --crayola-light-40: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 40%
   );
-  --olympic-light-50: color-mix(
+  --crayola-light-50: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 50%
   );
-  --olympic-light-60: color-mix(
+  --crayola-light-60: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 60%
   );
-  --olympic-light-70: color-mix(
+  --crayola-light-70: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 70%
   );
-  --olympic-light-80: color-mix(
+  --crayola-light-80: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 80%
   );
-  --olympic-light-90: color-mix(
+  --crayola-light-90: color-mix(
     in srgb,
-    var(--olympic),
+    var(--crayola),
     var(--primary-white) 90%
   );
 
-  --olympic-dark-10: color-mix(in srgb, var(--olympic), var(--dark) 10%);
-  --olympic-dark-20: color-mix(in srgb, var(--olympic), var(--dark) 20%);
-  --olympic-dark-30: color-mix(in srgb, var(--olympic), var(--dark) 30%);
-  --olympic-dark-40: color-mix(in srgb, var(--olympic), var(--dark) 40%);
-  --olympic-dark-50: color-mix(in srgb, var(--olympic), var(--dark) 50%);
-  --olympic-dark-60: color-mix(in srgb, var(--olympic), var(--dark) 60%);
-  --olympic-dark-70: color-mix(in srgb, var(--olympic), var(--dark) 70%);
-  --olympic-dark-80: color-mix(in srgb, var(--olympic), var(--dark) 80%);
-  --olympic-dark-90: color-mix(in srgb, var(--olympic), var(--dark) 90%);
+  --crayola-dark-10: color-mix(in srgb, var(--crayola), var(--dark) 10%);
+  --crayola-dark-20: color-mix(in srgb, var(--crayola), var(--dark) 20%);
+  --crayola-dark-30: color-mix(in srgb, var(--crayola), var(--dark) 30%);
+  --crayola-dark-40: color-mix(in srgb, var(--crayola), var(--dark) 40%);
+  --crayola-dark-50: color-mix(in srgb, var(--crayola), var(--dark) 50%);
+  --crayola-dark-60: color-mix(in srgb, var(--crayola), var(--dark) 60%);
+  --crayola-dark-70: color-mix(in srgb, var(--crayola), var(--dark) 70%);
+  --crayola-dark-80: color-mix(in srgb, var(--crayola), var(--dark) 80%);
+  --crayola-dark-90: color-mix(in srgb, var(--crayola), var(--dark) 90%);
 
   /* verdant */
   --verdant: #55cf45;

package/src/style/scrollbar.css

@@ -5,11 +5,11 @@
   background-color: var(--coolgrey-light-90);
 }
 
-::-webkit-scrollbar-thumb:vertical{
+::-webkit-scrollbar-thumb:vertical {
   width: 100%;
 }
 
-::-webkit-scrollbar-thumb:horizontal{
+::-webkit-scrollbar-thumb:horizontal {
   height: 100%;
 }
 
@@ -28,18 +28,37 @@
 }
 
 /* Hidden Scrollbar */
+.scrollbar-hidden {
+  overflow: scroll;
+  mask-image: linear-gradient(to top, transparent, black),
+    linear-gradient(to left, transparent 17px, black 17px);
+  mask-size: 100% 20000px;
+  mask-position: left bottom;
+  -webkit-mask-image: linear-gradient(to top, transparent, black),
+    linear-gradient(to left, transparent 17px, black 17px);
+  -webkit-mask-size: 100% 20000px;
+  -webkit-mask-position: left bottom;
+  transition:
+    mask-position 0.75s,
+    -webkit-mask-position 0.75s;
+}
+
+.scrollbar-hidden:hover {
+  -webkit-mask-position: left top;
+}
+
 .scrollbar-hidden::-webkit-scrollbar {
   width: 7px;
   height: 7px;
-  background-color: transparent;
+  /* background-color: transparent; */
 }
 
 .scrollbar-hidden::-webkit-scrollbar-track {
-  background-color: transparent;
+  /* background-color: transparent; */
 }
 
 .scrollbar-hidden::-webkit-scrollbar-thumb {
-  background-color: transparent;
+  background-color: var(--coolgrey-light-30);
 }
 
 .scrollbar-hidden:hover::-webkit-scrollbar {

package/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-const colors = require('tailwindcss/colors');
+const colors = require('tailwindcss/colors')
 
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
@@ -348,33 +348,33 @@ module.exports = {
           90: 'var(--orange-dark-90)',
         },
       },
-      'bia-olympicblue': {
-        DEFAULT: 'var(--olympic)',
-        hover: 'var(--olympic-light-10)',
-        active: 'var(--olympic-dark-10)',
-        disabled: 'var(--olympic-light-50)',
-        pastel: 'var(--olympic-light-90)',
+      'bia-crayola': {
+        DEFAULT: 'var(--crayola)',
+        hover: 'var(--crayola-light-10)',
+        active: 'var(--crayola-dark-10)',
+        disabled: 'var(--crayola-light-50)',
+        pastel: 'var(--crayola-light-90)',
         light: {
-          10: 'var(--olympic-light-10)',
-          20: 'var(--olympic-light-20)',
-          30: 'var(--olympic-light-30)',
-          40: 'var(--olympic-light-40)',
-          50: 'var(--olympic-light-50)',
-          60: 'var(--olympic-light-60)',
-          70: 'var(--olympic-light-70)',
-          80: 'var(--olympic-light-80)',
-          90: 'var(--olympic-light-90)',
+          10: 'var(--crayola-light-10)',
+          20: 'var(--crayola-light-20)',
+          30: 'var(--crayola-light-30)',
+          40: 'var(--crayola-light-40)',
+          50: 'var(--crayola-light-50)',
+          60: 'var(--crayola-light-60)',
+          70: 'var(--crayola-light-70)',
+          80: 'var(--crayola-light-80)',
+          90: 'var(--crayola-light-90)',
         },
         dark: {
-          10: 'var(--olympic-dark-10)',
-          20: 'var(--olympic-dark-20)',
-          30: 'var(--olympic-dark-30)',
-          40: 'var(--olympic-dark-40)',
-          50: 'var(--olympic-dark-50)',
-          60: 'var(--olympic-dark-60)',
-          70: 'var(--olympic-dark-70)',
-          80: 'var(--olympic-dark-80)',
-          90: 'var(--olympic-dark-90)',
+          10: 'var(--crayola-dark-10)',
+          20: 'var(--crayola-dark-20)',
+          30: 'var(--crayola-dark-30)',
+          40: 'var(--crayola-dark-40)',
+          50: 'var(--crayola-dark-50)',
+          60: 'var(--crayola-dark-60)',
+          70: 'var(--crayola-dark-70)',
+          80: 'var(--crayola-dark-80)',
+          90: 'var(--crayola-dark-90)',
         },
       },
       'bia-verdantgreen': {
@@ -540,4 +540,4 @@ module.exports = {
     },
   },
   plugins: [],
-};
+}

package/dist/cjs/types/components/Dump.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function Dump(): React.JSX.Element;
-export default Dump;

package/dist/cjs/types/context/DropdownContext.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-interface DropdownProps {
-    zIndex: number;
-    onClose?: () => void;
-}
-interface DropdownContextType {
-    props: DropdownProps;
-    setProps: React.Dispatch<React.SetStateAction<DropdownProps>>;
-}
-export declare function DropdownProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
-export declare function useDrodown(): DropdownContextType;
-export {};

package/dist/esm/types/components/Dump.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function Dump(): React.JSX.Element;
-export default Dump;

package/dist/esm/types/context/DropdownContext.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-interface DropdownProps {
-    zIndex: number;
-    onClose?: () => void;
-}
-interface DropdownContextType {
-    props: DropdownProps;
-    setProps: React.Dispatch<React.SetStateAction<DropdownProps>>;
-}
-export declare function DropdownProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
-export declare function useDrodown(): DropdownContextType;
-export {};