@grasp-labs/ds-react-components 0.27.0 → 1.0.0

package/dist/index.d.ts

@@ -36,6 +36,7 @@ export * from './components/tag';
 export * from './components/tagList';
 export * from './components/textBox';
 export * from './components/toast';
+export * from './components/toggleButton';
 export * from './components/typography';
 export * from './components/unstyledButton';
 export * from './components/datePicker';

package/dist/{index.esm-BWMKgcXW.js → index.esm-C32CGj2t.js}

@@ -1,4 +1,4 @@
-import { j as o } from "./index-DGPKStbk.js";
+import { j as o } from "./index-DbrsXeBO.js";
 import { useState as G, useEffect as Oe, createContext as Xt, useRef as ce, useContext as Zt, useMemo as le, useCallback as Ie } from "react";
 const Be = (e, t, n, r, a) => {
   if (!r) throw new Error(a ?? `Invalid property path: ${t}

package/dist/index.js

@@ -1,118 +1,131 @@
-import { A as o, b as e, ag as n, B as c, a as l, ah as t, d as r, e as i, ai as I, C as d, Q as u, aj as C, f as D, h as T, al as g, am as b, an as p, ao as B, ak as h, ap as F, aq as E, ar as P, as as S, i as x, at as L, au as w, ae as f, av as m, aw as y, D as H, ax as O, k, l as v, m as R, n as A, y as M, ay as W, az as N, E as V, aA as G, aB as J, o as K, aE as U, aG as Y, aF as _, aC as q, aD as z, F as Q, q as X, u as Z, p as j, t as $, r as aa, v as sa, s as oa, aH as ea, w as na, a6 as ca, a7 as la, a8 as ta, a9 as ra, aa as ia, ab as Ia, aI as da, I as ua, aJ as Ca, aK as Da, J as Ta, K as ga, ac as ba, L as pa, x as Ba, z as ha, G as Fa, aL as Ea, M as Pa, X as Sa, P as xa, aM as La, aN as wa, H as fa, N as ma, aO as ya, R as Ha, aP as Oa, aQ as ka, aR as va, aS as Ra, O as Aa, S as Ma, U as Wa, V as Na, W as Va, aT as Ga, aU as Ja, $ as Ka, a0 as Ua, Y as Ya, aV as _a, Z as qa, _ as za, aW as Qa, a1 as Xa, a2 as Za, a3 as ja, a4 as $a, a5 as as, T as ss, ad as os, aX as es, aY as ns, c as cs, g as ls, af as ts, aZ as rs } from "./index-DGPKStbk.js";
+import { aj as o, A as e, c as n, ak as c, al as t, am as r, an as I, B as l, a as i, ao as d, af as b, e as C, f as g, ap as u, C as T, aq as B, V as D, ar as p, h as L, i as h, as as w, at as P, au as S, av as F, aw as f, ax as y, k as x, ay as E, az as m, aA as k, aB as A, aC as H, aD as v, ai as R, aE as M, aF as N, D as O, aG as U, aH as W, l as _, m as G, n as J, o as K, G as V, aI as Y, aJ as q, E as z, aK as Q, p as X, aL as Z, aN as $, F as j, r as aa, w as sa, q as oa, u as ea, s as na, x as ca, t as ta, aM as ra, aO as Ia, y as la, aa as ia, ab as da, ac as ba, ad as Ca, ae as ga, aP as ua, I as Ta, aQ as Ba, aR as Da, J as pa, K as La, ag as ha, aS as wa, aT as Pa, L as Sa, z as Fa, aU as fa, H as ya, M as xa, aV as Ea, N as ma, aW as ka, aX as Aa, Z as Ha, P as va, aY as Ra, aZ as Ma, O as Na, Q as Oa, a_ as Ua, R as Wa, a$ as _a, b0 as Ga, b1 as Ja, b2 as Ka, b3 as Va, U as Ya, b4 as qa, S as za, W as Qa, X as Xa, Y as Za, b5 as $a, a1 as ja, a2 as as, _ as ss, $ as os, a0 as es, b6 as ns, a3 as cs, a4 as ts, a5 as rs, a6 as Is, a7 as ls, a8 as is, a9 as ds, T as bs, ah as Cs, b7 as gs, b8 as us, b as Ts, d as Bs, g as Ds, b9 as ps, ba as Ls, v as hs } from "./index-DbrsXeBO.js";
 export {
-  o as Alert,
-  e as AnimatedList,
-  n as ArrowDownIcon,
-  c as BaseButton,
-  l as BaseTextBox,
-  t as BellIcon,
-  r as Breadcrumb,
-  i as Button,
-  I as CalendarIcon,
-  d as Card,
-  u as CenteredSpinner,
-  C as CheckIcon,
-  D as Checkbox,
-  T as CheckboxIcon,
-  g as ChevronDoubleLeftIcon,
-  b as ChevronDoubleRightIcon,
-  p as ChevronLeftIcon,
-  B as ChevronRightIcon,
-  h as CircleFilledIcon,
-  F as CircleIcon,
-  E as ClockIcon,
-  P as CloseIcon,
-  S as CogWheelIcon,
+  o as AddressIcon,
+  e as Alert,
+  n as AnimatedList,
+  c as ArrowDownIcon,
+  t as ArrowLeftIcon,
+  r as ArrowRightIcon,
+  I as ArrowUpIcon,
+  l as BaseButton,
+  i as BaseTextBox,
+  d as BellIcon,
+  b as Body,
+  C as Breadcrumb,
+  g as Button,
+  u as CalendarIcon,
+  T as Card,
+  B as CautionIcon,
+  D as CenteredSpinner,
+  p as CheckIcon,
+  L as Checkbox,
+  h as CheckboxIcon,
+  w as ChevronDoubleLeftIcon,
+  P as ChevronDoubleRightIcon,
+  S as CircleIcon,
+  F as ClockIcon,
+  f as CloseIcon,
+  y as CogWheelIcon,
   x as ConfirmationDialog,
-  L as DashIcon,
-  w as DatabaseIcon,
-  f as DatePicker,
-  m as DeleteIcon,
-  y as DetailsIcon,
-  H as Dialog,
-  O as DownloadIcon,
-  k as Drawer,
-  v as Dropdown,
-  R as DropdownItem,
-  A as DynamicIcon,
-  M as EMPTY_OPTION_ID,
-  W as EarthIcon,
-  N as EditIcon,
-  V as ErrorBoundary,
-  G as ErrorFilledIcon,
-  J as ErrorOutlinedIcon,
-  K as ErrorPage,
-  U as ExpandDownIcon,
-  Y as ExpandIcon,
-  _ as ExpandRightIcon,
-  q as EyeIcon,
-  z as EyeOffIcon,
-  Q as Field,
-  X as FieldContent,
-  Z as FieldGroup,
-  j as FieldLabel,
-  $ as FieldLegend,
-  aa as FieldMessage,
-  sa as FieldSeparator,
-  oa as FieldSet,
-  ea as FilterIcon,
-  na as FlowTile,
-  ca as H1,
-  la as H2,
-  ta as H3,
-  ra as H4,
-  ia as H5,
-  Ia as H6,
-  da as HourglassIcon,
-  ua as IconButton,
-  Ca as IdeaIcon,
-  Da as InfoOutlinedIcon,
-  Ta as JsonEditor,
-  ga as KeyValueList,
-  ba as Label,
-  pa as Link,
-  Ba as List,
-  ha as ListItem,
-  Fa as Logo,
+  E as ConnectionIcon,
+  m as CopyIcon,
+  k as CorrectIcon,
+  A as DashIcon,
+  H as DashboardIcon,
+  v as DatabaseIcon,
+  R as DatePicker,
+  M as DeleteIcon,
+  N as DetailsIcon,
+  O as Dialog,
+  U as DownIcon,
+  W as DownloadIcon,
+  _ as Drawer,
+  G as Dropdown,
+  J as DropdownItem,
+  K as DynamicIcon,
+  V as EMPTY_OPTION_ID,
+  Y as EarthIcon,
+  q as EditIcon,
+  z as ErrorBoundary,
+  Q as ErrorIcon,
+  X as ErrorPage,
+  Z as EyeIcon,
+  $ as EyeOffIcon,
+  j as Field,
+  aa as FieldContent,
+  sa as FieldGroup,
+  oa as FieldLabel,
+  ea as FieldLegend,
+  na as FieldMessage,
+  ca as FieldSeparator,
+  ta as FieldSet,
+  ra as FileIcon,
+  Ia as FilterIcon,
+  la as FlowTile,
+  ia as H1,
+  da as H2,
+  ba as H3,
+  Ca as H4,
+  ga as H5,
+  ua as HourglassIcon,
+  Ta as IconButton,
+  Ba as IdeaIcon,
+  Da as InfoIcon,
+  pa as JsonEditor,
+  La as KeyValueList,
+  ha as Label,
+  wa as LeftBarIcon,
+  Pa as LeftIcon,
+  Sa as Link,
+  Fa as List,
+  fa as ListIcon,
+  ya as ListItem,
+  xa as Logo,
   Ea as MoreIcon,
-  Pa as MultiSelect,
-  Sa as Pagination,
-  xa as PasswordTextBox,
-  La as PlayIcon,
-  wa as PlusIcon,
-  fa as Popover,
-  ma as Portal,
-  ya as ProfileIcon,
-  Ha as RadioButton,
-  Oa as RecycleIcon,
-  ka as ReloadIcon,
-  va as SaveIcon,
-  Ra as SearchIcon,
-  Aa as Select,
-  Ma as Sidebar,
-  Wa as Spinner,
-  Na as Step,
-  Va as Stepper,
-  Ga as SuccessFilledIcon,
-  Ja as SuccessOutlinedIcon,
-  Ka as Tab,
-  Ua as TabPanel,
-  Ya as Table,
-  _a as TableArrowIcon,
-  qa as TableCell,
-  za as TableHeaderCell,
-  Qa as TableIcon,
-  Xa as Tag,
-  Za as TagList,
-  ja as TextBox,
-  $a as Toast,
-  as as Toaster,
-  ss as Tooltip,
-  os as UnstyledButton,
-  es as WarningFilledIcon,
-  ns as WarningOutlinedIcon,
-  cs as colorVariantClasses,
-  ls as getBaseButtonClassName,
-  ts as icons,
-  rs as useDropdownPosition
+  ma as MultiSelect,
+  ka as NotepadIcon,
+  Aa as NotesIcon,
+  Ha as Pagination,
+  va as PasswordTextBox,
+  Ra as PlayIcon,
+  Ma as PlusIcon,
+  Na as Popover,
+  Oa as Portal,
+  Ua as ProfileIcon,
+  Wa as RadioButton,
+  _a as RecycleIcon,
+  Ga as ReloadIcon,
+  Ja as RightIcon,
+  Ka as SaveIcon,
+  Va as SearchIcon,
+  Ya as Select,
+  qa as ServerIcon,
+  za as Sidebar,
+  Qa as Spinner,
+  Xa as Step,
+  Za as Stepper,
+  $a as SuccessIcon,
+  ja as Tab,
+  as as TabPanel,
+  ss as Table,
+  os as TableCell,
+  es as TableHeaderCell,
+  ns as TableIcon,
+  cs as Tag,
+  ts as TagList,
+  rs as TextBox,
+  Is as Toast,
+  ls as Toaster,
+  is as ToggleButton,
+  ds as ToggleButtonTrack,
+  bs as Tooltip,
+  Cs as UnstyledButton,
+  gs as UpIcon,
+  us as WarningIcon,
+  Ts as baseClasses,
+  Bs as disabledClasses,
+  Ds as getBaseButtonClassName,
+  ps as icons,
+  Ls as useDropdownPosition,
+  hs as variantClasses
 };

package/dist/tailwind-styles.css

@@ -1,43 +1,116 @@
 @import "tailwindcss";
 
 @theme {
-  --text-3xs: 0.625rem; /* 10px */
-  --text-xxs: 0.75rem; /* 12px */
-  --text-xs: 0.875rem; /* 14px */
-  --text-sm: 1rem; /* 16px */
-  --text-md: 1.125rem; /* 18px */
-  --text-lg: 1.5625rem; /* 25px */
-  --text-xl: 1.875rem; /* 30px */
-  --text-2xl: 3.75rem; /* 60px */
-  --text-3xl: 4.6875rem; /* 75px */
-  --text-4xl: 5rem; /* 80px */
-
-  --spacing-0: 0;
+  --text-3xs: 0.5rem; /* 8px */
+  --text-3xs--line-height: 1.4;
+  --text-xxs: 0.625rem; /* 10px */
+  --text-xxs--line-height: 1.4;
+  --text-xs: 0.75rem; /* 12px */
+  --text-xs--line-height: 1.4;
+  --text-sm: 0.875rem; /* 14px */
+  --text-sm--line-height: 1.4;
+  --text-md: 1rem; /* 16px */
+  --text-md--line-height: 1.4;
+  --text-lg: 1.25rem; /* 20px */
+  --text-lg--line-height: 1.2;
+  --text-xl: 1.5rem; /* 24px */
+  --text-xl--line-height: 1.2;
+  --text-2xl: 2rem; /* 32px */
+  --text-2xl--line-height: 1.2;
+  --text-3xl: 3rem; /* 48px */
+  --text-3xl--line-height: 1.2;
+  --text-4xl: 4.5rem; /* 72px */
+  --text-4xl--line-height: 1.2;
+
+  --spacing-0: 0; /* 0px */
   --spacing-0_5: 0.125rem; /* 2px */
   --spacing-1: 0.25rem; /* 4px */
+  --spacing-1_5: 0.375rem; /* 6px */
   --spacing-2: 0.5rem; /* 8px */
+  --spacing-2_5: 0.625rem; /* 10px */
   --spacing-3: 0.75rem; /* 12px */
+  --spacing-3_5: 0.875rem; /* 14px */
   --spacing-4: 1rem; /* 16px */
+  --spacing-4_5: 1.125rem; /* 18px */
   --spacing-5: 1.25rem; /* 20px */
+  --spacing-5_5: 1.375rem; /* 22px */
   --spacing-6: 1.5rem; /* 24px */
+  --spacing-6_5: 1.625rem; /* 26px */
   --spacing-7: 1.75rem; /* 28px */
+  --spacing-7_5: 1.875rem; /* 30px */
   --spacing-8: 2rem; /* 32px */
+  --spacing-8_5: 2.125rem; /* 34px */
   --spacing-9: 2.25rem; /* 36px */
+  --spacing-9_5: 2.375rem; /* 38px */
   --spacing-10: 2.5rem; /* 40px */
+  --spacing-10_5: 2.625rem; /* 42px */
   --spacing-11: 2.75rem; /* 44px */
+  --spacing-11_5: 2.875rem; /* 46px */
   --spacing-12: 3rem; /* 48px */
+  --spacing-12_5: 3.125rem; /* 50px */
   --spacing-13: 3.25rem; /* 52px */
+  --spacing-13_5: 3.375rem; /* 54px */
   --spacing-14: 3.5rem; /* 56px */
+  --spacing-14_5: 3.625rem; /* 58px */
   --spacing-15: 3.75rem; /* 60px */
+  --spacing-15_5: 3.875rem; /* 62px */
   --spacing-16: 4rem; /* 64px */
+  --spacing-16_5: 4.125rem; /* 66px */
   --spacing-17: 4.25rem; /* 68px */
+  --spacing-17_5: 4.375rem; /* 70px */
   --spacing-18: 4.5rem; /* 72px */
+  --spacing-18_5: 4.625rem; /* 74px */
   --spacing-19: 4.75rem; /* 76px */
+  --spacing-19_5: 4.875rem; /* 78px */
   --spacing-20: 5rem; /* 80px */
+  --spacing-20_5: 5.125rem; /* 82px */
+  --spacing-21: 5.25rem; /* 84px */
+  --spacing-21_5: 5.375rem; /* 86px */
+  --spacing-22: 5.5rem; /* 88px */
+  --spacing-22_5: 5.625rem; /* 90px */
+  --spacing-23: 5.75rem; /* 92px */
+  --spacing-23_5: 5.875rem; /* 94px */
+  --spacing-24: 6rem; /* 96px */
+  --spacing-24_5: 6.125rem; /* 98px */
+  --spacing-25: 6.25rem; /* 100px */
+  --spacing-25_5: 6.375rem; /* 102px */
+  --spacing-26: 6.5rem; /* 104px */
+  --spacing-26_5: 6.625rem; /* 106px */
+  --spacing-27: 6.75rem; /* 108px */
+  --spacing-27_5: 6.875rem; /* 110px */
+  --spacing-28: 7rem; /* 112px */
+  --spacing-28_5: 7.125rem; /* 114px */
+  --spacing-29: 7.25rem; /* 116px */
+  --spacing-29_5: 7.375rem; /* 118px */
+  --spacing-30: 7.5rem; /* 120px */
+  --spacing-30_5: 7.625rem; /* 122px */
+  --spacing-31: 7.75rem; /* 124px */
+  --spacing-31_5: 7.875rem; /* 126px */
+  --spacing-32: 8rem; /* 128px */
+  --spacing-32_5: 8.125rem; /* 130px */
+  --spacing-33: 8.25rem; /* 132px */
+  --spacing-33_5: 8.375rem; /* 134px */
+  --spacing-34: 8.5rem; /* 136px */
+  --spacing-34_5: 8.625rem; /* 138px */
+  --spacing-35: 8.75rem; /* 140px */
+  --spacing-35_5: 8.875rem; /* 142px */
+  --spacing-36: 9rem; /* 144px */
+  --spacing-36_5: 9.125rem; /* 146px */
+  --spacing-37: 9.25rem; /* 148px */
+  --spacing-37_5: 9.375rem; /* 150px */
+  --spacing-38: 9.5rem; /* 152px */
+  --spacing-38_5: 9.625rem; /* 154px */
+  --spacing-39: 9.75rem; /* 156px */
+  --spacing-39_5: 9.875rem; /* 158px */
+  --spacing-40: 10rem; /* 160px */
+
   --spacing-full: 100%;
 
   --shadow-md: 0 0 12px 2px rgba(100, 103, 198, 0.25);
 
+  --ease-default: ease-out;
+  --default-transition-timing-function: var(--ease-default);
+
   --animate-fadeIn: fadeIn;
 
   --z-index-toast: 70;
@@ -50,8 +123,12 @@
 @theme inline {
   --color-primary: var(--primary);
   --color-primary-light: var(--primary-light);
+  --color-primary-light-hover: var(--primary-light-hover);
   --color-primary-super-light: var(--primary-super-light);
+  --color-primary-dark: var(--primary-dark);
   --color-secondary: var(--secondary);
+  --color-secondary-light: var(--secondary-light);
+  --color-secondary-dark: var(--secondary-dark);
   --color-text: var(--text);
   --color-text-contrast: var(--text-contrast);
   --color-text-disabled: var(--text-disabled);
@@ -63,6 +140,8 @@
   --color-contrast: var(--contrast);
   --color-error: var(--error);
   --color-error-light: var(--error-light);
+  --color-error-dark: var(--error-dark);
+  --color-error-darker: var(--error-darker);
   --color-success: var(--success);
   --color-warning: var(--warning);
   --color-shade: var(--shade);
@@ -85,19 +164,25 @@
   --font-base: 16px;
   --primary: #2a2a2a;
   --primary-light: #5c5c5c;
+  --primary-light-hover: #6e6e6e;
   --primary-super-light: #e0e0df;
+  --primary-dark: #111111;
   --secondary: #8b8b8b;
-  --text: #2b292a;
+  --secondary-light: #a5a5a5;
+  --secondary-dark: #727272;
+  --text: #1e1e1e;
   --text-contrast: #f8f7f6;
   --text-disabled: #acaaa9;
-  --background: #f5f4f3;
+  --background: #ffffff;
   --background-disabled: #eaeaea;
   --background-error: #ff4d4f1a;
   --background-success: #52c41a1a;
   --background-warning: #ffa5001a;
   --contrast: #ffffff;
-  --error: #ff4d4f;
-  --error-light: #ff9495;
+  --error: #ec221f;
+  --error-light: #fdd3d0;
+  --error-dark: #c00f0c;
+  --error-darker: #900b09;
   --success: #52c41a;
   --warning: #ffa500;
   --shade: #d1d1d1;
@@ -108,8 +193,12 @@
 .dark {
   --primary: #e0e0df;
   --primary-light: #b8b8b8;
+  --primary-light-hover: #c8c8c8;
   --primary-super-light: #3a3a3a;
+  --primary-dark: #f9f9f9;
   --secondary: #8b8b8b;
+  --secondary-light: #a5a5a5;
+  --secondary-dark: #727272;
   --text: #f8f7f6;
   --text-contrast: #2b292a;
   --text-disabled: #6b6b6b;
@@ -119,8 +208,10 @@
   --background-success: #52c41a1a;
   --background-warning: #ffa5001a;
   --contrast: #2a2a2a;
-  --error: #ff6b6d;
-  --error-light: #ff4d4f;
+  --error: #ec221f;
+  --error-light: #fdd3d0;
+  --error-dark: #c00f0c;
+  --error-darker: #900b09;
   --success: #6fdb3f;
   --warning: #ffb733;
   --shade: #3f3f3f;
@@ -141,39 +232,45 @@ body {
   h3,
   h4,
   h5,
-  h6 {
+  p {
     margin: 0;
     padding: 0;
   }
 
   h1 {
     font-size: var(--text-4xl);
-    line-height: var(--text-4xl);
+    line-height: var(--text-4xl--line-height);
+    font-weight: 700;
   }
 
   h2 {
     font-size: var(--text-3xl);
-    line-height: var(--text-3xl);
+    line-height: var(--text-3xl--line-height);
+    font-weight: 700;
   }
 
   h3 {
-    font-size: var(--text-xxl);
-    line-height: var(--text-xxl);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl--line-height);
+    font-weight: 400;
   }
 
   h4 {
     font-size: var(--text-xl);
-    line-height: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+    font-weight: 600;
   }
 
   h5 {
     font-size: var(--text-lg);
-    line-height: var(--text-lg);
+    line-height: var(--text-lg--line-height);
+    font-weight: 400;
   }
 
-  h6 {
+  p {
     font-size: var(--text-md);
-    line-height: var(--text-md);
+    line-height: var(--text-md--line-height);
+    font-weight: 400;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grasp-labs/ds-react-components",
-  "version": "0.27.0",
+  "version": "1.0.0",
   "private": false,
   "license": "Apache-2.0",
   "type": "module",

package/dist/circle-filled-DDHXyiE7.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const r = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5 9.5147 14.4853 7.5 12 7.5C9.5147 7.5 7.5 9.5147 7.5 12C7.5 14.4853 9.5147 16.5 12 16.5Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 2 }));
-export {
-  r as default
-};