@cfx-dev/ui-components 0.0.19 → 0.0.20

package/dist/index.esm-BkynlSN6.js

@@ -0,0 +1,72 @@
+import l from "react";
+var d = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+}, f = l.createContext && l.createContext(d), c = function() {
+  return c = Object.assign || function(t) {
+    for (var r, e = 1, n = arguments.length; e < n; e++) {
+      r = arguments[e];
+      for (var a in r) Object.prototype.hasOwnProperty.call(r, a) && (t[a] = r[a]);
+    }
+    return t;
+  }, c.apply(this, arguments);
+}, v = function(t, r) {
+  var e = {};
+  for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && r.indexOf(n) < 0 && (e[n] = t[n]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function") for (var a = 0, n = Object.getOwnPropertySymbols(t); a < n.length; a++)
+    r.indexOf(n[a]) < 0 && Object.prototype.propertyIsEnumerable.call(t, n[a]) && (e[n[a]] = t[n[a]]);
+  return e;
+};
+function m(t) {
+  return t && t.map(function(r, e) {
+    return l.createElement(r.tag, c({
+      key: e
+    }, r.attr), m(r.child));
+  });
+}
+function o(t) {
+  return function(r) {
+    return l.createElement(h, c({
+      attr: c({}, t.attr)
+    }, r), m(t.child));
+  };
+}
+function h(t) {
+  var r = function(e) {
+    var n = t.attr, a = t.size, u = t.title, g = v(t, ["attr", "size", "title"]), s = a || e.size || "1em", i;
+    return e.className && (i = e.className), t.className && (i = (i ? i + " " : "") + t.className), l.createElement("svg", c({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, e.attr, n, g, {
+      className: i,
+      style: c(c({
+        color: t.color || e.color
+      }, e.style), t.style),
+      height: s,
+      width: s,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), u && l.createElement("title", null, u), t.children);
+  };
+  return f !== void 0 ? l.createElement(f.Consumer, null, function(e) {
+    return r(e);
+  }) : r(d);
+}
+function w(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 640 512" }, child: [{ tag: "path", attr: { d: "M48 0C21.53 0 0 21.53 0 48v64c0 8.84 7.16 16 16 16h80V48C96 21.53 74.47 0 48 0zm208 412.57V352h288V96c0-52.94-43.06-96-96-96H111.59C121.74 13.41 128 29.92 128 48v368c0 38.87 34.65 69.65 74.75 63.12C234.22 474 256 444.46 256 412.57zM288 384v32c0 52.93-43.06 96-96 96h336c61.86 0 112-50.14 112-112 0-8.84-7.16-16-16-16H288z" } }] })(t);
+}
+function O(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z" } }] })(t);
+}
+function x(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 320 512" }, child: [{ tag: "path", attr: { d: "M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z" } }] })(t);
+}
+export {
+  x as F,
+  o as G,
+  O as a,
+  w as b
+};

package/dist/main.d.ts

@@ -1,25 +1,13 @@
-import { clsx } from './utils/clsx';
-import { getValue } from './utils/getValue';
-import { default as mergeRefs } from './utils/mergeRefs';
-
-import * as functional from './utils/functional';
-import * as hooks from './utils/hooks';
-import * as links from './utils/links';
-import * as math from './utils/math';
-import * as outlet from './utils/outlet';
-import * as string from './utils/string';
+export { mergeRefs } from './utils/mergeRefs';
+export { clsx } from './utils/clsx';
+export { getValue } from './utils/getValue';
+export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, useOutletAfter, useOutletBefore, } from './utils/hooks';
+export { noop, returnTrue, returnFalse, identity, invoke, } from './utils/functional';
+export { isExternalUrl, matchLinks, matchLinkNodes, defaultLinkReplacerx, defaultLinkReplacer, linkifyx, linkify, Linkify, } from './utils/links';
+export { clamp01, clamp, } from './utils/math';
+export { unicodeCharAt, splitByIndices, replaceRange, normalizeSlashes, isTrueString, isFalseString, } from './utils/string';
 export type { ValueOrGetter } from './utils/getValue';
-export declare const utils: {
-    clsx: typeof clsx;
-    getValue: typeof getValue;
-    mergeRefs: typeof mergeRefs;
-    functional: typeof functional;
-    hooks: typeof hooks;
-    links: typeof links;
-    math: typeof math;
-    outlet: typeof outlet;
-    string: typeof string;
-};
+export type { ILinkSubstitute, ILinkMatch, LinkifyProps, } from './utils/links';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Button } from './components/Button/Button';
 export { LinkButton } from './components/Button/LinkButton';
@@ -65,7 +53,9 @@ export { Tabular } from './components/Tabular/Tabular';
 export { Text, TextBlock } from './components/Text/Text';
 export { Textarea } from './components/Textarea/Textarea';
 export { Title } from './components/Title/Title';
-export { Icons, BrandIcon } from './components/Icons';
+export { InputDropzone } from './components/InputDropzone/InputDropzone';
+export type { InputDropzoneProps, FileWithPath } from './components/InputDropzone/InputDropzone';
+export { Icons, BrandIcon } from './style-guide/Icons/Icons';
 export { OnScreenSensor } from './components/OnScreenSensor';
 export { ui } from './components/ui';
 export { Symbols } from './components/Symbols';

package/dist/main.js

@@ -1,124 +1,145 @@
-import { clsx as o } from "./utils/clsx.js";
-import { f as r } from "./functional-C0pE183N.js";
-import { getValue as t } from "./utils/getValue.js";
-import { h as e } from "./hooks-GAujvL7d.js";
-import { l as m } from "./links-CgOD-Vfj.js";
-import { m as p } from "./math-i2ceybzU.js";
-import f from "./utils/mergeRefs.js";
-import { o as x } from "./outlet-B11a3Kgw.js";
-import { s as a } from "./string-NVxCUbqk.js";
-import { Checkbox as P } from "./components/Checkbox/Checkbox.js";
-import { Button as y } from "./components/Button/Button.js";
-import { LinkButton as v } from "./components/Button/LinkButton.js";
-import { ButtonBar as T } from "./components/Button/ButtonBar.js";
-import { Avatar as R } from "./components/Avatar/Avatar.js";
-import { BackdropPortal as D } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as V } from "./components/Badge/Badge.js";
-import { ControlBox as A } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as N } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as q } from "./components/Decorate/Decorate.js";
-import { Dot as E } from "./components/Dot/Dot.js";
-import { Flyout as H } from "./components/Flyout/Flyout.js";
-import { Icon as K } from "./components/Icon/Icon.js";
-import { Indicator as U } from "./components/Indicator/Indicator.js";
-import { InfoPanel as X } from "./components/InfoPanel/InfoPanel.js";
-import { Input as Z } from "./components/Input/Input.js";
-import { RichInput as $ } from "./components/Input/RichInput.js";
-import { Interactive as ro } from "./components/Interactive/Interactive.js";
-import { Island as eo } from "./components/Island/Island.js";
-import { Box as po } from "./components/Layout/Box/Box.js";
-import { Center as xo } from "./components/Layout/Center/Center.js";
-import { Flex as lo } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as io } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as co } from "./components/Layout/Pad/Pad.js";
-import { Page as Bo } from "./components/Layout/Page/Page.js";
-import { Scrollable as Io } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as ho } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as ko } from "./components/Loaf/Loaf.js";
-import { Modal as bo } from "./components/Modal/Modal.js";
-import { NavList as Co } from "./components/NavList/NavList.js";
-import { Overlay as Fo } from "./components/Overlay/Overlay.js";
-import { Popover as Lo } from "./components/Popover/Popover.js";
-import { PremiumBadge as Oo } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as wo } from "./components/Prose/Prose.js";
-import { Radio as Mo } from "./components/Radio/Radio.js";
-import { Select as jo } from "./components/Select/Select.js";
-import { Separator as zo } from "./components/Separator/Separator.js";
-import { Shroud as Go } from "./components/Shroud/Shroud.js";
-import { Spacer as Jo } from "./components/Spacer/Spacer.js";
-import { Style as Qo, useContextualStyle as Uo } from "./components/Style/Style.js";
-import { Switch as Xo } from "./components/Switch/Switch.js";
-import { Tabular as Zo } from "./components/Tabular/Tabular.js";
-import { Text as $o, TextBlock as or } from "./components/Text/Text.js";
-import { Textarea as tr } from "./components/Textarea/Textarea.js";
-import { Title as mr } from "./components/Title/Title.js";
-import { B as fr, I as xr } from "./Icons-B26SczGZ.js";
-import { OnScreenSensor as lr } from "./components/OnScreenSensor.js";
-import { ui as ir } from "./components/ui.js";
-import { Symbols as cr } from "./components/Symbols.js";
-const I = {
-  clsx: o,
-  getValue: t,
-  mergeRefs: f,
-  functional: r,
-  hooks: e,
-  links: m,
-  math: p,
-  outlet: x,
-  string: a
-};
+import { mergeRefs as e } from "./utils/mergeRefs.js";
+import { clsx as p } from "./utils/clsx.js";
+import { getValue as f } from "./utils/getValue.js";
+import { useDynamicRef as a, useGlobalKeyboardEvent as l, useInstance as n, useKeyboardClose as i, useOutlet as s, useOutletAfter as u, useOutletBefore as c, useWindowResize as d } from "./utils/hooks.js";
+import { identity as y, invoke as B, noop as I, returnFalse as k, returnTrue as g } from "./utils/functional.js";
+import { Linkify as b, defaultLinkReplacer as h, defaultLinkReplacerx as L, isExternalUrl as v, linkify as C, linkifyx as P, matchLinkNodes as T, matchLinks as F } from "./utils/links.js";
+import { clamp as D, clamp01 as z } from "./utils/math.js";
+import { isFalseString as w, isTrueString as E, normalizeSlashes as K, replaceRange as N, splitByIndices as V, unicodeCharAt as G } from "./utils/string.js";
+import { Checkbox as U } from "./components/Checkbox/Checkbox.js";
+import { Button as j } from "./components/Button/Button.js";
+import { LinkButton as H } from "./components/Button/LinkButton.js";
+import { ButtonBar as Q } from "./components/Button/ButtonBar.js";
+import { Avatar as Y } from "./components/Avatar/Avatar.js";
+import { BackdropPortal as _ } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as rr } from "./components/Badge/Badge.js";
+import { ControlBox as er } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as pr } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as fr } from "./components/Decorate/Decorate.js";
+import { Dot as ar } from "./components/Dot/Dot.js";
+import { Flyout as nr } from "./components/Flyout/Flyout.js";
+import { Icon as sr } from "./components/Icon/Icon.js";
+import { Indicator as cr } from "./components/Indicator/Indicator.js";
+import { InfoPanel as Sr } from "./components/InfoPanel/InfoPanel.js";
+import { Input as Br } from "./components/Input/Input.js";
+import { RichInput as kr } from "./components/Input/RichInput.js";
+import { Interactive as Rr } from "./components/Interactive/Interactive.js";
+import { Island as hr } from "./components/Island/Island.js";
+import { Box as vr } from "./components/Layout/Box/Box.js";
+import { Center as Pr } from "./components/Layout/Center/Center.js";
+import { Flex as Fr } from "./components/Layout/Flex/Flex.js";
+import { FlexRestricter as Dr } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as Ar } from "./components/Layout/Pad/Pad.js";
+import { Page as Er } from "./components/Layout/Page/Page.js";
+import { Scrollable as Nr } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as Gr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as Ur } from "./components/Loaf/Loaf.js";
+import { Modal as jr } from "./components/Modal/Modal.js";
+import { NavList as Hr } from "./components/NavList/NavList.js";
+import { Overlay as Qr } from "./components/Overlay/Overlay.js";
+import { Popover as Yr } from "./components/Popover/Popover.js";
+import { PremiumBadge as _r } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as ro } from "./components/Prose/Prose.js";
+import { Radio as eo } from "./components/Radio/Radio.js";
+import { Select as po } from "./components/Select/Select.js";
+import { Separator as fo } from "./components/Separator/Separator.js";
+import { Shroud as ao } from "./components/Shroud/Shroud.js";
+import { Spacer as no } from "./components/Spacer/Spacer.js";
+import { Style as so, useContextualStyle as uo } from "./components/Style/Style.js";
+import { Switch as So } from "./components/Switch/Switch.js";
+import { Tabular as Bo } from "./components/Tabular/Tabular.js";
+import { Text as ko, TextBlock as go } from "./components/Text/Text.js";
+import { Textarea as bo } from "./components/Textarea/Textarea.js";
+import { Title as Lo } from "./components/Title/Title.js";
+import { InputDropzone as Co } from "./components/InputDropzone/InputDropzone.js";
+import { B as To, I as Fo } from "./Icons-BlBKvJD8.js";
+import { OnScreenSensor as Do } from "./components/OnScreenSensor.js";
+import { ui as Ao } from "./components/ui.js";
+import { Symbols as Eo } from "./components/Symbols.js";
 export {
-  R as Avatar,
-  D as BackdropPortal,
-  V as Badge,
-  po as Box,
-  fr as BrandIcon,
-  y as Button,
-  T as ButtonBar,
-  xo as Center,
-  P as Checkbox,
-  A as ControlBox,
-  N as CountryFlag,
-  q as Decorate,
-  E as Dot,
-  lo as Flex,
-  io as FlexRestricter,
-  H as Flyout,
-  K as Icon,
-  xr as Icons,
-  U as Indicator,
-  X as InfoPanel,
-  Z as Input,
-  ro as Interactive,
-  eo as Island,
-  v as LinkButton,
-  ko as Loaf,
-  bo as Modal,
-  Co as NavList,
-  lr as OnScreenSensor,
-  Fo as Overlay,
-  co as Pad,
-  Bo as Page,
-  Lo as Popover,
-  Oo as PremiumBadge,
-  wo as Prose,
-  Mo as Radio,
-  $ as RichInput,
-  Io as Scrollable,
-  jo as Select,
-  zo as Separator,
-  Go as Shroud,
-  Jo as Spacer,
-  Qo as Style,
-  Xo as Switch,
-  cr as Symbols,
-  Zo as Tabular,
-  $o as Text,
-  or as TextBlock,
-  tr as Textarea,
-  mr as Title,
-  ho as VirtualScrollable,
-  ir as ui,
-  Uo as useContextualStyle,
-  I as utils
+  Y as Avatar,
+  _ as BackdropPortal,
+  rr as Badge,
+  vr as Box,
+  To as BrandIcon,
+  j as Button,
+  Q as ButtonBar,
+  Pr as Center,
+  U as Checkbox,
+  er as ControlBox,
+  pr as CountryFlag,
+  fr as Decorate,
+  ar as Dot,
+  Fr as Flex,
+  Dr as FlexRestricter,
+  nr as Flyout,
+  sr as Icon,
+  Fo as Icons,
+  cr as Indicator,
+  Sr as InfoPanel,
+  Br as Input,
+  Co as InputDropzone,
+  Rr as Interactive,
+  hr as Island,
+  H as LinkButton,
+  b as Linkify,
+  Ur as Loaf,
+  jr as Modal,
+  Hr as NavList,
+  Do as OnScreenSensor,
+  Qr as Overlay,
+  Ar as Pad,
+  Er as Page,
+  Yr as Popover,
+  _r as PremiumBadge,
+  ro as Prose,
+  eo as Radio,
+  kr as RichInput,
+  Nr as Scrollable,
+  po as Select,
+  fo as Separator,
+  ao as Shroud,
+  no as Spacer,
+  so as Style,
+  So as Switch,
+  Eo as Symbols,
+  Bo as Tabular,
+  ko as Text,
+  go as TextBlock,
+  bo as Textarea,
+  Lo as Title,
+  Gr as VirtualScrollable,
+  D as clamp,
+  z as clamp01,
+  p as clsx,
+  h as defaultLinkReplacer,
+  L as defaultLinkReplacerx,
+  f as getValue,
+  y as identity,
+  B as invoke,
+  v as isExternalUrl,
+  w as isFalseString,
+  E as isTrueString,
+  C as linkify,
+  P as linkifyx,
+  T as matchLinkNodes,
+  F as matchLinks,
+  e as mergeRefs,
+  I as noop,
+  K as normalizeSlashes,
+  N as replaceRange,
+  k as returnFalse,
+  g as returnTrue,
+  V as splitByIndices,
+  Ao as ui,
+  G as unicodeCharAt,
+  uo as useContextualStyle,
+  a as useDynamicRef,
+  l as useGlobalKeyboardEvent,
+  n as useInstance,
+  i as useKeyboardClose,
+  s as useOutlet,
+  u as useOutletAfter,
+  c as useOutletBefore,
+  d as useWindowResize
 };

