@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.2

package/dist/Typography/utils.js

@@ -1,10 +1,10 @@
-import { SIGMA as t, PI as e, OMEGA as s, EPSILON as o, DELTA as l, BETA as f, ALPHA as r } from "./constants.js";
-const $ = ({ ellipsis: n }) => n && `
+import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as l, BETA as f, ALPHA as r } from "./constants.js";
+const $ = ({ ellipsis: n = !1 }) => n && `
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  `, a = ({ variant: n, theme: i }) => {
+  `, a = ({ variant: n = t, theme: i }) => {
   switch (n) {
     case r:
       return `
@@ -29,17 +29,17 @@ const $ = ({ ellipsis: n }) => n && `
         font-size: ${i.fontSizes[3]};
         line-height: ${i.lineHeights[6]};
       `;
-    case s:
+    case t:
       return `
         font-size: ${i.fontSizes[2]};
         line-height: ${i.lineHeights[4]};
       `;
-    case e:
+    case s:
       return `
         font-size: ${i.fontSizes[1]};
         line-height: ${i.lineHeights[3]};
       `;
-    case t:
+    case e:
       return `
         font-weight: ${i.fontWeights.bold};
         font-size: ${i.fontSizes[0]};

package/dist/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1 @@
+export declare const VisuallyHidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/VisuallyHidden/index.d.ts

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

package/dist/helpers/arrays.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(r){return r&&typeof r=="object"&&Array.isArray(r)}exports.isArray=e;

package/dist/helpers/arrays.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description Simple array check.
+ * @export
+ * @param item
+ * @returns {boolean}
+ */
+export declare function isArray(item: any): boolean;

package/dist/helpers/arrays.js

@@ -0,0 +1,6 @@
+function o(r) {
+  return r && typeof r == "object" && Array.isArray(r);
+}
+export {
+  o as isArray
+};

package/dist/helpers/escapeSelector.d.ts

@@ -0,0 +1 @@
+export declare const escapeSelector: (selector: string) => string;

package/dist/helpers/genId.d.ts

@@ -0,0 +1 @@
+export declare const genId: () => number;

package/dist/helpers/getDefaultLocale.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="en-EN",a=()=>typeof navigator>"u"?e:navigator.language?navigator.language:navigator.userLanguage?navigator.userLanguage:e;exports.getDefaultLocale=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="en-EN",a=()=>typeof navigator=="undefined"?e:navigator.language?navigator.language:navigator.userLanguage?navigator.userLanguage:e;exports.getDefaultLocale=a;

package/dist/helpers/getDefaultLocale.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultLocale: () => any;

package/dist/helpers/getDefaultLocale.js

@@ -1,4 +1,4 @@
-const a = "en-EN", e = () => typeof navigator > "u" ? a : navigator.language ? navigator.language : navigator.userLanguage ? navigator.userLanguage : a;
+const a = "en-EN", e = () => typeof navigator == "undefined" ? a : navigator.language ? navigator.language : navigator.userLanguage ? navigator.userLanguage : a;
 export {
   e as getDefaultLocale
 };

package/dist/helpers/getFocusableNodes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Sometimes, we want to retrieve the elements with tabindex=-1, and sometime we don't
+ * The includeNegativeTabIndex aims to provide this capability
+ *
+ */
+export declare const getFocusableNodes: (node: HTMLElement, includeNegativeTabIndex: boolean) => Element[];
+/**
+ * This function filters an array of HTMLElements and returns any of them that have internal keyboard navigation such as input type="text"
+ */
+export declare const getFocusableNodesWithKeyboardNav: (nodes: HTMLElement[]) => HTMLElement[];

package/dist/helpers/handleResponsiveValues.cjs

@@ -1,5 +1 @@
-"use strict";const l=(a,s,e)=>{let i=s;if(!Array.isArray(s)&&typeof s=="object"&&(i=[s?.desktop,s?.tablet,s?.mobile]),i===void 0)return;if(Array.isArray(i)){const[d,o,t]=i;let r=`${a}: ${e.spaces[d]};`;return o!==void 0&&(r+=`${e.mediaQueries.tablet}{
-          ${a}: ${e.spaces[o]};
-        }`),t!==void 0&&(r+=`${e.mediaQueries.mobile}{
-          ${a}: ${e.spaces[t]};
-        }`),r}const c=e.spaces[i]||i;return`${a}: ${c};`};module.exports=l;
+"use strict";const f=(n,s,r)=>{if(!s)return;let $=Array.isArray(s)?s:[];if(!Array.isArray(s)&&typeof s=="object"&&($=[s==null?void 0:s.desktop,s==null?void 0:s.tablet,s==null?void 0:s.mobile]),$.length>0)return $.reduce((t,i,d)=>{if(i)switch(d){case 0:return`${t}${n}: ${r.spaces[i]};`;case 1:return`${t}${r.mediaQueries.tablet}{${n}: ${r.spaces[i]};}`;case 2:return`${t}${r.mediaQueries.mobile}{${n}: ${r.spaces[i]};}`;default:return t}return t},"");const e=r.spaces[s]||s;return`${n}: ${e};`};module.exports=f;

package/dist/helpers/handleResponsiveValues.d.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+interface ResponsiveValueObject {
+    desktop?: keyof DefaultTheme['spaces'];
+    tablet?: keyof DefaultTheme['spaces'];
+    mobile?: keyof DefaultTheme['spaces'];
+}
+type ResponsiveValue = ResponsiveValueObject | Array<keyof DefaultTheme['spaces'] | undefined> | keyof DefaultTheme['spaces'];
+declare const handleResponsiveValues: (property: string, value: ResponsiveValue | undefined, theme: DefaultTheme) => string | undefined;
+export default handleResponsiveValues;

package/dist/helpers/handleResponsiveValues.js

@@ -1,19 +1,25 @@
-const $ = (i, s, a) => {
-  let e = s;
-  if (!Array.isArray(s) && typeof s == "object" && (e = [s?.desktop, s?.tablet, s?.mobile]), e === void 0)
+const o = (t, s, r) => {
+  if (!s)
     return;
-  if (Array.isArray(e)) {
-    const [l, o, t] = e;
-    let r = `${i}: ${a.spaces[l]};`;
-    return o !== void 0 && (r += `${a.mediaQueries.tablet}{
-          ${i}: ${a.spaces[o]};
-        }`), t !== void 0 && (r += `${a.mediaQueries.mobile}{
-          ${i}: ${a.spaces[t]};
-        }`), r;
-  }
-  const d = a.spaces[e] || e;
-  return `${i}: ${d};`;
+  let $ = Array.isArray(s) ? s : [];
+  if (!Array.isArray(s) && typeof s == "object" && ($ = [s == null ? void 0 : s.desktop, s == null ? void 0 : s.tablet, s == null ? void 0 : s.mobile]), $.length > 0)
+    return $.reduce((n, i, d) => {
+      if (i)
+        switch (d) {
+          case 0:
+            return `${n}${t}: ${r.spaces[i]};`;
+          case 1:
+            return `${n}${r.mediaQueries.tablet}{${t}: ${r.spaces[i]};}`;
+          case 2:
+            return `${n}${r.mediaQueries.mobile}{${t}: ${r.spaces[i]};}`;
+          default:
+            return n;
+        }
+      return n;
+    }, "");
+  const e = r.spaces[s] || s;
+  return `${t}: ${e};`;
 };
 export {
-  $ as default
+  o as default
 };

package/dist/helpers/keyboardKeys.d.ts

@@ -0,0 +1,17 @@
+export declare const KeyboardKeys: {
+    DOWN: string;
+    UP: string;
+    RIGHT: string;
+    LEFT: string;
+    ESCAPE: string;
+    ENTER: string;
+    SPACE: string;
+    TAB: string;
+    END: string;
+    HOME: string;
+    DELETE: string;
+    PAGE_UP: string;
+    PAGE_DOWN: string;
+    BACKSPACE: string;
+    CLEAR: string;
+};

package/dist/helpers/objects.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./arrays.cjs");function b(e,i){return typeof e=="string"?!1:i in e}function n(e){return e&&typeof e=="object"&&!Array.isArray(e)}function o(e,...i){if(!i.length)return e;const r=i.shift();if(r==null)return e;const c=n(e)&&n(r),t=f.isArray(e)&&f.isArray(r);if(c||t)for(const s of Object.keys(r)){const u=n(r[s]),y=f.isArray(r[s]);u||y?(e[s]||Object.assign(e,{[s]:u?{}:[]}),o(e[s],r[s])):c?Object.assign(e,{[s]:r[s]}):e.push(r[s])}return o(e,...i)}exports.isKeyOf=b;exports.isObject=n;exports.mergeDeep=o;

package/dist/helpers/objects.d.ts

@@ -0,0 +1,28 @@
+export declare function isKeyOf(o: object | [] | string, s: string | number | symbol): s is keyof typeof o;
+/**
+ * @description Simple object check.
+ * @export
+ * @param item
+ * @returns {boolean}
+ */
+export declare function isObject(item: any): boolean;
+/**
+ * @description Deep merge two objects or arrays.
+ * If all parameters have the same structure, ie. are objects or arrays,
+ * the function will recursively merge the two structures together while maintaining the structure.
+ * If the parameters do not share the same structure, the function will simply return the first parameter.
+ * This is also true for when both parameters are the same until a non-shared property is encountered.
+ *
+ * For example:
+ *   - `mergeDeep({a: 1, b: 2}, {a: 3, c: 4})` => `{a: 3, b: 2, c: 4}`
+ *   - `mergeDeep({a: 2}, {a: []})` => `{a: 2}`
+ *   - `mergeDeep({a: {b: 1}}, {a: {b: 2}})` => `{a: {b: 2}}`
+ *   - `mergeDeep({a: [0]}, {a: [1, 2]})` => `{a: [0, 1, 2]}`
+ *   - `mergeDeep({a: [{}, 1]}, {a: [{inserted: 5}, 2]})` => `{a: [{inserted: 5}, 1, 2]}`
+ *   - `mergeDeep({a: [{kept: 1}, 1]}, {a: [2, {discarded: 5}]})` => `{a: [{kept: 1}, 1, 2]}`
+ * @export
+ * @param target The object to merge and update with new values from the different source parameters
+ * @param ...sources The source objects to merge into the target
+ * @returns {Record<string, any>} The new deep merged object
+ */
+export declare function mergeDeep(target: Record<string, any>, ...sources: Record<string, any>[]): Record<string, any>;

package/dist/helpers/objects.js

@@ -0,0 +1,26 @@
+import { isArray as e } from "./arrays.js";
+function j(n, s) {
+  return typeof n == "string" ? !1 : s in n;
+}
+function f(n) {
+  return n && typeof n == "object" && !Array.isArray(n);
+}
+function u(n, ...s) {
+  if (!s.length)
+    return n;
+  const i = s.shift();
+  if (i == null)
+    return n;
+  const o = f(n) && f(i), b = e(n) && e(i);
+  if (o || b)
+    for (const r of Object.keys(i)) {
+      const c = f(i[r]), t = e(i[r]);
+      c || t ? (n[r] || Object.assign(n, { [r]: c ? {} : [] }), u(n[r], i[r])) : o ? Object.assign(n, { [r]: i[r] }) : n.push(i[r]);
+    }
+  return u(n, ...s);
+}
+export {
+  j as isKeyOf,
+  f as isObject,
+  u as mergeDeep
+};

package/dist/helpers/setOpacity.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=(t,e)=>`${t}${Math.floor(e*255).toString(16).padStart(2,0)}`;exports.setOpacity=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=(t,e)=>`${t}${Math.floor(e*255).toString(16).padStart(2,"0")}`;exports.setOpacity=o;

package/dist/helpers/setOpacity.d.ts

@@ -0,0 +1 @@
+export declare const setOpacity: (hex: string, alpha: number) => string;

package/dist/helpers/setOpacity.js

@@ -1,4 +1,4 @@
-const a = (t, o) => `${t}${Math.floor(o * 255).toString(16).padStart(2, 0)}`;
+const a = (t, o) => `${t}${Math.floor(o * 255).toString(16).padStart(2, "0")}`;
 export {
   a as setOpacity
 };

package/dist/helpers/setTabIndexOnFirstItem.d.ts

@@ -0,0 +1 @@
+export declare const setTabIndexOnFirstItem: (node: HTMLElement, selector: string) => void;

package/dist/helpers/theme.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./objects.cjs");function u(t,e,r){return e&&o.isKeyOf(t,e)?t[e]:r}exports.extractStyleFromTheme=u;

package/dist/helpers/theme.d.ts

@@ -0,0 +1,2 @@
+import { DefaultTheme } from 'styled-components';
+export declare function extractStyleFromTheme<TKey extends keyof DefaultTheme, TSection extends DefaultTheme[TKey]>(themeSection: TSection, key: string | number | symbol | undefined, defaultValue: any): string | number;

package/dist/helpers/theme.js

@@ -0,0 +1,7 @@
+import { isKeyOf as o } from "./objects.js";
+function i(t, r, f) {
+  return r && o(t, r) ? t[r] : f;
+}
+export {
+  i as extractStyleFromTheme
+};

package/dist/helpers/useElementOnScreen.d.ts

@@ -0,0 +1 @@
+export declare const useElementOnScreen: (options?: IntersectionObserverInit) => (boolean | import("react").RefObject<HTMLElement>)[];

package/dist/helpers/useId.d.ts

@@ -0,0 +1 @@
+export declare const useId: (prefix: string, initialId?: string) => string;

package/dist/helpers/useIntersection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,s,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(s);g.useEffect(()=>{if(r)return;const i={root:e.current,rootMargin:"0px"},u=f=>{f.forEach(o=>{o.isIntersecting&&e.current.scrollHeight>e.current.clientHeight&&n(o)})},c=new IntersectionObserver(u,i),a=e.current.querySelector(t);return c.observe(a),()=>{c.disconnect()}},[r,n,t,e])};exports.useIntersection=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t,e])};exports.useIntersection=v;

