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

package/dist/Grid/Grid.js

@@ -1,28 +1,50 @@
-import t from "react";
-import a from "styled-components";
-import e from "prop-types";
-import { GridContext as i } from "./GridContext.js";
-import { Box as n } from "../Box/Box.js";
-import d from "../helpers/handleResponsiveValues.js";
-const l = a(n)`
+var c = Object.defineProperty;
+var m = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var i = (r, e, o) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, l = (r, e) => {
+  for (var o in e || (e = {}))
+    n.call(e, o) && i(r, o, e[o]);
+  if (m)
+    for (var o of m(e))
+      d.call(e, o) && i(r, o, e[o]);
+  return r;
+};
+var s = (r, e) => {
+  var o = {};
+  for (var t in r)
+    n.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && m)
+    for (var t of m(r))
+      e.indexOf(t) < 0 && d.call(r, t) && (o[t] = r[t]);
+  return o;
+};
+import f from "react";
+import y from "styled-components";
+import p from "prop-types";
+import { GridContext as g } from "./GridContext.js";
+import { Box as b } from "../Box/Box.js";
+import v from "../helpers/handleResponsiveValues.js";
+const x = y(b)`
   display: grid;
   grid-template-columns: repeat(${({ gridCols: r }) => r}, 1fr);
-  ${({ theme: r, gap: o }) => d("gap", o, r)}
-`, p = ({ gap: r, gridCols: o, ...m }) => /* @__PURE__ */ t.createElement(i.Provider, {
-  value: { gap: r, gridCols: o }
-}, /* @__PURE__ */ t.createElement(l, {
-  gap: r,
-  gridCols: o,
-  ...m
-}));
-p.defaultProps = {
+  ${({ theme: r, gap: e }) => v("gap", e, r)}
+`, u = (t) => {
+  var a = t, { gap: r, gridCols: e } = a, o = s(a, ["gap", "gridCols"]);
+  return /* @__PURE__ */ f.createElement(g.Provider, {
+    value: { gap: r, gridCols: e }
+  }, /* @__PURE__ */ f.createElement(x, l({
+    gap: r,
+    gridCols: e
+  }, o)));
+};
+u.defaultProps = {
   gap: 0,
   gridCols: 12
 };
