@strapi/design-system 1.18.0-typescript.0 → 1.18.0

package/dist/Accordion/AccordionToggle.js

@@ -12,6 +12,7 @@ const TextButton = require('../TextButton/TextButton.js');
 const Icon = require('../Icon/Icon.js');
 const Flex = require('../Flex/Flex.js');
 const Typography = require('../Typography/Typography.js');
+const Box = require('../Box/Box.js');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
@@ -79,8 +80,11 @@ const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'ri
             }
         }
     };
-    const dropdownIcon = (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, shrink: 0, children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
-    return (jsxRuntime.jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : '', children: jsxRuntime.jsxs(Flex.Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsxRuntime.jsx(ToggleButton, { onClick: handleToggle, "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Accordion.AccordionTypography, { ...titleProps, children: title }), description && (jsxRuntime.jsx(Typography.Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxRuntime.jsxs(Flex.Flex, { gap: 3, children: [dropdownIcon, action] })), togglePosition === 'left' && action] }) }));
+    const dropdownIcon = (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', shrink: 0, children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
+    const stopPropagation = (e) => {
+        e.stopPropagation();
+    };
+    return (jsxRuntime.jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxRuntime.jsxs(Flex.Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsxRuntime.jsx(ToggleButton, { "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Accordion.AccordionTypography, { ...titleProps, children: title }), description && (jsxRuntime.jsx(Typography.Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxRuntime.jsxs(Flex.Flex, { gap: 3, children: [dropdownIcon, jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
 };
 
 exports.AccordionToggle = AccordionToggle;

package/dist/Accordion/AccordionToggle.mjs

@@ -8,6 +8,7 @@ import { TextButton } from '../TextButton/TextButton.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 import { Flex } from '../Flex/Flex.mjs';
 import { Typography } from '../Typography/Typography.mjs';
+import { Box } from '../Box/Box.mjs';
 
 const ToggleButton = styled(TextButton) `
   text-align: left;
@@ -71,8 +72,11 @@ const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'ri
             }
         }
     };
-    const dropdownIcon = (jsx(Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, shrink: 0, children: jsx(Icon, { as: CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
-    return (jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : '', children: jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsx(ToggleButton, { onClick: handleToggle, "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxs(Fragment, { children: [jsx(AccordionTypography, { ...titleProps, children: title }), description && (jsx(Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxs(Flex, { gap: 3, children: [dropdownIcon, action] })), togglePosition === 'left' && action] }) }));
+    const dropdownIcon = (jsx(Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', shrink: 0, children: jsx(Icon, { as: CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
+    const stopPropagation = (e) => {
+        e.stopPropagation();
+    };
+    return (jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsx(ToggleButton, { "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxs(Fragment, { children: [jsx(AccordionTypography, { ...titleProps, children: title }), description && (jsx(Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxs(Flex, { gap: 3, children: [dropdownIcon, jsx(Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsx(Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
 };
 
 export { AccordionToggle };

package/dist/Dialog/Dialog.js

@@ -31,14 +31,14 @@ const DialogContainer = styled__default.default(Box.Box) `
 const DialogHeader = styled__default.default(Flex.Flex) `
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const Dialog = ({ onClose, title, as = 'h2', isOpen, id, ...props }) => {
+const Dialog = ({ onClose, title, as = 'h2', isOpen, id, zIndex = 4, ...props }) => {
     const generatedId = useId.useId(id);
     useLockScroll(isOpen);
     if (!isOpen) {
         return null;
     }
     const labelledBy = `${generatedId}-label`;
-    return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: 4, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { children: jsxRuntime.jsx(index.DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxRuntime.jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsxRuntime.jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsxRuntime.jsx(Box.Box, { ...props })] }) }) }) }) }));
+    return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: zIndex, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { children: jsxRuntime.jsx(index.DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxRuntime.jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsxRuntime.jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsxRuntime.jsx(Box.Box, { ...props })] }) }) }) }) }));
 };
 
 exports.Dialog = Dialog;

package/dist/Dialog/Dialog.mjs

@@ -23,14 +23,14 @@ const DialogContainer = styled(Box) `
 const DialogHeader = styled(Flex) `
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const Dialog = ({ onClose, title, as = 'h2', isOpen, id, ...props }) => {
+const Dialog = ({ onClose, title, as = 'h2', isOpen, id, zIndex = 4, ...props }) => {
     const generatedId = useId(id);
     useLockScroll(isOpen);
     if (!isOpen) {
         return null;
     }
     const labelledBy = `${generatedId}-label`;
-    return (jsx(Portal, { children: jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: 4, children: jsx(FocusTrap, { children: jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsx(Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsx(Box, { ...props })] }) }) }) }) }));
+    return (jsx(Portal, { children: jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: zIndex, children: jsx(FocusTrap, { children: jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsx(Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsx(Box, { ...props })] }) }) }) }) }));
 };
 
 export { Dialog };

package/dist/Select/SelectParts.js

@@ -45,7 +45,7 @@ const SelectTrigger = React__namespace.forwardRef(({ onClear, clearLabel = 'Clea
         }
     };
     const composedRefs = useComposeRefs.useComposedRefs(triggerRef, ref);
-    return (jsxRuntime.jsx(uiPrimitives.Select.Trigger, { asChild: true, children: jsxRuntime.jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }) }));
+    return (jsxRuntime.jsx(uiPrimitives.Select.Trigger, { asChild: true, children: jsxRuntime.jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }) }));
 });
 const IconBox = styled__default.default(Box.Box) `
   border: none;

package/dist/Select/SelectParts.mjs

@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef(({ onClear, clearLabel = 'Clear', startIc
         }
     };
     const composedRefs = useComposedRefs(triggerRef, ref);
-    return (jsx(Select.Trigger, { asChild: true, children: jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxs(Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxs(Flex, { as: "span", gap: 3, children: [onClear ? (jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsx(Cross, {}) })) : null, jsx(DownIcon, { children: jsx(CarretDown, {}) })] })] }) }));
+    return (jsx(Select.Trigger, { asChild: true, children: jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxs(Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxs(Flex, { as: "span", gap: 3, children: [onClear ? (jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsx(Cross, {}) })) : null, jsx(DownIcon, { children: jsx(CarretDown, {}) })] })] }) }));
 });
 const IconBox = styled(Box) `
   border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.18.0-typescript.0",
+  "version": "1.18.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -33,16 +33,16 @@
     "@radix-ui/react-dismissable-layer": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-focus-scope": "1.0.4",
-    "@strapi/ui-primitives": "1.18.0-typescript.0",
-    "@uiw/react-codemirror": "^4.21.24",
-    "aria-hidden": "^1.2.3",
+    "@strapi/ui-primitives": "^1.18.0",
+    "@uiw/react-codemirror": "^4.21.25",
+    "aria-hidden": "^1.2.4",
     "compute-scroll-into-view": "^3.1.0",
     "prop-types": "^15.8.1",
     "react-remove-scroll": "^2.5.9"
   },
   "devDependencies": {
-    "@playwright/test": "1.41.2",
-    "@strapi/icons": "1.18.0-typescript.0",
+    "@playwright/test": "1.43.0",
+    "@strapi/icons": "^1.18.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^2.0.1",
@@ -51,7 +51,7 @@
     "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "@strapi/icons": "1.18.0-typescript.0",
+    "@strapi/icons": "^1.5.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.2.0",

package/dist/Accordion/Accordion.d.ts

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { DefaultTheme } from 'styled-components';
-declare const AccordionTypography: import("styled-components").StyledComponent<"span", DefaultTheme, import("src/Typography/Typography").TypographyProps<"span">, never>;
-type AccordionSize = 'S' | 'M';
-type AccordionVariant = 'primary' | 'secondary';
-interface AccordionProps {
-    children: React.ReactNode;
-    /**
-     * If `true`, the accordion will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If defined, will add a border (borderColor: `danger600`) and display the error message below the component.
-     */
-    error?: string;
-    /**
-     * If `true`, an expanded Accordion will be rendered.
-     */
-    expanded?: boolean;
-    /**
-     * If `false`, the error message won't show.
-     * If the `Accordion` is as child of an `AccordionGroup`, this prop will be set to `false` automatically.
-     * The error message of the `AccordionGroup` will be shown below the group instead of the Accordion itself.
-     */
-    hasErrorMessage?: boolean;
-    /**
-     * The id of the component.
-     */
-    id?: string;
-    /**
-     * The callback invoked after a click event on the `AccordionToggle`.
-     */
-    onToggle?: () => void;
-    /**
-     * Shadow name (see `theme.shadows`)
-     */
-    shadow?: keyof DefaultTheme['shadows'];
-    /**
-     * @preserve
-     * @deprecated use `onToggle` instead
-     * The callback invoked after a click event on the `AccordionToggle`.
-     */
-    toggle?: () => void;
-    /**
-     * Size of the Accordion.
-     */
-    size?: AccordionSize;
-    /**
-     * Color variant for `Accordion`. The "secondary" variant reverses the background colors.
-     * This is useful when you want to display a list and alternate the colors of the accordions.
-     */
-    variant?: AccordionVariant;
-}
-declare const Accordion: ({ children, disabled, error, expanded, hasErrorMessage, id, onToggle, toggle, size, variant, shadow, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionTypography };
-export type { AccordionProps, AccordionSize, AccordionVariant };

package/dist/Accordion/AccordionContent.d.ts

@@ -1,3 +0,0 @@
-import { BoxProps } from '../Box';
-export type AccordionContentProps = BoxProps;
-export declare const AccordionContent: ({ children, ...props }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Accordion/AccordionContext.d.ts

@@ -1,12 +0,0 @@
-import type { AccordionSize, AccordionVariant } from './Accordion';
-export interface AccordionContextValue {
-    disabled: boolean;
-    expanded: boolean;
-    id: string;
-    onToggle?: () => void;
-    toggle?: () => void;
-    size: AccordionSize;
-    variant: AccordionVariant;
-}
-export declare const AccordionContext: import("react").Context<AccordionContextValue>;
-export declare const useAccordion: () => AccordionContextValue;

package/dist/Accordion/AccordionGroup.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { FieldLabelProps } from '../Field';
-export interface AccordionGroupProps {
-    children: React.ReactNode;
-    error?: string;
-    footer?: React.ReactNode;
-    label?: string;
-    labelAction?: FieldLabelProps['action'];
-}
-export declare const AccordionGroup: ({ children, footer, label, labelAction, error }: AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/AccordionToggle.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-interface AccordionToggleProps {
-    /**
-     * Will render a node to the right of the Accordion component
-     */
-    action?: React.ReactNode;
-    as?: string | React.ComponentType<any>;
-    /**
-     * Show the secondary text of the Accordion component
-     */
-    description?: string;
-    /**
-     * Show the main title of the Accordion component
-     */
-    title: string;
-    /**
-     * Set the position of the toggle icon button
-     */
-    togglePosition?: 'right' | 'left';
-}
-export declare const AccordionToggle: ({ title, description, as, togglePosition, action, ...props }: AccordionToggleProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Accordion/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Accordion';
-export * from './AccordionContent';
-export * from './AccordionToggle';
-export * from './AccordionGroup';

package/dist/Accordion/utils.d.ts

@@ -1,7 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import { AccordionVariant } from './Accordion';
-export declare const getBackground: ({ expanded, disabled, variant, }: {
-    expanded: boolean;
-    disabled: boolean;
-    variant: AccordionVariant;
-}) => keyof DefaultTheme['colors'];

package/dist/Alert/Alert.d.ts

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { BoxProps } from '../Box';
-export type AlertVariant = 'success' | 'danger' | 'default' | 'warning';
-export interface AlertProps extends BoxProps {
-    /**
-     * Render a React element below the body of an `Alert` (Mainly used to render a Link).
-     */
-    action?: React.ReactNode;
-    /**
-     * The body of the `Alert` (Will be rendered under the `Alert` title).
-     */
-    children: React.ReactNode;
-    /**
-     * Accessible label for the close icon button.
-     */
-    closeLabel: string;
-    /**
-     * The callback invoked when click on the close icon button.
-     */
-    onClose: () => void;
-    /**
-     * The title of the `Alert`.
-     */
-    title?: string;
-    /**
-     * Changes the element, as which a component will render (similar to styled-components).
-     */
-    titleAs?: string | React.ComponentType<any>;
-    /**
-     * `Alert` color variant.
-     */
-    variant?: AlertVariant;
-}
-export declare const Alert: ({ title, children, variant, onClose, closeLabel, titleAs, action, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/index.d.ts

@@ -1 +0,0 @@
-export * from './Alert';

package/dist/Alert/utils.d.ts

@@ -1,10 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import type { AlertVariant } from './Alert';
-interface StyledProps {
-    theme: DefaultTheme;
-    variant: AlertVariant;
-}
-export declare const handleBackgroundColor: (variant: AlertVariant) => "primary100" | "danger100" | "success100" | "warning100";
-export declare const handleBorderColor: (variant: AlertVariant) => string;
-export declare const handleIconColor: ({ theme, variant }: StyledProps) => string;
-export {};

package/dist/Avatar/Avatar.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { FlexProps } from '../Flex';
-import { TypographyProps } from '../Typography';
-export interface AvatarProps {
-    /**
-     * Alternative text
-     */
-    alt?: string;
-    /**
-     * Image src of the image preview (displayed on `Avatar` hover).
-     */
-    preview?: boolean | string;
-    /**
-     * Image src of the `Avatar`
-     */
-    src: string;
-}
-export declare const Avatar: ({ src, alt, preview }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-export type InitialsProps = Pick<FlexProps, 'background'> & Pick<TypographyProps, 'textColor'> & {
-    children: React.ReactNode;
-};
-export declare const Initials: ({ children, background, textColor }: InitialsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/AvatarGroup.d.ts

@@ -1 +0,0 @@
-export declare const AvatarGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("src/Flex/Flex").FlexProps<"div">, never>;

package/dist/Avatar/__tests__/Avatar.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Avatar/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const avatarSize = 32;
-export declare const previewSize = 64;

package/dist/Avatar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Avatar';
-export * from './AvatarGroup';

package/dist/Badge/Badge.d.ts

@@ -1,13 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import { FlexProps } from '../Flex';
-export type BadgeSize = 'S' | 'M';
-export interface BadgeProps extends FlexProps {
-    /**
-     * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
-     */
-    active?: boolean;
-    backgroundColor?: keyof DefaultTheme['colors'];
-    size?: BadgeSize;
-    textColor?: keyof DefaultTheme['colors'];
-}
-export declare const Badge: ({ active, size, textColor, backgroundColor, children, minWidth, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Badge/index.d.ts

@@ -1 +0,0 @@
-export * from './Badge';

package/dist/BaseButton/BaseButton.d.ts

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { FlexProps } from '../Flex';
-export declare const BaseButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FlexProps<"div">, never>;
-export type BaseButtonProps<TElement extends keyof JSX.IntrinsicElements = 'button'> = FlexProps<TElement>;
-export declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
-    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
-    background?: import("src/types").DefaultThemeOrCSSProp<"colors", "background">;
-    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
-    borderColor?: keyof import("src/themes/colors").Colors | undefined;
-    color?: keyof import("src/themes/colors").Colors | undefined;
-    flex?: import("csstype").Property.Flex<string | number> | undefined;
-    fontSize?: import("src/types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
-    grow?: import("csstype").Property.FlexGrow | undefined;
-    hasRadius?: boolean | undefined;
-    hiddenS?: boolean | undefined;
-    hiddenXS?: boolean | undefined;
-    padding?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"padding">;
-    paddingBottom?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
-    paddingLeft?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
-    paddingRight?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
-    paddingTop?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
-    marginLeft?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
-    marginBottom?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
-    marginRight?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
-    marginTop?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
-    shadow?: keyof import("src/themes/colors").Shadows | undefined;
-    shrink?: import("csstype").Property.FlexShrink | undefined;
-    lineHeight?: import("src/types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
-    width?: import("src/types").DefaultThemeOrCSSProp<"spaces", "width">;
-    minWidth?: import("src/types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
-    maxWidth?: import("src/types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
-    height?: import("src/types").DefaultThemeOrCSSProp<"spaces", "height">;
-    minHeight?: import("src/types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
-    maxHeight?: import("src/types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
-    top?: import("src/types").DefaultThemeOrCSSProp<"spaces", "top">;
-    left?: import("src/types").DefaultThemeOrCSSProp<"spaces", "left">;
-    bottom?: import("src/types").DefaultThemeOrCSSProp<"spaces", "bottom">;
-    right?: import("src/types").DefaultThemeOrCSSProp<"spaces", "right">;
-    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
-    borderStyle?: import("csstype").Property.BorderStyle | undefined;
-    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
-    children?: React.ReactNode;
-    as?: string | React.ComponentType<any> | undefined;
-    forwardedAs?: string | React.ComponentType<any> | undefined;
-} & {
-    alignItems?: import("csstype").Property.AlignItems | undefined;
-    direction?: import("csstype").Property.FlexDirection | undefined;
-    gap?: any;
-    inline?: boolean | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
-    wrap?: import("csstype").Property.FlexWrap | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;

package/dist/BaseButton/index.d.ts

@@ -1 +0,0 @@
-export * from './BaseButton';

package/dist/BaseCheckbox/BaseCheckbox.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-export type BaseCheckboxSize = 'S' | 'M';
-export interface CheckboxInputProps {
-    size: BaseCheckboxSize;
-}
-export interface BaseCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'> {
-    /**
-     * If `true`, display the indeterminate state.
-     */
-    indeterminate?: boolean;
-    /**
-     * `Checkbox` input name
-     */
-    name?: string;
-    /**
-     * The callback invoked when click on the `Checkbox`
-     * `(value: Bool) => {}`
-     */
-    onValueChange?: (isChecked: boolean) => void;
-    /**
-     * Set the size of the checkbox
-     */
-    size?: BaseCheckboxSize;
-    value?: boolean;
-}
-export type CheckboxElement = HTMLInputElement;
-export declare const BaseCheckbox: React.ForwardRefExoticComponent<BaseCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/BaseCheckbox/index.d.ts

@@ -1 +0,0 @@
-export * from './BaseCheckbox';

package/dist/BaseCheckbox/utils.d.ts

@@ -1,7 +0,0 @@
-/**
- * TODO: Look into why setting the type to `BaseCheckboxSize` makes the
- * component in `BaseCheckbox` loose all type information to do with the theme.
- */
-export declare const getCheckboxSize: ({ size }: {
-    size: any;
-}) => "20px" | "18px";

package/dist/BaseLink/BaseLink.d.ts

@@ -1,50 +0,0 @@
-import React from 'react';
-import { BoxProps } from '../Box';
-export type BaseLinkProps = BoxProps<'a'> & {
-    disabled?: boolean;
-    isExternal?: boolean;
-};
-export declare const BaseLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
-    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
-    background?: import("src/types").DefaultThemeOrCSSProp<"colors", "background">;
-    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
-    borderColor?: keyof import("src/themes/colors").Colors | undefined;
-    color?: keyof import("src/themes/colors").Colors | undefined;
-    flex?: import("csstype").Property.Flex<string | number> | undefined;
-    fontSize?: import("src/types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
-    grow?: import("csstype").Property.FlexGrow | undefined;
-    hasRadius?: boolean | undefined;
-    hiddenS?: boolean | undefined;
-    hiddenXS?: boolean | undefined;
-    padding?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"padding">;
-    paddingBottom?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
-    paddingLeft?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
-    paddingRight?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
-    paddingTop?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
-    marginLeft?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
-    marginBottom?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
-    marginRight?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
-    marginTop?: import("src/helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
-    shadow?: keyof import("src/themes/colors").Shadows | undefined;
-    shrink?: import("csstype").Property.FlexShrink | undefined;
-    lineHeight?: import("src/types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
-    width?: import("src/types").DefaultThemeOrCSSProp<"spaces", "width">;
-    minWidth?: import("src/types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
-    maxWidth?: import("src/types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
-    height?: import("src/types").DefaultThemeOrCSSProp<"spaces", "height">;
-    minHeight?: import("src/types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
-    maxHeight?: import("src/types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
-    top?: import("src/types").DefaultThemeOrCSSProp<"spaces", "top">;
-    left?: import("src/types").DefaultThemeOrCSSProp<"spaces", "left">;
-    bottom?: import("src/types").DefaultThemeOrCSSProp<"spaces", "bottom">;
-    right?: import("src/types").DefaultThemeOrCSSProp<"spaces", "right">;
-    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
-    borderStyle?: import("csstype").Property.BorderStyle | undefined;
-    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
-    children?: React.ReactNode;
-    as?: string | React.ComponentType<any> | undefined;
-    forwardedAs?: string | React.ComponentType<any> | undefined;
-} & {
-    disabled?: boolean | undefined;
-    isExternal?: boolean | undefined;
-} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/BaseLink/__tests__/BaseLink.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/BaseLink/index.d.ts

@@ -1 +0,0 @@
-export * from './BaseLink';

package/dist/BaseRadio/BaseRadio.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface BaseRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    disabled?: boolean;
-    value: string;
-}
-export declare const BaseRadio: React.ForwardRefExoticComponent<BaseRadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/BaseRadio/RadioGroup.d.ts

@@ -1,12 +0,0 @@
-import { HTMLAttributes, ChangeEventHandler, ReactNode } from 'react';
-export type RadioGroupSize = 'M' | 'L';
-interface RadioGroupProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
-    labelledBy: string;
-    name: string;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    size?: RadioGroupSize;
-    value?: string;
-}
-export declare const RadioGroup: ({ children, labelledBy, onChange, value, size, name, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/BaseRadio/context.d.ts

@@ -1,9 +0,0 @@
-import type { ChangeEventHandler } from 'react';
-import type { RadioGroupSize } from './RadioGroup';
-export interface RadioContextValue {
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    name: string;
-    size: RadioGroupSize;
-    selected: string;
-}
-export declare const RadioContext: import("react").Context<RadioContextValue>;

package/dist/BaseRadio/index.d.ts

@@ -1,2 +0,0 @@
-export * from './BaseRadio';
-export * from './RadioGroup';

package/dist/BaseRadio/utils.d.ts

@@ -1,4 +0,0 @@
-import { RadioGroupSize } from './RadioGroup';
-export declare const getRadioSize: (size: RadioGroupSize) => "20px" | "18px";
-export declare const getSelectedRadioSize: (size: RadioGroupSize) => "12px" | "10px";
-export declare const getSelectedRadioPosition: () => string;