@ndlib/component-library 0.0.7-9.1

package/dist/components/elements/Fields/DatePicker/DatePicker.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePicker } from '.';
+import { Box } from '../../layout/Box';
+const meta = {
+    title: 'Elements/Fields/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+};
+export default meta;
+const StatefulDatePicker = (props) => {
+    const [date, setDate] = useState(new Date());
+    return (_jsx(DatePicker, Object.assign({}, props, { value: date, onChange: (d) => {
+            setDate(d);
+        } })));
+};
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { placeholder: "test" }) }))),
+};
+export const Inline = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true }) }))),
+};
+export const HighlightedDates = {
+    render: () => {
+        const highlightedDate1 = new Date();
+        highlightedDate1.setDate(highlightedDate1.getDate() + 1);
+        const highlightedDate2 = new Date();
+        highlightedDate2.setDate(highlightedDate2.getDate() - 1);
+        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+    },
+};

package/dist/components/elements/Fields/DatePicker/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputProps } from '../TextInput';
+import { BoxProps } from '../../layout/Box';
+export declare const InputWrapper: React.ForwardRefExoticComponent<{
+    onChange?: ((e: React.ChangeEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent) => void) | undefined;
+    value?: string | undefined;
+    children: React.ReactElement;
+} & React.RefAttributes<any>>;
+export declare const DatePicker: React.FC<{
+    value: Date;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    inline?: boolean;
+    highlightDates?: Date[];
+    wrapperProps?: BoxProps;
+    inputProps?: Partial<TextInputProps>;
+}>;

package/dist/components/elements/Fields/DatePicker/index.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import _ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInput } from '../TextInput';
+import _CalendarIcon from '@mui/icons-material/CalendarMonth';
+import { Box } from '../../layout/Box';
+import { importedDefaultComponentShim } from '../../../../utils/misc';
+const CalendarIcon = importedDefaultComponentShim(_CalendarIcon);
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
+export const InputWrapper = React.forwardRef(({ onChange, value, children, onClick }, ref) => {
+    return React.cloneElement(children, {
+        value: value,
+        onChangeRaw: onChange,
+        ref: ref,
+        leftIcon: CalendarIcon,
+        onClick,
+    });
+});
+const PermissiveTextInput = TextInput;
+const areDatesEqual = (d1, d2) => {
+    const serializeDate = (d) => `${d.getFullYear()} ${d.getMonth()} ${d.getDate()}`;
+    return serializeDate(d1) === serializeDate(d2);
+};
+export const DatePicker = (_a) => {
+    var { value, wrapperProps, inputProps, highlightDates } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps", "highlightDates"]);
+    const highlightDateSet = new Set(highlightDates === null || highlightDates === void 0 ? void 0 : highlightDates.map((d) => d.toDateString()));
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, dayClassName: (date) => {
+                if (areDatesEqual(date, value)) {
+                    return '';
+                }
+                if (highlightDateSet.has(date.toDateString())) {
+                    return 'ndlib-date-picker-highlight';
+                }
+                return '';
+            }, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }) }, rest)) })));
+};

package/dist/components/elements/Fields/MonthPicker/MonthPicker.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MonthPicker } from '.';
+declare const meta: Meta<typeof MonthPicker>;
+export default meta;
+type Story = StoryObj<typeof MonthPicker>;
+export declare const Default: Story;
+export declare const Inline: Story;

package/dist/components/elements/Fields/MonthPicker/MonthPicker.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MonthPicker } from '.';
+import { Box } from '../../layout/Box';
+const meta = {
+    title: 'Elements/Fields/MonthPicker',
+    component: MonthPicker,
+    tags: ['autodocs'],
+};
+export default meta;
+const StatefulMonthPicker = (props) => {
+    const [date, setDate] = useState(new Date());
+    return _jsx(MonthPicker, Object.assign({}, props, { value: date, onChange: setDate }));
+};
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, {}) }))),
+};
+export const Inline = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, { inline: true }) }))),
+};

package/dist/components/elements/Fields/MonthPicker/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputProps } from '../TextInput';
+import { BoxProps } from '../../layout/Box';
+export declare const MonthPicker: React.FC<{
+    value: Date;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    inline?: boolean;
+    inputProps?: Partial<TextInputProps>;
+    wrapperProps?: BoxProps;
+}>;

