fictoan-react 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/components/CodeBlock/CodeBlock.cjs

@@ -1 +1 @@
-"use strict";Object.create,Object.defineProperty,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.prototype.hasOwnProperty;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../Element/Element.cjs");var r=["source","language"];function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var a=e.lazy((function(){return import("prism-react-renderer").then((function(t){return t.Highlight?{default:t.Highlight}:(console.log("FICTOAN : Looking for syntax highlighting?\n╭──────────────────────────────────────────────────────────────────────────────────────────────────╮\n│   Please install the prism-react-renderer (https://www.npmjs.com/package/prism-react-renderer)   │\n│   package to have syntax highlighting in the CodeBlock component.                                │\n│   For example: yarn add prism-react-renderer                                                     │\n╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"),{default:function(t){var r=t.code;return e.createElement("pre",{"data-code-block":!0,className:"module-fallback"},r)}})}))})),c=e.forwardRef((function(c,l){var i=c.source,s=c.language,u=void 0===s?"json":s,m=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,r),p="object"===o(i)?JSON.stringify(i,null,2):null!=i?i:"";return e.createElement(t.Element,n({"data-code-block":!0,as:"div"},m),e.createElement(e.Suspense,{fallback:e.createElement("pre",{"data-code-block":!0,className:"suspense-fallback"},p)},e.createElement(a,{code:p,language:u,theme:void 0},(function(t){var r=t.className,n=t.tokens,o=t.getLineProps,a=t.getTokenProps;return e.createElement("pre",{ref:l,className:r},n.map((function(t,r){return e.createElement("div",o({line:t,key:r}),t.map((function(t,r){return e.createElement("span",a({token:t,key:r}))})))})))}))))}));exports.CodeBlock=c;
+"use strict";Object.create,Object.defineProperty,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.prototype.hasOwnProperty;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../Element/Element.cjs");var r=["children","source","language"];function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var a=e.lazy((function(){return import("prism-react-renderer").then((function(t){return t.Highlight?{default:t.Highlight}:(console.log("FICTOAN : Looking for syntax highlighting?\n╭──────────────────────────────────────────────────────────────────────────────────────────────────╮\n│   Please install the prism-react-renderer (https://www.npmjs.com/package/prism-react-renderer)   │\n│   package to have syntax highlighting in the CodeBlock component.                                │\n│   For example: yarn add prism-react-renderer                                                     │\n╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"),{default:function(t){var r=t.code;return e.createElement("pre",{"data-code-block":!0,className:"module-fallback"},r)}})}))})),c=e.forwardRef((function(c,l){var i=c.children,s=c.source,u=c.language,p=void 0===u?"json":u,m=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(c,r),f="string"==typeof i?i:e.Children.toArray(i).join("");return i||(f="object"===o(s)?JSON.stringify(s,null,2):null!=s?s:""),e.createElement(t.Element,n({"data-code-block":!0,as:"div"},m),e.createElement(e.Suspense,{fallback:e.createElement("pre",{"data-code-block":!0,className:"suspense-fallback"},f)},e.createElement(a,{code:f,language:p,theme:void 0},(function(t){var r=t.className,n=t.tokens,o=t.getLineProps,a=t.getTokenProps;return e.createElement("pre",{ref:l,className:r},n.map((function(t,r){return e.createElement("div",o({line:t,key:r}),t.map((function(t,r){return e.createElement("span",a({token:t,key:r}))})))})))}))))}));exports.CodeBlock=c;

package/dist/components/CodeBlock/CodeBlock.js

@@ -1,6 +1,6 @@
 import e, { Suspense as t } from "react";
 import { Element as r } from "../Element/Element.js";
-var n = ["source", "language"];
+var n = ["children", "source", "language"];
 function o() {
   return o = Object.assign ? Object.assign.bind() : function(e2) {
     for (var t2 = 1; t2 < arguments.length; t2++) {
@@ -47,8 +47,8 @@ var c = /* @__PURE__ */ e.lazy(function() {
     } };
   });
 }), i = /* @__PURE__ */ e.forwardRef(function(i2, m) {
-  var u = i2.source, s = i2.language, f = void 0 === s ? "json" : s, p = l(i2, n), g = "object" === a(u) ? JSON.stringify(u, null, 2) : null != u ? u : "";
-  return e.createElement(r, o({ "data-code-block": true, as: "div" }, p), /* @__PURE__ */ e.createElement(t, { fallback: /* @__PURE__ */ e.createElement("pre", { "data-code-block": true, className: "suspense-fallback" }, g) }, /* @__PURE__ */ e.createElement(c, { code: g, language: f, theme: void 0 }, function(t2) {
+  var u = i2.children, s = i2.source, f = i2.language, p = void 0 === f ? "json" : f, y = l(i2, n), g = "string" == typeof u ? u : e.Children.toArray(u).join("");
+  return u || (g = "object" === a(s) ? JSON.stringify(s, null, 2) : null != s ? s : ""), /* @__PURE__ */ e.createElement(r, o({ "data-code-block": true, as: "div" }, y), /* @__PURE__ */ e.createElement(t, { fallback: /* @__PURE__ */ e.createElement("pre", { "data-code-block": true, className: "suspense-fallback" }, g) }, /* @__PURE__ */ e.createElement(c, { code: g, language: p, theme: void 0 }, function(t2) {
     var r2 = t2.className, n2 = t2.tokens, o2 = t2.getLineProps, a2 = t2.getTokenProps;
     return e.createElement("pre", { ref: m, className: r2 }, n2.map(function(t3, r3) {
       return e.createElement("div", o2({ line: t3, key: r3 }), t3.map(function(t4, r4) {

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),r=require("../Element/Element.cjs");var t=["isOpen","children","onCloseCallback","closeOnClickOutside","padding","position","bgColor","bgColour","isDismissable"];function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},n.apply(this,arguments)}function o(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var l=e.forwardRef((function(l,a){var i,s,c=l.isOpen,u=l.children,f=l.onCloseCallback,p=l.closeOnClickOutside,b=l.padding,d=l.position,m=l.bgColor,y=l.bgColour,v=l.isDismissable,g=void 0===v||v,O=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(l,t),h=(i=e.useState(c),s=2,function(e){if(Array.isArray(e))return e}(i)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,l,a,i=[],s=!0,c=!1;try{if(l=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;s=!1}else for(;!(s=(n=l.call(t)).done)&&(i.push(n.value),i.length!==r);s=!0);}catch(u){c=!0,o=u}finally{try{if(!s&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw o}}return i}}(i,s)||function(e,r){if(e){if("string"==typeof e)return o(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,r):void 0}}(i,s)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),C=h[0],j=h[1];e.useEffect((function(){c&&j(!0)}),[c]);var E=["drawer"];d&&E.push(d),c?E.push("open"):C&&E.push("close");var w=function(){f&&f()};return C?e.createElement(e.Fragment,null,e.createElement(r.Element,n({as:"div","data-drawer":!0,ref:a,classNames:E,onAnimationEnd:function(){c||j(!1)}},O),c&&p&&e.createElement(r.Element,{as:"div",className:"rest-of-page-overlay ".concat(c?"visible":""),onClick:w}),e.createElement(r.Element,{as:"div",className:"drawer-content-wrapper",padding:b,bgColor:m,bgColour:y},g&&e.createElement("button",{className:"dismiss-button",onClick:w}),u))):null}));exports.Drawer=l,exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../Element/Element.cjs");var n=["children","openWhen","closeWhen","closeOnClickOutside","padding","position","width","bgColor","bgColour","isDismissable","showOverlay"];function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(this,arguments)}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var a=e.forwardRef((function(a,i){var l,c,u=a.children,s=a.openWhen,f=a.closeWhen,d=a.closeOnClickOutside,m=a.padding,p=a.position,v=a.width,b=a.bgColor,y=a.bgColour,h=a.isDismissable,g=void 0===h||h,O=a.showOverlay,w=void 0!==O&&O,E=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(a,n),j=(l=e.useState(s),c=2,function(e){if(Array.isArray(e))return e}(l)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,l=[],c=!0,u=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(s){u=!0,o=s}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw o}}return l}}(l,c)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}(l,c)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),C=j[0],S=j[1],A=e.useRef(null),k=i||A;e.useEffect((function(){s&&S(!0)}),[s]);var x=["drawer"];p&&x.push(p),s?x.push("open"):C&&x.push("close");var I=function(){f&&f()};return function(t,n){e.useEffect((function(){var e=function(e){t.current&&!t.current.contains(e.target)&&n(e)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[t,n])}(k,d?I:function(){}),v&&x.push("".concat(v)),C?e.createElement(e.Fragment,null,e.createElement(t.Element,r({as:"div","data-drawer":!0,ref:k,classNames:x,onAnimationEnd:function(){s||S(!1)}},E),s&&w&&e.createElement(t.Element,r({as:"div",className:"rest-of-page-overlay ".concat(s?"visible":"")},d?{onClick:I}:{})),e.createElement(t.Element,{as:"div",className:"drawer-content-wrapper",padding:m,bgColor:b,bgColour:y},g&&e.createElement("button",{className:"dismiss-button",onClick:I}),u))):null}));exports.Drawer=a;

package/dist/components/Drawer/Drawer.d.ts

@@ -1,13 +1,14 @@
 import React from "react";
-import { CommonAndHTMLProps } from "../Element/constants";
+import { CommonAndHTMLProps, SpacingTypes } from "../Element/constants";
 export interface DrawerCustomProps {
     position: "top" | "right" | "bottom" | "left";
-    isOpen?: boolean;
-    onCloseCallback?: () => void;
+    width?: SpacingTypes;
+    openWhen?: boolean;
+    closeWhen?: () => void;
     closeOnClickOutside?: boolean;
     isDismissable?: boolean;
+    showOverlay?: boolean;
 }
 export type DrawerElementType = HTMLDivElement;
 export type DrawerProps = Omit<CommonAndHTMLProps<DrawerElementType>, keyof DrawerCustomProps> & DrawerCustomProps;
 export declare const Drawer: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLDivElement>, keyof DrawerCustomProps> & DrawerCustomProps & React.RefAttributes<HTMLDivElement>>;
-export default Drawer;

package/dist/components/Drawer/Drawer.js

@@ -1,99 +1,108 @@
-import r, { useState as e, useEffect as t } from "react";
-import { Element as n } from "../Element/Element.js";
-var o = ["isOpen", "children", "onCloseCallback", "closeOnClickOutside", "padding", "position", "bgColor", "bgColour", "isDismissable"];
+import e, { useEffect as t, useState as n, useRef as r } from "react";
+import { Element as o } from "../Element/Element.js";
+var i = ["children", "openWhen", "closeWhen", "closeOnClickOutside", "padding", "position", "width", "bgColor", "bgColour", "isDismissable", "showOverlay"];
 function a() {
-  return a = Object.assign ? Object.assign.bind() : function(r2) {
-    for (var e2 = 1; e2 < arguments.length; e2++) {
-      var t2 = arguments[e2];
-      for (var n2 in t2)
-        Object.prototype.hasOwnProperty.call(t2, n2) && (r2[n2] = t2[n2]);
+  return a = Object.assign ? Object.assign.bind() : function(e2) {
+    for (var t2 = 1; t2 < arguments.length; t2++) {
+      var n2 = arguments[t2];
+      for (var r2 in n2)
+        Object.prototype.hasOwnProperty.call(n2, r2) && (e2[r2] = n2[r2]);
     }
-    return r2;
+    return e2;
   }, a.apply(this, arguments);
 }
-function l(r2, e2) {
-  return function(r3) {
-    if (Array.isArray(r3))
-      return r3;
-  }(r2) || function(r3, e3) {
-    var t2 = null == r3 ? null : "undefined" != typeof Symbol && r3[Symbol.iterator] || r3["@@iterator"];
-    if (null != t2) {
-      var n2, o2, a2, l2, i2 = [], c2 = true, s2 = false;
+function l(e2, t2) {
+  return function(e3) {
+    if (Array.isArray(e3))
+      return e3;
+  }(e2) || function(e3, t3) {
+    var n2 = null == e3 ? null : "undefined" != typeof Symbol && e3[Symbol.iterator] || e3["@@iterator"];
+    if (null != n2) {
+      var r2, o2, i2, a2, l2 = [], c2 = true, u2 = false;
       try {
-        if (a2 = (t2 = t2.call(r3)).next, 0 === e3) {
-          if (Object(t2) !== t2)
+        if (i2 = (n2 = n2.call(e3)).next, 0 === t3) {
+          if (Object(n2) !== n2)
             return;
           c2 = false;
         } else
-          for (; !(c2 = (n2 = a2.call(t2)).done) && (i2.push(n2.value), i2.length !== e3); c2 = true)
+          for (; !(c2 = (r2 = i2.call(n2)).done) && (l2.push(r2.value), l2.length !== t3); c2 = true)
             ;
-      } catch (r4) {
-        s2 = true, o2 = r4;
+      } catch (e4) {
+        u2 = true, o2 = e4;
       } finally {
         try {
-          if (!c2 && null != t2.return && (l2 = t2.return(), Object(l2) !== l2))
+          if (!c2 && null != n2.return && (a2 = n2.return(), Object(a2) !== a2))
             return;
         } finally {
-          if (s2)
+          if (u2)
             throw o2;
         }
       }
-      return i2;
+      return l2;
     }
-  }(r2, e2) || function(r3, e3) {
-    if (!r3)
+  }(e2, t2) || function(e3, t3) {
+    if (!e3)
       return;
-    if ("string" == typeof r3)
-      return i(r3, e3);
-    var t2 = Object.prototype.toString.call(r3).slice(8, -1);
-    "Object" === t2 && r3.constructor && (t2 = r3.constructor.name);
-    if ("Map" === t2 || "Set" === t2)
-      return Array.from(r3);
-    if ("Arguments" === t2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t2))
-      return i(r3, e3);
-  }(r2, e2) || function() {
+    if ("string" == typeof e3)
+      return c(e3, t3);
+    var n2 = Object.prototype.toString.call(e3).slice(8, -1);
+    "Object" === n2 && e3.constructor && (n2 = e3.constructor.name);
+    if ("Map" === n2 || "Set" === n2)
+      return Array.from(e3);
+    if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
+      return c(e3, t3);
+  }(e2, t2) || function() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }();
 }
-function i(r2, e2) {
-  (null == e2 || e2 > r2.length) && (e2 = r2.length);
-  for (var t2 = 0, n2 = new Array(e2); t2 < e2; t2++)
-    n2[t2] = r2[t2];
-  return n2;
+function c(e2, t2) {
+  (null == t2 || t2 > e2.length) && (t2 = e2.length);
+  for (var n2 = 0, r2 = new Array(t2); n2 < t2; n2++)
+    r2[n2] = e2[n2];
+  return r2;
 }
-function c(r2, e2) {
-  if (null == r2)
+function u(e2, t2) {
+  if (null == e2)
     return {};
-  var t2, n2, o2 = function(r3, e3) {
-    if (null == r3)
+  var n2, r2, o2 = function(e3, t3) {
+    if (null == e3)
       return {};
-    var t3, n3, o3 = {}, a3 = Object.keys(r3);
-    for (n3 = 0; n3 < a3.length; n3++)
-      t3 = a3[n3], e3.indexOf(t3) >= 0 || (o3[t3] = r3[t3]);
+    var n3, r3, o3 = {}, i3 = Object.keys(e3);
+    for (r3 = 0; r3 < i3.length; r3++)
+      n3 = i3[r3], t3.indexOf(n3) >= 0 || (o3[n3] = e3[n3]);
     return o3;
-  }(r2, e2);
+  }(e2, t2);
   if (Object.getOwnPropertySymbols) {
-    var a2 = Object.getOwnPropertySymbols(r2);
-    for (n2 = 0; n2 < a2.length; n2++)
-      t2 = a2[n2], e2.indexOf(t2) >= 0 || Object.prototype.propertyIsEnumerable.call(r2, t2) && (o2[t2] = r2[t2]);
+    var i2 = Object.getOwnPropertySymbols(e2);
+    for (r2 = 0; r2 < i2.length; r2++)
+      n2 = i2[r2], t2.indexOf(n2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, n2) && (o2[n2] = e2[n2]);
   }
   return o2;
 }
-var s = /* @__PURE__ */ r.forwardRef(function(i2, s2) {
-  var u = i2.isOpen, f = i2.children, p = i2.onCloseCallback, b = i2.closeOnClickOutside, d = i2.padding, m = i2.position, y = i2.bgColor, g = i2.bgColour, v = i2.isDismissable, O = void 0 === v || v, h = c(i2, o), C = l(e(u), 2), j = C[0], w = C[1];
+var s = /* @__PURE__ */ e.forwardRef(function(c2, s2) {
+  var f = c2.children, d = c2.openWhen, m = c2.closeWhen, p = c2.closeOnClickOutside, v = c2.padding, b = c2.position, h = c2.width, y = c2.bgColor, g = c2.bgColour, O = c2.isDismissable, w = void 0 === O || O, E = c2.showOverlay, j = void 0 !== E && E, C = u(c2, i), A = l(n(d), 2), S = A[0], k = A[1], x = r(null), I = s2 || x;
   t(function() {
-    u && w(true);
-  }, [u]);
-  var E = ["drawer"];
-  m && E.push(m), u ? E.push("open") : j && E.push("close");
-  var k = function() {
-    p && p();
+    d && k(true);
+  }, [d]);
+  var L = ["drawer"];
+  b && L.push(b), d ? L.push("open") : S && L.push("close");
+  var N = function() {
+    m && m();
   };
-  return j ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(n, a({ as: "div", "data-drawer": true, ref: s2, classNames: E, onAnimationEnd: function() {
-    u || w(false);
-  } }, h), u && b && /* @__PURE__ */ r.createElement(n, { as: "div", className: "rest-of-page-overlay ".concat(u ? "visible" : ""), onClick: k }), /* @__PURE__ */ r.createElement(n, { as: "div", className: "drawer-content-wrapper", padding: d, bgColor: y, bgColour: g }, O && /* @__PURE__ */ r.createElement("button", { className: "dismiss-button", onClick: k }), f))) : null;
+  return function(e2, n2) {
+    t(function() {
+      var t2 = function(t3) {
+        e2.current && !e2.current.contains(t3.target) && n2(t3);
+      };
+      return document.addEventListener("mousedown", t2), document.addEventListener("touchstart", t2), function() {
+        document.removeEventListener("mousedown", t2), document.removeEventListener("touchstart", t2);
+      };
+    }, [e2, n2]);
+  }(I, p ? N : function() {
+  }), h && L.push("".concat(h)), S ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(o, a({ as: "div", "data-drawer": true, ref: I, classNames: L, onAnimationEnd: function() {
+    d || k(false);
+  } }, C), d && j && /* @__PURE__ */ e.createElement(o, a({ as: "div", className: "rest-of-page-overlay ".concat(d ? "visible" : "") }, p ? { onClick: N } : {})), /* @__PURE__ */ e.createElement(o, { as: "div", className: "drawer-content-wrapper", padding: v, bgColor: y, bgColour: g }, w && /* @__PURE__ */ e.createElement("button", { className: "dismiss-button", onClick: N }), f))) : null;
 });
 export {
-  s as Drawer,
-  s as default
+  s as Drawer
 };

package/dist/components/Element/Element.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var o=["as","classNames","bgColor","bgColour","borderColor","borderColour","className","columns","fillColor","fillColour","gap","hideOnDesktop","hideOnMobile","hideOnTabletLandscape","hideOnTabletPortrait","horizontallyCenterThis","horizontallyCentreThis","isFullHeight","isFullWidth","layoutAsFlexbox","layoutAsGrid","marginLeft","marginBottom","margin","marginRight","marginTop","opacity","paddingBottom","paddingLeft","padding","paddingRight","paddingTop","pushItemsToEnds","shadow","shape","showOnlyOnDesktop","showOnlyOnMobile","showOnlyOnTabletLandscape","showOnlyOnTabletPortrait","size","strokeColor","strokeColour","textColor","textColour","verticallyCenterItems","verticallyCentreItems","weight"],e=["as","className","classNames"];function n(){return n=Object.assign?Object.assign.bind():function(t){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},n.apply(this,arguments)}function a(t,o){if(null==t)return{};var e,n,a=function(t,o){if(null==t)return{};var e,n,a={},r=Object.keys(t);for(n=0;n<r.length;n++)e=r[n],o.indexOf(e)>=0||(a[e]=t[e]);return a}(t,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(n=0;n<r.length;n++)e=r[n],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(a[e]=t[e])}return a}var r=t.forwardRef((function(r,l){var i=r.as,s=r.classNames,c=void 0===s?[]:s,d=r.bgColor,h=r.bgColour,g=r.borderColor,p=r.borderColour,u=r.className,m=r.columns,b=r.fillColor,y=r.fillColour,f=r.gap,O=r.hideOnDesktop,C=r.hideOnMobile,w=r.hideOnTabletLandscape,T=r.hideOnTabletPortrait,v=r.horizontallyCenterThis,x=r.horizontallyCentreThis,k=r.isFullHeight,N=r.isFullWidth,j=r.layoutAsFlexbox,z=r.layoutAsGrid,L=r.marginLeft,P=r.marginBottom,I=r.margin,F=r.marginRight,E=r.marginTop,M=r.opacity,R=r.paddingBottom,A=r.paddingLeft,B=r.padding,D=r.paddingRight,S=r.paddingTop,G=r.pushItemsToEnds,H=r.shadow,W=r.shape,q=r.showOnlyOnDesktop,J=r.showOnlyOnMobile,K=r.showOnlyOnTabletLandscape,Q=r.showOnlyOnTabletPortrait,U=r.size,V=r.strokeColor,X=r.strokeColour,Y=r.textColor,Z=r.textColour,$=r.verticallyCenterItems,_=r.verticallyCentreItems,tt=r.weight,ot=a(r,o);r.as,r.className,r.classNames,a(r,e);var et,nt=function(t){var o=t.split("-");return 2===o.length?"".concat(o[0],"-light-").concat(100-Number(o[1])):t};return t.createElement(i,n({ref:l},ot,{className:(et=[u,d&&"bg-".concat(nt(d)),h&&"bg-".concat(nt(h)),g&&"border-".concat(nt(g)),p&&"border-".concat(nt(p)),b&&"fill-".concat(nt(b)),y&&"fill-".concat(nt(y)),O&&"hide-on-desktop",C&&"hide-on-mobile",w&&"hide-on-tablet-landscape",T&&"hide-on-tablet-portrait",v&&"horizontally-centre-this",x&&"horizontally-centre-this",k&&"full-height",N&&"full-width",j&&"layout-flexbox",z&&"layout-grid",L&&"margin-left-".concat(L),P&&"margin-bottom-".concat(P),I&&"margin-all-".concat(I),F&&"margin-right-".concat(F),E&&"margin-top-".concat(E),M&&"opacity-".concat(M),R&&"padding-bottom-".concat(R),A&&"padding-left-".concat(A),B&&"padding-all-".concat(B),D&&"padding-right-".concat(D),S&&"padding-top-".concat(S),G&&"push-to-ends",H&&"shadow-".concat(H),W&&"shape-".concat(W),q&&"show-only-on-desktop",J&&"show-only-on-mobile",K&&"show-only-on-tablet-landscape",Q&&"show-only-on-tablet-portrait",U&&"size-".concat(U),V&&"stroke-".concat(nt(V)),X&&"stroke-".concat(nt(X)),Y&&"text-".concat(nt(Y)),Z&&"text-".concat(nt(Z)),$&&"vertically-centre-items",_&&"vertically-centre-items",tt&&"weight-".concat(tt)].concat(c),et.filter((function(t){return!!t})).join(" ")),style:{gridTemplateColumns:"repeat(".concat(m,", 1fr)"),gap:f}}))}));exports.Element=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var o=["as"],a=["classNames","bgColor","bgColour","borderColor","borderColour","className","columns","fillColor","fillColour","gap","hideOnDesktop","hideOnMobile","hideOnTabletLandscape","hideOnTabletPortrait","horizontalMargin","horizontalPadding","horizontallyCenterThis","horizontallyCentreThis","isFullHeight","isFullWidth","layoutAsFlexbox","layoutAsGrid","marginLeft","marginBottom","margin","marginRight","marginTop","opacity","paddingBottom","paddingLeft","padding","paddingRight","paddingTop","pushItemsToEnds","shadow","shape","showOnlyOnDesktop","showOnlyOnMobile","showOnlyOnTabletLandscape","showOnlyOnTabletPortrait","size","strokeColor","strokeColour","textColor","textColour","verticalMargin","verticalPadding","verticallyCenterItems","verticallyCentreItems","weight"],n=["className","classNames"];function e(){return e=Object.assign?Object.assign.bind():function(t){for(var o=1;o<arguments.length;o++){var a=arguments[o];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},e.apply(this,arguments)}function r(t,o){if(null==t)return{};var a,n,e=function(t,o){if(null==t)return{};var a,n,e={},r=Object.keys(t);for(n=0;n<r.length;n++)a=r[n],o.indexOf(a)>=0||(e[a]=t[a]);return e}(t,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(n=0;n<r.length;n++)a=r[n],o.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(e[a]=t[a])}return e}var i=t.forwardRef((function(i,l){var c=i.as,s=void 0===c?"div":c,d=r(i,o),g=d.classNames,h=void 0===g?[]:g,p=d.bgColor,m=d.bgColour,u=d.borderColor,b=d.borderColour,y=d.className,f=d.columns,O=d.fillColor,C=d.fillColour,v=d.gap,w=d.hideOnDesktop,T=d.hideOnMobile,x=d.hideOnTabletLandscape,k=d.hideOnTabletPortrait,z=d.horizontalMargin,P=d.horizontalPadding,N=d.horizontallyCenterThis,j=d.horizontallyCentreThis,M=d.isFullHeight,L=d.isFullWidth,I=d.layoutAsFlexbox,F=d.layoutAsGrid,E=d.marginLeft,R=d.marginBottom,A=d.margin,B=d.marginRight,D=d.marginTop,S=d.opacity,G=d.paddingBottom,H=d.paddingLeft,W=d.padding,q=d.paddingRight,J=d.paddingTop,K=d.pushItemsToEnds,Q=d.shadow,U=d.shape,V=d.showOnlyOnDesktop,X=d.showOnlyOnMobile,Y=d.showOnlyOnTabletLandscape,Z=d.showOnlyOnTabletPortrait,$=d.size,_=d.strokeColor,tt=d.strokeColour,ot=d.textColor,at=d.textColour,nt=d.verticalMargin,et=d.verticalPadding,rt=d.verticallyCenterItems,it=d.verticallyCentreItems,lt=d.weight,ct=r(d,a);d.className,d.classNames,r(d,n);var st,dt=function(t){var o=t.split("-");return 2===o.length?"".concat(o[0],"-light-").concat(100-Number(o[1])):t};return t.createElement(s,e({ref:l},ct,{className:(st=[y,p&&"bg-".concat(dt(p)),m&&"bg-".concat(dt(m)),u&&"border-".concat(dt(u)),b&&"border-".concat(dt(b)),O&&"fill-".concat(dt(O)),C&&"fill-".concat(dt(C)),w&&"hide-on-desktop",T&&"hide-on-mobile",x&&"hide-on-tablet-landscape",k&&"hide-on-tablet-portrait",z&&"margin-right-".concat(z," margin-left-").concat(z),P&&"padding-right-".concat(P," padding-left-").concat(P),N&&"horizontally-centre-this",j&&"horizontally-centre-this",M&&"full-height",L&&"full-width",I&&"layout-flexbox",F&&"layout-grid",E&&"margin-left-".concat(E),R&&"margin-bottom-".concat(R),A&&"margin-all-".concat(A),B&&"margin-right-".concat(B),D&&"margin-top-".concat(D),S&&"opacity-".concat(S),G&&"padding-bottom-".concat(G),H&&"padding-left-".concat(H),W&&"padding-all-".concat(W),q&&"padding-right-".concat(q),J&&"padding-top-".concat(J),K&&"push-to-ends",Q&&"shadow-".concat(Q),U&&"shape-".concat(U),V&&"show-only-on-desktop",X&&"show-only-on-mobile",Y&&"show-only-on-tablet-landscape",Z&&"show-only-on-tablet-portrait",$&&"size-".concat($),_&&"stroke-".concat(dt(_)),tt&&"stroke-".concat(dt(tt)),ot&&"text-".concat(dt(ot)),at&&"text-".concat(dt(at)),nt&&"margin-top-".concat(nt," margin-bottom-").concat(nt),et&&"padding-top-".concat(et," padding-bottom-").concat(et),rt&&"vertically-centre-items",it&&"vertically-centre-items",lt&&"weight-".concat(lt)].concat(h),st.filter((function(t){return!!t})).join(" ")),style:F?{gridTemplateColumns:"repeat(".concat(f,", 1fr)"),gap:v}:{gap:v}}))}));exports.Element=i;

package/dist/components/Element/Element.js

@@ -3,43 +3,43 @@ var o = function(t2) {
   return t2.filter(function(t3) {
     return !!t3;
   }).join(" ");
-}, e = ["as", "classNames", "bgColor", "bgColour", "borderColor", "borderColour", "className", "columns", "fillColor", "fillColour", "gap", "hideOnDesktop", "hideOnMobile", "hideOnTabletLandscape", "hideOnTabletPortrait", "horizontallyCenterThis", "horizontallyCentreThis", "isFullHeight", "isFullWidth", "layoutAsFlexbox", "layoutAsGrid", "marginLeft", "marginBottom", "margin", "marginRight", "marginTop", "opacity", "paddingBottom", "paddingLeft", "padding", "paddingRight", "paddingTop", "pushItemsToEnds", "shadow", "shape", "showOnlyOnDesktop", "showOnlyOnMobile", "showOnlyOnTabletLandscape", "showOnlyOnTabletPortrait", "size", "strokeColor", "strokeColour", "textColor", "textColour", "verticallyCenterItems", "verticallyCentreItems", "weight"], n = ["as", "className", "classNames"];
-function a() {
-  return a = Object.assign ? Object.assign.bind() : function(t2) {
+}, a = ["as"], n = ["classNames", "bgColor", "bgColour", "borderColor", "borderColour", "className", "columns", "fillColor", "fillColour", "gap", "hideOnDesktop", "hideOnMobile", "hideOnTabletLandscape", "hideOnTabletPortrait", "horizontalMargin", "horizontalPadding", "horizontallyCenterThis", "horizontallyCentreThis", "isFullHeight", "isFullWidth", "layoutAsFlexbox", "layoutAsGrid", "marginLeft", "marginBottom", "margin", "marginRight", "marginTop", "opacity", "paddingBottom", "paddingLeft", "padding", "paddingRight", "paddingTop", "pushItemsToEnds", "shadow", "shape", "showOnlyOnDesktop", "showOnlyOnMobile", "showOnlyOnTabletLandscape", "showOnlyOnTabletPortrait", "size", "strokeColor", "strokeColour", "textColor", "textColour", "verticalMargin", "verticalPadding", "verticallyCenterItems", "verticallyCentreItems", "weight"], e = ["className", "classNames"];
+function r() {
+  return r = Object.assign ? Object.assign.bind() : function(t2) {
     for (var o2 = 1; o2 < arguments.length; o2++) {
-      var e2 = arguments[o2];
-      for (var n2 in e2)
-        Object.prototype.hasOwnProperty.call(e2, n2) && (t2[n2] = e2[n2]);
+      var a2 = arguments[o2];
+      for (var n2 in a2)
+        Object.prototype.hasOwnProperty.call(a2, n2) && (t2[n2] = a2[n2]);
     }
     return t2;
-  }, a.apply(this, arguments);
+  }, r.apply(this, arguments);
 }
-function r(t2, o2) {
+function i(t2, o2) {
   if (null == t2)
     return {};
-  var e2, n2, a2 = function(t3, o3) {
+  var a2, n2, e2 = function(t3, o3) {
     if (null == t3)
       return {};
-    var e3, n3, a3 = {}, r3 = Object.keys(t3);
+    var a3, n3, e3 = {}, r3 = Object.keys(t3);
     for (n3 = 0; n3 < r3.length; n3++)
-      e3 = r3[n3], o3.indexOf(e3) >= 0 || (a3[e3] = t3[e3]);
-    return a3;
+      a3 = r3[n3], o3.indexOf(a3) >= 0 || (e3[a3] = t3[a3]);
+    return e3;
   }(t2, o2);
   if (Object.getOwnPropertySymbols) {
     var r2 = Object.getOwnPropertySymbols(t2);
     for (n2 = 0; n2 < r2.length; n2++)
-      e2 = r2[n2], o2.indexOf(e2) >= 0 || Object.prototype.propertyIsEnumerable.call(t2, e2) && (a2[e2] = t2[e2]);
+      a2 = r2[n2], o2.indexOf(a2) >= 0 || Object.prototype.propertyIsEnumerable.call(t2, a2) && (e2[a2] = t2[a2]);
   }
-  return a2;
+  return e2;
 }
-var l = /* @__PURE__ */ t.forwardRef(function(l2, i) {
-  var s = l2.as, c = l2.classNames, d = void 0 === c ? [] : c, h = l2.bgColor, p = l2.bgColour, g = l2.borderColor, m = l2.borderColour, u = l2.className, b = l2.columns, y = l2.fillColor, f = l2.fillColour, O = l2.gap, C = l2.hideOnDesktop, w = l2.hideOnMobile, T = l2.hideOnTabletLandscape, v = l2.hideOnTabletPortrait, x = l2.horizontallyCenterThis, k = l2.horizontallyCentreThis, N = l2.isFullHeight, z = l2.isFullWidth, j = l2.layoutAsFlexbox, L = l2.layoutAsGrid, I = l2.marginLeft, P = l2.marginBottom, F = l2.margin, R = l2.marginRight, A = l2.marginTop, B = l2.opacity, D = l2.paddingBottom, E = l2.paddingLeft, M = l2.padding, G = l2.paddingRight, H = l2.paddingTop, S = l2.pushItemsToEnds, W = l2.shadow, q = l2.shape, J = l2.showOnlyOnDesktop, K = l2.showOnlyOnMobile, Q = l2.showOnlyOnTabletLandscape, U = l2.showOnlyOnTabletPortrait, V = l2.size, X = l2.strokeColor, Y = l2.strokeColour, Z = l2.textColor, $ = l2.textColour, _ = l2.verticallyCenterItems, tt = l2.verticallyCentreItems, ot = l2.weight, et = r(l2, e);
-  l2.as, l2.className, l2.classNames, r(l2, n);
-  var nt = function(t2) {
+var l = /* @__PURE__ */ t.forwardRef(function(l2, c) {
+  var s = l2.as, d = void 0 === s ? "div" : s, g = i(l2, a), h = g.classNames, p = void 0 === h ? [] : h, m = g.bgColor, u = g.bgColour, b = g.borderColor, y = g.borderColour, f = g.className, O = g.columns, C = g.fillColor, v = g.fillColour, w = g.gap, T = g.hideOnDesktop, x = g.hideOnMobile, k = g.hideOnTabletLandscape, z = g.hideOnTabletPortrait, P = g.horizontalMargin, N = g.horizontalPadding, j = g.horizontallyCenterThis, L = g.horizontallyCentreThis, M = g.isFullHeight, I = g.isFullWidth, F = g.layoutAsFlexbox, R = g.layoutAsGrid, A = g.marginLeft, B = g.marginBottom, D = g.margin, E = g.marginRight, G = g.marginTop, H = g.opacity, S = g.paddingBottom, W = g.paddingLeft, q = g.padding, J = g.paddingRight, K = g.paddingTop, Q = g.pushItemsToEnds, U = g.shadow, V = g.shape, X = g.showOnlyOnDesktop, Y = g.showOnlyOnMobile, Z = g.showOnlyOnTabletLandscape, $ = g.showOnlyOnTabletPortrait, _ = g.size, tt = g.strokeColor, ot = g.strokeColour, at = g.textColor, nt = g.textColour, et = g.verticalMargin, rt = g.verticalPadding, it = g.verticallyCenterItems, lt = g.verticallyCentreItems, ct = g.weight, st = i(g, n);
+  g.className, g.classNames, i(g, e);
+  var dt = function(t2) {
     var o2 = t2.split("-");
     return 2 === o2.length ? "".concat(o2[0], "-light-").concat(100 - Number(o2[1])) : t2;
   };
-  return t.createElement(s, a({ ref: i }, et, { className: o([u, h && "bg-".concat(nt(h)), p && "bg-".concat(nt(p)), g && "border-".concat(nt(g)), m && "border-".concat(nt(m)), y && "fill-".concat(nt(y)), f && "fill-".concat(nt(f)), C && "hide-on-desktop", w && "hide-on-mobile", T && "hide-on-tablet-landscape", v && "hide-on-tablet-portrait", x && "horizontally-centre-this", k && "horizontally-centre-this", N && "full-height", z && "full-width", j && "layout-flexbox", L && "layout-grid", I && "margin-left-".concat(I), P && "margin-bottom-".concat(P), F && "margin-all-".concat(F), R && "margin-right-".concat(R), A && "margin-top-".concat(A), B && "opacity-".concat(B), D && "padding-bottom-".concat(D), E && "padding-left-".concat(E), M && "padding-all-".concat(M), G && "padding-right-".concat(G), H && "padding-top-".concat(H), S && "push-to-ends", W && "shadow-".concat(W), q && "shape-".concat(q), J && "show-only-on-desktop", K && "show-only-on-mobile", Q && "show-only-on-tablet-landscape", U && "show-only-on-tablet-portrait", V && "size-".concat(V), X && "stroke-".concat(nt(X)), Y && "stroke-".concat(nt(Y)), Z && "text-".concat(nt(Z)), $ && "text-".concat(nt($)), _ && "vertically-centre-items", tt && "vertically-centre-items", ot && "weight-".concat(ot)].concat(d)), style: { gridTemplateColumns: "repeat(".concat(b, ", 1fr)"), gap: O } }));
+  return t.createElement(d, r({ ref: c }, st, { className: o([f, m && "bg-".concat(dt(m)), u && "bg-".concat(dt(u)), b && "border-".concat(dt(b)), y && "border-".concat(dt(y)), C && "fill-".concat(dt(C)), v && "fill-".concat(dt(v)), T && "hide-on-desktop", x && "hide-on-mobile", k && "hide-on-tablet-landscape", z && "hide-on-tablet-portrait", P && "margin-right-".concat(P, " margin-left-").concat(P), N && "padding-right-".concat(N, " padding-left-").concat(N), j && "horizontally-centre-this", L && "horizontally-centre-this", M && "full-height", I && "full-width", F && "layout-flexbox", R && "layout-grid", A && "margin-left-".concat(A), B && "margin-bottom-".concat(B), D && "margin-all-".concat(D), E && "margin-right-".concat(E), G && "margin-top-".concat(G), H && "opacity-".concat(H), S && "padding-bottom-".concat(S), W && "padding-left-".concat(W), q && "padding-all-".concat(q), J && "padding-right-".concat(J), K && "padding-top-".concat(K), Q && "push-to-ends", U && "shadow-".concat(U), V && "shape-".concat(V), X && "show-only-on-desktop", Y && "show-only-on-mobile", Z && "show-only-on-tablet-landscape", $ && "show-only-on-tablet-portrait", _ && "size-".concat(_), tt && "stroke-".concat(dt(tt)), ot && "stroke-".concat(dt(ot)), at && "text-".concat(dt(at)), nt && "text-".concat(dt(nt)), et && "margin-top-".concat(et, " margin-bottom-").concat(et), rt && "padding-top-".concat(rt, " padding-bottom-").concat(rt), it && "vertically-centre-items", lt && "vertically-centre-items", ct && "weight-".concat(ct)].concat(p)), style: R ? { gridTemplateColumns: "repeat(".concat(O, ", 1fr)"), gap: w } : { gap: w } }));
 });
 export {
   l as Element

package/dist/components/Element/constants.d.ts

@@ -29,16 +29,20 @@ export interface CommonProps {
     layoutAsGrid?: boolean;
     columns?: string;
     gap?: string;
+    margin?: SpacingTypes;
+    horizontalMargin?: SpacingTypes;
+    verticalMargin?: SpacingTypes;
     marginTop?: SpacingTypes;
     marginRight?: SpacingTypes;
     marginBottom?: SpacingTypes;
     marginLeft?: SpacingTypes;
-    margin?: SpacingTypes;
+    padding?: SpacingTypes;
+    horizontalPadding?: SpacingTypes;
+    verticalPadding?: SpacingTypes;
     paddingTop?: SpacingTypes;
     paddingRight?: SpacingTypes;
     paddingBottom?: SpacingTypes;
     paddingLeft?: SpacingTypes;
-    padding?: SpacingTypes;
     horizontallyCentreThis?: boolean;
     horizontallyCenterThis?: boolean;
     verticallyCentreItems?: boolean;
@@ -60,7 +64,7 @@ export interface CommonProps {
 export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {
 }
 export interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "ref" | "shape"> {
-    as: ElementType;
+    as?: ElementType;
     className?: string;
 }
 export {};

package/dist/components/Form/RadioButton/SlidingSelector.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../Element/Element.cjs");require("../../../sliding-selector-k52RqIHf.cjs");var t=["options","onClick"];function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},n.apply(this,arguments)}var i=e.forwardRef((function(i,l){var o=i.options,a=i.onClick,c=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(i,t);return e.createElement(r.Element,{as:"div","data-sliding-selector":!0,ref:l,onClick:a},o.map((function(r){return e.createElement(e.Fragment,{key:r.id},e.createElement("input",n({type:"radio",id:r.id,name:r.id,value:r.value},c)),e.createElement("label",{htmlFor:r.id},r.label))})))}));exports.SlidingSelector=i;

package/dist/components/Form/RadioButton/SlidingSelector.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { RadioButtonProps, RadioGroupProps } from "./constants";
+export interface SlidingSelectorProps extends RadioButtonProps {
+    options: RadioGroupProps[];
+}
+export declare const SlidingSelector: React.ForwardRefExoticComponent<SlidingSelectorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Form/RadioButton/SlidingSelector.js

@@ -0,0 +1,41 @@
+import e from "react";
+import { Element as r } from "../../Element/Element.js";
+import "../../../sliding-selector-w40geAFS.js";
+var t = ["options", "onClick"];
+function n() {
+  return n = Object.assign ? Object.assign.bind() : function(e2) {
+    for (var r2 = 1; r2 < arguments.length; r2++) {
+      var t2 = arguments[r2];
+      for (var n2 in t2)
+        Object.prototype.hasOwnProperty.call(t2, n2) && (e2[n2] = t2[n2]);
+    }
+    return e2;
+  }, n.apply(this, arguments);
+}
+function o(e2, r2) {
+  if (null == e2)
+    return {};
+  var t2, n2, o2 = function(e3, r3) {
+    if (null == e3)
+      return {};
+    var t3, n3, o3 = {}, i3 = Object.keys(e3);
+    for (n3 = 0; n3 < i3.length; n3++)
+      t3 = i3[n3], r3.indexOf(t3) >= 0 || (o3[t3] = e3[t3]);
+    return o3;
+  }(e2, r2);
+  if (Object.getOwnPropertySymbols) {
+    var i2 = Object.getOwnPropertySymbols(e2);
+    for (n2 = 0; n2 < i2.length; n2++)
+      t2 = i2[n2], r2.indexOf(t2) >= 0 || Object.prototype.propertyIsEnumerable.call(e2, t2) && (o2[t2] = e2[t2]);
+  }
+  return o2;
+}
+var i = /* @__PURE__ */ e.forwardRef(function(i2, l) {
+  var a = i2.options, c = i2.onClick, f = o(i2, t);
+  return e.createElement(r, { as: "div", "data-sliding-selector": true, ref: l, onClick: c }, a.map(function(r2) {
+    return e.createElement(e.Fragment, { key: r2.id }, /* @__PURE__ */ e.createElement("input", n({ type: "radio", id: r2.id, name: r2.id, value: r2.value }, f)), /* @__PURE__ */ e.createElement("label", { htmlFor: r2.id }, r2.label));
+  }));
+});
+export {
+  i as SlidingSelector
+};

package/dist/components/Form/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FormWrapper/FormWrapper.cjs"),r=require("./FormItem/FormItem.cjs"),o=require("./FormItemGroup/FormItemGroup.cjs"),t=require("./InputField/InputField.cjs"),p=require("./TextArea/TextArea.cjs"),u=require("./InputLabel/InputLabel.cjs"),i=require("./Select/Select.cjs"),s=require("./InputField/FileUpload.cjs"),a=require("./RadioButton/RadioGroup.cjs"),c=require("./Range/Range.cjs"),n=require("./RadioButton/RadioButton.cjs"),l=require("./CheckBox/CheckBox.cjs"),m=require("./CheckBox/Switch.cjs");require("react"),require("../Element/Element.cjs"),require("../Callout/Callout.cjs"),require("./FormWrapper/FormGenerator.cjs"),require("../Row/Row.cjs"),require("../Portion/Portion.cjs"),require("./BaseInputComponent/BaseInputComponent.cjs"),exports.FormWrapper=e.FormWrapper,exports.FormItem=r.FormItem,exports.FormItemGroup=o.FormItemGroup,exports.InputField=t.InputField,exports.TextArea=p.TextArea,exports.InputLabel=u.InputLabel,exports.Select=i.Select,exports.FileUpload=s.FileUpload,exports.RadioGroup=a.RadioGroup,exports.Range=c.Range,exports.RadioButton=n.RadioButton,exports.CheckBox=l.CheckBox,exports.Switch=m.Switch;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FormWrapper/FormWrapper.cjs"),r=require("./FormItem/FormItem.cjs"),o=require("./FormItemGroup/FormItemGroup.cjs"),t=require("./InputField/InputField.cjs"),i=require("./TextArea/TextArea.cjs"),u=require("./InputLabel/InputLabel.cjs"),p=require("./Select/Select.cjs"),s=require("./InputField/FileUpload.cjs"),c=require("./RadioButton/RadioGroup.cjs"),a=require("./Range/Range.cjs"),n=require("./RadioButton/RadioButton.cjs"),l=require("./CheckBox/CheckBox.cjs"),m=require("./CheckBox/Switch.cjs"),x=require("./RadioButton/SlidingSelector.cjs");require("react"),require("../Element/Element.cjs"),require("../Callout/Callout.cjs"),require("./FormWrapper/FormGenerator.cjs"),require("../Row/Row.cjs"),require("../Portion/Portion.cjs"),require("./BaseInputComponent/BaseInputComponent.cjs"),require("../../sliding-selector-k52RqIHf.cjs"),exports.FormWrapper=e.FormWrapper,exports.FormItem=r.FormItem,exports.FormItemGroup=o.FormItemGroup,exports.InputField=t.InputField,exports.TextArea=i.TextArea,exports.InputLabel=u.InputLabel,exports.Select=p.Select,exports.FileUpload=s.FileUpload,exports.RadioGroup=c.RadioGroup,exports.Range=a.Range,exports.RadioButton=n.RadioButton,exports.CheckBox=l.CheckBox,exports.Switch=m.Switch,exports.SlidingSelector=x.SlidingSelector;

package/dist/components/Form/index.d.ts

@@ -12,3 +12,4 @@ export { Range, type RangeProps } from "./Range";
 export { RadioButton } from "./RadioButton/RadioButton";
 export { CheckBox, type CheckboxProps } from "./CheckBox/CheckBox";
 export { Switch, type SwitchProps } from "./CheckBox/Switch";
+export { SlidingSelector, type SlidingSelectorProps } from "./RadioButton/SlidingSelector";

package/dist/components/Form/index.js

@@ -11,6 +11,7 @@ import { Range } from "./Range/Range.js";
 import { RadioButton } from "./RadioButton/RadioButton.js";
 import { CheckBox } from "./CheckBox/CheckBox.js";
 import { Switch } from "./CheckBox/Switch.js";
+import { SlidingSelector } from "./RadioButton/SlidingSelector.js";
 import "react";
 import "../Element/Element.js";
 import "../Callout/Callout.js";
@@ -18,6 +19,7 @@ import "./FormWrapper/FormGenerator.js";
 import "../Row/Row.js";
 import "../Portion/Portion.js";
 import "./BaseInputComponent/BaseInputComponent.js";
+import "../../sliding-selector-w40geAFS.js";
 export {
   CheckBox,
   FileUpload,
@@ -30,6 +32,7 @@ export {
   RadioGroup,
   Range,
   Select,
+  SlidingSelector,
   Switch,
   TextArea
 };

package/dist/components/HRule/HRule.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../Element/Element.cjs");var t=["kind","sideMargin"];function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},n.apply(this,arguments)}var a=e.forwardRef((function(a,o){var i=a.kind,l=a.sideMargin,s=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(a,t),c=[];return i&&c.push(i),l&&c.push("side-margin-".concat(l)),e.createElement(r.Element,n({as:"hr",ref:o,classNames:c,marginTop:"small",marginBottom:"small"},s))}));exports.HRule=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../Element/Element.cjs");var t=["kind"];function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},n.apply(this,arguments)}var o=e.forwardRef((function(o,a){var l=o.kind,i=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(o,t),u=[];return l&&u.push(l),e.createElement(r.Element,n({as:"hr",ref:a,classNames:u},i))}));exports.HRule=o;

package/dist/components/HRule/HRule.d.ts

@@ -2,8 +2,7 @@ import React from "react";
 import { CommonAndHTMLProps } from "../Element/constants";
 export interface HRCustomProps {
     kind?: "primary" | "secondary" | "tertiary";
-    sideMargin?: "nano" | "micro" | "tiny" | "small" | "medium" | "large" | "huge";
 }
 export type HRElementType = HTMLHRElement;
 export type HRProps = Omit<CommonAndHTMLProps<HRElementType>, keyof HRCustomProps> & HRCustomProps;
-export declare const HRule: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLHRElement>, keyof HRCustomProps> & HRCustomProps & React.RefAttributes<HTMLHRElement>>;
+export declare const HRule: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLHRElement>, "kind"> & HRCustomProps & React.RefAttributes<HTMLHRElement>>;

package/dist/components/HRule/HRule.js

@@ -1,6 +1,6 @@
 import r from "react";
 import { Element as e } from "../Element/Element.js";
-var t = ["kind", "sideMargin"];
+var t = ["kind"];
 function n() {
   return n = Object.assign ? Object.assign.bind() : function(r2) {
     for (var e2 = 1; e2 < arguments.length; e2++) {
@@ -11,28 +11,28 @@ function n() {
     return r2;
   }, n.apply(this, arguments);
 }
-function a(r2, e2) {
+function o(r2, e2) {
   if (null == r2)
     return {};
-  var t2, n2, a2 = function(r3, e3) {
+  var t2, n2, o2 = function(r3, e3) {
     if (null == r3)
       return {};
-    var t3, n3, a3 = {}, o3 = Object.keys(r3);
-    for (n3 = 0; n3 < o3.length; n3++)
-      t3 = o3[n3], e3.indexOf(t3) >= 0 || (a3[t3] = r3[t3]);
-    return a3;
+    var t3, n3, o3 = {}, a3 = Object.keys(r3);
+    for (n3 = 0; n3 < a3.length; n3++)
+      t3 = a3[n3], e3.indexOf(t3) >= 0 || (o3[t3] = r3[t3]);
+    return o3;
   }(r2, e2);
   if (Object.getOwnPropertySymbols) {
-    var o2 = Object.getOwnPropertySymbols(r2);
-    for (n2 = 0; n2 < o2.length; n2++)
-      t2 = o2[n2], e2.indexOf(t2) >= 0 || Object.prototype.propertyIsEnumerable.call(r2, t2) && (a2[t2] = r2[t2]);
+    var a2 = Object.getOwnPropertySymbols(r2);
+    for (n2 = 0; n2 < a2.length; n2++)
+      t2 = a2[n2], e2.indexOf(t2) >= 0 || Object.prototype.propertyIsEnumerable.call(r2, t2) && (o2[t2] = r2[t2]);
   }
-  return a2;
+  return o2;
 }
-var o = /* @__PURE__ */ r.forwardRef(function(o2, i) {
-  var l = o2.kind, s = o2.sideMargin, c = a(o2, t), f = [];
-  return l && f.push(l), s && f.push("side-margin-".concat(s)), /* @__PURE__ */ r.createElement(e, n({ as: "hr", ref: i, classNames: f, marginTop: "small", marginBottom: "small" }, c));
+var a = /* @__PURE__ */ r.forwardRef(function(a2, f) {
+  var i = a2.kind, l = o(a2, t), c = [];
+  return i && c.push(i), /* @__PURE__ */ r.createElement(e, n({ as: "hr", ref: f, classNames: c }, l));
 });
 export {
-  o as HRule
+  a as HRule
 };

package/dist/components/Row/Row.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=require("../Element/Element.cjs");var a=["layout","sidePadding","gutters","retainLayoutOnTabletLandscape","retainLayoutOnTabletPortrait","retainLayoutOnMobile","retainLayoutAlways","equaliseChildren","equalizeChildren"];function n(){return n=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},n.apply(this,arguments)}var r=t.forwardRef((function(r,o){var i=r.layout,l=void 0===i?"grid":i,u=r.sidePadding,s=r.gutters,c=r.retainLayoutOnTabletLandscape,y=r.retainLayoutOnTabletPortrait,d=r.retainLayoutOnMobile,p=r.retainLayoutAlways,b=r.equaliseChildren,g=r.equalizeChildren,O=function(t,e){if(null==t)return{};var a,n,r=function(t,e){if(null==t)return{};var a,n,r={},o=Object.keys(t);for(n=0;n<o.length;n++)a=o[n],e.indexOf(a)>=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(n=0;n<o.length;n++)a=o[n],e.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}(r,a),f=[];l&&f.push("layout-".concat(l));var h=null!=s?s:"grid"===l?"medium":"none";return h&&f.push("none"===h?"no-gutters":"".concat(h,"-gutters")),(b||g)&&f.push("equalise-children"),u&&f.push("side-padding-".concat(u)),c&&f.push("retain-layout-on-tablet-landscape"),y&&f.push("retain-layout-on-tablet-portrait"),d&&f.push("retain-layout-on-mobile"),p&&f.push("retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile"),t.createElement(e.Element,n({as:"div","data-row":!0,ref:o,classNames:[f.join(" ")],marginBottom:"tiny"},O))}));exports.Row=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=require("../Element/Element.cjs");var r=["layout","gutters","retainLayoutOnTabletLandscape","retainLayoutOnTabletPortrait","retainLayoutOnMobile","retainLayoutAlways","equaliseChildren","equalizeChildren"];function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t},a.apply(this,arguments)}var n=t.forwardRef((function(n,o){var i=n.layout,l=void 0===i?"grid":i,u=n.gutters,s=n.retainLayoutOnTabletLandscape,y=n.retainLayoutOnTabletPortrait,c=n.retainLayoutOnMobile,p=n.retainLayoutAlways,b=n.equaliseChildren,d=n.equalizeChildren,O=function(t,e){if(null==t)return{};var r,a,n=function(t,e){if(null==t)return{};var r,a,n={},o=Object.keys(t);for(a=0;a<o.length;a++)r=o[a],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(a=0;a<o.length;a++)r=o[a],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(n,r),f=[];l&&f.push("layout-".concat(l));var h=null!=u?u:"grid"===l?"medium":"none";return h&&f.push("none"===h?"no-gutters":"".concat(h,"-gutters")),(b||d)&&f.push("equalise-children"),s&&f.push("retain-layout-on-tablet-landscape"),y&&f.push("retain-layout-on-tablet-portrait"),c&&f.push("retain-layout-on-mobile"),p&&f.push("retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile"),t.createElement(e.Element,a({as:"div","data-row":!0,ref:o,classNames:[f.join(" ")],marginBottom:"tiny"},O))}));exports.Row=n;