@strapi/design-system 1.3.0-beta.0 → 1.3.0-beta.2

package/dist/Button/utils.js

@@ -1,112 +0,0 @@
-import { Typography as c } from "../Typography/Typography.js";
-import { LIGHT_VARIANTS as $, TERTIARY as s, DEFAULT as n, SECONDARY as u, VARIANTS as g, GHOST as d, DANGER as b, SUCCESS as t, SUCCESS_LIGHT as p, DANGER_LIGHT as e } from "./constants.js";
-const l = (o) => $.includes(o) ? o.substring(0, o.lastIndexOf("-")) : o === s ? "neutral" : [n, u].includes(o) || !g.includes(o) ? "primary" : o, a = ({ theme: o }) => `
-    border: 1px solid ${o.colors.neutral200};
-    background: ${o.colors.neutral150};
-    ${c} {
-      color: ${o.colors.neutral600};
-    }
-    svg {
-      > g, path {
-        fill: ${o.colors.neutral600};
-      }
-    }
-  `, S = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
-      background-color: ${o.colors.neutral0};
-    ` : r === s ? `
-      background-color: ${o.colors.neutral100};
-    ` : r === d ? `
-      background-color: ${o.colors.neutral100};
-    ` : r === n ? `
-      border: 1px solid ${o.colors.buttonPrimary500};
-      background: ${o.colors.buttonPrimary500};
-    ` : `
-    border: 1px solid ${o.colors[`${l(r)}500`]};
-    background: ${o.colors[`${l(r)}500`]};
-  `, k = ({ theme: o, variant: r }) => [...$, u].includes(r) ? `
-      background-color: ${o.colors.neutral0};
-      border: 1px solid ${o.colors[`${l(r)}600`]};
-      ${c} {
-        color: ${o.colors[`${l(r)}600`]};
-      }
-      svg {
-        > g, path {
-          fill: ${o.colors[`${l(r)}600`]};
-        }
-      }
-    ` : r === s ? `
-      background-color: ${o.colors.neutral150};
-    ` : `
-    border: 1px solid ${o.colors[`${l(r)}600`]};
-    background: ${o.colors[`${l(r)}600`]};
-  `, x = ({ theme: o, variant: r }) => {
-  switch (r) {
-    case e:
-    case p:
-    case u:
-      return `
-          border: 1px solid ${o.colors[`${l(r)}200`]};
-          background: ${o.colors[`${l(r)}100`]};
-          ${c} {
-            color: ${o.colors[`${l(r)}700`]};
-          }
-          svg {
-            > g, path {
-              fill: ${o.colors[`${l(r)}700`]};
-            }
-          }
-        `;
-    case s:
-      return `
-          border: 1px solid ${o.colors.neutral200};
-          background: ${o.colors.neutral0};
-          ${c} {
-            color: ${o.colors.neutral800};
-          }
-          svg {
-            > g, path {
-              fill: ${o.colors.neutral800};
-            }
-          }
-        `;
-    case d:
-      return `
-        border: 1px solid transparent;
-        background: transparent;
-
-        ${c} {
-          color: ${o.colors.neutral800};
-        }
-
-        svg {
-          > g, path {
-            fill: ${o.colors.neutral500};
-          }
-        }
-      `;
-    case t:
-    case b:
-      return `
-          border: 1px solid ${o.colors[`${l(r)}600`]};
-          background: ${o.colors[`${l(r)}600`]};
-          ${c} {
-            color: ${o.colors.neutral0};
-          }
-        `;
-    default:
-      return `
-          svg {
-            > g, path {
-              fill: ${o.colors.buttonNeutral0};
-            }
-          }
-        `;
-  }
-};
-export {
-  k as getActiveStyle,
-  a as getDisabledStyle,
-  S as getHoverStyle,
-  l as getVariantColorName,
-  x as getVariantStyle
-};

package/dist/Card/Card.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=require("prop-types"),l=require("../Box/Box.cjs"),n=require("./CardContext.cjs"),c=require("../helpers/useId.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=a(s),i=a(u),t=({id:e,...d})=>{const r=c.useId("card",e);return o.default.createElement(n.CardContext.Provider,{value:{id:r}},o.default.createElement(l.Box,{id:e,tabIndex:0,hasRadius:!0,background:"neutral0",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",shadow:"tableShadow",as:"article","aria-labelledby":`${r}-title`,...d}))};t.defaultProps={id:void 0};t.propTypes={id:i.default.string};exports.Card=t;

package/dist/Card/Card.js

@@ -1,32 +0,0 @@
-import t from "react";
-import d from "prop-types";
-import { Box as i } from "../Box/Box.js";
-import { CardContext as l } from "./CardContext.js";
-import { useId as p } from "../helpers/useId.js";
-const o = ({ id: r, ...a }) => {
-  const e = p("card", r);
-  return /* @__PURE__ */ t.createElement(l.Provider, {
-    value: { id: e }
-  }, /* @__PURE__ */ t.createElement(i, {
-    id: r,
-    tabIndex: 0,
-    hasRadius: !0,
-    background: "neutral0",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderColor: "neutral150",
-    shadow: "tableShadow",
-    as: "article",
-    "aria-labelledby": `${e}-title`,
-    ...a
-  }));
-};
-o.defaultProps = {
-  id: void 0
-};
-o.propTypes = {
-  id: d.string
-};
-export {
-  o as Card
-};

package/dist/Card/CardAction.cjs

@@ -1,6 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),s=require("../Stack/Stack.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=a(o),i=c.default(s.Stack).attrs({horizontal:!0,spacing:2})`
-  position: absolute;
-  top: ${({theme:t})=>t.spaces[3]};
-  right: ${({position:t,theme:e})=>t==="end"?e.spaces[3]:void 0};
-  left: ${({position:t,theme:e})=>t==="start"?e.spaces[3]:void 0};
-`;exports.CardAction=i;

package/dist/Card/CardAction.js

@@ -1,14 +0,0 @@
-import s from "styled-components";
-import { Stack as r } from "../Stack/Stack.js";
-const e = s(r).attrs({
-  horizontal: !0,
-  spacing: 2
-})`
-  position: absolute;
-  top: ${({ theme: t }) => t.spaces[3]};
-  right: ${({ position: t, theme: o }) => t === "end" ? o.spaces[3] : void 0};
-  left: ${({ position: t, theme: o }) => t === "start" ? o.spaces[3] : void 0};
-`;
-export {
-  e as CardAction
-};

package/dist/Card/CardAsset.cjs

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),l=require("styled-components"),c=require("prop-types"),u=require("../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(n),i=a(l),o=a(c),p=i.default.img`
-  // inline flows is based on typography and displays an extra white space below the image
-  // switch to block is required in order to make the img stick the bottom of the container
-  // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
-  margin: 0;
-  padding: 0;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-`,f={S:88,M:164},h=i.default.div`
-  display: flex;
-  justify-content: center;
-  height: ${({size:e})=>f[e]/16}rem;
-  width: 100%;
-  background: repeating-conic-gradient(${({theme:e})=>e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
-    20px;
-  border-top-left-radius: ${({theme:e})=>e.borderRadius};
-  border-top-right-radius: ${({theme:e})=>e.borderRadius};
-`,r=({size:e,children:s,...d})=>t.default.createElement(h,{size:e},s?t.default.createElement(u.Flex,null,s):t.default.createElement(p,{...d,"aria-hidden":!0}));r.defaultProps={children:void 0,size:"M"};r.propTypes={children:o.default.node,size:o.default.oneOf(["S","M"])};exports.CardAsset=r;

package/dist/Card/CardAsset.js

@@ -1,42 +0,0 @@
-import t from "react";
-import o from "styled-components";
-import i from "prop-types";
-import { Flex as n } from "../Flex/Flex.js";
-const d = o.img`
-  // inline flows is based on typography and displays an extra white space below the image
-  // switch to block is required in order to make the img stick the bottom of the container
-  // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
-  margin: 0;
-  padding: 0;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-`, p = {
-  S: 88,
-  M: 164
-}, c = o.div`
-  display: flex;
-  justify-content: center;
-  height: ${({ size: e }) => p[e] / 16}rem;
-  width: 100%;
-  background: repeating-conic-gradient(${({ theme: e }) => e.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
-    20px;
-  border-top-left-radius: ${({ theme: e }) => e.borderRadius};
-  border-top-right-radius: ${({ theme: e }) => e.borderRadius};
-`, a = ({ size: e, children: r, ...s }) => /* @__PURE__ */ t.createElement(c, {
-  size: e
-}, r ? /* @__PURE__ */ t.createElement(n, null, r) : /* @__PURE__ */ t.createElement(d, {
-  ...s,
-  "aria-hidden": !0
-}));
-a.defaultProps = {
-  children: void 0,
-  size: "M"
-};
-a.propTypes = {
-  children: i.node,
-  size: i.oneOf(["S", "M"])
-};
-export {
-  a as CardAsset
-};

package/dist/Card/CardBadge.cjs

@@ -1,6 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),r=require("styled-components"),n=require("../Badge/Badge.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(l),d=a(r),o=d.default.div`
-  margin-left: auto;
-  flex-shrink: 0;
-`,s=d.default(n.Badge)`
-  margin-left: ${({theme:e})=>e.spaces[1]};
-`,c=e=>t.default.createElement(o,null,t.default.createElement(s,{...e}));exports.CardBadge=c;

package/dist/Card/CardBadge.js

@@ -1,14 +0,0 @@
-import t from "react";
-import r from "styled-components";
-import { Badge as a } from "../Badge/Badge.js";
-const o = r.div`
-  margin-left: auto;
-  flex-shrink: 0;
-`, m = r(a)`
-  margin-left: ${({ theme: e }) => e.spaces[1]};
-`, l = (e) => /* @__PURE__ */ t.createElement(o, null, /* @__PURE__ */ t.createElement(m, {
-  ...e
-}));
-export {
-  l as CardBadge
-};

package/dist/Card/CardBody.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),o=require("../Flex/Flex.cjs"),d=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),l=e=>t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:2,paddingBottom:2},t.default.createElement(o.Flex,{...e,alignItems:"flex-start"}));exports.CardBody=l;

package/dist/Card/CardBody.js

@@ -1,15 +0,0 @@
-import t from "react";
-import { Flex as o } from "../Flex/Flex.js";
-import { Box as r } from "../Box/Box.js";
-const i = (e) => /* @__PURE__ */ t.createElement(r, {
-  paddingLeft: 3,
-  paddingRight: 3,
-  paddingTop: 2,
-  paddingBottom: 2
-}, /* @__PURE__ */ t.createElement(o, {
-  ...e,
-  alignItems: "flex-start"
-}));
-export {
-  i as CardBody
-};

package/dist/Card/CardCheckbox.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),o=require("./CardAction.cjs"),r=require("../BaseCheckbox/BaseCheckbox.cjs"),s=require("./CardContext.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(c),d=e=>{const{id:a}=s.useCard();return t.default.createElement(o.CardAction,{position:"start"},t.default.createElement(r.BaseCheckbox,{"aria-labelledby":`${a}-title`,...e}))};exports.CardCheckbox=d;

package/dist/Card/CardCheckbox.js

@@ -1,16 +0,0 @@
-import t from "react";
-import { CardAction as o } from "./CardAction.js";
-import { BaseCheckbox as a } from "../BaseCheckbox/BaseCheckbox.js";
-import { useCard as i } from "./CardContext.js";
-const d = (e) => {
-  const { id: r } = i();
-  return /* @__PURE__ */ t.createElement(o, {
-    position: "start"
-  }, /* @__PURE__ */ t.createElement(a, {
-    "aria-labelledby": `${r}-title`,
-    ...e
-  }));
-};
-export {
-  d as CardCheckbox
-};

package/dist/Card/CardContent.cjs

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=require("prop-types"),a=require("../Box/Box.cjs"),c=require("styled-components"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(n),u=t(s),d=t(c),p=d.default(a.Box)`
-  word-break: break-all;
-`,o=({children:e,...r})=>l.default.createElement(p,{...r},e);o.propTypes={children:u.default.node.isRequired};exports.CardContent=o;

package/dist/Card/CardContent.js

@@ -1,15 +0,0 @@
-import o from "react";
-import t from "prop-types";
-import { Box as p } from "../Box/Box.js";
-import m from "styled-components";
-const a = m(p)`
-  word-break: break-all;
-`, n = ({ children: r, ...e }) => /* @__PURE__ */ o.createElement(a, {
-  ...e
-}, r);
-n.propTypes = {
-  children: t.node.isRequired
-};
-export {
-  n as CardContent
-};

package/dist/Card/CardContext.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),r=()=>e.useContext(t);exports.CardContext=t;exports.useCard=r;

package/dist/Card/CardContext.js

@@ -1,6 +0,0 @@
-import { createContext as t, useContext as e } from "react";
-const o = t(), n = () => e(o);
-export {
-  o as CardContext,
-  n as useCard
-};

package/dist/Card/CardHeader.cjs

@@ -1,4 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),o=require("styled-components"),a=require("../Flex/Flex.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(r),n=t(o),s=n.default(a.Flex)`
-  position: relative;
-  border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,c=e=>l.default.createElement(s,{justifyContent:"center",...e});exports.CardHeader=c;

package/dist/Card/CardHeader.js

@@ -1,13 +0,0 @@
-import r from "react";
-import t from "styled-components";
-import { Flex as o } from "../Flex/Flex.js";
-const a = t(o)`
-  position: relative;
-  border-bottom: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, l = (e) => /* @__PURE__ */ r.createElement(a, {
-  justifyContent: "center",
-  ...e
-});
-export {
-  l as CardHeader
-};

package/dist/Card/CardTimer.cjs

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),p=require("prop-types"),u=require("styled-components"),c=require("../Box/Box.cjs"),n=require("../Typography/Typography.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=t(s),l=t(p),d=t(u),i=d.default(c.Box)`
-  position: absolute;
-  bottom: ${({theme:e})=>e.spaces[1]};
-  right: ${({theme:e})=>e.spaces[1]};
-`,o=({children:e,...a})=>r.default.createElement(i,{padding:1,background:"neutral800",color:"neutral0",as:"time",hasRadius:!0,...a},r.default.createElement(n.Typography,{variant:"pi",textColor:"neutral0"},e));o.propTypes={children:l.default.node.isRequired};exports.CardTimer=o;

package/dist/Card/CardTimer.js

@@ -1,26 +0,0 @@
-import e from "react";
-import t from "prop-types";
-import a from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Typography as i } from "../Typography/Typography.js";
-const m = a(p)`
-  position: absolute;
-  bottom: ${({ theme: r }) => r.spaces[1]};
-  right: ${({ theme: r }) => r.spaces[1]};
-`, s = ({ children: r, ...o }) => /* @__PURE__ */ e.createElement(m, {
-  padding: 1,
-  background: "neutral800",
-  color: "neutral0",
-  as: "time",
-  hasRadius: !0,
-  ...o
-}, /* @__PURE__ */ e.createElement(i, {
-  variant: "pi",
-  textColor: "neutral0"
-}, r));
-s.propTypes = {
-  children: t.node.isRequired
-};
-export {
-  s as CardTimer
-};

package/dist/Card/CardTitle.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),e=require("../Typography/Typography.cjs"),i=require("./CardContext.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=l(o),n=t=>{const{id:a}=i.useCard();return r.default.createElement(e.Typography,{variant:"pi",id:`${a}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},u=t=>r.default.createElement(e.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=u;exports.CardTitle=n;

package/dist/Card/CardTitle.js

@@ -1,23 +0,0 @@
-import r from "react";
-import { Typography as e } from "../Typography/Typography.js";
-import { useCard as a } from "./CardContext.js";
-const d = (t) => {
-  const { id: o } = a();
-  return /* @__PURE__ */ r.createElement(e, {
-    variant: "pi",
-    id: `${o}-title`,
-    textColor: "neutral800",
-    fontWeight: "bold",
-    as: "div",
-    ...t
-  });
-}, m = (t) => /* @__PURE__ */ r.createElement(e, {
-  variant: "pi",
-  ...t,
-  textColor: "neutral600",
-  as: "div"
-});
-export {
-  m as CardSubtitle,
-  d as CardTitle
-};

package/dist/Card/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Card.cjs"),d=require("./CardAction.cjs"),a=require("./CardAsset.cjs"),C=require("./CardBadge.cjs"),t=require("./CardBody.cjs"),s=require("./CardCheckbox.cjs"),o=require("./CardContent.cjs"),c=require("./CardHeader.cjs"),i=require("./CardTimer.cjs"),r=require("./CardTitle.cjs");exports.Card=e.Card;exports.CardAction=d.CardAction;exports.CardAsset=a.CardAsset;exports.CardBadge=C.CardBadge;exports.CardBody=t.CardBody;exports.CardCheckbox=s.CardCheckbox;exports.CardContent=o.CardContent;exports.CardHeader=c.CardHeader;exports.CardTimer=i.CardTimer;exports.CardSubtitle=r.CardSubtitle;exports.CardTitle=r.CardTitle;

package/dist/Card/index.js

@@ -1,23 +0,0 @@
-import { Card as e } from "./Card.js";
-import { CardAction as d } from "./CardAction.js";
-import { CardAsset as C } from "./CardAsset.js";
-import { CardBadge as x } from "./CardBadge.js";
-import { CardBody as p } from "./CardBody.js";
-import { CardCheckbox as n } from "./CardCheckbox.js";
-import { CardContent as c } from "./CardContent.js";
-import { CardHeader as s } from "./CardHeader.js";
-import { CardTimer as B } from "./CardTimer.js";
-import { CardSubtitle as g, CardTitle as h } from "./CardTitle.js";
-export {
-  e as Card,
-  d as CardAction,
-  C as CardAsset,
-  x as CardBadge,
-  p as CardBody,
-  n as CardCheckbox,
-  c as CardContent,
-  s as CardHeader,
-  g as CardSubtitle,
-  B as CardTimer,
-  h as CardTitle
-};

package/dist/CarouselInput/Carousel.cjs

@@ -1,14 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),j=require("prop-types"),A=require("styled-components"),L=require("@strapi/icons/ChevronRight"),k=require("@strapi/icons/ChevronLeft"),g=require("../Icon/Icon.cjs"),l=require("../Box/Box.cjs"),B=require("../Typography/Typography.cjs"),K=require("../Flex/Flex.cjs"),w=require("../Tooltip/Tooltip.cjs"),b=require("../helpers/keyboardKeys.cjs"),n=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},t=n(o),e=n(j),d=n(A),I=n(L),D=n(k),F=d.default(l.Box)`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: 'startAction slides endAction';
-`,P=d.default(l.Box)`
-  grid-area: slides;
-`,v=d.default.button`
-  grid-area: ${({area:r})=>r};
-
-  &:focus svg path,
-  &:hover svg path {
-    fill: ${({theme:r})=>r.colors.neutral900};
-  }
-`,s=({actions:r,children:m,label:q,nextLabel:R,onNext:u,onPrevious:c,previousLabel:x,secondaryLabel:i,selectedSlide:C,...T})=>{const f=o.useRef(null),p=o.useRef(null),h=o.Children.toArray(m).map((a,_)=>o.cloneElement(a,{selected:_===C})),E=a=>{switch(a.key){case b.KeyboardKeys.RIGHT:{a.preventDefault(),p.current.focus(),u();break}case b.KeyboardKeys.LEFT:{a.preventDefault(),f.current.focus(),c();break}}},y=h.length>1;return t.default.createElement(l.Box,{...T,onKeyDown:E},t.default.createElement(l.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100"},t.default.createElement(F,{as:"section","aria-roledescription":"carousel","aria-label":q,position:"relative"},y&&t.default.createElement(v,{onClick:c,area:"startAction",ref:f,"aria-label":x,type:"button"},t.default.createElement(g.Icon,{as:D.default,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),y&&t.default.createElement(v,{onClick:u,area:"endAction",ref:p,"aria-label":R,type:"button"},t.default.createElement(g.Icon,{as:I.default,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),t.default.createElement(P,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden"},h),r),i&&t.default.createElement(l.Box,{paddingTop:2,paddingLeft:4,paddingRight:4},t.default.createElement(w.Tooltip,{label:i},t.default.createElement(K.Flex,{justifyContent:"center"},t.default.createElement(B.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0},i))))))};s.defaultProps={actions:void 0,error:void 0,hint:void 0,required:!1,secondaryLabel:void 0};s.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string.isRequired,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.Carousel=s;