package/dist/components/elements/Fields/MonthPicker/index.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import _ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInput } from '../TextInput';
+import { InputWrapper } from '../DatePicker';
+import { Box } from '../../layout/Box';
+import { importedDefaultComponentShim } from '../../../../utils/misc';
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
+const PermissiveTextInput = TextInput;
+export const MonthPicker = (_a) => {
+    var { value, inputProps, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "wrapperProps"]);
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }), showMonthYearPicker: true }, rest)) })));
+};

package/dist/components/elements/Fields/Radio/Radio.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio } from './index';
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;

package/dist/components/elements/Fields/Radio/Radio.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from './index';
+import { useState } from 'react';
+import { Row } from '../../layout/Row';
+const meta = {
+    title: 'Elements/Fields/Radio',
+    component: Radio,
+    tags: ['autodocs'],
+};
+export default meta;
+const StatefulRadio = (props) => {
+    const [checked, setChecked] = useState(false);
+    return _jsx(Radio, Object.assign({}, props, { checked: checked, onChange: setChecked }));
+};
+export const Default = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulRadio, {}) })),
+};

package/dist/components/elements/Fields/Radio/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+type RadioProps = StyledElementProps<HTMLInputElement, {
+    checked: boolean;
+    onChange: (value: boolean) => void;
+}, string>;
+export declare const Radio: React.FC<RadioProps>;
+export {};

package/dist/components/elements/Fields/Radio/index.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { useTheme } from '../../../../theme';
+export const Radio = (_a) => {
+    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    const theme = useTheme();
+    return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {
+            onChange(e.target.checked);
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
+                boxShadow: theme.boxShadow,
+            } }, sx) }, rest)));
+};

package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioGroup } from './index';
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const Default: Story;

package/dist/components/elements/Fields/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup } from './index';
+import { useState } from 'react';
+import { Row } from '../../layout/Row';
+const meta = {
+    title: 'Elements/Fields/RadioGroup',
+    component: RadioGroup,
+    tags: ['autodocs'],
+};
+export default meta;
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulRadioGroup = (props) => {
+    const [checked, setChecked] = useState(new Set());
+    return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: options, onChange: setChecked })));
+};
+export const Default = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, {}) })),
+};

package/dist/components/elements/Fields/RadioGroup/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+import { Key } from '../option';
+type Option = {
+    value: Key;
+    label: string;
+};
+type RadioGroupProps = StyledElementProps<HTMLDivElement, {
+    onChange: (value: Key) => void;
+    options: Option[];
+    checked?: Key;
+}, string>;
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};

package/dist/components/elements/Fields/RadioGroup/index.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from '../../layout/Row';
+import { Label } from '../../text/Label';
+import { Group } from '../../Group';
+import { GROUP_TYPE } from '../../Group';
+import { Column } from '../../layout/Column';
+import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
+import { Radio } from '../Radio';
+export const RadioGroup = (_a) => {
+    var { options, checked, onChange } = _a, rest = __rest(_a, ["options", "checked", "onChange"]);
+    return (_jsx(Column, Object.assign({}, rest, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
+                    mb: 2,
+                    alignItems: 'center',
+                } }, { children: [_jsx(Radio, { onChange: () => {
+                            onChange(option.value);
+                        }, checked: checked === option.value, id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+};

package/dist/components/elements/Fields/Select/Select.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './index';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const InvertedColors: Story;

package/dist/components/elements/Fields/Select/Select.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AppleIcon from '@mui/icons-material/Apple';
+import { INPUT_SIZE } from '../TextInput';
+import { Select } from './index';
+import { useState } from 'react';
+import { Column } from '../../layout/Column';
+import { Group } from '../../Group';
+import { Heading, HEADING_SIZE } from '../../text/Heading';
+import { COLOR } from '../../../../theme/colors';
+const meta = {
+    title: 'Elements/Fields/Select',
+    component: Select,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { label: 'Large', size: INPUT_SIZE.LG },
+    { label: 'Medium', size: INPUT_SIZE.MD },
+    { label: 'Small', size: INPUT_SIZE.SM },
+];
+const options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulSelect = (props) => {
+    const [value, setValue] = useState('');
+    return (_jsx(Select, Object.assign({ options: options }, props, { value: value, onSelectOption: setValue, placeholder: "Select A Fruit..." })));
+};
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
+};
+export const WithLabel = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
+};
+export const InvertedColors = {
+    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) }))),
+};