package/dist/{medium-Dc7QRuE0.js → medium-JVtzoF2c.js}

@@ -1,6 +1,6 @@
 import * as l from "react";
 import { useState as g } from "react";
-import { _ as p } from "./tslib.es6-Dd_EkEfR.js";
+import { _ as p } from "./tslib.es6-CBKHJX9H.js";
 function o(e, u) {
   return typeof e == "function" ? e(u) : e && (e.current = u), e;
 }
@@ -112,7 +112,7 @@ function w(e) {
   return u.options = p({ async: !0, ssr: !1 }, e), u;
 }
 export {
-  k as a,
-  w as c,
+  w as a,
+  k as c,
   b as u
 };

package/dist/style-guide/Colours/DarkThemeSwatches.d.ts

@@ -0,0 +1,2 @@
+declare const DarkThemeSwatches: React.FC;
+export default DarkThemeSwatches;

package/dist/style-guide/Colours/DarkThemeSwatches.js

@@ -0,0 +1,110 @@
+import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
+const r = [
+  {
+    name: "$bg",
+    colorValue: "#161923"
+  },
+  {
+    name: "$fg",
+    colorValue: "#fffff0"
+  },
+  {
+    name: "primary",
+    colorValue: "#e50448"
+  },
+  // #f50551 darkened by 10%
+  {
+    name: ".color-1",
+    colorValue: "#ff6659"
+  },
+  // #F44336 lightened by 30%
+  {
+    name: ".color-2",
+    colorValue: "#83e176"
+  },
+  // #4CAF50 lightened by 30%
+  {
+    name: ".color-3",
+    colorValue: "#ffff99"
+  },
+  // #FFEB3B lightened by 30%
+  {
+    name: ".color-4",
+    colorValue: "#8acfff"
+  },
+  // #42A5F5 lightened by 30%
+  {
+    name: ".color-5",
+    colorValue: "#80d4ff"
+  },
+  // #03A9F4 lightened by 30%
+  {
+    name: ".color-6",
+    colorValue: "#e1a3e0"
+  },
+  // #9C27B0 lightened by 30%
+  {
+    name: ".color-8",
+    colorValue: "#ff8a66"
+  },
+  // #FF5722 lightened by 30%
+  {
+    name: ".color-9",
+    colorValue: "#cccccc"
+  }
+  // #9E9E9E lightened by 30%
+], i = function() {
+  return /* @__PURE__ */ a(l, { children: [
+    /* @__PURE__ */ e("h1", { children: " Dark Theme " }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+          gap: "20px",
+          padding: "20px"
+        },
+        children: r.map((o) => /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              backgroundColor: o.colorValue,
+              color: "#FFF",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100px",
+              borderRadius: "8px",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+              padding: "10px",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "-50px",
+                  textAlign: "center",
+                  padding: "5px 10px",
+                  color: "#FFF"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { children: o.name }),
+                  /* @__PURE__ */ e("br", {}),
+                  /* @__PURE__ */ e("span", { children: o.colorValue })
+                ]
+              }
+            )
+          },
+          o.name
+        ))
+      }
+    )
+  ] });
+};
+export {
+  i as default
+};

