@via-profit/ui-kit 0.3.0 → 0.4.0

package/RadioGroup/RadioGroupLegend.js

@@ -0,0 +1,37 @@
+"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 StyledLegend = styled_1.default.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_1.default.createElement(StyledLegend, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(RadioGroupLegend);

package/RadioGroup/index.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import { RadioGroupContainerProps } from './RadioGroupContainer';
+import { RadioGroupLegendProps } from './RadioGroupLegend';
+import { RadioGroupItemsProps, RadioGroupOrientation } from './RadioGroupItems';
+import { RadioGroupAsteriskProps } from './RadioGroupAsterisk';
+import { RadioGroupErrorTextProps } from './RadioGroupErrorText';
+export type { RadioGroupOrientation };
+export type RadioGroupProps = Omit<RadioGroupContainerProps, 'onChange' | 'defaultValue' | 'color'> & {
+    /**
+     * The name of the radio buttons. Generated if not passed
+     */
+    readonly name?: string;
+    /**
+     * The selected value of the controlled group, `null` — nothing is selected
+     */
+    readonly value?: string | null;
+    /**
+     * The initially selected value of the uncontrolled group
+     */
+    readonly defaultValue?: string | null;
+    /**
+     * Called with the value of the selected radio button
+     */
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The title of the group (`<legend>`)
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * **Default:** `vertical`
+     */
+    readonly orientation?: RadioGroupOrientation;
+    /**
+     * The color of all the radio buttons
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Disables all the radio buttons
+     */
+    readonly disabled?: boolean;
+    /**
+     * The native `required` of the radio buttons: the browser does not submit the form without a choice
+     */
+    readonly required?: boolean;
+    /**
+     * If is true then the asterisk will be displayed after the label\
+     * If is ReactNode then ReactNode will be displayed
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    /**
+     * Paints the radio buttons with the error color and shows `errorText`
+     */
+    readonly error?: boolean;
+    /**
+     * Text or ReactNode to show under the group when `error` is true
+     */
+    readonly errorText?: React.ReactNode;
+    readonly overrides?: RadioGroupOverrides;
+};
+export interface RadioGroupOverrides {
+    /**
+     * The `<fieldset>` element
+     */
+    readonly Container?: React.ComponentType<RadioGroupContainerProps & React.RefAttributes<HTMLFieldSetElement>>;
+    /**
+     * The `<legend>` with the label
+     */
+    readonly Legend?: React.ComponentType<RadioGroupLegendProps & React.RefAttributes<HTMLLegendElement>>;
+    /**
+     * The asterisk of the required group
+     */
+    readonly Asterisk?: React.ComponentType<RadioGroupAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The wrapper of the radio buttons
+     */
+    readonly Items?: React.ComponentType<RadioGroupItemsProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The error text
+     */
+    readonly ErrorText?: React.ComponentType<RadioGroupErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<RadioGroupContainerProps, "color" | "defaultValue" | "onChange"> & {
+    /**
+     * The name of the radio buttons. Generated if not passed
+     */
+    readonly name?: string | undefined;
+    /**
+     * The selected value of the controlled group, `null` — nothing is selected
+     */
+    readonly value?: string | null | undefined;
+    /**
+     * The initially selected value of the uncontrolled group
+     */
+    readonly defaultValue?: string | null | undefined;
+    /**
+     * Called with the value of the selected radio button
+     */
+    readonly onChange?: ((value: string, event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * The title of the group (`<legend>`)
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * **Default:** `vertical`
+     */
+    readonly orientation?: RadioGroupOrientation | undefined;
+    /**
+     * The color of all the radio buttons
+     */
+    readonly color?: string | undefined;
+    /**
+     * Disables all the radio buttons
+     */
+    readonly disabled?: boolean | undefined;
+    /**
+     * The native `required` of the radio buttons: the browser does not submit the form without a choice
+     */
+    readonly required?: boolean | undefined;
+    /**
+     * If is true then the asterisk will be displayed after the label\
+     * If is ReactNode then ReactNode will be displayed
+     */
+    readonly requiredAsterisk?: React.ReactNode;
+    /**
+     * Paints the radio buttons with the error color and shows `errorText`
+     */
+    readonly error?: boolean | undefined;
+    /**
+     * Text or ReactNode to show under the group when `error` is true
+     */
+    readonly errorText?: React.ReactNode;
+    readonly overrides?: RadioGroupOverrides | undefined;
+} & React.RefAttributes<HTMLFieldSetElement>>;
+export default _default;

package/RadioGroup/index.js

@@ -0,0 +1,62 @@
+"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 RadioGroupContainer_1 = __importDefault(require("./RadioGroupContainer"));
+const RadioGroupLegend_1 = __importDefault(require("./RadioGroupLegend"));
+const RadioGroupItems_1 = __importDefault(require("./RadioGroupItems"));
+const RadioGroupAsterisk_1 = __importDefault(require("./RadioGroupAsterisk"));
+const RadioGroupErrorText_1 = __importDefault(require("./RadioGroupErrorText"));
+const RadioGroupContext_1 = __importDefault(require("./RadioGroupContext"));
+const RadioGroup = (props, ref) => {
+    const { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = props, nativeProps = __rest(props, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
+    const id = react_1.default.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_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || RadioGroupContainer_1.default,
+        Legend: (overrides === null || overrides === void 0 ? void 0 : overrides.Legend) || RadioGroupLegend_1.default,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || RadioGroupAsterisk_1.default,
+        Items: (overrides === null || overrides === void 0 ? void 0 : overrides.Items) || RadioGroupItems_1.default,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || RadioGroupErrorText_1.default,
+    }), [overrides]);
+    // The latest handler, so the context does not change on every render
+    const onChangeRef = react_1.default.useRef(onChange);
+    onChangeRef.current = onChange;
+    const handleChange = react_1.default.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_1.default.useState(defaultValue);
+    const contextValue = react_1.default.useMemo(() => ({
+        name,
+        value,
+        defaultValue: initialValue,
+        onChange: handleChange,
+        disabled,
+        required,
+        error,
+        color,
+    }), [name, value, initialValue, handleChange, disabled, required, error, color]);
+    return (react_1.default.createElement(RadioGroupContext_1.default.Provider, { value: contextValue },
+        react_1.default.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_1.default.createElement(overridesMap.Legend, { id: legendID },
+                label,
+                requiredAsterisk != null && requiredAsterisk !== false && (react_1.default.createElement(overridesMap.Asterisk, { "aria-hidden": true }, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            react_1.default.createElement(overridesMap.Items, { orientation: orientation }, children),
+            typeof errorText !== 'undefined' && (react_1.default.createElement(overridesMap.ErrorText, { id: errorID, error: error }, errorText)))));
+};
+exports.default = react_1.default.forwardRef(RadioGroup);

package/Selectbox/index.d.ts

@@ -33,7 +33,7 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
     /**
      * Anchor position\
      * \
-     * Default: `bottom`
+     * Default: `bottom-fill`
      */
     readonly anchorPos?: AnchorPos;
     readonly positionStrategy?: PositionStrategy;
@@ -94,6 +94,21 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
      * ```
      */
     readonly selectedItemToString: ItemToString<T, Multiple>;
+    /**
+     * Renders the button content for the selected value instead of `selectedItemToString`,
+     * e.g. badges for the multiple selectbox.\
+     * Not called when nothing is selected, `notSetLabel` is shown then.\
+     * Do not render interactive elements (buttons, links): the content is placed inside a `<button>`
+     * Example:
+     * ```tsx
+     * <Selectbox
+     *   multiple
+     *   renderValue={items => items.map(item => <Badge key={item.id}>{item.name}</Badge>)}
+     *   ...
+     * />
+     * ```
+     */
+    readonly renderValue?: RenderValue<T, Multiple>;
     /**
      * A function that determines which of the elements is currently selected\
      * Example:
@@ -135,7 +150,7 @@ export interface SelectboxOverrides {
     /**
      * Icon
      */
-    readonly Icon?: React.ComponentType<SelectboxChevronIconProps & React.RefAttributes<SVGElement>>;
+    readonly Icon?: React.ComponentType<Omit<SelectboxChevronIconProps, 'ref'> & React.RefAttributes<SVGSVGElement>>;
     /**
      * Component for display error text
      */
@@ -158,6 +173,7 @@ export type Children<T> = (data: {
     index: number;
 }, itemProps: MenuItemProps) => React.ReactNode;
 export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
+export type RenderValue<T, Multiple extends boolean | undefined = undefined> = (value: Multiple extends undefined ? T : readonly T[]) => React.ReactNode;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectboxProps<T, Multiple> & {
     ref?: React.ForwardedRef<HTMLButtonElement> | undefined;

package/Selectbox/index.js

@@ -61,19 +61,22 @@ const DEFAULT_OVERRIDES = {
     Container: SelectboxContainer_1.default,
 };
 const Selectbox = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const { 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 } = props, nativeButtonProps = __rest(props, ["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 renderValueAsString = React.useCallback(() => {
-        if ((!multiple && !value) || (multiple && value.length === 0)) {
+    const renderButtonContent = React.useCallback(() => {
+        if ((!multiple && value == null) || (multiple && value.length === 0)) {
             return notSetLabel;
         }
-        return selectedItemToString(value);
-    }, [multiple, selectedItemToString, value, 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) {
@@ -84,6 +87,17 @@ const Selectbox = React.forwardRef((props, ref) => {
         }
         (_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);
@@ -123,7 +137,9 @@ const Selectbox = React.forwardRef((props, ref) => {
     const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
         error,
         isOpen,
-        anchorPos, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
+        anchorPos, 
+        // The static indicator: the default one is an overlay over the nearest positioned ancestor
+        endIcon: isLoading ? React.createElement(Spinner_1.default, { size: "1.2em" }) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
     const labelProps = React.useMemo(() => ({
         htmlFor: inputID,
         error,
@@ -133,7 +149,7 @@ const Selectbox = React.forwardRef((props, ref) => {
             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, ref: setRefs }), renderValueAsString())),
+            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_1.default, { 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)));
 });

package/Stack/index.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Spacing } from '../utils/spacing';
+export type { Spacing };
+export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `column` — the elements go one under another, `row` — in a line\
+     * **Default:** `column`
+     */
+    readonly direction?: 'column' | 'row';
+    /**
+     * The gap between the elements: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing;
+    /**
+     * The alignment across the direction (`align-items`)\
+     * **Default:** `stretch` for the column, `center` for the row
+     */
+    readonly align?: React.CSSProperties['alignItems'];
+    /**
+     * The alignment along the direction (`justify-content`)
+     */
+    readonly justify?: React.CSSProperties['justifyContent'];
+    /**
+     * The elements of the row wrap to the next line when they do not fit
+     */
+    readonly wrap?: boolean;
+    /**
+     * The stack takes the width of its content (`inline-flex`) instead of the full width
+     */
+    readonly inline?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `column` — the elements go one under another, `row` — in a line\
+     * **Default:** `column`
+     */
+    readonly direction?: "row" | "column" | undefined;
+    /**
+     * The gap between the elements: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing | undefined;
+    /**
+     * The alignment across the direction (`align-items`)\
+     * **Default:** `stretch` for the column, `center` for the row
+     */
+    readonly align?: import("csstype").Property.AlignItems | undefined;
+    /**
+     * The alignment along the direction (`justify-content`)
+     */
+    readonly justify?: import("csstype").Property.JustifyContent | undefined;
+    /**
+     * The elements of the row wrap to the next line when they do not fit
+     */
+    readonly wrap?: boolean | undefined;
+    /**
+     * The stack takes the width of its content (`inline-flex`) instead of the full width
+     */
+    readonly inline?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Stack/index.js

@@ -0,0 +1,38 @@
+"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 spacing_1 = require("../utils/spacing");
+const StyledStack = styled_1.default.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  flex-direction: ${({ $direction }) => $direction};
+  flex-wrap: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};
+  align-items: ${({ $align, $direction }) => $align !== null && $align !== void 0 ? $align : ($direction === 'row' ? 'center' : 'stretch')};
+  justify-content: ${({ $justify }) => $justify !== null && $justify !== void 0 ? $justify : 'flex-start'};
+  gap: ${({ theme, $gap }) => (0, spacing_1.resolveSpacing)(theme, $gap)};
+  /* A flex child shrinks below its content only with min-width: 0 */
+  min-width: 0;
+`;
+/**
+ * The elements in a column or in a row with the same gap between them.
+ * The children stay the plain elements: no wrappers for the items
+ */
+const Stack = (props, ref) => {
+    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline"]);
+    return (react_1.default.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(Stack);

package/Surface/SurfaceContainer.js

@@ -31,6 +31,12 @@ const StyledSurfaceContainer = styled_1.default.div `
     (0, react_2.css) `
       border-radius: 100%;
     `}
+
+  ${({ $noPadding }) => $noPadding &&
+    (0, react_2.css) `
+      /* The content reaches the edges, so it must follow the rounded corners */
+      overflow: hidden;
+    `}
 `;
 const SurfaceContainer = (props, ref) => {
     const { inline, children, rounded, noPadding } = props, nativeProps = __rest(props, ["inline", "children", "rounded", "noPadding"]);

package/Surface/index.js

@@ -55,9 +55,13 @@ const Surface = (props, ref) => {
         Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || SurfaceContent_1.default,
         Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || SurfaceFooter_1.default,
     }), [overrides]);
-    if (!hasHeader && hasSubheader) {
-        console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
-    }
+    // Warn once when the combination appears, not on every render
+    const isSubheaderWithoutHeader = !hasHeader && hasSubheader;
+    React.useEffect(() => {
+        if (isSubheaderWithoutHeader) {
+            console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
+        }
+    }, [isSubheaderWithoutHeader]);
     return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, rounded: rounded, ref: ref }),
         hasHeader && (React.createElement(overridesMap.Header, { noPadding: noPadding, rounded: rounded }, header)),
         hasSubheader && (React.createElement(overridesMap.Subheader, { noPadding: noPadding, rounded: rounded }, subheader)),

package/Swiper/Swiper.d.ts

@@ -33,7 +33,20 @@ export type SwiperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>
     readonly threshold?: number;
     readonly resistance?: boolean;
     readonly slidesPerView?: number;
-    readonly children?: readonly SwiperSlideBaseElement[];
+    /**
+     * Arrow keys switch the slides when the swiper is focused\
+     * **Default:** `true`
+     */
+    readonly keyboardControl?: boolean;
+    /**
+     * The label of the slide for screen readers\
+     * **Default:** `(index, total) => \`${index + 1} / ${total}\``
+     */
+    readonly slideLabel?: (index: number, total: number) => string;
+    /**
+     * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
+     */
+    readonly children?: React.ReactNode;
     readonly overrides?: SwiperOverrides;
 };
 export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -49,7 +62,20 @@ export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttr
     readonly threshold?: number | undefined;
     readonly resistance?: boolean | undefined;
     readonly slidesPerView?: number | undefined;
-    readonly children?: readonly SwiperSlideBaseElement[] | undefined;
+    /**
+     * Arrow keys switch the slides when the swiper is focused\
+     * **Default:** `true`
+     */
+    readonly keyboardControl?: boolean | undefined;
+    /**
+     * The label of the slide for screen readers\
+     * **Default:** `(index, total) => \`${index + 1} / ${total}\``
+     */
+    readonly slideLabel?: ((index: number, total: number) => string) | undefined;
+    /**
+     * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
+     */
+    readonly children?: React.ReactNode;
     readonly overrides?: SwiperOverrides | undefined;
 } & React.RefAttributes<SwiperRef>>;
 export default Swiper;