-p.propTypes = {
-  gap: e.oneOfType([e.number, e.arrayOf(e.number)]),
-  gridCols: e.number
+u.propTypes = {
+  gap: p.oneOfType([p.number, p.arrayOf(p.number)]),
+  gridCols: p.number
 };
 export {
-  p as Grid
+  u as Grid
 };

package/dist/Grid/GridContext.d.ts

@@ -0,0 +1,8 @@
+export const GridContext: import("react").Context<{
+    gap: number;
+    gridCols: number;
+}>;
+export function useGrid(): {
+    gap: number;
+    gridCols: number;
+};

package/dist/Grid/GridItem.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),c=require("styled-components"),p=require("prop-types"),m=require("../Box/Box.cjs"),f=require("./GridContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(l),y=o(c),t=o(p),x=y.default.div`
+"use strict";var _=Object.defineProperty;var s=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var i=(e,o,t)=>o in e?_(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))l.call(o,t)&&i(e,t,o[t]);if(s)for(var t of s(o))c.call(o,t)&&i(e,t,o[t]);return e};var m=(e,o)=>{var t={};for(var r in e)l.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))o.indexOf(r)<0&&c.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),g=require("styled-components"),v=require("prop-types"),G=require("../Box/Box.cjs"),q=require("./GridContext.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=u(b),$=u(g),d=u(v),j=$.default.div`
   grid-column: span ${({col:e})=>e};
   max-width: 100%;
 
@@ -9,4 +9,4 @@
   ${({theme:e})=>e.mediaQueries.mobile} {
     grid-column: span ${({xs:e})=>e};
   }
-`,r=({col:e,xs:d,s:u,...n})=>{const{gap:a,gridCols:i}=f.useGrid();return s.default.createElement(x,{gap:a,gridCols:i,col:e,xs:d,s:u},s.default.createElement(m.Box,{...n}))};r.defaultProps={col:void 0,s:void 0,xs:void 0};r.propTypes={col:t.default.number,s:t.default.number,xs:t.default.number};exports.GridItem=r;
+`,n=B=>{var a=B,{col:e,xs:o,s:t}=a,r=m(a,["col","xs","s"]);const{gap:y,gridCols:x}=q.useGrid();return f.default.createElement(j,{gap:y,gridCols:x,col:e,xs:o,s:t},f.default.createElement(G.Box,p({},r)))};n.defaultProps={col:void 0,s:void 0,xs:void 0};n.propTypes={col:d.default.number,s:d.default.number,xs:d.default.number};exports.GridItem=n;

package/dist/Grid/GridItem.d.ts

@@ -0,0 +1,22 @@
+export function GridItem({ col, xs, s, ...props }: {
+    [x: string]: any;
+    col: any;
+    xs: any;
+    s: any;
+}): JSX.Element;
+export namespace GridItem {
+    namespace defaultProps {
+        const col: undefined;
+        const s: undefined;
+        const xs: undefined;
+    }
+    namespace propTypes {
+        const col_1: PropTypes.Requireable<number>;
+        export { col_1 as col };
+        const s_1: PropTypes.Requireable<number>;
+        export { s_1 as s };
+        const xs_1: PropTypes.Requireable<number>;
+        export { xs_1 as xs };
+    }
+}
+import PropTypes from "prop-types";

package/dist/Grid/GridItem.js

@@ -1,9 +1,29 @@
-import o from "react";
-import n from "styled-components";
-import e from "prop-types";
-import { Box as a } from "../Box/Box.js";
-import { useGrid as l } from "./GridContext.js";
-const u = n.div`
+var g = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var s = (r, o, e) => o in r ? g(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, a = (r, o) => {
+  for (var e in o || (o = {}))
+    d.call(o, e) && s(r, e, o[e]);
+  if (t)
+    for (var e of t(o))
+      n.call(o, e) && s(r, e, o[e]);
+  return r;
+};
+var l = (r, o) => {
+  var e = {};
+  for (var m in r)
+    d.call(r, m) && o.indexOf(m) < 0 && (e[m] = r[m]);
+  if (r != null && t)
+    for (var m of t(r))
+      o.indexOf(m) < 0 && n.call(r, m) && (e[m] = r[m]);
+  return e;
+};
+import u from "react";
+import x from "styled-components";
+import i from "prop-types";
+import { Box as $ } from "../Box/Box.js";
+import { useGrid as v } from "./GridContext.js";
+const y = x.div`
   grid-column: span ${({ col: r }) => r};
   max-width: 100%;
 
@@ -14,28 +34,27 @@ const u = n.div`
   ${({ theme: r }) => r.mediaQueries.mobile} {
     grid-column: span ${({ xs: r }) => r};
   }
-`, m = ({ col: r, xs: t, s: i, ...p }) => {
-  const { gap: s, gridCols: d } = l();
-  return /* @__PURE__ */ o.createElement(u, {
-    gap: s,
-    gridCols: d,
+`, c = (G) => {
+  var p = G, { col: r, xs: o, s: e } = p, m = l(p, ["col", "xs", "s"]);
+  const { gap: f, gridCols: b } = v();
+  return /* @__PURE__ */ u.createElement(y, {
+    gap: f,
+    gridCols: b,
     col: r,
-    xs: t,
-    s: i
-  }, /* @__PURE__ */ o.createElement(a, {
-    ...p
-  }));
+    xs: o,
+    s: e
+  }, /* @__PURE__ */ u.createElement($, a({}, m)));
 };
-m.defaultProps = {
+c.defaultProps = {
   col: void 0,
   s: void 0,
   xs: void 0
 };
-m.propTypes = {
-  col: e.number,
-  s: e.number,
-  xs: e.number
+c.propTypes = {
+  col: i.number,
+  s: i.number,
+  xs: i.number
 };
 export {
-  m as GridItem
+  c as GridItem
 };

package/dist/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Grid";
+export * from "./GridItem";

package/dist/Icon/Icon.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),a=require("prop-types"),n=require("styled-components"),u=require("../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=r(s),l=r(a),d=r(n),p=d.default(u.Box)`
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var n=(e,t,o)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t)=>{for(var o in t||(t={}))l.call(t,o)&&n(e,o,t[o]);if(c)for(var o of c(t))u.call(t,o)&&n(e,o,t[o]);return e};var d=(e,t)=>{var o={};for(var r in e)l.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&c)for(var r of c(e))t.indexOf(r)<0&&u.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),x=require("react"),y=require("styled-components"),j=require("../Box/Box.cjs"),_=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},h=i(x),q=i(y),B=q.default(j.Box)`
   path {
-    fill: ${({color:e,theme:t})=>t.colors[e]};
+    fill: ${({color:e,theme:t})=>_.extractStyleFromTheme(t.colors,e,void 0)};
   }
   ${({theme:e,colors:t})=>t(e)}
-`,o=c.default.forwardRef((e,t)=>c.default.createElement(p,{ref:t,...e}));o.displayName="Icon";o.defaultProps={color:"neutral600",colors:()=>{}};o.propTypes={color:l.default.string,colors:l.default.func};exports.Icon=o;
+`,f=h.default.forwardRef((I,r)=>{var s=I,{color:e="neutral600",colors:t=()=>""}=s,o=d(s,["color","colors"]);return p.jsx(B,a({ref:r,color:e,colors:t},o))});f.displayName="Icon";exports.Icon=f;

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DefaultTheme } from 'styled-components';
+import { BoxProps } from '../Box';
+export interface IconProps extends BoxProps {
+    colors?: (theme: DefaultTheme) => string;
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Icon/Icon.js

@@ -1,26 +1,54 @@
-import e from "react";
-import p from "prop-types";
-import c from "styled-components";
-import { Box as l } from "../Box/Box.js";
-const s = c(l)`
-  path {
-    fill: ${({ color: o, theme: r }) => r.colors[o]};
-  }
-  ${({ theme: o, colors: r }) => r(o)}
-`, t = e.forwardRef((o, r) => /* @__PURE__ */ e.createElement(s, {
-  ref: r,
-  ...o
-}));
-t.displayName = "Icon";
-t.defaultProps = {
-  color: "neutral600",
-  colors: () => {
-  }
+var i = Object.defineProperty;
+var m = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var c = (o, r, t) => r in o ? i(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t, a = (o, r) => {
+  for (var t in r || (r = {}))
+    l.call(r, t) && c(o, t, r[t]);
+  if (m)
+    for (var t of m(r))
+      p.call(r, t) && c(o, t, r[t]);
+  return o;
 };
-t.propTypes = {
-  color: p.string,
-  colors: p.func
+var n = (o, r) => {
+  var t = {};
+  for (var e in o)
+    l.call(o, e) && r.indexOf(e) < 0 && (t[e] = o[e]);
+  if (o != null && m)
+    for (var e of m(o))
+      r.indexOf(e) < 0 && p.call(o, e) && (t[e] = o[e]);
+  return t;
 };
+import { jsx as s } from "react/jsx-runtime";
+import d from "react";
+import u from "styled-components";
+import { Box as x } from "../Box/Box.js";
+import { extractStyleFromTheme as y } from "../helpers/theme.js";
+const I = u(x)`
+  path {
+    fill: ${({
+  color: o,
+  theme: r
+}) => y(r.colors, o, void 0)};
+  }
+  ${({
+  theme: o,
+  colors: r
+}) => r(o)}
+`, h = d.forwardRef((R, e) => {
+  var f = R, {
+    color: o = "neutral600",
+    colors: r = () => ""
+  } = f, t = n(f, [
+    "color",
+    "colors"
+  ]);
+  return s(I, a({
+    ref: e,
+    color: o,
+    colors: r
+  }, t));
+});
+h.displayName = "Icon";
 export {
-  t as Icon
+  h as Icon
 };

package/dist/Icon/index.d.ts

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

package/dist/IconButton/IconButton.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),B=require("prop-types"),m=require("styled-components"),E=require("../Tooltip/Tooltip.cjs"),T=require("../BaseButton/BaseButton.cjs"),_=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=c(d),a=c(B),v=c(m),u=v.default(T.BaseButton)`
+"use strict";var I=Object.defineProperty,R=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var B=(e,o,l)=>o in e?I(e,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[o]=l,u=(e,o)=>{for(var l in o||(o={}))m.call(o,l)&&B(e,l,o[l]);if(i)for(var l of i(o))E.call(o,l)&&B(e,l,o[l]);return e},c=(e,o)=>R(e,x(o));var T=(e,o)=>{var l={};for(var t in e)m.call(e,t)&&o.indexOf(t)<0&&(l[t]=e[t]);if(e!=null&&i)for(var t of i(e))o.indexOf(t)<0&&E.call(e,t)&&(l[t]=e[t]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),w=require("prop-types"),H=require("styled-components"),V=require("../Tooltip/Tooltip.cjs"),C=require("../BaseButton/BaseButton.cjs"),F=require("../Flex/Flex.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=b(f),n=b(w),j=b(H),p=j.default(C.BaseButton)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,7 +36,7 @@
     }
   }
   ${({noBorder:e})=>e?"border: none;":void 0}
-`,j=v.default(_.Flex)`
+`,P=j.default(F.Flex)`
   & span:first-child button {
     border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
     border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
@@ -46,7 +46,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${u} {
+  & ${p} {
     border-radius: 0;
     border-left: none;
 
@@ -83,4 +83,4 @@
       }
     }
   }
-`,s=t.default.forwardRef(({label:e,noBorder:n,children:l,icon:o,disabled:r,onClick:f,"aria-label":h,...p},b)=>{const $=y=>{!r&&f&&f(y)};return e?t.default.createElement(E.Tooltip,{label:e},t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},e),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))):t.default.createElement(u,{...p,ref:b,noBorder:n,onClick:$,"aria-disabled":r},t.default.createElement(g.VisuallyHidden,{as:"span"},h),d.cloneElement(o||l,{"aria-hidden":!0,focusable:!1}))});s.displayName="IconButton";s.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const i=(e,n)=>(l,o)=>!l[o]&&e.every(r=>!l[r])?new Error(`One of the following props is required: ${o}, ${e.join(", ")}`):a.default.checkPropTypes({[o]:a.default[n]},l,"prop","IconButton");s.propTypes={"aria-label":i(["label"],"string"),children:i(["icon"],"node"),disabled:a.default.bool,icon:i(["children"],"node"),label:i(["aria-label"],"string"),noBorder:a.default.bool,onClick:a.default.func};exports.IconButton=s;exports.IconButtonGroup=j;
+`,d=r.default.forwardRef((D,v)=>{var h=D,{label:e,noBorder:o,children:l,icon:t,disabled:a,onClick:$,"aria-label":k}=h,g=T(h,["label","noBorder","children","icon","disabled","onClick","aria-label"]);const y=q=>{!a&&$&&$(q)};return e?r.default.createElement(V.Tooltip,{label:e},r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},e),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))):r.default.createElement(p,c(u({},g),{ref:v,noBorder:o,onClick:y,"aria-disabled":a}),r.default.createElement(_.VisuallyHidden,{as:"span"},k),f.cloneElement(t||l,{"aria-hidden":!0,focusable:!1}))});d.displayName="IconButton";d.defaultProps={"aria-label":void 0,children:void 0,disabled:!1,icon:void 0,label:void 0,noBorder:!1,onClick:void 0};const s=(e,o)=>(l,t)=>!l[t]&&e.every(a=>!l[a])?new Error(`One of the following props is required: ${t}, ${e.join(", ")}`):n.default.checkPropTypes({[t]:n.default[o]},l,"prop","IconButton");d.propTypes={"aria-label":s(["label"],"string"),children:s(["icon"],"node"),disabled:n.default.bool,icon:s(["children"],"node"),label:s(["aria-label"],"string"),noBorder:n.default.bool,onClick:n.default.func};exports.IconButton=d;exports.IconButtonGroup=P;

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,3 @@
+export const IconButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex").FlexProps<HTMLDivElement>, never>;
+export const IconButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/dist/IconButton/IconButton.js

