@ndlib/component-library 0.0.32 → 0.0.34

package/dist/components/composites/EmptyState/index.js

@@ -10,13 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SearchOffIcon from '@mui/icons-material/SearchOff';
+import _SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Row } from '../../elements/layout/Row';
 import { Column } from '../../elements/layout/Column';
 import { PARAGRAPH_SIZE, Paragraph } from '../../elements/text/Paragraph';
 import { COLOR } from '../../../theme/colors';
 import { Icon } from '../../elements/Icon';
 import { FONT_SIZE } from '../../../theme/typography';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const SearchOffIcon = importedDefaultComponentShim(_SearchOffIcon);
 export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
     var { icon, message, sx } = _a, rest = __rest(_a, ["icon", "message", "sx"]);

package/dist/components/elements/Button/index.d.ts

@@ -40,6 +40,8 @@ export declare const Button: React.ForwardRefExoticComponent<{
     accessibleLabel?: string | undefined;
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 type LinkButtonProps = Omit<ButtonProps, 'type' | 'color' | 'textColor'>;
 export declare const LinkButton: React.FC<LinkButtonProps>;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
+export declare const WithLabel: Story;

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

@@ -28,5 +28,8 @@ const StatefulSelect = (props) => {
     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: 1 } })] }))) })),
+    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" })] }))) })),
 };

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

@@ -7,10 +7,11 @@ type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledE
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     value: Value;
+    label?: string;
     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, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/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 } from '../TextInput';
+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 { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
 import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
 import { COLOR } from '../../../../theme/colors';
+import { Box } from '../../layout/Box';
+import { Label } from '../../text/Label';
 const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
@@ -28,9 +30,10 @@ const buttonSizeMap = {
     [INPUT_SIZE.LG]: BUTTON_SIZE.LG,
 };
 const DEFAULT_WIDTH = '16rem';
-export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
+export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
     const theme = useTheme();
     const listboxId = useUniqueHtmlId('select-list-box');
+    const inputId = useUniqueHtmlId('select-input');
     const [isOpen, setIsOpen] = useState(false);
     const [stagedOptionValue, setStagedOptionValue] = useState();
     const currentOption = useMemo(() => {
@@ -113,7 +116,16 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ ref: refs.setReference, 
+    return (_jsxs(Box, Object.assign({ sx: { position: 'relative' } }, { children: [_jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
+                    position: 'absolute',
+                    color: COLOR.ND_PROVOST_BLUE,
+                    backgroundColor: COLOR.WHITE,
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: theme.zIndex.LABEL,
+                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    top: labelOffsetMap[size],
+                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, 
                 // A11y attributes
                 role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
@@ -133,5 +145,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
                     } }, typographyStyles), sx), 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, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] }));
+                }, ref: refs.setFloating, renderOption: renderOption, sx: {
+                    zIndex: theme.zIndex.DROPDOWN,
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] })));
 }

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof TextInput>;
 export default meta;
 type Story = StoryObj<typeof TextInput>;
 export declare const Default: Story;
+export declare const WithLabel: Story;

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

@@ -18,8 +18,11 @@ const sizes = [
 ];
 const StatefulInput = (props) => {
     const [value, setValue] = useState('');
-    return (_jsx(TextInput, Object.assign({ value: value, onChange: setValue, placeholder: "test" }, props)));
+    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: 1 } })] }))) })),
+    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", sx: { mt: 2 } })] }))) })),
 };

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

@@ -1,15 +1,27 @@
 /** @jsxImportSource theme-ui */
 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;
+    label?: string;
     value: string;
     onChange?: (value: string) => void;
     onChangeRaw?: (e: string | React.ChangeEvent) => void;
@@ -21,7 +33,10 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: INPUT_SIZE | undefined;
     leftIcon?: React.FC<any> | undefined;
     inline?: boolean | undefined;
+    label?: string | undefined;
     value: string;
     onChange?: ((value: string) => void) | undefined;
     onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & React.RefAttributes<any>>;

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

@@ -16,6 +16,8 @@ import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../
 import { useTheme } from '../../../../theme';
 import { Icon } from '../../Icon';
 import { COLOR } from '../../../../theme/colors';
