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

package/dist/BaseCheckbox/BaseCheckbox.js

@@ -52,7 +52,7 @@ const CheckboxInput = styled__default.default.input `
       content: '';
       display: block;
       position: relative;
-      background: url(${checkmark}) no-repeat no-repeat center center;
+      background: ${() => `url("${checkmark}") no-repeat no-repeat center center`};
       width: 10px;
       height: 10px;
       left: 50%;
@@ -61,7 +61,7 @@ const CheckboxInput = styled__default.default.input `
     }
 
     &:disabled:after {
-      background: url(${checkmarkBlack}) no-repeat no-repeat center center;
+      background: ${() => `url("${checkmarkBlack}") no-repeat no-repeat center center`};
     }
   }
 

package/dist/BaseCheckbox/BaseCheckbox.mjs

@@ -25,7 +25,7 @@ const CheckboxInput = styled.input `
       content: '';
       display: block;
       position: relative;
-      background: url(${checkmarkIcon}) no-repeat no-repeat center center;
+      background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
       width: 10px;
       height: 10px;
       left: 50%;
@@ -34,7 +34,7 @@ const CheckboxInput = styled.input `
     }
 
     &:disabled:after {
-      background: url(${checkmarkIconDisabled}) no-repeat no-repeat center center;
+      background: ${() => `url("${checkmarkIconDisabled}") no-repeat no-repeat center center`};
     }
   }
 

package/dist/DatePicker/DatePicker.js