package/dist/helpers/useIntersection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * TODO: This should be moved to the `hooks` folder
+ */
+import { MutableRefObject } from 'react';
+interface UseIntersectionOptions {
+    selectorToWatch: keyof HTMLElementTagNameMap;
+    skipWhen?: boolean;
+}
+export declare const useIntersection: (scrollableAreaRef: MutableRefObject<HTMLElement>, callback: (entry: IntersectionObserverEntry) => void, { selectorToWatch, skipWhen }: UseIntersectionOptions) => void;
+export {};

package/dist/helpers/useIntersection.js

@@ -1,19 +1,19 @@
 import { useEffect as m } from "react";
 import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
-const E = (t, i, { selectorToWatch: n, skipWhen: r = !1 }) => {
-  const e = p(i);
+const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
+  const e = p(s);
   m(() => {
     if (r)
       return;
-    const s = {
+    const u = {
       root: t.current,
       rootMargin: "0px"
-    }, u = (g) => {
-      g.forEach((c) => {
-        c.isIntersecting && t.current.scrollHeight > t.current.clientHeight && e(c);
+    }, f = (g) => {
+      g.forEach((i) => {
+        i.isIntersecting && t.current.scrollHeight > t.current.clientHeight && e(i);
       });
-    }, o = new IntersectionObserver(u, s), f = t.current.querySelector(n);
-    return o.observe(f), () => {
+    }, o = new IntersectionObserver(f, u), c = t.current.querySelector(n);
+    return c && o.observe(c), () => {
       o.disconnect();
     };
   }, [r, e, n, t]);

package/dist/helpers/useLockScroll.d.ts

@@ -0,0 +1,2 @@
+declare const useLockScroll: (lockScroll: boolean) => void;
+export default useLockScroll;

package/dist/helpers/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;

package/dist/helpers/useResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useResizeObserver: (sources: MutableRefObject<HTMLElement> | MutableRefObject<HTMLElement>[], onResize: ResizeObserverCallback) => void;

package/dist/hooks/useControllableState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react"),i=require("@radix-ui/react-use-callback-ref");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,s=typeof e=="function"?e(t):e,d=r?s:t,a=i.useCallbackRef(n),b=u.useCallback(l=>{if(r){const f=typeof l=="function"?l(s):l;f!==s&&(a(f),c(l))}else c(l)},[r,s,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=i.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react"),i=require("@radix-ui/react-use-callback-ref");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=C({defaultProp:o,onChange:n}),r=e!==void 0,s=typeof e=="function"?e(t):e,d=r?s:t,a=i.useCallbackRef(n),b=u.useCallback(l=>{if(r){const f=typeof l=="function"?l(s):l;f!==s&&(a(f),c(l))}else c(l)},[r,s,c,a]);return[d,b]}function C({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=i.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,16 @@
+/**
+ * this is basically stolen from RadixUI but tweaked to allow the following:
+ * * prop can be a function
+ * * setUncontrolledProp is always called with the nextValue.
+ */
+/**
+ * @type {<T>(params: UseControllableStateParams<T>) => [T, (nextState: T | SetStateFn<T>) => void]}
+ */
+export interface UseControllableStateParams<TProp> {
+    prop?: TProp | undefined;
+    defaultProp?: TProp | undefined;
+    onChange?: (state?: TProp) => void;
+}
+type SetStateFn<TState> = (prevState: TState) => TState;
+declare function useControllableState<TProp>({ prop, defaultProp, onChange, }: UseControllableStateParams<TProp>): [TProp | undefined, (nextState: TProp | SetStateFn<TProp>) => void];
+export { useControllableState };

package/dist/hooks/useControllableState.js

@@ -1,24 +1,21 @@
 import * as r from "react";
 import { useCallbackRef as i } from "@radix-ui/react-use-callback-ref";
-function R({ prop: o, defaultProp: u, onChange: c = () => {
+function R({ prop: n, defaultProp: u, onChange: c = () => {
 } }) {
-  const [t, e] = C({ defaultProp: u, onChange: c }), n = o !== void 0, l = typeof o == "function" ? o(t) : o, d = n ? l : t, a = i(c), v = r.useCallback(
-    (s) => {
-      if (n) {
-        const f = typeof s == "function" ? s(l) : s;
-        f !== l && (a(f), e(s));
-      } else
-        e(s);
-    },
-    [n, l, e, a]
-  );
-  return [d, v];
+  const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = typeof n == "function" ? n(t) : n, d = o ? l : t, f = i(c), C = r.useCallback((s) => {
+    if (o) {
+      const a = typeof s == "function" ? s(l) : s;
+      a !== l && (f(a), e(s));
+    } else
+      e(s);
+  }, [o, l, e, f]);
+  return [d, C];
 }
-function C({ defaultProp: o, onChange: u }) {
-  const c = r.useState(o), [t] = c, e = r.useRef(t), n = i(u);
+function m({ defaultProp: n, onChange: u }) {
+  const c = r.useState(n), [t] = c, e = r.useRef(t), o = i(u);
   return r.useEffect(() => {
-    e.current !== t && (n(t), e.current = t);
-  }, [t, e, n]), c;
+    e.current !== t && (o(t), e.current = t);
+  }, [t, e, o]), c;
 }
 export {
   R as useControllableState

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+export * from './Accordion';
+export * from './Alert';
+export * from './Avatar';
+export * from './Badge';
+export * from './BaseButton';
+export * from './BaseCheckbox';
+export * from './BaseLink';
+export { BaseRadio } from './BaseRadio';
+export * from './Box';
+export * from './Breadcrumbs';
+export * from './Button';
+export * from './Card';
+export * from './CarouselInput';
+export * from './Checkbox';
+export * from './Combobox';
+export * from './Dialog';
+export * from './DismissibleLayer';
+export * from './DatePicker';
+export * from './DateTimePicker';
+export * from './Divider';
+export * from './EmptyStateLayout';
+export * from './Field';
+export * from './FocusTrap';
+export * from './Grid';
+export * from './Icon';
+export * from './IconButton';
+export * from './KeyboardNavigable';
+export * from './Layout';
+export * from './Link';
+export * from './LinkButton';
+export * from './LiveRegions';
+export * from './Loader';
+export * from './Main';
+export * from './MainNav';
+export * from './ModalLayout';
+export * from './NumberInput';
+export * from './Pagination';
+export * from './Popover';
+export * from './Portal';
+export * from './ProgressBar';
+export * from './Radio';
+export * from './RawTable';
+export * from './Flex';
+export * from './Searchbar';
+export * from './Select';
+export * from './SimpleMenu';
+export * from './Stack';
+export * from './Status';
+export * from './SubNav';
+export * from './Switch';
+export * from './Tabs';
+export * from './Table';
+export * from './Tag';
+export * from './TextButton';
+export * from './TextInput';
+export * from './Textarea';
+export * from './ThemeProvider';
+export * from './TimePicker';
+export * from './ToggleCheckbox';
+export * from './ToggleInput';
+export * from './Tooltip';
+export * from './Typography';
+export * from './VisuallyHidden';
+export * from './themes';

package/dist/themes/ColorButton.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),d=require("prop-types"),s=require("styled-components"),a=require("../Box/Box.cjs"),p=require("../Typography/Typography.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(n),r=o(d),c=o(s),i=c.default(a.Box)`
-  background: ${({color:e})=>e};
-`,u=({colorKey:e,color:l})=>t.default.createElement(i,{color:l,paddingTop:6,paddingLeft:6,hasRadius:!0,shadow:"popupShadow",borderColor:"neutral200"},t.default.createElement(a.Box,{background:"neutral0",padding:1},t.default.createElement(p.Typography,null,e)));u.propTypes={color:r.default.string.isRequired,colorKey:r.default.string.isRequired};exports.ColorButton=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("styled-components"),t=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),d=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},s=d(n),a=s.default(t.Box)`
+  background: ${({color:o})=>o};
+`,l=({colorKey:o,color:r})=>e.jsx(a,{color:r,paddingTop:6,paddingLeft:6,hasRadius:!0,shadow:"popupShadow",borderColor:"neutral200",children:e.jsx(t.Box,{background:"neutral0",padding:1,children:e.jsx(u.Typography,{children:o})})});exports.ColorButton=l;

package/dist/themes/ColorButton.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../Box';
+interface ColorButtonProps extends Pick<BoxProps, 'color'> {
+    colorKey: string;
+}
+export declare const ColorButton: ({ colorKey, color }: ColorButtonProps) => JSX.Element;
+export {};

package/dist/themes/ColorButton.js

@@ -1,25 +1,29 @@
-import r from "react";
-import e from "prop-types";
-import a from "styled-components";
-import { Box as t } from "../Box/Box.js";
-import { Typography as d } from "../Typography/Typography.js";
-const n = a(t)`
-  background: ${({ color: o }) => o};
-`, i = ({ colorKey: o, color: p }) => /* @__PURE__ */ r.createElement(n, {
-  color: p,
+import { jsx as r } from "react/jsx-runtime";
+import n from "styled-components";
+import { Box as d } from "../Box/Box.js";
+import { Typography as p } from "../Typography/Typography.js";
+const a = n(d)`
+  background: ${({
+  color: o
+}) => o};
+`, c = ({
+  colorKey: o,
+  color: t
+}) => r(a, {
+  color: t,
   paddingTop: 6,
   paddingLeft: 6,
   hasRadius: !0,
   shadow: "popupShadow",
-  borderColor: "neutral200"
-}, /* @__PURE__ */ r.createElement(t, {
-  background: "neutral0",
-  padding: 1
-}, /* @__PURE__ */ r.createElement(d, null, o)));
-i.propTypes = {
-  color: e.string.isRequired,
-  colorKey: e.string.isRequired
-};
+  borderColor: "neutral200",
+  children: r(d, {
+    background: "neutral0",
+    padding: 1,
+    children: r(p, {
+      children: o
+    })
+  })
+});
 export {
-  i as ColorButton
+  c as ColorButton
 };

package/dist/themes/common-theme.d.ts

@@ -0,0 +1,2 @@
+import { CommonTheme } from 'styled-components';
+export declare const commonTheme: CommonTheme;

package/dist/themes/darkTheme/dark-colors.d.ts

@@ -0,0 +1,4 @@
+import { ThemeColors } from 'styled-components';
+export declare const darkColorTokenObject: {
+    color: ThemeColors;
+};

package/dist/themes/darkTheme/dark-shadows.d.ts

@@ -0,0 +1,4 @@
+import { ThemeShadows } from 'styled-components';
+export declare const darkShadowTokenObject: {
+    shadow: ThemeShadows;
+};

package/dist/themes/darkTheme/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./dark-colors.cjs"),o=require("./dark-shadows.cjs"),r=require("../common-theme.cjs"),s={colors:e.darkColorTokenObject.color,shadows:o.darkShadowTokenObject.shadow,...r.commonTheme};exports.darkTheme=s;
+"use strict";var d=Object.defineProperty;var s=Object.getOwnPropertySymbols;var t=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var c=(r,e,o)=>e in r?d(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,a=(r,e)=>{for(var o in e||(e={}))t.call(e,o)&&c(r,o,e[o]);if(s)for(var o of s(e))m.call(e,o)&&c(r,o,e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./dark-colors.cjs"),h=require("./dark-shadows.cjs"),k=require("../common-theme.cjs"),l=a({colors:n.darkColorTokenObject.color,shadows:h.darkShadowTokenObject.shadow},k.commonTheme);exports.darkTheme=l;

package/dist/themes/darkTheme/index.d.ts

@@ -0,0 +1,2 @@
+import { DefaultTheme } from 'styled-components';
+export declare const darkTheme: DefaultTheme;

package/dist/themes/darkTheme/index.js

@@ -1,11 +1,21 @@
-import { darkColorTokenObject as o } from "./dark-colors.js";
-import { darkShadowTokenObject as r } from "./dark-shadows.js";
-import { commonTheme as m } from "../common-theme.js";
-const c = {
-  colors: o.color,
-  shadows: r.shadow,
-  ...m
+var c = Object.defineProperty;
+var e = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var t = (m, o, r) => o in m ? c(m, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : m[o] = r, a = (m, o) => {
+  for (var r in o || (o = {}))
+    d.call(o, r) && t(m, r, o[r]);
+  if (e)
+    for (var r of e(o))
+      h.call(o, r) && t(m, r, o[r]);
+  return m;
 };
+import { darkColorTokenObject as k } from "./dark-colors.js";
+import { darkShadowTokenObject as s } from "./dark-shadows.js";
+import { commonTheme as n } from "../common-theme.js";
+const l = a({
+  colors: k.color,
+  shadows: s.shadow
+}, n);
 export {
-  c as darkTheme
+  l as darkTheme
 };

package/dist/themes/extendTheme.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./lightTheme/index.cjs"),s=e=>`
-${e}
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../helpers/objects.cjs"),s=require("./lightTheme/index.cjs"),r=t=>`
+${t}
 
 The following is an example:
 
@@ -7,7 +7,7 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(c.lightTheme).map(t=>`${t}: /* put the overrides for the ${t} key */,`).join(`
+    ${Object.keys(s.lightTheme).map(e=>`${e}: /* put the overrides for the ${e} key */,`).join(`
 `)}
 })
-`,r=e=>e&&typeof e=="object"&&!Array.isArray(e),h=(e,t)=>{const n={...e};return r(e)&&r(t)&&Object.keys(t).forEach(o=>{r(t[o])&&e.hasOwnProperty(o)?n[o]=h(e[o],t[o]):n[o]=t[o]}),n},u=(e,t)=>{if(!r(e)){const n=s("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(n)}if(!r(t)){const n=s("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(n)}return h(e,t)};exports.extendTheme=u;
+`,h=(t,e)=>{if(!n.isObject(t)){const o=r("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(o)}if(!n.isObject(e)){const o=r("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(o)}return n.mergeDeep(t!=null?t:{},e!=null?e:{})};exports.extendTheme=h;

package/dist/themes/extendTheme.d.ts

@@ -0,0 +1,2 @@
+import { DefaultTheme } from 'styled-components';
+export declare const extendTheme: (theme: DefaultTheme | null, overrides: object | null) => Record<string, any>;