+import { Label } from '../../text/Label';
+import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
 export var INPUT_SIZE;
 (function (INPUT_SIZE) {
     INPUT_SIZE["SM"] = "sm";
@@ -27,18 +29,29 @@ const typographyMap = {
     [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
     [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
+export const labelTypographyMap = {
+    [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+};
+export const labelOffsetMap = {
+    [INPUT_SIZE.SM]: '-0.375rem',
+    [INPUT_SIZE.MD]: '-0.45rem',
+    [INPUT_SIZE.LG]: '-0.5rem',
+};
 const defaultPaddingX = {
     [INPUT_SIZE.SM]: 2,
     [INPUT_SIZE.MD]: 3,
     [INPUT_SIZE.LG]: 3,
 };
 const defaultHeight = {
-    [INPUT_SIZE.SM]: '2rem',
+    [INPUT_SIZE.SM]: '2.25rem',
     [INPUT_SIZE.MD]: '2.5rem',
     [INPUT_SIZE.LG]: '3rem',
 };
 export const TextInput = React.forwardRef((_a, ref) => {
-    var { value, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
+    var { value, label, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
+    const id = useUniqueHtmlId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
     const display = inline === false ? 'flex' : 'inline-flex';
@@ -46,8 +59,8 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const height = defaultHeight[size];
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
-    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, sx: Object.assign(Object.assign({ height,
-            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', ':hover': {
+    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
+            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': {
                 boxShadow: theme.boxShadow.NORMAL,
             }, ':focus': {
                 boxShadow: theme.boxShadow.NORMAL,
@@ -57,7 +70,16 @@ export const TextInput = React.forwardRef((_a, ref) => {
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
                     onChange && onChange(event.target.value);
                     onChangeRaw && onChangeRaw(event);
-                }, sx: Object.assign(Object.assign({ px: 0, py: 0, border: 'none' }, typographyStyles), { ':focus': {
+                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none' }, typographyStyles), { ':focus': {
                         outline: 'none',
-                    } }) }, rest))] })));
+                    } }) }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
+                    position: 'absolute',
+                    color: COLOR.ND_PROVOST_BLUE,
+                    backgroundColor: COLOR.WHITE,
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: theme.zIndex.LABEL,
+                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    top: labelOffsetMap[size],
+                } }, { children: label })))] })));
 });

package/dist/components/elements/ListBox/index.d.ts

@@ -26,6 +26,8 @@ export declare const ListBox: <Value extends React.Key = string, Option extends
     onUpPress?: (() => void) | undefined;
     onSelect?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined;
 }) => any;

package/dist/components/elements/Pill/index.d.ts

@@ -17,4 +17,6 @@ export declare const Pill: React.ForwardRefExoticComponent<{
     type?: PILL_TYPE | undefined;
     color?: COLOR | undefined;
     icon?: React.FC<any> | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/elements/text/Label/index.d.ts

@@ -14,6 +14,7 @@ export declare const SIZE_TYPOGRAPHY_MAP: {
 };
 type LabelProps = StyledElementProps<HTMLLabelElement, {
     size?: LABEL_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
     standalone?: boolean;
 }>;
 export declare const Label: React.FC<LabelProps>;

package/dist/components/elements/text/Label/index.js

@@ -25,10 +25,10 @@ export const SIZE_TYPOGRAPHY_MAP = {
     [LABEL_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
 };
 export const Label = (_a) => {
-    var { sx, size, standalone } = _a, rest = __rest(_a, ["sx", "size", "standalone"]);
+    var { sx, size, standalone, typography: typographyParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "typography"]);
     const { labelId, labelTargetId, type: groupType } = useGroup();
     const { flagInDevelopment } = useEnvironment();
-    const typography = SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
     if (groupType !== GROUP_TYPE.GROUP && !standalone) {
         flagInDevelopment('Label component should be used within a Group component with property type={GROUP_TYPE.GROUP} or given the standalone flag');
     }

package/dist/components/elements/text/Paragraph/index.d.ts

@@ -1,8 +1,10 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';
 type ParagraphProps = StyledElementProps<HTMLSpanElement, {
     size?: PARAGRAPH_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
 }>;
 export declare enum PARAGRAPH_SIZE {
     SM = "sm",

package/dist/components/elements/text/Paragraph/index.js

@@ -23,7 +23,7 @@ const SIZE_TYPOGRAPHY_MAP = {
     [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
 export const Paragraph = (_a) => {
-    var { size, sx } = _a, rest = __rest(_a, ["size", "sx"]);
-    const typography = SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
+    var { size, typography: typographyParam, sx } = _a, rest = __rest(_a, ["size", "typography", "sx"]);
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
     return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { my: 1 }), sx) }, rest)));
 };

package/dist/theme/colors.d.ts

