@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Radio/index.js

@@ -0,0 +1,45 @@
+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 React from 'react';
+import Container from './RadioContainer';
+import Box from './RadioBox';
+import TextWrapper from './RadioTextWrapper';
+import RadioGroupContext from '../RadioGroup/RadioGroupContext';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const Radio = (props, ref) => {
+    var _a;
+    const group = React.useContext(RadioGroupContext);
+    const _b = useThemeProps('Radio', props), { children, value, checked, defaultChecked, onChange, disabled, color, labelPosition, error, name, required, overrides, className, style } = _b, nativeProps = __rest(_b, ["children", "value", "checked", "defaultChecked", "onChange", "disabled", "color", "labelPosition", "error", "name", "required", "overrides", "className", "style"]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || Box,
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
+    }), [overrides]);
+    // Inside a group the group decides; the own props of the radio button win where it makes sense
+    const isDisabled = disabled !== null && disabled !== void 0 ? disabled : group === null || group === void 0 ? void 0 : group.disabled;
+    const groupChecked = group && typeof value !== 'undefined' && typeof group.value !== 'undefined'
+        ? group.value === value
+        : undefined;
+    const groupDefaultChecked = group && typeof value !== 'undefined' && typeof group.value === 'undefined'
+        ? group.defaultValue === value
+        : undefined;
+    const handleChange = event => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (group && typeof value !== 'undefined') {
+            group.onChange(value, event);
+        }
+    };
+    return (React.createElement(overridesMap.Container, { className: className, style: style, labelPosition: labelPosition, disabled: isDisabled },
+        React.createElement(overridesMap.Box, Object.assign({}, nativeProps, { value: value, name: (_a = group === null || group === void 0 ? void 0 : group.name) !== null && _a !== void 0 ? _a : name, checked: checked !== null && checked !== void 0 ? checked : groupChecked, defaultChecked: defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : groupDefaultChecked, onChange: handleChange, disabled: isDisabled, required: required !== null && required !== void 0 ? required : group === null || group === void 0 ? void 0 : group.required, color: color !== null && color !== void 0 ? color : group === null || group === void 0 ? void 0 : group.color, error: error !== null && error !== void 0 ? error : group === null || group === void 0 ? void 0 : group.error, ref: ref })),
+        typeof children !== 'undefined' && (React.createElement(overridesMap.TextWrapper, null, children))));
+};
+export default React.forwardRef(Radio);