package/dist/components/elements/Fields/Select/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+import { INPUT_SIZE } from '../TextInput';
+import { BasicOption, Key, RenderOption, RenderOptionLabel } from '../option';
+type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLSelectElement, {
+    placeholder?: string;
+    size?: INPUT_SIZE;
+    leftIcon?: React.FC<any>;
+    value: Value;
+    label?: string;
+    inverted?: boolean;
+    onSelectOption: (value: Value) => void;
+    options: Option[];
+    renderOption?: RenderOption<Value, Option>;
+    renderOptionLabel?: RenderOptionLabel<Option>;
+}, string>;
+export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): React.JSX.Element;
+export {};

package/dist/components/elements/Fields/Select/index.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useMemo, useState } from 'react';
+import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
+import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
+import { useTheme } from '../../../../theme';
+import { INPUT_SIZE, labelOffsetMap, labelTypographyMap } from '../TextInput';
+import { ListBox } from '../../ListBox';
+import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
+import { defaultRenderOptionLabel, getOptionId, } from '../option';
+import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
+import { COLOR } from '../../../../theme/colors';
+import { Box } from '../../layout/Box';
+import { Label } from '../../text/Label';
+import { useUniqueId } from '../../../providers/uniqueIds';
+const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
+const typographyMap = {
+    [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+const defaultHeight = {
+    [INPUT_SIZE.SM]: '2.25rem',
+    [INPUT_SIZE.MD]: '2.5rem',
+    [INPUT_SIZE.LG]: '3rem',
+};
+const buttonSizeMap = {
+    [INPUT_SIZE.SM]: BUTTON_SIZE.SM,
+    [INPUT_SIZE.MD]: BUTTON_SIZE.MD,
+    [INPUT_SIZE.LG]: BUTTON_SIZE.LG,
+};
+const DEFAULT_WIDTH = '16rem';
+export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
+    const theme = useTheme();
+    const listboxId = useUniqueId('select-list-box');
+    const inputId = useUniqueId('select-input');
+    const [isOpen, setIsOpen] = useState(false);
+    const [stagedOptionValue, setStagedOptionValue] = useState();
+    const currentOption = useMemo(() => {
+        return options.find((option) => option.value === value);
+    }, [options, value]);
+    const getNextOptionValue = () => {
+        if (stagedOptionValue) {
+            const currentIndex = options
+                .map((option) => option.value)
+                .indexOf(stagedOptionValue);
+            const nextIndex = Math.min(currentIndex + 1, options.length - 1);
+            return options[nextIndex].value;
+        }
+        else {
+            setIsOpen(true);
+            return options[0].value;
+        }
+    };
+    const getPrevOptionValue = () => {
+        if (stagedOptionValue) {
+            const currentIndex = options
+                .map((option) => option.value)
+                .indexOf(stagedOptionValue);
+            const nextIndex = Math.max(currentIndex - 1, 0);
+            return options[nextIndex].value;
+        }
+        else {
+            setIsOpen(true);
+            return options[options.length - 1].value;
+        }
+    };
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            sizeMiddleware({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                },
+            }),
+            autoPlacement({
+                allowedPlacements: ['top-start', 'bottom-start'],
+            }),
+        ],
+    });
+    const close = () => {
+        setStagedOptionValue(undefined);
+        setIsOpen(false);
+    };
+    const open = () => {
+        setStagedOptionValue(stagedOptionValue || value || options[0].value);
+        setIsOpen(true);
+    };
+    const onKeyDown = (e) => {
+        if (e.key === KEY_CODES.ARROW_DOWN) {
+            const nextValue = getNextOptionValue();
+            setStagedOptionValue(nextValue);
+        }
+        if (e.key === KEY_CODES.ARROW_UP) {
+            const prevValue = getPrevOptionValue();
+            setStagedOptionValue(prevValue);
+        }
+        if (e.key === KEY_CODES.ENTER) {
+            if (!isOpen) {
+                open();
+            }
+            if (isOpen && stagedOptionValue && onSelectOption) {
+                onSelectOption(stagedOptionValue);
+                close();
+            }
+        }
+        if (e.key === KEY_CODES.ESCAPE) {
+            close();
+        }
+    };
+    const size = sizeParam || INPUT_SIZE.MD;
+    const buttonSize = buttonSizeMap[size];
+    const height = defaultHeight[size];
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
+    const focusStyles = {
+        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
+    };
+    return (_jsxs(Box, Object.assign({ sx: Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, ':hover fieldset': focusStyles, ':focus fieldset': focusStyles }, sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
+                    textAlign: 'left',
+                    position: 'absolute',
+                    inset: '-4px 0px 0px 0px',
+                    margin: '0px',
+                    padding: '0px 0.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    overflow: 'hidden',
+                    minWidth: '0%',
+                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    zIndex: theme.zIndex.ELEVATED,
+                } }, { children: _jsx("legend", Object.assign({ style: {
+                        width: 'auto',
+                        float: 'unset',
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'block',
+                        padding: '0',
+                        height: '8px',
+                        fontSize: '0.75em',
+                        visibility: 'hidden',
+                        whiteSpace: 'nowrap',
+                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), _jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
+                    position: 'absolute',
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: theme.zIndex.ELEVATED,
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
+                    px: 1,
+                    top: labelOffsetMap[size],
+                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
+                    ? getOptionId(stagedOptionValue)
+                    : undefined, type: BUTTON_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
+                    if (!isOpen) {
+                        open();
+                    }
+                    else {
+                        close();
+                    }
+                }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                    onSelectOption && onSelectOption(option.value);
+                    close();
+                }, ref: refs.setFloating, renderOption: renderOption, sx: {
+                    zIndex: theme.zIndex.DIALOG,
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted
+                        ? theme.boxShadow.INVERTED
+                        : theme.boxShadow.NORMAL }) }))] })));
+}