@@ -1,5 +1,6 @@
 export declare enum COLOR {
     TEXT = "text",
+    LIGHT_TEXT = "lightText",
     BACKGROUND = "background",
     TRANSPARENT = "transparent",
     PRIMARY = "primary",

package/dist/theme/colors.js

@@ -1,6 +1,7 @@
 export var COLOR;
 (function (COLOR) {
     COLOR["TEXT"] = "text";
+    COLOR["LIGHT_TEXT"] = "lightText";
     COLOR["BACKGROUND"] = "background";
     COLOR["TRANSPARENT"] = "transparent";
     COLOR["PRIMARY"] = "primary";
@@ -48,6 +49,7 @@ export var COLOR;
 })(COLOR || (COLOR = {}));
 export const colors = {
     [COLOR.TEXT]: '#333333',
+    [COLOR.LIGHT_TEXT]: '#767676',
     [COLOR.BACKGROUND]: '#ffffff',
     [COLOR.TRANSPARENT]: 'rgba(0,0,0,0)',
     [COLOR.PRIMARY]: '#0c2340',
@@ -59,7 +61,7 @@ export const colors = {
     [COLOR.WHITE]: '#ffffff',
     [COLOR.BLACK]: '#000000',
     [COLOR.DARK_GRAY]: '#333333',
-    [COLOR.GRAY]: '#555555',
+    [COLOR.GRAY]: '#767676',
     [COLOR.LIGHT_GRAY]: '#d2d2d2',
     [COLOR.EXTRA_LIGHT_GRAY]: '#e2e2e2',
     [COLOR.EXTRA_EXTRA_LIGHT_GRAY]: '#f2f2f2',

package/dist/theme/custom.d.ts

@@ -2,3 +2,8 @@ export declare enum BOX_SHADOW {
     NORMAL = "0 0 8px #dfdfdf",
     EMPHASIZED = "0 0 12px #d3d3d3"
 }
+export declare enum Z_INDEX {
+    NORMAL = 1,
+    LABEL = 2,
+    DROPDOWN = 3
+}

package/dist/theme/custom.js

@@ -4,3 +4,9 @@ export var BOX_SHADOW;
     BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
     BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
 })(BOX_SHADOW || (BOX_SHADOW = {}));
+export var Z_INDEX;
+(function (Z_INDEX) {
+    Z_INDEX[Z_INDEX["NORMAL"] = 1] = "NORMAL";
+    Z_INDEX[Z_INDEX["LABEL"] = 2] = "LABEL";
+    Z_INDEX[Z_INDEX["DROPDOWN"] = 3] = "DROPDOWN";
+})(Z_INDEX || (Z_INDEX = {}));

package/dist/theme/index.d.ts

@@ -2,12 +2,13 @@ import { PropsWithChildren } from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
 import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
 import { COLOR } from './colors';
-import { BOX_SHADOW } from './custom';
+import { BOX_SHADOW, Z_INDEX } from './custom';
 export declare const BREAKPOINTS: string[];
 export declare const SPACING: string[];
 export declare const theme: {
     colors: {
         text: string;
+        lightText: string;
         background: string;
         transparent: string;
         primary: string;
@@ -56,6 +57,7 @@ export declare const theme: {
     space: string[];
     boxShadow: typeof BOX_SHADOW;
     breakpoints: string[];
+    zIndex: typeof Z_INDEX;
     fonts: {
         branded: string;
         branded2: string;
@@ -90,16 +92,19 @@ export type StylesProp = ThemeUICSSObject & {
     fontSize?: FONT_SIZE;
     font?: FONT;
     fontWeight?: FONT_WEIGHT;
-    lineHeight?: LINE_HEIGHT;
+    lineHeight?: LINE_HEIGHT | number;
     boxShadow?: BOX_SHADOW;
 };
 export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
     sx?: StylesProp;
     children?: Children;
-} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps;
+} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps & {
+    htmlFor?: string;
+};
 export declare const useTheme: () => {
     colors: {
         text: string;
+        lightText: string;
         background: string;
         transparent: string;
         primary: string;
@@ -148,6 +153,7 @@ export declare const useTheme: () => {
     space: string[];
     boxShadow: typeof BOX_SHADOW;
     breakpoints: string[];
+    zIndex: typeof Z_INDEX;
     fonts: {
         branded: string;
         branded2: string;

package/dist/theme/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeUIProvider, useThemeUI } from 'theme-ui';
 import { fontStyles, } from './typography';
 import { colors } from './colors';
-import { BOX_SHADOW } from './custom';
+import { BOX_SHADOW, Z_INDEX } from './custom';
 export const BREAKPOINTS = ['576px', '768px', '992px', '1200px', '1400px'];
 export const SPACING = [
     '0rem',
@@ -15,7 +15,7 @@ export const SPACING = [
     '3rem',
     '4rem',
 ];
-export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS });
+export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS, zIndex: Z_INDEX });
 export const useTheme = () => {
     const { theme } = useThemeUI();
     return theme;

package/dist/theme/typography.js

@@ -19,12 +19,12 @@ export var FONT_SIZE;
 })(FONT_SIZE || (FONT_SIZE = {}));
 export const getIconSize = (fontSize) => {
     return {
-        [FONT_SIZE.XS]: FONT_SIZE.MD,
-        [FONT_SIZE.SM]: FONT_SIZE.LG,
-        [FONT_SIZE.MS]: FONT_SIZE.XL,
-        [FONT_SIZE.MD]: FONT_SIZE.XL,
-        [FONT_SIZE.ML]: FONT_SIZE.XL,
-        [FONT_SIZE.LG]: FONT_SIZE.XXL,
+        [FONT_SIZE.XS]: FONT_SIZE.SM,
+        [FONT_SIZE.SM]: FONT_SIZE.SM,
+        [FONT_SIZE.MS]: FONT_SIZE.MD,
+        [FONT_SIZE.MD]: FONT_SIZE.MD,
+        [FONT_SIZE.ML]: FONT_SIZE.LG,
+        [FONT_SIZE.LG]: FONT_SIZE.LG,
         [FONT_SIZE.XL]: FONT_SIZE.XXL,
         [FONT_SIZE.XXL]: FONT_SIZE.XXL,
     }[fontSize];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "sideEffects": false,
   "files": [