@strapi/design-system 1.3.0-beta.3 → 1.3.1-alpha.0

package/dist/Button/utils.js

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,6 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,6 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,3 @@
+"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,4 @@
+"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,5 @@
+"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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,14 @@
+"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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,4 @@
+"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

@@ -0,0 +1,35 @@
+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
+};