package/dist/CarouselInput/Carousel.js

@@ -1,131 +0,0 @@
-import r, { useRef as m, Children as T, cloneElement as w } from "react";
-import e from "prop-types";
-import a from "styled-components";
-import k from "@strapi/icons/ChevronRight";
-import L from "@strapi/icons/ChevronLeft";
-import { Icon as f } from "../Icon/Icon.js";
-import { Box as i } from "../Box/Box.js";
-import { Typography as D } from "../Typography/Typography.js";
-import { Flex as K } from "../Flex/Flex.js";
-import { Tooltip as F } from "../Tooltip/Tooltip.js";
-import { KeyboardKeys as h } from "../helpers/keyboardKeys.js";
-const G = a(i)`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: 'startAction slides endAction';
-`, I = a(i)`
-  grid-area: slides;
-`, g = a.button`
-  grid-area: ${({ area: t }) => t};
-
-  &:focus svg path,
-  &:hover svg path {
-    fill: ${({ theme: t }) => t.colors.neutral900};
-  }
-`, y = ({
-  actions: t,
-  children: b,
-  label: v,
-  nextLabel: R,
-  onNext: l,
-  onPrevious: s,
-  previousLabel: E,
-  secondaryLabel: n,
-  selectedSlide: C,
-  ...x
-}) => {
-  const d = m(null), c = m(null), p = T.toArray(b).map(
-    (o, A) => w(o, { selected: A === C })
-  ), q = (o) => {
-    switch (o.key) {
-      case h.RIGHT: {
-        o.preventDefault(), c.current.focus(), l();
-        break;
-      }
-      case h.LEFT: {
-        o.preventDefault(), d.current.focus(), s();
-        break;
-      }
-    }
-  }, u = p.length > 1;
-  return /* @__PURE__ */ r.createElement(i, {
-    ...x,
-    onKeyDown: q
-  }, /* @__PURE__ */ r.createElement(i, {
-    padding: 2,
-    borderColor: "neutral200",
-    hasRadius: !0,
-    background: "neutral100"
-  }, /* @__PURE__ */ r.createElement(G, {
-    as: "section",
-    "aria-roledescription": "carousel",
-    "aria-label": v,
-    position: "relative"
-  }, u && /* @__PURE__ */ r.createElement(g, {
-    onClick: s,
-    area: "startAction",
-    ref: d,
-    "aria-label": E,
-    type: "button"
-  }, /* @__PURE__ */ r.createElement(f, {
-    as: L,
-    "aria-hidden": !0,
-    width: "6px",
-    height: "10px",
-    color: "neutral600"
-  })), u && /* @__PURE__ */ r.createElement(g, {
-    onClick: l,
-    area: "endAction",
-    ref: c,
-    "aria-label": R,
-    type: "button"
-  }, /* @__PURE__ */ r.createElement(f, {
-    as: k,
-    "aria-hidden": !0,
-    width: "6px",
-    height: "10px",
-    color: "neutral600"
-  })), /* @__PURE__ */ r.createElement(I, {
-    "aria-live": "polite",
-    paddingLeft: 2,
-    paddingRight: 2,
-    width: "100%",
-    overflow: "hidden"
-  }, p), t), n && /* @__PURE__ */ r.createElement(i, {
-    paddingTop: 2,
-    paddingLeft: 4,
-    paddingRight: 4
-  }, /* @__PURE__ */ r.createElement(F, {
-    label: n
-  }, /* @__PURE__ */ r.createElement(K, {
-    justifyContent: "center"
-  }, /* @__PURE__ */ r.createElement(D, {
-    variant: "pi",
-    textColor: "neutral600",
-    ellipsis: !0
-  }, n))))));
-};
-y.defaultProps = {
-  actions: void 0,
-  error: void 0,
-  hint: void 0,
-  required: !1,
-  secondaryLabel: void 0
-};
-y.propTypes = {
-  actions: e.node,
-  children: e.node.isRequired,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  label: e.string.isRequired,
-  nextLabel: e.string.isRequired,
-  onNext: e.func.isRequired,
-  onPrevious: e.func.isRequired,
-  previousLabel: e.string.isRequired,
-  required: e.bool,
-  secondaryLabel: e.string,
-  selectedSlide: e.number.isRequired
-};
-export {
-  y as Carousel
-};