package/esm/Radio/useRadioColor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Radio to the Color instance
+ */
+const useRadioColor = (color) => {
+    const theme = useTheme();
+    return React.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+export default useRadioColor;

package/esm/RadioGroup/RadioGroupAsterisk.js

@@ -0,0 +1,25 @@
+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 * as React from 'react';
+import styled from '@emotion/styled';
+const Asterisk = styled.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  position: relative;
+  top: -0.4em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+const RadioGroupAsterisk = (props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+};
+export default React.forwardRef(RadioGroupAsterisk);

package/esm/RadioGroup/RadioGroupContainer.js

@@ -0,0 +1,31 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+/**
+ * `<fieldset>`: the legend names the group, `disabled` disables all the radio buttons inside
+ */
+const StyledContainer = styled.fieldset `
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5em;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+`;
+const RadioGroupContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(RadioGroupContainer);

package/esm/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Radio buttons inside the RadioGroup read the name, the value and the change handler from this context
+ */
+const RadioGroupContext = React.createContext(null);
+export default RadioGroupContext;

package/esm/RadioGroup/RadioGroupErrorText.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 * as React from 'react';
+import styled from '@emotion/styled';
+import NoSSR from '../NoSSR';
+const ErrorTextContainer = styled.div `
+  margin-left: 0;
+  max-height: 0;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled.div `
+  color: ${({ theme }) => theme.color.error.toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const RadioGroupErrorText = (props, ref) => {
+    const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('initial');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+export default React.forwardRef(RadioGroupErrorText);

package/esm/RadioGroup/RadioGroupItems.js

@@ -0,0 +1,25 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const StyledItems = styled.div `
+  display: flex;
+  flex-direction: ${({ $orientation }) => ($orientation === 'horizontal' ? 'row' : 'column')};
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: ${({ $orientation }) => ($orientation === 'horizontal' ? '0.5em 1.5em' : '0.75em')};
+`;
+const RadioGroupItems = (props, ref) => {
+    const { children, orientation = 'vertical' } = props, nativeProps = __rest(props, ["children", "orientation"]);
+    return (React.createElement(StyledItems, Object.assign({}, nativeProps, { "$orientation": orientation, ref: ref }), children));
+};
+export default React.forwardRef(RadioGroupItems);

package/esm/RadioGroup/RadioGroupLegend.js

@@ -0,0 +1,32 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const StyledLegend = styled.legend `
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.25em;
+  font-size: 0.86em;
+  font-weight: 600;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+
+  /* The floated legend does not break the flex layout of the fieldset */
+  & + * {
+    clear: both;
+  }
+`;
+const RadioGroupLegend = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledLegend, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(RadioGroupLegend);

package/esm/RadioGroup/index.js

@@ -0,0 +1,58 @@
+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 React from 'react';
+import Container from './RadioGroupContainer';
+import Legend from './RadioGroupLegend';
+import Items from './RadioGroupItems';
+import Asterisk from './RadioGroupAsterisk';
+import ErrorText from './RadioGroupErrorText';
+import RadioGroupContext from './RadioGroupContext';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const RadioGroup = (props, ref) => {
+    const _a = useThemeProps('RadioGroup', props), { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = _a, nativeProps = __rest(_a, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
+    const id = React.useId().replace(/:/g, '');
+    const name = inputName !== null && inputName !== void 0 ? inputName : `radio-group-${id}`;
+    const legendID = `radio-group-${id}-legend`;
+    const errorID = `radio-group-${id}-error`;
+    const hasErrorText = Boolean(error) && typeof errorText !== 'undefined';
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Legend: (overrides === null || overrides === void 0 ? void 0 : overrides.Legend) || Legend,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || Asterisk,
+        Items: (overrides === null || overrides === void 0 ? void 0 : overrides.Items) || Items,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || ErrorText,
+    }), [overrides]);
+    // The latest handler, so the context does not change on every render
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    const handleChange = React.useCallback((selected, event) => { var _a; return (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, selected, event); }, []);
+    // The initial value of the uncontrolled group, read once
+    const [initialValue] = React.useState(defaultValue);
+    const contextValue = React.useMemo(() => ({
+        name,
+        value,
+        defaultValue: initialValue,
+        onChange: handleChange,
+        disabled,
+        required,
+        error,
+        color,
+    }), [name, value, initialValue, handleChange, disabled, required, error, color]);
+    return (React.createElement(RadioGroupContext.Provider, { value: contextValue },
+        React.createElement(overridesMap.Container, Object.assign({ role: "radiogroup", "aria-labelledby": typeof label !== 'undefined' ? legendID : undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-describedby": hasErrorText ? errorID : undefined, disabled: disabled }, nativeProps, { ref: ref }),
+            typeof label !== 'undefined' && (React.createElement(overridesMap.Legend, { id: legendID },
+                label,
+                requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, { "aria-hidden": true }, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            React.createElement(overridesMap.Items, { orientation: orientation }, children),
+            typeof errorText !== 'undefined' && (React.createElement(overridesMap.ErrorText, { id: errorID, error: error }, errorText)))));
+};
+export default React.forwardRef(RadioGroup);

package/esm/Selectbox/SelectboxButton.js

@@ -0,0 +1,54 @@
+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 * as React from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button';
+import ButtonTextWrapper from '../Button/ButtonTextWrapper';
+import { css } from '@emotion/react';
+const StyledSelectboxButton = styled(Button) `
+  flex: 1;
+  padding: 1em 1.2em;
+  font-size: 1em;
+  background: none;
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: none;
+  &:hover {
+    box-shadow: none;
+  }
+  border-color: ${({ theme }) => theme.isDark
+    ? theme.color.textPrimary.darken(100).toString()
+    : theme.color.textPrimary.lighten(150).toString()};
+  ${props => props.$error &&
+    css `
+      border-color: ${props.theme.color.error.toString()};
+      color: ${props.theme.color.error.toString()};
+      &:focus {
+        border-color: ${props.theme.color.error.lighten(0.6).toString()};
+      }
+    `}
+  transition: none;
+  
+`;
+// The value has the size of the text in the fields, so the selectbox has the height of the TextField
+const StyledButtonTextWrapper = styled(ButtonTextWrapper) `
+  flex: 1;
+  font-size: 1em;
+`;
+const SelectboxButton = (props, ref) => {
+    const { children, fullWidth, error, anchorPos, isOpen } = props, nativeProps = __rest(props, ["children", "fullWidth", "error", "anchorPos", "isOpen"]);
+    return (React.createElement(StyledSelectboxButton, Object.assign({ "$fullWidth": fullWidth, "$error": error }, nativeProps, { "$isOpen": isOpen, overrides: {
+            TextWrapper: StyledButtonTextWrapper,
+        }, ref: ref }), children));
+};
+export default React.forwardRef(SelectboxButton);

package/esm/Selectbox/SelectboxButtonWrapper.js

@@ -0,0 +1,34 @@
+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 * as React from 'react';
+import styled from '@emotion/styled';
+const Wrapper = styled.div `
+  min-width: 16em;
+  font-size: 0.9em;
+  text-align: left;
+  max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
+  display: flex;
+  align-items: stretch;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  outline: 1px solid transparent;
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  transition: all 180ms ease-out 0s;
+
+
+`;
+const SelectboxButtonWrapper = (props, ref) => {
+    const { fullWidth, children, error } = props, nativeProps = __rest(props, ["fullWidth", "children", "error"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$fullWidth": Boolean(fullWidth), "$error": error, ref: ref }), children));
+};
+export default React.forwardRef(SelectboxButtonWrapper);

package/esm/Selectbox/SelectboxChevronIcon.js

@@ -0,0 +1,23 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const StyledSVG = styled.svg `
+  transform: rotateZ(${({ $isOpen }) => ($isOpen ? 90 : 0)}deg);
+  transition: transform 100ms ease-out;
+`;
+const SelectboxChevronIcon = (props, ref) => {
+    const { isOpen } = props, restProps = __rest(props, ["isOpen"]);
+    return (React.createElement(StyledSVG, Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, restProps, { "$isOpen": isOpen, ref: ref }),
+        React.createElement("path", { d: "m105.79 160.82a24 24 0 0 0-10.76 6.2109 24 24 0 0 0 0 33.941l144 144a24.002 24.002 0 0 0 33.941 0l144-144a24 24 0 0 0 0-33.941 24 24 0 0 0-33.941 0l-127.03 127.03-127.03-127.03a24 24 0 0 0-23.182-6.2109z", fill: "currentColor" })));
+};
+export default React.forwardRef(SelectboxChevronIcon);

package/esm/Selectbox/SelectboxContainer.js

@@ -0,0 +1,23 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const StyledSelectboxContainer = styled.div `
+  display: inline-flex;
+  flex-flow: column;
+  vertical-align: top;
+`;
+const SelectboxContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledSelectboxContainer, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SelectboxContainer);

package/esm/Selectbox/SelectboxMenu.js

@@ -0,0 +1,30 @@
+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 * as React from 'react';
+import Menu from '../Menu';
+const SelectboxMenu = React.forwardRef((props, ref) => {
+    const { multiple, items, value, isOpen, anchorPos, anchorElement, getOptionSelected, onChange, onRequestClose, children } = props, restMenuProps = __rest(props, ["multiple", "items", "value", "isOpen", "anchorPos", "anchorElement", "getOptionSelected", "onChange", "onRequestClose", "children"]);
+    const handleSelectItem = React.useCallback((item) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(item);
+    }, [onChange]);
+    const handleRequestClose = React.useCallback(evt => {
+        if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
+            if (onRequestClose) {
+                onRequestClose(evt);
+            }
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+        }
+    }, [onRequestClose, anchorElement]);
+    return (React.createElement(Menu, Object.assign({ ref: ref, offset: 0, anchorPos: anchorPos, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: handleSelectItem, closeOnSelect: !multiple, onRequestClose: handleRequestClose }, restMenuProps), ({ index, item }, itemProps) => children({ index, item: item }, itemProps)));
+});
+SelectboxMenu.displayName = 'SelectboxMenu';
+export default React.memo(SelectboxMenu);

package/esm/Selectbox/index.js

@@ -0,0 +1,129 @@
+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 * as React from 'react';
+import SelectboxItem from '../Menu/MenuItem';
+import Button from './SelectboxButton';
+import Spinner from '../LoadingIndicator/Spinner';
+import Icon from './SelectboxChevronIcon';
+import { mouseEventMap } from '../ClickOutside';
+import Label from '../TextField/TextFieldLabel';
+import Asterisk from '../TextField/TextFieldLabelAsterisk';
+import ErrorText from '../TextField/TextFieldErrorText';
+import ButtonWrapper from './SelectboxButtonWrapper';
+import Container from './SelectboxContainer';
+import SelectboxMenu from './SelectboxMenu';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+export { SelectboxItem };
+const DEFAULT_OVERRIDES = {
+    Button,
+    Icon,
+    Label,
+    Asterisk,
+    ErrorText,
+    ButtonWrapper,
+    Container,
+};
+const Selectbox = React.forwardRef((props, ref) => {
+    const _a = useThemeProps('Selectbox', props), { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = _a, nativeButtonProps = __rest(_a, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const menuRef = React.useRef(null);
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
+    const renderButtonContent = React.useCallback(() => {
+        if ((!multiple && value == null) || (multiple && value.length === 0)) {
+            return notSetLabel;
+        }
+        const selected = value;
+        return typeof renderValue === 'function'
+            ? renderValue(selected)
+            : selectedItemToString(selected);
+    }, [multiple, selectedItemToString, renderValue, value, notSetLabel]);
+    const handleButtonClick = React.useCallback((event) => {
+        var _a;
+        if (isOpen) {
+            onRequestClose(event);
+        }
+        else {
+            onRequestOpen(event);
+        }
+        (_a = nativeButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+    }, [isOpen, nativeButtonProps, onRequestClose, onRequestOpen]);
+    // As a native select, the arrows open the list; the list then takes the focus
+    const handleButtonKeyDown = React.useCallback((event) => {
+        var _a;
+        (_a = nativeButtonProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+        if (!isOpen &&
+            !event.defaultPrevented &&
+            (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            onRequestOpen(event);
+        }
+    }, [isOpen, nativeButtonProps, onRequestOpen]);
+    const setRefs = React.useCallback((el) => {
+        if (anchorElement !== el) {
+            setAnchorElement(el);
+        }
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    }, [anchorElement, ref]);
+    const handleMouseDown = React.useCallback((event) => {
+        var _a;
+        let parentElem = event.target;
+        let needToClose = true;
+        while (parentElem && 'parentNode' in parentElem) {
+            if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
+                needToClose = false;
+                break;
+            }
+            parentElem = parentElem.parentNode;
+        }
+        if (needToClose) {
+            onRequestClose(event);
+        }
+    }, [onRequestClose, anchorElement]);
+    React.useEffect(() => {
+        // A closed selectbox has nothing to close
+        if (!isOpen) {
+            return undefined;
+        }
+        window.document.addEventListener(mouseEventMap.onMouseDown, handleMouseDown);
+        return () => {
+            window.document.removeEventListener(mouseEventMap.onMouseDown, handleMouseDown);
+        };
+    }, [handleMouseDown, isOpen]);
+    const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
+        error,
+        isOpen,
+        anchorPos, 
+        // The static indicator: the default one is an overlay over the nearest positioned ancestor
+        endIcon: isLoading ? React.createElement(Spinner, { size: "1.2em" }) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
+    const labelProps = React.useMemo(() => ({
+        htmlFor: inputID,
+        error,
+    }), [inputID, error]);
+    return (React.createElement(overridesMap.Container, null,
+        label != null && (React.createElement(overridesMap.Label, Object.assign({}, labelProps),
+            label,
+            requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
+            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { id: inputID, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, ref: setRefs }), renderButtonContent())),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText),
+        React.createElement(SelectboxMenu, { multiple: multiple, items: items, value: value, isOpen: isOpen, anchorPos: anchorPos, positionStrategy: positionStrategy, autoFlip: autoFlip, alternativePlacements: ['bottom-fill', 'top-fill'], anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, ref: menuRef }, children)));
+});
+Selectbox.displayName = 'Selectbox';
+export default Selectbox;

package/esm/Slider/SliderContainer.js

@@ -0,0 +1,45 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledContainer = styled.span `
+  position: relative;
+  box-sizing: content-box;
+  font-size: 1em;
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  /* The browser must not scroll the page while the thumb is dragged by the finger */
+  touch-action: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  ${({ $orientation, $hasMarkLabels }) => $orientation === 'vertical'
+    ? css `
+          display: inline-block;
+          vertical-align: top;
+          width: 0.25em;
+          height: 12em;
+          padding: 0 0.7em;
+          margin-right: ${$hasMarkLabels ? '2.5em' : 0};
+        `
+    : css `
+          display: block;
+          width: 100%;
+          height: 0.25em;
+          padding: 0.7em 0;
+          margin-bottom: ${$hasMarkLabels ? '1.4em' : 0};
+        `}
+`;
+const SliderContainer = (props, ref) => {
+    const { children, orientation, disabled, hasMarkLabels } = props, nativeProps = __rest(props, ["children", "orientation", "disabled", "hasMarkLabels"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$orientation": orientation, "$disabled": disabled, "$hasMarkLabels": hasMarkLabels, ref: ref }), children));
+};
+export default React.forwardRef(SliderContainer);