@via-profit/ui-kit 0.4.0 → 0.5.0

package/esm/TextArea/index.js

@@ -0,0 +1,67 @@
+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 Container from '../TextField/TextFieldContainer';
+import Label from '../TextField/TextFieldLabel';
+import Asterisk from '../TextField/TextFieldLabelAsterisk';
+import InputWrapper from '../TextField/TextFieldInputWrapper';
+import Input from '../TextArea/TextAreaInput';
+import ErrorText from '../TextField/TextFieldErrorText';
+import IconWrapper from './TextAreaIconWrapper';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const TextArea = (props, ref) => {
+    const _a = useThemeProps('TextArea', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const [focused, setFocused] = React.useState(false);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
+    const inputChange = React.useCallback(event => {
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const inputFocus = React.useCallback(event => {
+        setFocused(true);
+        if (typeof onFocus === 'function') {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const inputBlur = React.useCallback(event => {
+        setFocused(false);
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
+    const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
+    const overridesMap = React.useMemo(() => ({
+        Label: (overrides === null || overrides === void 0 ? void 0 : overrides.Label) || Label,
+        Input: (overrides === null || overrides === void 0 ? void 0 : overrides.Input) || Input,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || Asterisk,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || ErrorText,
+        IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || IconWrapper,
+        InputWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.InputWrapper) || InputWrapper,
+    }), [overrides]);
+    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
+        typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+            label,
+            typeof requiredAsterisk !== 'undefined' &&
+                requiredAsterisk !== null &&
+                requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth, disabled: nativeInputProps.disabled },
+            hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
+            React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
+            hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText)));
+};
+export default React.forwardRef(TextArea);

package/esm/TextField/TextFieldContainer.js

@@ -0,0 +1,26 @@
+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 StyledTextFieldContainer = styled.div `
+  display: inline-flex;
+  flex-flow: column;
+  width: 100%;
+  max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
+  vertical-align: top;
+`;
+export const TextFieldContainer = React.forwardRef((props, ref) => {
+    const { children, fullWidth, focused, error } = props, nativeProps = __rest(props, ["children", "fullWidth", "focused", "error"]);
+    return (React.createElement(StyledTextFieldContainer, Object.assign({}, nativeProps, { "$fullWidth": fullWidth, "$focused": focused, "$error": error, ref: ref }), children));
+});
+TextFieldContainer.displayName = 'TextFieldContainer';
+export default TextFieldContainer;

package/esm/TextField/TextFieldErrorText.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.5em;
+  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;
+`;
+export const TextFieldErrorText = React.forwardRef((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"))));
+});
+TextFieldErrorText.displayName = 'TextFieldErrorText';
+export default TextFieldErrorText;

package/esm/TextField/TextFieldIconWrapper.js

@@ -0,0 +1,46 @@
+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 { css } from '@emotion/react';
+const IconWrapper = styled.div `
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${({ $position }) => $position === 'start' &&
+    css `
+      border-top-left-radius: inherit;
+      border-bottom-left-radius: inherit;
+    `};
+  ${({ $position }) => $position === 'end' &&
+    css `
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+    `};
+  & > svg {
+    margin: 0 1em;
+    border-radius: inherit;
+  }
+  & > button {
+    height: 100%;
+    padding: 0 1em;
+    border-radius: inherit;
+    box-shadow: none;
+  }
+`;
+export const TextFieldIconWrapper = React.forwardRef((props, ref) => {
+    const { children, position, focused, error } = props, nativeProps = __rest(props, ["children", "position", "focused", "error"]);
+    return (React.createElement(IconWrapper, Object.assign({}, nativeProps, { "$position": position, "$error": error, "$focused": focused, ref: ref }), children));
+});
+TextFieldIconWrapper.displayName = 'TextFieldIconWrapper';
+export default TextFieldIconWrapper;

package/esm/TextField/TextFieldInput.js

@@ -0,0 +1,46 @@
+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 { css } from '@emotion/react';
+const Input = styled.input `
+  padding: 1em 1.2em;
+  font-size: 1em;
+  /* Form controls do not inherit the font by default (textarea is monospace) */
+  font-family: inherit;
+  background: none;
+  border-radius: inherit;
+  margin: 0;
+  border: 0;
+  width: 100%;
+  color: currentColor;
+  ${({ $hasStartIcon }) => $hasStartIcon &&
+    css `
+      padding-left: 0;
+    `};
+  ${({ $hasEndIcon }) => $hasEndIcon &&
+    css `
+      padding-right: 0;
+    `};
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    font-style: italic;
+  }
+`;
+export const TextFieldInput = React.forwardRef((props, ref) => {
+    const { hasEndIcon, hasStartIcon } = props, nativeProps = __rest(props, ["hasEndIcon", "hasStartIcon"]);
+    return (React.createElement(Input, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref })));
+});
+TextFieldInput.displayName = 'TextFieldInput';
+export default TextFieldInput;

package/esm/TextField/TextFieldInputWrapper.js

@@ -0,0 +1,59 @@
+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 { css } from '@emotion/react';
+const Wrapper = styled.div `
+  display: flex;
+  align-items: stretch;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border: 1px solid;
+  outline: 1px solid transparent;
+  border-color: ${({ theme }) => theme.isDark
+    ? theme.color.textPrimary.darken(100).toString()
+    : theme.color.textPrimary.lighten(150).toString()};
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+  font-size: 0.9em;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  transition: all 180ms ease-out 0s;
+
+  ${props => props.$focused &&
+    css `
+      border-color: ${props.theme.color.accentPrimary.lighten(10).toString()};
+      outline-color: ${props.theme.color.accentPrimary.lighten(10).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()};
+      }
+    `}
+  ${props => props.$disabled &&
+    css `
+      color: ${props.theme.color.textPrimary.alpha(0.4).toString()};
+      cursor: not-allowed;
+
+      & input,
+      & textarea {
+        cursor: not-allowed;
+      }
+    `}
+`;
+export const TextFieldInputWrapper = React.forwardRef((props, ref) => {
+    const { focused, error, readOnly, fullWidth, disabled, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "disabled", "children"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), "$disabled": disabled, ref: ref }), children));
+});
+TextFieldInputWrapper.displayName = 'TextFieldInputWrapper';
+export default TextFieldInputWrapper;

package/esm/TextField/TextFieldLabel.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 * as React from 'react';
+import styled from '@emotion/styled';
+const Label = styled.label `
+  font-size: 0.8em;
+  margin-bottom: 0.2em;
+`;
+export const TextFieldLabel = React.forwardRef((props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Label, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+});
+TextFieldLabel.displayName = 'TextFieldLabel';
+export default TextFieldLabel;

package/esm/TextField/TextFieldLabelAsterisk.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 * as React from 'react';
+import styled from '@emotion/styled';
+const Asterisk = styled.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+export const TextFieldLabelAsterisk = React.forwardRef((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));
+});
+TextFieldLabelAsterisk.displayName = 'TextFieldLabelAsterisk';
+export default TextFieldLabelAsterisk;

package/esm/TextField/index.js

@@ -0,0 +1,87 @@
+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 Container from './TextFieldContainer';
+import Label from './TextFieldLabel';
+import Asterisk from './TextFieldLabelAsterisk';
+import InputWrapper from './TextFieldInputWrapper';
+import Input from './TextFieldInput';
+import ErrorText from './TextFieldErrorText';
+import IconWrapper from './TextFieldIconWrapper';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+export * from './TextFieldContainer';
+export * from './TextFieldLabel';
+export * from './TextFieldLabelAsterisk';
+export * from './TextFieldInputWrapper';
+export * from './TextFieldInput';
+export * from './TextFieldErrorText';
+export * from './TextFieldIconWrapper';
+const defailtOverrides = {
+    Label,
+    Input,
+    Asterisk,
+    Container,
+    ErrorText,
+    IconWrapper,
+    InputWrapper,
+};
+const TextField = React.forwardRef((props, ref) => {
+    const _a = useThemeProps('TextField', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const [focused, setFocused] = React.useState(false);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
+    const inputChange = React.useCallback(event => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }, [onChange]);
+    const inputFocus = React.useCallback(event => {
+        setFocused(true);
+        if (typeof onFocus === 'function') {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const inputBlur = React.useCallback(event => {
+        setFocused(false);
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
+    const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, defailtOverrides), overrides)), [overrides]);
+    const renderAsterisk = React.useCallback(() => {
+        if (!requiredAsterisk) {
+            return null;
+        }
+        return (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk));
+    }, [overridesMap, requiredAsterisk]);
+    const renderLabel = React.useCallback(() => {
+        if (!label) {
+            return null;
+        }
+        return (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+            label,
+            renderAsterisk()));
+    }, [error, inputID, label, overridesMap, renderAsterisk]);
+    const renderIcon = React.useCallback((position, icon) => (React.createElement(overridesMap.IconWrapper, { position: position }, icon)), [overridesMap]);
+    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
+        renderLabel(),
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth, disabled: nativeInputProps.disabled },
+            hasStartIcon && renderIcon('start', startIcon),
+            React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
+            hasEndIcon && renderIcon('end', endIcon)),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText)));
+});
+TextField.displayName = 'TextField';
+export default React.memo(TextField);

package/esm/ThemeProvider/components.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/max-dependencies */
+export {};

package/esm/ThemeProvider/createTheme.js

@@ -0,0 +1,42 @@
+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 Color from '../Color';
+export const createTheme = overrides => {
+    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing, components, typography, focusRing, elevation } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing", "components", "typography", "focusRing", "elevation"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, components: components || {}, 
+        // Empty by default: the components keep their own fonts, focus and shadows
+        typography: Object.assign({}, typography), focusRing: Object.assign({}, focusRing), elevation: Object.assign({}, elevation), fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing) });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    /* @ts-ignore */
+    const defaultColors = {
+        backgroundPrimary: '#fafafa',
+        backgroundSecondary: '#0e1200',
+        textPrimary: '#0b1643',
+        textSecondary: '#525252',
+        accentPrimary: '#009900',
+        accentPrimaryContrast: '#e0f2ea',
+        accentSecondary: '#0b1643',
+        accentSecondaryContrast: '#FFFFFF',
+        error: '#ff2b2b',
+        surface: '#fff',
+        errorContrast: '#ffffff',
+        warning: '#fcbf03',
+        warningContrast: '#ffffff',
+        success: '#0ca400',
+        successContrast: '#ffffff',
+    };
+    Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
+        theme.color[colorName] = Color.fromString(colorValue);
+    });
+    return theme;
+};
+export default createTheme;

package/esm/ThemeProvider/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ThemeProvider as EmotionProvider, useTheme } from '@emotion/react';
+export { useTheme };
+export * from './createTheme';
+export * from './components';
+export { default as useThemeProps } from './useThemeProps';
+export * from './tokens';
+const ThemeProvider = props => {
+    const { children, theme } = props;
+    return React.createElement(EmotionProvider, { theme: theme }, children);
+};
+export default ThemeProvider;

package/esm/ThemeProvider/tokens.js

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+/**
+ * True if the theme sets the focus ring
+ */
+export const hasThemeFocusRing = (theme) => typeof theme.focusRing.width !== 'undefined' || typeof theme.focusRing.color !== 'undefined';
+/**
+ * The focus ring of the theme for the `selector` of the focused element.
+ * Put it at the end of the styles: it replaces the own focus of the component.
+ * Without `focusRing` in the theme it returns nothing and the component keeps its own focus
+ */
+export const themeFocusRing = (theme, selector = '&:focus-visible') => {
+    if (!hasThemeFocusRing(theme)) {
+        return undefined;
+    }
+    const { width = '2px', offset = '1px', color = theme.color.accentPrimary.toString(), } = theme.focusRing;
+    return css `
+    ${selector} {
+      outline: ${width} solid ${color};
+      outline-offset: ${offset};
+    }
+  `;
+};
+/**
+ * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ */
+export const elevation = (theme, level, own) => { var _a; return (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own; };

package/esm/ThemeProvider/useThemeProps.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+/**
+ * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
+ * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
+ */
+const useThemeProps = (name, props) => {
+    var _a;
+    const theme = useTheme();
+    const config = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name];
+    const defaultProps = config === null || config === void 0 ? void 0 : config.defaultProps;
+    const themeOverrides = config === null || config === void 0 ? void 0 : config.overrides;
+    const { overrides } = props;
+    // A stable object: the components memoize the map of their parts by `overrides`
+    const mergedOverrides = React.useMemo(() => (themeOverrides ? Object.assign(Object.assign({}, themeOverrides), overrides) : overrides), [themeOverrides, overrides]);
+    if (!defaultProps && !themeOverrides) {
+        return props;
+    }
+    const merged = Object.assign(Object.assign({}, props), { overrides: mergedOverrides });
+    if (defaultProps) {
+        Object.entries(defaultProps).forEach(([key, value]) => {
+            if (typeof merged[key] === 'undefined') {
+                merged[key] = value;
+            }
+        });
+    }
+    return merged;
+};
+export default useThemeProps;

package/esm/Toast/ToastAction.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const StyledButton = styled.button `
+  margin: 0;
+  padding: 0.35em 0.7em;
+  border: 0;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  background-color: ${({ theme }) => theme.color.accentPrimary.alpha(0.1).toString()};
+  color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease-out;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.accentPrimary.alpha(0.18).toString()};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 1px;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const ToastAction = (props, ref) => React.createElement(StyledButton, Object.assign({ type: "button" }, props, { ref: ref }));
+export default React.forwardRef(ToastAction);

package/esm/Toast/ToastCard.js

@@ -0,0 +1,80 @@
+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, keyframes } from '@emotion/react';
+import { themeFocusRing, elevation } from '../ThemeProvider/tokens';
+export const TOAST_ANIMATION_MS = 200;
+/**
+ * The toasts slide from the edge of the screen they are attached to
+ */
+const getOffset = (position) => {
+    if (position.endsWith('right')) {
+        return 'translateX(110%)';
+    }
+    if (position.endsWith('left')) {
+        return 'translateX(-110%)';
+    }
+    return position.startsWith('top') ? 'translateY(-100%)' : 'translateY(100%)';
+};
+const StyledCard = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  min-width: 14em;
+  padding: 0.75em 1em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.5}em;
+  border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup', `0 0.5em 1.5em rgba(0, 0, 0, ${theme.isDark ? 0.5 : 0.14})`)};
+  font-size: 0.875em;
+  line-height: 1.4;
+  pointer-events: auto;
+  overflow-wrap: anywhere;
+  ${({ $position, $isClosing }) => {
+    const hidden = css `
+      opacity: 0;
+      transform: ${getOffset($position)};
+    `;
+    const shown = css `
+      opacity: 1;
+      transform: none;
+    `;
+    const enter = keyframes `from { ${hidden.styles} } to { ${shown.styles} }`;
+    const exit = keyframes `from { ${shown.styles} } to { ${hidden.styles} }`;
+    return css `
+      animation: ${$isClosing ? exit : enter} ${TOAST_ANIMATION_MS}ms cubic-bezier(0.2, 0, 0, 1)
+        forwards;
+    `;
+}}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-name: none;
+    opacity: ${({ $isClosing }) => ($isClosing ? 0 : 1)};
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const ToastCard = (props, ref) => {
+    const { children, type, position, isClosing } = props, nativeProps = __rest(props, ["children", "type", "position", "isClosing"]);
+    return (React.createElement(StyledCard, Object.assign({ "data-toast-type": type }, nativeProps, { "$position": position, "$isClosing": isClosing, ref: ref }), children));
+};
+export default React.forwardRef(ToastCard);