@via-profit/ui-kit 0.3.0 → 0.4.0

package/TextArea/TextAreaInput.js

@@ -44,6 +44,8 @@ const TextareaNative = styled_1.default.textarea `
   resize: none;
   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;

package/TextArea/index.js

@@ -85,7 +85,7 @@ const TextArea = (props, ref) => {
             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 },
+        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))),

package/TextField/TextFieldInput.js

@@ -44,6 +44,8 @@ const react_1 = require("@emotion/react");
 const Input = styled_1.default.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;

package/TextField/TextFieldInputWrapper.d.ts

@@ -4,11 +4,13 @@ export type TextFieldInputWrapperProps = React.HTMLAttributes<HTMLDivElement> &
     readonly fullWidth?: boolean;
     readonly readOnly?: boolean;
     readonly focused?: boolean;
+    readonly disabled?: boolean;
 };
 export declare const TextFieldInputWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly error?: boolean | undefined;
     readonly fullWidth?: boolean | undefined;
     readonly readOnly?: boolean | undefined;
     readonly focused?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TextFieldInputWrapper;

package/TextField/TextFieldInputWrapper.js

@@ -69,10 +69,20 @@ const Wrapper = styled_1.default.div `
         border-color: ${props.theme.color.error.lighten(0.6).toString()};
       }
     `}
+  ${props => props.$disabled &&
+    (0, react_1.css) `
+      color: ${props.theme.color.textPrimary.alpha(0.4).toString()};
+      cursor: not-allowed;
+
+      & input,
+      & textarea {
+        cursor: not-allowed;
+      }
+    `}
 `;
 exports.TextFieldInputWrapper = React.forwardRef((props, ref) => {
-    const { focused, error, readOnly, fullWidth, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "children"]);
-    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), ref: ref }), children));
+    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));
 });
 exports.TextFieldInputWrapper.displayName = 'TextFieldInputWrapper';
 exports.default = exports.TextFieldInputWrapper;

package/TextField/index.js

@@ -107,7 +107,7 @@ const TextField = React.forwardRef((props, ref) => {
     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 },
+        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)),

package/ThemeProvider/createTheme.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const Color_1 = __importDefault(require("../Color"));
 const createTheme = overrides => {
-    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape"]);
-    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, 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) });
+    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, 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 = {
@@ -41,7 +41,6 @@ const createTheme = overrides => {
     Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
         theme.color[colorName] = Color_1.default.fromString(colorValue);
     });
-    theme.color.test = Color_1.default.fromString('red');
     return theme;
 };
 exports.createTheme = createTheme;

package/ThemeProvider/index.d.ts

@@ -3,12 +3,13 @@ import { useTheme } from '@emotion/react';
 import type Color from '../Color';
 export { useTheme };
 export * from './createTheme';
-export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color'>> & {
+export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing'>> & {
     readonly isDark: boolean;
     readonly fontSize: Record<keyof UIThemeOverrideFontSize, number>;
     readonly zIndex: Required<UIThemeOverrideZIndex>;
     readonly color: Record<keyof UIThemeOverrideColor, Color>;
     readonly shape: Required<UIThemeOverrideShape>;
