@peculiar/react-components 0.3.14 → 0.4.0

package/dist/esnext/MenuList/menu_list.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
 import { useMergedRef, useEnhancedEffect } from '../hooks';
 import { ownerDocument } from '../utils/owner_document';
 function nextItem(list, item) {
@@ -51,8 +51,7 @@ function moveFocus(list, currentFocus, traversalFunction) {
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'MenuList',
+const MenuListRoot = styled('ul')({
     padding: 'var(--pv-size-base-2) 0px',
     outline: 'none',
     listStyle: 'none',
@@ -62,7 +61,7 @@ const stylesBase = () => css({
  *
  */
 export const MenuList = React.forwardRef((props, ref) => {
-    const { children, className, component, ...other } = props;
+    const { children, component, ...other } = props;
     const rootRef = React.useRef(null);
     const multiRef = useMergedRef(rootRef, ref);
     const Component = component || 'ul';
@@ -85,10 +84,7 @@ export const MenuList = React.forwardRef((props, ref) => {
     useEnhancedEffect(() => {
         rootRef.current.focus();
     }, []);
-    return (React.createElement(Component, { ref: multiRef, role: "menu", tabIndex: -1, className: cx({
-            [stylesBase()]: true,
-            [className]: !!className,
-        }), onKeyDown: handleKeyDown, ...other }, children));
+    return (React.createElement(MenuListRoot, { as: Component, ref: multiRef, role: "menu", tabIndex: -1, onKeyDown: handleKeyDown, ...other }, children));
 });
 MenuList.displayName = 'MenuList';
 //# sourceMappingURL=menu_list.js.map

package/dist/esnext/MenuList/menu_list.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu_list.js","sourceRoot":"","sources":["../../../src/MenuList/menu_list.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu_list.js","sourceRoot":"","sources":["../../../src/MenuList/menu_list.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/MenuList/sub_menu_item.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { Popper } from '../Popper';
 import { Box } from '../Box';
 import { useMergedRef } from '../hooks';
 import { ArrowRightIcon } from '../icons';
-import { css } from '../styles';
 import { MenuItem } from './menu_item';
 import { MenuList } from './menu_list';
 /**
@@ -12,12 +12,17 @@ import { MenuList } from './menu_list';
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'SubMenu-MenuList',
+const SubMenuItemRoot = styled(MenuList)((props) => ({
     minWidth: '16px',
     minHeight: '16px',
-    boxShadow: 'var(--pv-shadow-light-low)',
-});
+    ...(props.theme.mode === 'dark' ? {
+        boxShadow: 'var(--pv-shadow-dark-medium)',
+        backgroundColor: 'var(--pv-color-gray-3)',
+    } : {
+        boxShadow: 'var(--pv-shadow-light-low)',
+        backgroundColor: 'var(--pv-color-white)',
+    }),
+}));
 /**
  *
  */
@@ -31,7 +36,7 @@ export const SubMenuItem = React.forwardRef((props, ref) => {
     return (React.createElement(MenuItem, { ...other, endIcon: React.createElement(ArrowRightIcon, null), ref: multiRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleMouseEnter },
         label,
         React.createElement(Popper, { open: open, anchorEl: rootRef.current, placement: "right-start", disablePortal: true, onMouseLeave: handleMouseLeave },
-            React.createElement(Box, { component: MenuList, borderRadius: 4, background: "white", className: stylesBase() }, children))));
+            React.createElement(Box, { component: SubMenuItemRoot, borderRadius: 4 }, children))));
 });
 SubMenuItem.displayName = 'SubMenuItem';
 //# sourceMappingURL=sub_menu_item.js.map

package/dist/esnext/MenuList/sub_menu_item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub_menu_item.js","sourceRoot":"","sources":["../../../src/MenuList/sub_menu_item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC;;GAEG;AAEH;;GAEG;AACH,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC3B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,4BAA4B;CACxC,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAChF,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,OAAO,EAAE,oBAAC,cAAc,OAAG,EAC3B,GAAG,EAAE,QAAQ,EACb,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,gBAAgB;QAExB,KAAK;QACN,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,OAAO,EACzB,SAAS,EAAC,aAAa,EACvB,aAAa,QACb,YAAY,EAAE,gBAAgB;YAE9B,oBAAC,GAAG,IACF,SAAS,EAAE,QAAQ,EACnB,YAAY,EAAE,CAAC,EACf,UAAU,EAAC,OAAO,EAClB,SAAS,EAAE,UAAU,EAAE,IAEtB,QAAQ,CACL,CACC,CACA,CACZ,CAAC;AACJ,CAAC,CAA0C,CAAC;AAE5C,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"sub_menu_item.js","sourceRoot":"","sources":["../../../src/MenuList/sub_menu_item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC;;GAEG;AAEH;;GAEG;AACH,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,CACtC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;QAChC,SAAS,EAAE,8BAA8B;QACzC,eAAe,EAAE,wBAAwB;KAC1C,CAAC,CAAC,CAAC;QACF,SAAS,EAAE,4BAA4B;QACvC,eAAe,EAAE,uBAAuB;KACzC,CAAC;CACH,CAAC,CACH,CAAC;AACF;;GAEG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnF,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,OAAO,EAAE,oBAAC,cAAc,OAAG,EAC3B,GAAG,EAAE,QAAQ,EACb,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,gBAAgB;QAExB,KAAK;QACN,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,OAAO,EACzB,SAAS,EAAC,aAAa,EACvB,aAAa,QACb,YAAY,EAAE,gBAAgB;YAE9B,oBAAC,GAAG,IACF,SAAS,EAAE,eAAe,EAC1B,YAAY,EAAE,CAAC,IAEd,QAAQ,CACL,CACC,CACA,CACZ,CAAC;AACJ,CAAC,CAA0C,CAAC;AAE5C,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/esnext/Modal/modal.js

@@ -1,23 +1,33 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { FocusTrap } from '../FocusTrap';
 import { Backdrop } from '../Backdrop';
 import { Portal } from '../Portal';
-import { css, cx } from '../styles';
-const stylesBase = () => css({
-    label: 'Modal',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+const ModalRoot = styled('div', {
+    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'open',
+})((props) => ({
     position: 'fixed',
     zIndex: 1300,
     top: 0,
     bottom: 0,
     right: 0,
     left: 0,
-});
-const stylesHidden = () => css({
-    label: 'hidden',
-    visibility: 'hidden',
-});
+    ...(!props.open && props.exited && {
+        visibility: 'hidden',
+    }),
+}));
+/**
+ *
+ */
 export const Modal = React.forwardRef((props, ref) => {
-    const { children, className, open, transitionDuration, disableBackdropClick, disableEscapeKeyDown, keepMounted, backdropProps, disableEnforceFocus, disableAutoFocus, onClose, ...other } = props;
+    const { children, open, transitionDuration, disableBackdropClick, disableEscapeKeyDown, keepMounted, backdropProps, disableEnforceFocus, disableAutoFocus, onClose, ...other } = props;
     const [exited, setExited] = React.useState(true);
     if (!keepMounted && !open) {
         return null;
@@ -43,11 +53,7 @@ export const Modal = React.forwardRef((props, ref) => {
         }
     };
     return (React.createElement(Portal, null,
-        React.createElement("div", { ...other, ref: ref, className: cx({
-                [stylesBase()]: true,
-                [stylesHidden()]: !open && exited,
-                [className]: !!className,
-            }), role: "presentation", "aria-hidden": !open, onKeyDown: handleKeyDown },
+        React.createElement(ModalRoot, { ref: ref, open: open, exited: exited, role: "presentation", "aria-hidden": !open, onKeyDown: handleKeyDown, ...other },
             React.createElement(Backdrop, { ...backdropProps, open: open, onClick: handleBackdropClick, onEnter: () => setExited(false), onExited: () => setExited(true), transitionDuration: transitionDuration }),
             React.createElement(FocusTrap, { open: disableEnforceFocus ? false : open, disableAutoFocus: disableAutoFocus }, children))));
 });

package/dist/esnext/Modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/Modal/modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/Modal/modal.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Popover/popover.js

@@ -1,20 +1,36 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { usePopper } from 'react-popper';
 import { Modal } from '../Modal';
-import { Box } from '../Box';
 import { Fade } from '../Fade';
-import { css, cx } from '../styles';
-const stylesBase = () => css({
-    label: 'Popover',
+/**
+ * Styles.
+ */
+const PopoverRoot = styled('div')({
     outline: 0,
     maxWidth: 'calc(100% - 32px)',
     minWidth: '16px',
     maxHeight: 'calc(100% - 32px)',
     minHeight: '16px',
-    boxShadow: 'var(--pv-shadow-light-low)',
+    borderRadius: '4px',
+}, (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const backgroundColor = isDark
+        ? 'var(--pv-color-gray-3)'
+        : 'var(--pv-color-white)';
+    const boxShadow = isDark
+        ? 'var(--pv-shadow-dark-medium)'
+        : 'var(--pv-shadow-light-low)';
+    return {
+        boxShadow,
+        backgroundColor,
+    };
 });
+/**
+ *
+ */
 export const Popover = React.forwardRef((props, ref) => {
-    const { open, children, anchorEl, placement, onClose, className, modalProps, allowUseSameWidth, ...other } = props;
+    const { open, children, anchorEl, placement, modalProps, allowUseSameWidth, onClose, ...other } = props;
     const [popperElement, setPopperElement] = React.useState(null);
     const sameWidthModifier = React.useMemo(() => ({
         name: 'sameWidth',
@@ -39,10 +55,7 @@ export const Popover = React.forwardRef((props, ref) => {
             invisible: true,
         } },
         React.createElement(Fade, { in: open, ref: setPopperElement },
-            React.createElement(Box, { ...other, borderRadius: 4, background: "white", tabIndex: -1, style: styles.popper, ...attributes.popper, className: cx({
-                    [stylesBase()]: true,
-                    [className]: !!className,
-                }) }, children))));
+            React.createElement(PopoverRoot, { ...other, tabIndex: -1, style: styles.popper, ...attributes.popper }, children))));
 });
 Popover.displayName = 'Popover';
 Popover.defaultProps = {

package/dist/esnext/Popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/Popover/popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/Popover/popover.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Radio/radio.js

@@ -1,22 +1,28 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
 import { DotIcon } from '../icons';
 import { useId } from '../hooks';
-import { css, cx } from '../styles';
+/**
+ *
+ */
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'Radio',
+const RadioRoot = styled('label')({
     cursor: 'pointer',
     display: 'inline-flex',
     width: 'var(--pv-size-base-4)',
     height: 'var(--pv-size-base-4)',
     borderRadius: '50%',
-    color: 'var(--pv-color-gray-6)',
     position: 'relative',
-});
-const stylesInput = () => css({
-    label: 'Radio-input',
+}, (props) => ({
+    ...(props.theme.mode === 'dark' ? {
+        color: 'var(--pv-color-gray-5)',
+    } : {
+        color: 'var(--pv-color-gray-6)',
+    }),
+}));
+const RadioInput = styled('input')({
     cursor: 'inherit',
     width: '100%',
     height: '100%',
@@ -27,7 +33,6 @@ const stylesInput = () => css({
     borderWidth: '2px',
     borderStyle: 'solid',
     appearance: 'none',
-    color: 'var(--pv-color-gray-9)',
     borderColor: 'currentColor',
     backgroundColor: 'transparent',
     '&:before': {
@@ -42,46 +47,63 @@ const stylesInput = () => css({
         backgroundColor: 'currentColor',
         transition: 'opacity 200ms',
     },
-    '&:checked': {
-        '+ [aria-hidden]': {
-            color: 'var(--pv-color-primary)',
-            opacity: 1,
-        },
-    },
-    '&:not(:disabled)': {
-        cursor: 'pointer',
+}, (props) => {
+    const isDark = props.theme.mode === 'dark';
+    let color = 'var(--pv-color-gray-9)';
+    let colorChecked = 'var(--pv-color-primary-shade-1)';
+    let ellipseColorChecked = 'var(--pv-color-primary)';
+    let colorDisabled = 'var(--pv-color-gray-6)';
+    let colorDisabledChecked = 'var(--pv-color-gray-7)';
+    if (isDark) {
+        color = 'var(--pv-color-gray-7)';
+        colorChecked = 'var(--pv-color-primary)';
+        ellipseColorChecked = 'var(--pv-color-primary-tint-1)';
+        colorDisabled = 'var(--pv-color-gray-5)';
+        colorDisabled = 'var(--pv-color-gray-5)';
+        colorDisabledChecked = 'var(--pv-color-gray-5)';
+    }
+    return ({
+        color,
         '&:checked': {
-            color: 'var(--pv-color-primary-shade-1)',
-        },
-        '&:hover': {
-            '&:before': {
-                opacity: 0.18,
+            '+ [aria-hidden]': {
+                color: ellipseColorChecked,
+                opacity: 1,
             },
         },
-        '&:focus': {
-            '&:before': {
-                opacity: 0.23,
+        '&:not(:disabled)': {
+            cursor: 'pointer',
+            '&:checked': {
+                color: colorChecked,
             },
-        },
-        '&:active': {
-            '&:before': {
-                opacity: 0.30,
+            '&:hover': {
+                '&:before': {
+                    opacity: 0.18,
+                },
+            },
+            '&:focus': {
+                '&:before': {
+                    opacity: 0.23,
+                },
+            },
+            '&:active': {
+                '&:before': {
+                    opacity: 0.30,
+                },
             },
         },
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        '+ [aria-hidden]': {
-            color: 'inherit',
-        },
-        color: 'var(--pv-color-gray-6)',
-        '&:checked': {
-            color: 'var(--pv-color-gray-7)',
+        '&:disabled': {
+            cursor: 'not-allowed',
+            '+ [aria-hidden]': {
+                color: 'inherit',
+            },
+            color: colorDisabled,
+            '&:checked': {
+                color: colorDisabledChecked,
+            },
         },
-    },
+    });
 });
-const stylesIcon = () => css({
-    label: 'Radio-icon',
+const CheckboxIcon = styled('svg')({
     display: 'block',
     position: 'absolute',
     top: 0,
@@ -95,24 +117,11 @@ const stylesIcon = () => css({
  *
  */
 export const Radio = React.forwardRef((props, ref) => {
-    const { checked, defaultChecked, required, inputProps, className, disabled, id: idProp, checkedIcon, name, onChange, ...other } = props;
+    const { checked, defaultChecked, required, inputProps, disabled, id: idProp, checkedIcon = DotIcon, name, onChange, ...other } = props;
     const id = useId(idProp);
-    const renderIcon = () => {
-        const baseIconProps = {
-            'aria-hidden': true,
-            className: cx(stylesIcon()),
-        };
-        if (checkedIcon) {
-            return React.cloneElement(checkedIcon, baseIconProps);
-        }
-        return (React.createElement(DotIcon, { ...baseIconProps }));
-    };
-    return (React.createElement("label", { ...other, ref: ref, htmlFor: id, className: cx({
-            [stylesBase()]: true,
-            [className]: !!className,
-        }) },
-        React.createElement("input", { ...inputProps, type: "radio", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: cx(stylesInput()), onChange: onChange }),
-        renderIcon()));
+    return (React.createElement(RadioRoot, { ref: ref, htmlFor: id, ...other },
+        React.createElement(RadioInput, { ...inputProps, type: "radio", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, onChange: onChange }),
+        React.createElement(CheckboxIcon, { as: checkedIcon, "aria-hidden": true })));
 });
 Radio.displayName = 'Radio';
 Radio.defaultProps = {};

package/dist/esnext/Radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/Radio/radio.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/Radio/radio.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Select/select.js

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
 import { Typography } from '../Typography';
 import { ArrowDropDownIcon } from '../icons';
-const stylesInputBase = () => css({
-    label: 'Select-input',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+const SelectRoot = styled('select')((props) => ({
     fontFamily: 'inherit',
     outline: 'none',
     cursor: 'pointer',
@@ -11,103 +16,110 @@ const stylesInputBase = () => css({
     width: '100%',
     borderRadius: '4px',
     padding: '0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2)',
-    color: 'var(--pv-color-black)',
     backgroundColor: 'var(--pv-color-gray-1)',
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderColor: 'var(--pv-color-gray-8)',
     transition: 'background-color 200ms, color 200ms, border-color 200ms',
     display: 'block',
     appearance: 'none',
-    '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: 'var(--pv-color-gray-7)',
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        backgroundColor: 'var(--pv-color-gray-1)',
-        borderColor: 'var(--pv-color-gray-5)',
-        color: 'var(--pv-color-gray-7)',
-    },
-    '&:not(:disabled)': {
-        '&[aria-invalid]': {
-            backgroundColor: 'var(--pv-color-wrong-tint-5)',
-            borderColor: 'var(--pv-color-wrong-tint-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-            borderColor: 'var(--pv-color-secondary-tint-3)',
-        },
-    },
-}, {
     fontWeight: 'var(--pv-text-c1-weight)',
     fontSize: 'var(--pv-text-c1-size)',
     lineHeight: 'var(--pv-text-c1-height)',
     letterSpacing: 'var(--pv-text-c1-spacing)',
+    ...(props.selectSize === 'small' && {
+        height: 'var(--pv-size-base-6)',
+    }),
+    ...(props.selectSize === 'medium' && {
+        height: 'var(--pv-size-base-7)',
+    }),
+    ...(props.selectSize === 'large' && {
+        height: 'var(--pv-size-base-8)',
+    }),
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    let borderColor = 'var(--pv-color-gray-8)';
+    let borderColorHover = 'var(--pv-color-gray-7)';
+    let borderColorDisabled = 'var(--pv-color-gray-5)';
+    let colorDisabled = 'var(--pv-color-gray-7)';
+    let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    let invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    let borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+    if (isDark) {
+        borderColor = 'var(--pv-color-gray-5)';
+        borderColorHover = 'var(--pv-color-gray-4)';
+        borderColorDisabled = 'var(--pv-color-gray-4)';
+        colorDisabled = 'var(--pv-color-gray-4)';
+        invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+        invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+        borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+    return ({
+        color,
+        borderColor,
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-gray-3)',
+            borderColor: borderColorHover,
+        },
+        '&:disabled': {
+            cursor: 'not-allowed',
+            backgroundColor: 'var(--pv-color-gray-1)',
+            borderColor: borderColorDisabled,
+            color: colorDisabled,
+        },
+        '&:not(:disabled)': {
+            '&[aria-invalid]': {
+                backgroundColor: invalidBackgroundColor,
+                borderColor: invalidBorderColor,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+                borderColor: borderColorFocus,
+            },
+        },
+    });
 });
-const stylesInputSizeSmall = () => css({
-    label: 'small',
-    height: 'var(--pv-size-base-6)',
-});
-const stylesInputSizeMedium = () => css({
-    label: 'medium',
-    height: 'var(--pv-size-base-7)',
-});
-const stylesInputSizeLarge = () => css({
-    label: 'large',
-    height: 'var(--pv-size-base-8)',
-});
-const stylesLabel = () => css({
-    label: 'Select-label',
+const SelectLabel = styled('label')({
     marginBottom: '2px',
     display: 'inline-block',
 });
-const stylesError = () => css({
-    label: 'Select-error',
+const SelectErrorMessage = styled(Typography)({
     marginTop: '2px',
 });
-const stylesInputContainer = () => css({
-    label: 'Select-container',
+const SelectContainer = styled('div')({
     position: 'relative',
 });
-const stylesInputArrowIcon = () => css({
-    label: 'Select-arrow-icon',
+const SelectArrowIcon = styled(ArrowDropDownIcon)((props) => ({
     position: 'absolute',
     right: '0px',
     top: 'calc(50% - 12px)',
     pointerEvents: 'none',
     margin: '0px var(--pv-size-base)',
     color: 'var(--pv-color-gray-10)',
-});
-const stylesInputArrowIconDisabled = () => css({
-    label: 'disabled',
-    color: 'var(--pv-color-gray-7)',
-});
+    ...(props.disabled && {
+        color: 'var(--pv-color-gray-7)',
+    }),
+}));
+/**
+ *
+ */
 export const Select = React.forwardRef((props, ref) => {
-    const { options, size, className, label, onChange, inputProps, disabled, defaultValue, id, value, placeholder, required, name, inputRef, error, errorText, autoFocus, ...other } = props;
-    return (React.createElement("div", { ...other, ref: ref, className: className },
-        label && (React.createElement("label", { htmlFor: id, className: cx({
-                [stylesLabel()]: true,
-            }) },
+    const { options, size, label, inputProps, disabled, defaultValue, id, value, placeholder, required, name, inputRef, error, errorText, autoFocus, onChange, ...other } = props;
+    return (React.createElement("div", { ref: ref, ...other },
+        label && (React.createElement(SelectLabel, { htmlFor: id },
             React.createElement(Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
-        React.createElement("div", { className: cx(stylesInputContainer()) },
-            React.createElement("select", { disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
+        React.createElement(SelectContainer, null,
+            React.createElement(SelectRoot, { selectSize: size, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, className: cx({
-                    [stylesInputBase()]: true,
-                    [stylesInputSizeSmall()]: size === 'small',
-                    [stylesInputSizeMedium()]: size === 'medium',
-                    [stylesInputSizeLarge()]: size === 'large',
-                }), "aria-invalid": error || undefined, onChange: onChange, ...inputProps },
+                autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, ...inputProps },
                 placeholder && (React.createElement("option", { value: "" }, placeholder)),
                 options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))),
-            React.createElement(ArrowDropDownIcon, { className: cx({
-                    [stylesInputArrowIcon()]: true,
-                    [stylesInputArrowIconDisabled()]: disabled,
-                }), "aria-hidden": true })),
-        error && errorText && (React.createElement(Typography, { variant: "c2", color: "wrong", className: cx({
-                [stylesError()]: true,
-            }) }, errorText))));
+            React.createElement(SelectArrowIcon, { disabled: disabled, "aria-hidden": true })),
+        error && errorText && (React.createElement(SelectErrorMessage, { variant: "c2", color: "wrong" }, errorText))));
 });
 Select.displayName = 'Select';
 Select.defaultProps = {