@@ -598,7 +598,7 @@ const DatePickerCalendar = React__namespace.forwardRef(({ monthSelectLabel, year
         onCalendarDateChange(updatedDate);
     };
     const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
-    return (jsxRuntime.jsxs(Flex.Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxRuntime.jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsxRuntime.jsx(SingleSelect.SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: month, children: month }, month))) }), jsxRuntime.jsx(SingleSelect.SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: year, children: year }, year))) })] }), jsxRuntime.jsxs("table", { role: "grid", children: [jsxRuntime.jsx("thead", { "aria-hidden": true, children: jsxRuntime.jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsxRuntime.jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsxRuntime.jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsxRuntime.jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsxRuntime.jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate }, date.toString())) : (jsxRuntime.jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
+    return (jsxRuntime.jsxs(Flex.Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxRuntime.jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsxRuntime.jsx(SingleSelect.SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: month, children: month }, month))) }), jsxRuntime.jsx(SingleSelect.SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: year, children: year }, year))) })] }), jsxRuntime.jsxs("table", { role: "grid", children: [jsxRuntime.jsx("thead", { "aria-hidden": true, children: jsxRuntime.jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsxRuntime.jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsxRuntime.jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsxRuntime.jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsxRuntime.jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate, disabled: minDate.compare(date) > 0 || date.compare(maxDate) > 0 }, date.toString())) : (jsxRuntime.jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
 });
 const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
     let date$1 = from.add({ weeks: weekIndex });
@@ -664,7 +664,7 @@ const Th = styled__default.default(Box.Box) `
  *  DatePickerCalendarCell
  * -----------------------------------------------------------------------------------------------*/
 const DATE_PICKER_CALEDNAR_CELL_NAME = 'DatePickerCalendarCell';
-const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, startDate, ...props }, forwardedRef) => {
+const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, startDate, disabled, ...props }, forwardedRef) => {
     const { timeZone, locale, calendarDate, onValueChange, onOpenChange, onTextValueChange, onCalendarDateChange } = useDatePickerContext(DATE_PICKER_CALEDNAR_CELL_NAME);
     const isSelected = date.isSameDay(calendarDate, date$1);
     const dateFormatter = useDateFormatter.useDateFormatter(locale, {
@@ -699,19 +699,25 @@ const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, star
             onValueChange(date$1);
             onTextValueChange(textValueFormatter.format(date$1.toDate(timeZone)));
             onOpenChange(false);
-        }), children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
+        }), "aria-disabled": disabled, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
 });
 const Cell = styled__default.default(Box.Box) `
   text-align: center;
   padding: ${7 / 16}rem;
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px !important;
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 
-  &:hover {
-    background: ${({ theme }) => theme.colors.primary100};
+  &[aria-disabled='false'] {
+    &:hover {
+      background: ${({ theme }) => theme.colors.primary100};
 
-    & > ${Typography.Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
+      & > ${Typography.Typography} {
+        color: ${({ theme }) => theme.colors.primary600};
+      }
     }
   }
 `;

package/dist/DatePicker/DatePicker.mjs

@@ -571,7 +571,7 @@ const DatePickerCalendar = React.forwardRef(({ monthSelectLabel, yearSelectLabel
         onCalendarDateChange(updatedDate);
     };
     const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
-    return (jsxs(Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsx(SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsx(SingleSelectOption, { value: month, children: month }, month))) }), jsx(SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsx(SingleSelectOption, { value: year, children: year }, year))) })] }), jsxs("table", { role: "grid", children: [jsx("thead", { "aria-hidden": true, children: jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate }, date.toString())) : (jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
+    return (jsxs(Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsx(SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsx(SingleSelectOption, { value: month, children: month }, month))) }), jsx(SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsx(SingleSelectOption, { value: year, children: year }, year))) })] }), jsxs("table", { role: "grid", children: [jsx("thead", { "aria-hidden": true, children: jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate, disabled: minDate.compare(date) > 0 || date.compare(maxDate) > 0 }, date.toString())) : (jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
 });
 const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
     let date = from.add({ weeks: weekIndex });
@@ -637,7 +637,7 @@ const Th = styled(Box) `
  *  DatePickerCalendarCell
  * -----------------------------------------------------------------------------------------------*/
 const DATE_PICKER_CALEDNAR_CELL_NAME = 'DatePickerCalendarCell';
-const DatePickerCalendarCell = React.forwardRef(({ date, startDate, ...props }, forwardedRef) => {
+const DatePickerCalendarCell = React.forwardRef(({ date, startDate, disabled, ...props }, forwardedRef) => {
     const { timeZone, locale, calendarDate, onValueChange, onOpenChange, onTextValueChange, onCalendarDateChange } = useDatePickerContext(DATE_PICKER_CALEDNAR_CELL_NAME);
     const isSelected = isSameDay(calendarDate, date);
     const dateFormatter = useDateFormatter(locale, {
@@ -672,19 +672,25 @@ const DatePickerCalendarCell = React.forwardRef(({ date, startDate, ...props },
             onValueChange(date);
             onTextValueChange(textValueFormatter.format(date.toDate(timeZone)));
             onOpenChange(false);
-        }), children: jsx(Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
+        }), "aria-disabled": disabled, children: jsx(Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
 });
 const Cell = styled(Box) `
   text-align: center;
   padding: ${7 / 16}rem;
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px !important;
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 
-  &:hover {
-    background: ${({ theme }) => theme.colors.primary100};
+  &[aria-disabled='false'] {
+    &:hover {
+      background: ${({ theme }) => theme.colors.primary100};
 
-    & > ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
+      & > ${Typography} {
+        color: ${({ theme }) => theme.colors.primary600};
+      }
     }
   }
 `;

package/dist/Select/MultiSelect.js

@@ -151,7 +151,7 @@ const CheckMark = styled__default.default(Box.Box) `
     styled.css `
       &::after {
         content: '';
-        background: url(${checkmark}) no-repeat no-repeat center center;
+        background: ${() => `url("${checkmark}") no-repeat no-repeat center center`};
         width: 100%;
         height: 100%;
         position: absolute;

package/dist/Select/MultiSelect.mjs

@@ -124,7 +124,7 @@ const CheckMark = styled(Box) `
     css `
       &::after {
         content: '';
-        background: url(${checkmarkIcon}) no-repeat no-repeat center center;
+        background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
         width: 100%;
         height: 100%;
         position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.15.0-typescript.0",
+  "version": "1.15.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -27,31 +27,31 @@
   ],
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
-    "@floating-ui/react-dom": "^2.0.4",
-    "@internationalized/date": "^3.5.1",
-    "@internationalized/number": "^3.5.0",
+    "@floating-ui/react-dom": "^2.0.8",
+    "@internationalized/date": "^3.5.2",
+    "@internationalized/number": "^3.5.1",
     "@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.15.0-typescript.0",
-    "@uiw/react-codemirror": "^4.21.21",
+    "@strapi/ui-primitives": "^1.15.0",
+    "@uiw/react-codemirror": "^4.21.24",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.1.0",
     "prop-types": "^15.8.1",
     "react-remove-scroll": "^2.5.7"
   },
   "devDependencies": {
-    "@playwright/test": "1.40.1",
-    "@strapi/icons": "^1.15.0-typescript.0",
+    "@playwright/test": "1.41.2",
+    "@strapi/icons": "^1.15.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
-    "axe-playwright": "^1.2.3",
+    "axe-playwright": "^2.0.1",
     "cross-env": "^7.0.3",
     "react-router-dom": "^5.3.4",
     "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "@strapi/icons": "1.15.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("../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("../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" | "pointerEvents" | "position" | "textAlign" | "textTransform" | "transform" | "zIndex" | "animation" | "overflow" | "transition"> & {
-    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
-    background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
-    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
-    borderColor?: keyof import("../themes/colors").Colors | undefined;
-    color?: keyof import("../themes/colors").Colors | undefined;
-    flex?: import("csstype").Property.Flex<string | number> | undefined;
-    fontSize?: import("../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
-    grow?: import("csstype").Property.FlexGrow | undefined;
-    hasRadius?: boolean | undefined;
-    hiddenS?: boolean | undefined;
-    hiddenXS?: boolean | undefined;
-    padding?: import("../helpers/handleResponsiveValues").ResponsiveValue<"padding">;
-    paddingBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
-    paddingLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
-    paddingRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
-    paddingTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
-    marginLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
-    marginBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
-    marginRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
-    marginTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
-    shadow?: keyof import("../themes/colors").Shadows | undefined;
-    shrink?: import("csstype").Property.FlexShrink | undefined;
-    lineHeight?: import("../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
-    width?: import("../types").DefaultThemeOrCSSProp<"spaces", "width">;
-    minWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
-    maxWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
-    height?: import("../types").DefaultThemeOrCSSProp<"spaces", "height">;
-    minHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
-    maxHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
-    top?: import("../types").DefaultThemeOrCSSProp<"spaces", "top">;
-    left?: import("../types").DefaultThemeOrCSSProp<"spaces", "left">;
-    bottom?: import("../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
-    right?: import("../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" | "pointerEvents" | "position" | "textAlign" | "textTransform" | "transform" | "zIndex" | "animation" | "overflow" | "transition"> & {
-    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
-    background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
-    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
-    borderColor?: keyof import("../themes/colors").Colors | undefined;
-    color?: keyof import("../themes/colors").Colors | undefined;
-    flex?: import("csstype").Property.Flex<string | number> | undefined;
-    fontSize?: import("../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
-    grow?: import("csstype").Property.FlexGrow | undefined;
-    hasRadius?: boolean | undefined;
-    hiddenS?: boolean | undefined;
-    hiddenXS?: boolean | undefined;
-    padding?: import("../helpers/handleResponsiveValues").ResponsiveValue<"padding">;
-    paddingBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
-    paddingLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
-    paddingRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
-    paddingTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
-    marginLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
-    marginBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
-    marginRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
-    marginTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
-    shadow?: keyof import("../themes/colors").Shadows | undefined;
-    shrink?: import("csstype").Property.FlexShrink | undefined;
-    lineHeight?: import("../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
-    width?: import("../types").DefaultThemeOrCSSProp<"spaces", "width">;
-    minWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
-    maxWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
-    height?: import("../types").DefaultThemeOrCSSProp<"spaces", "height">;
-    minHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
-    maxHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
-    top?: import("../types").DefaultThemeOrCSSProp<"spaces", "top">;
-    left?: import("../types").DefaultThemeOrCSSProp<"spaces", "left">;
-    bottom?: import("../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
-    right?: import("../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 {};