package/dist/style-guide/Colours/LightThemeSwatches.d.ts

@@ -0,0 +1,2 @@
+declare const LightThemeSwatches: React.FC;
+export default LightThemeSwatches;

package/dist/style-guide/Colours/LightThemeSwatches.js

@@ -0,0 +1,105 @@
+import { jsxs as l, Fragment as a, jsx as e } from "react/jsx-runtime";
+const r = [
+  {
+    name: "$bg",
+    colorValue: "#ffffff"
+  },
+  {
+    name: "$fg",
+    colorValue: "#161923"
+  },
+  {
+    name: ".color-1",
+    colorValue: "#b71c1c"
+  },
+  // darken(#F44336, 30%)
+  {
+    name: ".color-2",
+    colorValue: "#2e7d32"
+  },
+  // darken(#4CAF50, 30%)
+  {
+    name: ".color-3",
+    colorValue: "#c6ff00"
+  },
+  // darken(#FFEB3B, 30%)
+  {
+    name: ".color-4",
+    colorValue: "#2962ff"
+  },
+  // darken(#42A5F5, 30%)
+  {
+    name: ".color-5",
+    colorValue: "#0277bd"
+  },
+  // darken(#03A9F4, 30%)
+  {
+    name: ".color-6",
+    colorValue: "#6a1b9a"
+  },
+  // darken(#9C27B0, 30%)
+  {
+    name: ".color-8",
+    colorValue: "#d84315"
+  },
+  // darken(#FF5722, 30%)
+  {
+    name: ".color-9",
+    colorValue: "#6d6d6d"
+  }
+  // darken(#9E9E9E, 30%)
+], i = function() {
+  return /* @__PURE__ */ l(a, { children: [
+    /* @__PURE__ */ e("h1", { children: " Light Theme " }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+          gap: "20px",
+          padding: "20px"
+        },
+        children: r.map((o) => /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              backgroundColor: o.colorValue,
+              color: "#FFF",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100px",
+              borderRadius: "8px",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+              padding: "10px",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "-50px",
+                  textAlign: "center",
+                  padding: "5px 10px",
+                  color: "#FFF"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { children: o.name }),
+                  /* @__PURE__ */ e("br", {}),
+                  /* @__PURE__ */ e("span", { children: o.colorValue })
+                ]
+              }
+            )
+          },
+          o.name
+        ))
+      }
+    )
+  ] });
+};
+export {
+  i as default
+};

package/dist/style-guide/Colours/Swatches.d.ts

@@ -0,0 +1,6 @@
+interface SwatchProps {
+    name: string;
+    colorValue: string;
+}
+declare function Swatches({ name, colorValue, }: SwatchProps): import("react/jsx-runtime").JSX.Element;
+export default Swatches;