+    readonly spacing: Required<UIThemeOverrideSpacing>;
 };
 export interface UIThemeOverrideColor {
     readonly backgroundPrimary?: string;
@@ -34,6 +35,18 @@ export interface UIThemeOverrideZIndex {
 export interface UIThemeOverrideShape {
     readonly radiusFactor?: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
 }
+/**
+ * The spacing scale: the gaps between the elements (`<Stack>`, `<Grid>`) and the paddings.
+ * Any CSS length, `em` is recommended: the spacing grows together with the font size
+ */
+export interface UIThemeOverrideSpacing {
+    readonly xs?: string;
+    readonly sm?: string;
+    readonly md?: string;
+    readonly lg?: string;
+    readonly xl?: string;
+}
+export type ThemeSpacing = keyof UIThemeOverrideSpacing;
 export interface UIThemeOverrideFontSize {
     readonly small?: number;
     readonly normal?: number;
@@ -41,10 +54,14 @@ export interface UIThemeOverrideFontSize {
     readonly large?: number;
 }
 export interface UIThemeOverrides {
-    readonly isDark: boolean;
+    /**
+     * **Default:** `false`
+     */
+    readonly isDark?: boolean;
     readonly fontSize?: UIThemeOverrideFontSize;
     readonly zIndex?: UIThemeOverrideZIndex;
     readonly shape?: UIThemeOverrideShape;
+    readonly spacing?: UIThemeOverrideSpacing;
     readonly color?: UIThemeOverrideColor;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/Typography/Base.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /**
  * @deprecated - Use `Span` instead\
- * Example: `import Span from '@via-profit/ui-kit/Span'`
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 declare const Base: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/Typography/Base.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 /**
  * @deprecated - Use `Span` instead\
- * Example: `import Span from '@via-profit/ui-kit/Span'`
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 const Base = styled_1.default.span `
   font-size: 1em;

package/Typography/Blockquote.js

@@ -16,7 +16,7 @@ const Blockquote = styled_1.default.blockquote `
   & > p:first-of-type {
     margin-top: 0;
   }
-  & > p:last-child {
+  & > p:last-of-type {
     margin-bottom: 0;
   }
 `;

package/Typography/Del.js

@@ -20,8 +20,8 @@ const Styled = styled_1.default.del `
   font-size: 1em;
   color: currentColor;
 `;
-const Em = (props, ref) => {
+const Del = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
     return (react_1.default.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
 };
-exports.default = react_1.default.forwardRef(Em);
+exports.default = react_1.default.forwardRef(Del);

package/Typography/H4.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h4 `
-  font-size: 1.2em;
+  font-size: 1.1em;
   font-weight: 500;
   color: currentColor;
 `;

package/Typography/H5.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h5 `
-  font-size: 1.2em;
-  font-weight: 300;
+  font-size: 1em;
+  font-weight: 500;
   color: currentColor;
 `;
 const H5 = (props, ref) => {

package/Typography/H6.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type H6Props = React.HTMLAttributes<HTMLHeadingElement>;
+declare const _default: React.ForwardRefExoticComponent<H6Props & React.RefAttributes<HTMLHeadingElement>>;
+export default _default;

package/Typography/H6.js

@@ -0,0 +1,28 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Styled = styled_1.default.h6 `
+  font-size: 0.9em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H6 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(H6);

package/Typography/SectionDescription.js

@@ -12,6 +12,5 @@ const SectionDescription = (0, styled_1.default)(Paragraph_1.default) `
   padding: 0 20%;
   margin-top: 2.4em;
   margin-bottom: 1em;
-  text-align: center;
 `;
 exports.default = SectionDescription;

package/Typography/SectionTitle.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-type Props = {
-    style?: any;
-    className?: string;
-    children: React.ReactNode | React.ReactNode[];
-};
-declare const SectionTitle: React.FC<Props>;
-export default SectionTitle;
+import { H2Props } from './H2';
+export type SectionTitleProps = H2Props;
+declare const _default: React.ForwardRefExoticComponent<H2Props & React.RefAttributes<HTMLHeadingElement>>;
+export default _default;

package/Typography/SectionTitle.js

@@ -1,4 +1,15 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,19 +24,26 @@ const Title = (0, styled_1.default)(H2_1.default) `
 `;
 const Inner = styled_1.default.span `
   position: relative;
-  & :before {
+
+  /* The accent line under the title */
+  &::before {
     content: '';
     position: absolute;
     left: 50%;
-    bottom: -15px;
-    height: 3px;
-    width: 40px;
+    bottom: -0.5em;
+    height: 0.12em;
+    width: 2.5em;
+    border-radius: 0.06em;
     transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.color.accentPrimary.toString()};
   }
 `;
-const SectionTitle = props => {
-    const { style, className, children } = props;
-    return (react_1.default.createElement(Title, { style: style, className: className },
+/**
+ * The centered H2 with the accent line under the text
+ */
+const SectionTitle = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Title, Object.assign({}, nativeProps, { ref: ref }),
         react_1.default.createElement(Inner, null, children)));
 };
-exports.default = SectionTitle;
+exports.default = react_1.default.forwardRef(SectionTitle);

package/Typography/index.d.ts

@@ -1,3 +1,30 @@
 import Paragraph from './Paragraph';
 export * from './Paragraph';
+export type { H1Props } from './H1';
+export type { H2Props } from './H2';
+export type { H3Props } from './H3';
+export type { H4Props } from './H4';
+export type { H5Props } from './H5';
+export type { H6Props } from './H6';
+export type { SpanProps } from './Span';
+export type { StrongProps } from './Strong';
+export type { EmProps } from './Em';
+export type { DelProps } from './Del';
+export type { SectionTitleProps } from './SectionTitle';
+export { default as H1 } from './H1';
+export { default as H2 } from './H2';
+export { default as H3 } from './H3';
+export { default as H4 } from './H4';
+export { default as H5 } from './H5';
+export { default as H6 } from './H6';
+export { default as Span } from './Span';
+export { default as Strong } from './Strong';
+export { default as Em } from './Em';
+export { default as Del } from './Del';
+export { default as U } from './U';
+export { default as Blockquote } from './Blockquote';
+export { Ul, Ol, Li } from './List';
+export { default as SectionTitle } from './SectionTitle';
+export { default as SectionDescription } from './SectionDescription';
+export { Paragraph };
 export default Paragraph;

package/Typography/index.js

@@ -17,6 +17,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paragraph = exports.SectionDescription = exports.SectionTitle = exports.Li = exports.Ol = exports.Ul = exports.Blockquote = exports.U = exports.Del = exports.Em = exports.Strong = exports.Span = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
 const Paragraph_1 = __importDefault(require("./Paragraph"));
+exports.Paragraph = Paragraph_1.default;
 __exportStar(require("./Paragraph"), exports);
+var H1_1 = require("./H1");
+Object.defineProperty(exports, "H1", { enumerable: true, get: function () { return __importDefault(H1_1).default; } });
+var H2_1 = require("./H2");
+Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return __importDefault(H2_1).default; } });
+var H3_1 = require("./H3");
+Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return __importDefault(H3_1).default; } });
+var H4_1 = require("./H4");
+Object.defineProperty(exports, "H4", { enumerable: true, get: function () { return __importDefault(H4_1).default; } });
+var H5_1 = require("./H5");
+Object.defineProperty(exports, "H5", { enumerable: true, get: function () { return __importDefault(H5_1).default; } });
+var H6_1 = require("./H6");
+Object.defineProperty(exports, "H6", { enumerable: true, get: function () { return __importDefault(H6_1).default; } });
+var Span_1 = require("./Span");
+Object.defineProperty(exports, "Span", { enumerable: true, get: function () { return __importDefault(Span_1).default; } });
+var Strong_1 = require("./Strong");
+Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return __importDefault(Strong_1).default; } });
+var Em_1 = require("./Em");
+Object.defineProperty(exports, "Em", { enumerable: true, get: function () { return __importDefault(Em_1).default; } });
+var Del_1 = require("./Del");
+Object.defineProperty(exports, "Del", { enumerable: true, get: function () { return __importDefault(Del_1).default; } });
+var U_1 = require("./U");
+Object.defineProperty(exports, "U", { enumerable: true, get: function () { return __importDefault(U_1).default; } });
+var Blockquote_1 = require("./Blockquote");
+Object.defineProperty(exports, "Blockquote", { enumerable: true, get: function () { return __importDefault(Blockquote_1).default; } });
+var List_1 = require("./List");
+Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return List_1.Ul; } });
+Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return List_1.Ol; } });
+Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return List_1.Li; } });
+var SectionTitle_1 = require("./SectionTitle");
+Object.defineProperty(exports, "SectionTitle", { enumerable: true, get: function () { return __importDefault(SectionTitle_1).default; } });
+var SectionDescription_1 = require("./SectionDescription");
+Object.defineProperty(exports, "SectionDescription", { enumerable: true, get: function () { return __importDefault(SectionDescription_1).default; } });
+// The default export is kept for compatibility
 exports.default = Paragraph_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -14,9 +14,7 @@
   "scripts": {
     "lint": "eslint --fix .",
     "build": "node ./scripts/build.js",
-    "publish:package": "bash ./scripts/pub.sh",
-    "build:flags": "node ./scripts/compile-country-flags.js",
-    "indexes:flags": "node ./scripts/indexes-country-flags.js"
+    "build:flags": "node ./scripts/compile-country-flags.js"
   },
   "publishConfig": {
     "access": "public"

package/utils/spacing.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from '@emotion/react';
+import type { ThemeSpacing } from '../ThemeProvider';
+/**
+ * A step of the theme spacing scale (`xs`…`xl`), any CSS length (`'0.75em'`, `'12px'`)
+ * or a number of pixels
+ */
+export type Spacing = ThemeSpacing | (string & {}) | number;
+/**
+ * Resolves the spacing to a CSS value
+ */
+export declare const resolveSpacing: (theme: Theme, value: Spacing) => string;

package/utils/spacing.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSpacing = void 0;
+/**
+ * Resolves the spacing to a CSS value
+ */
+const resolveSpacing = (theme, value) => {
+    var _a;
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    return (_a = theme.spacing[value]) !== null && _a !== void 0 ? _a : value;
+};
+exports.resolveSpacing = resolveSpacing;

package/Autocomplete/OverrideMenuList.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { MenuListProps } from '../Menu';
-declare const OverrideMenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
-export default OverrideMenuList;

package/Autocomplete/OverrideMenuList.js

@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Menu_1 = require("../Menu");
-const StyledMenuList = (0, styled_1.default)(Menu_1.MenuList) `
-  &:focus {
-    outline: none;
-  }
-
-  --border-color: ${({ theme }) => theme.isDark
-    ? theme.color.textPrimary.darken(100).toString()
-    : theme.color.textPrimary.lighten(150).toString()};
-
-  ${({ anchorPos, theme }) => anchorPos === 'top-fill' &&
-    (0, react_2.css) `
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border: 1px solid var(--border-color);
-      border-bottom: 0;
-      box-shadow: 0 1em -1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()};
-    `};
-
-  ${({ anchorPos, theme }) => anchorPos === 'bottom-fill' &&
-    (0, react_2.css) `
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border: 1px solid var(--border-color);
-      border-top: 0;
-      box-shadow: 0 1em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()};
-    `};
-`;
-const OverrideMenuList = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(StyledMenuList, Object.assign({ "data-anch-po": props.anchorPos }, props, { ref: ref }))));
-OverrideMenuList.displayName = 'OverrideMenuList';
-exports.default = OverrideMenuList;

package/Autocomplete2/Autocomplete2.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-type Item = {
-    readonly id: string;
-    readonly label: string;
-};
-type Autocomplete2Props = {
-    readonly value: Item | null;
-    readonly items: readonly Item[];
-    readonly onChange: (value: Item | null) => void;
-};
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Autocomplete2Props & React.RefAttributes<HTMLDivElement>>>;
-export default _default;

package/Autocomplete2/Autocomplete2.js

@@ -1,83 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Autocomplete2TextField_1 = __importDefault(require("./Autocomplete2TextField"));
-const Autocomplete2 = React.forwardRef((props, ref) => {
-    const { value, items, onChange } = props;
-    /**
-     * Get item ID
-     */
-    const getItemID = React.useCallback((item) => (item ? item.id : '<no-value-id>'), []);
-    const [valueID, setValueID] = React.useState(() => getItemID(value));
-    /**
-     * Filter items list by input value
-     */
-    const filterItems = React.useCallback((items, data) => {
-        const query = data.query.toLocaleLowerCase();
-        return items.filter(item => item.label.toLocaleLowerCase().indexOf(query) !== -1);
-    }, []);
-    /**
-     * Input value
-     */
-    const [inputValue, setInputValue] = React.useState(() => {
-        if (!value) {
-            return '';
-        }
-        return value.label;
-    });
-    /**
-     * Filtered items
-     */
-    const [filteredItems, setFilteredItems] = React.useState(() => filterItems(items, { query: inputValue }));
-    /**
-     * Render filtered items list
-     */
-    const renderItems = React.useCallback(() => (React.createElement("ol", null, filteredItems.map(item => (React.createElement("li", { key: item.id, onClick: () => onChange(item) }, item.label))))), [filteredItems, onChange]);
-    /**
-     * onChange text field input
-     */
-    const handleInputChange = React.useCallback((input) => {
-        setInputValue(input);
-        setFilteredItems(filterItems(items, { query: input }));
-    }, [filterItems, items]);
-    /**
-     * value listener
-     */
-    React.useEffect(() => {
-        const newValueID = getItemID(value);
-        if (newValueID !== valueID) {
-            setValueID(newValueID);
-        }
-    }, [getItemID, inputValue, value, valueID]);
-    return (React.createElement("div", null,
-        React.createElement(Autocomplete2TextField_1.default, { ref: ref, value: inputValue, onChange: handleInputChange }),
-        renderItems()));
-});
-Autocomplete2.displayName = 'Autocomplete2';
-exports.default = React.memo(Autocomplete2);

package/Autocomplete2/Autocomplete2TextField.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export type Autocomplete2TextFieldProps = {
-    readonly value: string;
-    readonly onChange: (value: string) => void;
-};
-declare const Autocomplete2TextField: React.ForwardRefExoticComponent<Autocomplete2TextFieldProps & React.RefAttributes<HTMLDivElement>>;
-export default Autocomplete2TextField;

package/Autocomplete2/index.d.ts

@@ -1,2 +0,0 @@
-import Autocomplete2 from "./Autocomplete2";
-export default Autocomplete2;

package/Autocomplete2/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Autocomplete2_1 = __importDefault(require("./Autocomplete2"));
-exports.default = Autocomplete2_1.default;