@@ -1,11 +1,32 @@
-import l, { cloneElement as b } from "react";
-import t from "prop-types";
-import h from "styled-components";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import { BaseButton as y } from "../BaseButton/BaseButton.js";
-import { Flex as k } from "../Flex/Flex.js";
-import { VisuallyHidden as $ } from "../VisuallyHidden/VisuallyHidden.js";
-const s = h(y)`
+var x = Object.defineProperty, C = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var g = (r, e, o) => e in r ? x(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, d = (r, e) => {
+  for (var o in e || (e = {}))
+    v.call(e, o) && g(r, o, e[o]);
+  if (i)
+    for (var o of i(e))
+      y.call(e, o) && g(r, o, e[o]);
+  return r;
+}, c = (r, e) => C(r, T(e));
+var k = (r, e) => {
+  var o = {};
+  for (var l in r)
+    v.call(r, l) && e.indexOf(l) < 0 && (o[l] = r[l]);
+  if (r != null && i)
+    for (var l of i(r))
+      e.indexOf(l) < 0 && y.call(r, l) && (o[l] = r[l]);
+  return o;
+};
+import a, { cloneElement as B } from "react";
+import n from "prop-types";
+import I from "styled-components";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { BaseButton as P } from "../BaseButton/BaseButton.js";
+import { Flex as _ } from "../Flex/Flex.js";
+import { VisuallyHidden as E } from "../VisuallyHidden/VisuallyHidden.js";
+const u = I(P)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43,7 +64,7 @@ const s = h(y)`
     }
   }
   ${({ noBorder: r }) => r ? "border: none;" : void 0}