package/dist/components/elements/Fields/TextInput/TextInput.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextInput } from '.';
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Inverted: Story;
+export declare const Disabled: Story;

package/dist/components/elements/Fields/TextInput/TextInput.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import { INPUT_SIZE, TextInput } from '.';
+import { useState } from 'react';
+import { Column } from '../../layout/Column';
+import { Group } from '../../Group';
+import { Heading, HEADING_SIZE } from '../../text/Heading';
+import { COLOR } from '../../../../theme/colors';
+const meta = {
+    title: 'Elements/Fields/TextInput',
+    component: TextInput,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { label: 'Large', size: INPUT_SIZE.LG },
+    { label: 'Medium', size: INPUT_SIZE.MD },
+    { label: 'Small', size: INPUT_SIZE.SM },
+];
+const StatefulInput = (props) => {
+    const [value, setValue] = useState('');
+    return _jsx(TextInput, Object.assign({ value: value, onChange: setValue }, props));
+};
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+};
+export const WithLabel = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+};
+export const Inverted = {
+    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { inverted: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
+};
+export const Disabled = {
+    render: () => (_jsx(Column, Object.assign({ sx: { p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { disabled: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
+};

package/dist/components/elements/Fields/TextInput/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../../theme';
+export declare enum INPUT_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const labelTypographyMap: {
+    sm: TYPOGRAPHY_TYPE;
+    md: TYPOGRAPHY_TYPE;
+    lg: TYPOGRAPHY_TYPE;
+};
+export declare const labelOffsetMap: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export type TextInputProps = StyledElementProps<HTMLInputElement, {
+    size?: INPUT_SIZE;
+    leftIcon?: React.FC<any>;
+    inline?: boolean;
+    inverted?: boolean;
+    label?: string;
+    disabled?: boolean;
+    value: string;
+    onChange?: (value: string) => void;
+    onChangeRaw?: (e: string | React.ChangeEvent) => void;
+}, string>;
+export declare const TextInput: React.ForwardRefExoticComponent<{
+    sx?: import("../../../../theme").StylesProp | undefined;
+    children?: string | undefined;
+} & Omit<React.HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & {
+    size?: INPUT_SIZE | undefined;
+    leftIcon?: React.FC<any> | undefined;
+    inline?: boolean | undefined;
+    inverted?: boolean | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<any>>;