package/dist/CarouselInput/CarouselActions.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),o=require("../Stack/Stack.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=a(e),n=t=>c.default.createElement(o.Stack,{justifyContent:"center",horizontal:!0,spacing:1,position:"absolute",width:"100%",bottom:1,...t});exports.CarouselActions=n;

package/dist/CarouselInput/CarouselActions.js

@@ -1,14 +0,0 @@
-import o from "react";
-import { Stack as e } from "../Stack/Stack.js";
-const n = (t) => /* @__PURE__ */ o.createElement(e, {
-  justifyContent: "center",
-  horizontal: !0,
-  spacing: 1,
-  position: "absolute",
-  width: "100%",
-  bottom: 1,
-  ...t
-});
-export {
-  n as CarouselActions
-};

package/dist/CarouselInput/CarouselImage.cjs

@@ -1,4 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),n=require("prop-types"),d=require("../Box/Box.cjs"),p=require("styled-components"),f=require("../Tooltip/Tooltip.cjs"),y=require("../Typography/utils.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),s=r(n),g=r(p),l=g.default(d.Box)`
-  height: 100%;
-  ${y.ellipsisStyle({ellipsis:!0})}
-`,o=e=>{const[u,i]=a.useState(!1),c=()=>{i(!0)};return u?t.default.createElement(f.Tooltip,{description:e.alt??""},t.default.createElement(l,{as:"img",...e})):t.default.createElement(l,{as:"img",...e,onError:c})};o.defaultProps={src:void 0,alt:void 0};o.propTypes={alt:s.default.string,src:s.default.string};exports.CarouselImage=o;

package/dist/CarouselInput/CarouselImage.js

@@ -1,35 +0,0 @@
-import e, { useState as a } from "react";
-import t from "prop-types";
-import { Box as n } from "../Box/Box.js";
-import p from "styled-components";
-import { Tooltip as c } from "../Tooltip/Tooltip.js";
-import { ellipsisStyle as f } from "../Typography/utils.js";
-const o = p(n)`
-  height: 100%;
-  ${f({ ellipsis: !0 })}
-`, s = (r) => {
-  const [i, m] = a(!1), l = () => {
-    m(!0);
-  };
-  return i ? /* @__PURE__ */ e.createElement(c, {
-    description: r.alt ?? ""
-  }, /* @__PURE__ */ e.createElement(o, {
-    as: "img",
-    ...r
-  })) : /* @__PURE__ */ e.createElement(o, {
-    as: "img",
-    ...r,
-    onError: l
-  });
-};
-s.defaultProps = {
-  src: void 0,
-  alt: void 0
-};
-s.propTypes = {
-  alt: t.string,
-  src: t.string
-};
-export {
-  s as CarouselImage
-};