-`, T = h(k)`
+`, z = I(_)`
   & span:first-child button {
     border-left: 1px solid ${({ theme: r }) => r.colors.neutral200};
     border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 ${r.borderRadius}`};
@@ -53,7 +74,7 @@ const s = h(y)`
     border-radius: ${({ theme: r }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
-  & ${s} {
+  & ${u} {
     border-radius: 0;
     border-left: none;
 
@@ -90,40 +111,39 @@ const s = h(y)`
       }
     }
   }
-`, d = l.forwardRef(
-  ({ label: r, noBorder: n, children: o, icon: e, disabled: a, onClick: c, "aria-label": m, ...u }, f) => {
-    const p = (g) => {
-      !a && c && c(g);
+`, f = a.forwardRef(
+  (q, $) => {
+    var h = q, { label: r, noBorder: e, children: o, icon: l, disabled: t, onClick: p, "aria-label": R } = h, b = k(h, ["label", "noBorder", "children", "icon", "disabled", "onClick", "aria-label"]);
+    const m = (w) => {
+      !t && p && p(w);
     };
-    return r ? /* @__PURE__ */ l.createElement(v, {
+    return r ? /* @__PURE__ */ a.createElement(j, {
       label: r
-    }, /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
+    }, /* @__PURE__ */ a.createElement(u, c(d({}, b), {
+      ref: $,
+      noBorder: e,
+      onClick: m,
+      "aria-disabled": t
+    }), /* @__PURE__ */ a.createElement(E, {
       as: "span"
-    }, r), b(e || o, {
+    }, r), B(l || o, {
       "aria-hidden": !0,
       focusable: !1
-    }))) : /* @__PURE__ */ l.createElement(s, {
-      ...u,
-      ref: f,
-      noBorder: n,
-      onClick: p,
-      "aria-disabled": a
-    }, /* @__PURE__ */ l.createElement($, {
+    }))) : /* @__PURE__ */ a.createElement(u, c(d({}, b), {
+      ref: $,
+      noBorder: e,
+      onClick: m,
+      "aria-disabled": t
+    }), /* @__PURE__ */ a.createElement(E, {
       as: "span"
-    }, m), b(e || o, {
+    }, R), B(l || o, {
       "aria-hidden": !0,
       focusable: !1
     }));
   }
 );
-d.displayName = "IconButton";
-d.defaultProps = {
+f.displayName = "IconButton";
+f.defaultProps = {
   "aria-label": void 0,
   children: void 0,
   disabled: !1,
@@ -132,17 +152,17 @@ d.defaultProps = {
   noBorder: !1,
   onClick: void 0
 };
-const i = (r, n) => (o, e) => !o[e] && r.every((a) => !o[a]) ? new Error(`One of the following props is required: ${e}, ${r.join(", ")}`) : t.checkPropTypes({ [e]: t[n] }, o, "prop", "IconButton");
-d.propTypes = {
-  "aria-label": i(["label"], "string"),
-  children: i(["icon"], "node"),
-  disabled: t.bool,
-  icon: i(["children"], "node"),
-  label: i(["aria-label"], "string"),
-  noBorder: t.bool,
-  onClick: t.func
+const s = (r, e) => (o, l) => !o[l] && r.every((t) => !o[t]) ? new Error(`One of the following props is required: ${l}, ${r.join(", ")}`) : n.checkPropTypes({ [l]: n[e] }, o, "prop", "IconButton");
+f.propTypes = {
+  "aria-label": s(["label"], "string"),
+  children: s(["icon"], "node"),
+  disabled: n.bool,
+  icon: s(["children"], "node"),
+  label: s(["aria-label"], "string"),
+  noBorder: n.bool,
+  onClick: n.func
 };
 export {
-  d as IconButton,
-  T as IconButtonGroup
+  f as IconButton,
+  z as IconButtonGroup
 };

package/dist/IconButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./IconButton";

package/dist/KeyboardNavigable/KeyboardNavigable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),K=require("prop-types"),g=require("../Box/Box.cjs"),r=require("../helpers/keyboardKeys.cjs"),y=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=y(p),f=y(K),d=({tagName:t,attributeName:i,...b})=>{const a=()=>{const e=document.activeElement;return t?e.tagName.toLowerCase()===t:e.hasAttribute(i)},c=e=>t?e.querySelectorAll(t):e.querySelectorAll(`[${i}]`),m=e=>{switch(e.key){case r.KeyboardKeys.RIGHT:case r.KeyboardKeys.DOWN:{if(a()){e.preventDefault();const n=document.activeElement,o=[...c(e.currentTarget)],s=o.findIndex(u=>u===n),l=s+1<o.length?s+1:0;o[l].focus()}break}case r.KeyboardKeys.LEFT:case r.KeyboardKeys.UP:{if(a()){e.preventDefault();const n=document.activeElement,o=[...c(e.currentTarget)],s=o.findIndex(u=>u===n),l=s-1>-1?s-1:o.length-1;o[l].focus()}break}case r.KeyboardKeys.HOME:{a()&&(e.preventDefault(),c(e.currentTarget).item(0).focus());break}case r.KeyboardKeys.END:{if(a()){e.preventDefault();const n=c(e.currentTarget);n.item(n.length-1).focus()}break}}};return v.default.createElement(g.Box,{onKeyDown:m,...b})};d.defaultProps={attributeName:void 0,tagName:void 0};d.propTypes={attributeName:f.default.string,tagName:f.default.string};exports.KeyboardNavigable=d;
+"use strict";var D=Object.defineProperty;var f=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var b=(e,t,n)=>t in e?D(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,x=(e,t)=>{for(var n in t||(t={}))K.call(t,n)&&b(e,n,t[n]);if(f)for(var n of f(t))E.call(t,n)&&b(e,n,t[n]);return e};var v=(e,t)=>{var n={};for(var o in e)K.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&f)for(var o of f(e))t.indexOf(o)<0&&E.call(e,o)&&(n[o]=e[o]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),k=require("../Box/Box.cjs"),l=require("../helpers/keyboardKeys.cjs"),I=o=>{var m=o,{tagName:e,attributeName:t=""}=m,n=v(m,["tagName","attributeName"]);const a=()=>{const s=document.activeElement;return s?e?s.tagName.toLowerCase()===e:s.hasAttribute(t):!1},d=s=>e?s.querySelectorAll(e):s.querySelectorAll(`[${t}]`),g=s=>{switch(s.key){case l.KeyboardKeys.RIGHT:case l.KeyboardKeys.DOWN:{if(a()){s.preventDefault();const c=document.activeElement,r=[...d(s.currentTarget)],u=r.findIndex(y=>y===c),i=u+1<r.length?u+1:0;r[i].focus()}break}case l.KeyboardKeys.LEFT:case l.KeyboardKeys.UP:{if(a()){s.preventDefault();const c=document.activeElement,r=[...d(s.currentTarget)],u=r.findIndex(y=>y===c),i=u-1>-1?u-1:r.length-1;r[i].focus()}break}case l.KeyboardKeys.HOME:{a()&&(s.preventDefault(),d(s.currentTarget).item(0).focus());break}case l.KeyboardKeys.END:{if(a()){s.preventDefault();const c=d(s.currentTarget);c.item(c.length-1).focus()}break}}};return h.jsx(k.Box,x({onKeyDown:g},n))};exports.KeyboardNavigable=I;

package/dist/KeyboardNavigable/KeyboardNavigable.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../Box';
+export interface KeyboardNavigableProps extends BoxProps {
+    tagName?: string;
+    attributeName?: string;
+}
+export declare const KeyboardNavigable: ({ tagName, attributeName, ...props }: KeyboardNavigableProps) => JSX.Element;