@stokelp/styled-system 1.4.6 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "1.4.6",
+  "version": "1.6.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {

package/panda.buildinfo.json

@@ -28,6 +28,14 @@
       "background]___[value:error.100]___[cond:_hover",
       "color]___[value:error.700]___[cond:_hover",
       "color]___[value:error.700]___[cond:_active",
+      "truncate]___[value:true",
+      "width]___[value:20",
+      "height]___[value:20",
+      "fill]___[value:none",
+      "width]___[value:24",
+      "height]___[value:24",
+      "paddingInline]___[value:space-8",
+      "textAlign]___[value:center",
       "display]___[value:flex",
       "alignItems]___[value:flex-start",
       "gap]___[value:0",
@@ -53,28 +61,36 @@
       "formLabel": [
         "variant]___[value:absolute]___[recipe:formLabel"
       ],
+      "text": [
+        "size]___[value:md]___[recipe:text",
+        "size]___[value:lg]___[recipe:text",
+        "size]___[value:sm]___[recipe:text"
+      ],
       "switchRecipe": [
         "size]___[value:md]___[recipe:switchRecipe"
       ],
       "heading": [
         "size]___[value:h2]___[recipe:heading"
       ],
-      "text": [
-        "size]___[value:lg]___[recipe:text",
-        "size]___[value:md]___[recipe:text",
-        "size]___[value:sm]___[recipe:text"
-      ],
       "accordion": [
         "size]___[value:md]___[recipe:accordion"
       ],
       "drawer": [
         "variant]___[value:right]___[recipe:drawer"
       ],
+      "inputGroup": [],
+      "inputAddon": [],
+      "input": [
+        "size]___[value:md]___[recipe:input"
+      ],
       "tabs": [
         "variant]___[value:line]___[recipe:tabs"
       ],
-      "textarea": [],
-      "formHelperText": []
+      "formHelperText": [],
+      "select": [
+        "size]___[value:md]___[recipe:select"
+      ],
+      "textarea": []
     }
   }
 }

package/patterns/aspect-ratio.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-transform(props6, { map }) {
-  const { ratio = 4 / 3, ...rest } = props6;
+transform(props7, { map }) {
+  const { ratio = 4 / 3, ...rest } = props7;
   return {
     position: "relative",
     _before: {

package/patterns/bleed.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const bleedConfig = {
-transform(props6, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props6;
+transform(props7, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props7;
   const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
     "--bleed-x": map(inline, valueFn),

package/patterns/box.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const boxConfig = {
-transform(props6) {
-  return props6;
+transform(props7) {
+  return props7;
 }}
 
 export const getBoxStyle = (styles = {}) => {

package/patterns/center.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const centerConfig = {
-transform(props6) {
-  const { inline, ...rest } = props6;
+transform(props7) {
+  const { inline, ...rest } = props7;
   return {
     display: inline ? "inline-flex" : "flex",
     alignItems: "center",

package/patterns/circle.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const circleConfig = {
-transform(props6) {
-  const { size, ...rest } = props6;
+transform(props7) {
+  const { size, ...rest } = props7;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/container.mjs

@@ -2,13 +2,13 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const containerConfig = {
-transform(props6) {
+transform(props7) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props6
+    ...props7
   };
 }}
 

package/patterns/cq.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const cqConfig = {
-transform(props6) {
-  const { name, type, ...rest } = props6;
+transform(props7) {
+  const { name, type, ...rest } = props7;
   return {
     containerType: type,
     containerName: name,

package/patterns/divider.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const dividerConfig = {
-transform(props6, { map }) {
-  const { orientation, thickness, color, ...rest } = props6;
+transform(props7, { map }) {
+  const { orientation, thickness, color, ...rest } = props7;
   return {
     "--thickness": thickness,
     width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),

package/patterns/flex.mjs

@@ -2,14 +2,14 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const flexConfig = {
-transform(props6) {
-  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props6;
+transform(props7) {
+  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props7;
   return {
     display: "flex",
     flexDirection: direction,
     alignItems: align,
     justifyContent: justify,
-    flexWrap: wrap2,
+    flexWrap: wrap22,
     flexBasis: basis,
     flexGrow: grow,
     flexShrink: shrink,

package/patterns/float.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const floatConfig = {
-transform(props6, { map }) {
-  const { offset, offsetX, offsetY, placement, ...rest } = props6;
+transform(props7, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props7;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -38,8 +38,8 @@ transform(props6, { map }) {
     ...rest
   };
 },
-defaultValues(props6) {
-  const offset = props6.offset || "0";
+defaultValues(props7) {
+  const offset = props7.offset || "0";
   return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
 }}
 

package/patterns/grid-item.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
-transform(props6, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props6;
+transform(props7, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props7;
   const spanFn = (v) => v === "auto" ? v : `span ${v}`;
   return {
     gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,

package/patterns/grid.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridConfig = {
-transform(props6, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props6;
+transform(props7, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props7;
   const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
@@ -14,8 +14,8 @@ transform(props6, { map, isCssUnit }) {
     ...rest
   };
 },
-defaultValues(props6) {
-  return { gap: props6.columnGap || props6.rowGap ? void 0 : "10px" };
+defaultValues(props7) {
+  return { gap: props7.columnGap || props7.rowGap ? void 0 : "10px" };
 }}
 
 export const getGridStyle = (styles = {}) => {

package/patterns/hstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const hstackConfig = {
-transform(props6) {
-  const { justify, gap, ...rest } = props6;
+transform(props7) {
+  const { justify, gap, ...rest } = props7;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/link-box.mjs

@@ -2,14 +2,14 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkBoxConfig = {
-transform(props6) {
+transform(props7) {
   return {
     position: "relative",
     "& :where(a, abbr)": {
       position: "relative",
       zIndex: "1"
     },
-    ...props6
+    ...props7
   };
 }}
 

package/patterns/link-overlay.mjs

@@ -2,7 +2,7 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
-transform(props6) {
+transform(props7) {
   return {
     position: "static",
     _before: {
@@ -12,9 +12,9 @@ transform(props6) {
       cursor: "inherit",
       inset: "0",
       zIndex: "0",
-      ...props6["_before"]
+      ...props7["_before"]
     },
-    ...props6
+    ...props7
   };
 }}
 

package/patterns/spacer.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
-transform(props6, { map }) {
-  const { size, ...rest } = props6;
+transform(props7, { map }) {
+  const { size, ...rest } = props7;
   return {
     alignSelf: "stretch",
     justifySelf: "stretch",

package/patterns/square.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const squareConfig = {
-transform(props6) {
-  const { size, ...rest } = props6;
+transform(props7) {
+  const { size, ...rest } = props7;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/stack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const stackConfig = {
-transform(props6) {
-  const { align, justify, direction, gap, ...rest } = props6;
+transform(props7) {
+  const { align, justify, direction, gap, ...rest } = props7;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/visually-hidden.mjs

@@ -2,10 +2,10 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
-transform(props6) {
+transform(props7) {
   return {
     srOnly: true,
-    ...props6
+    ...props7
   };
 }}
 

package/patterns/vstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-transform(props6) {
-  const { justify, gap, ...rest } = props6;
+transform(props7) {
+  const { justify, gap, ...rest } = props7;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/wrap.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const wrapConfig = {
-transform(props6) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props6;
+transform(props7) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props7;
   return {
     display: "flex",
     flexWrap: "wrap",

package/recipes/index.d.ts

@@ -6,8 +6,12 @@ export * from './text';
 export * from './textarea';
 export * from './form-control';
 export * from './form-helper-text';
+export * from './input';
+export * from './input-addon';
+export * from './input-group';
 export * from './drawer';
 export * from './accordion';
 export * from './form-label';
 export * from './checkbox';
-export * from './tabs';
+export * from './tabs';
+export * from './select';

package/recipes/index.mjs

@@ -5,8 +5,12 @@ export * from './text.mjs';
 export * from './textarea.mjs';
 export * from './form-control.mjs';
 export * from './form-helper-text.mjs';
+export * from './input.mjs';
+export * from './input-addon.mjs';
+export * from './input-group.mjs';
 export * from './drawer.mjs';
 export * from './accordion.mjs';
 export * from './form-label.mjs';
 export * from './checkbox.mjs';
-export * from './tabs.mjs';
+export * from './tabs.mjs';
+export * from './select.mjs';

package/recipes/input-addon.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface InputAddonVariant {
+  
+}
+
+type InputAddonVariantMap = {
+  [key in keyof InputAddonVariant]: Array<InputAddonVariant[key]>
+}
+
+export type InputAddonVariantProps = {
+  [key in keyof InputAddonVariant]?: ConditionalValue<InputAddonVariant[key]> | undefined
+}
+
+export interface InputAddonRecipe {
+  __type: InputAddonVariantProps
+  (props?: InputAddonVariantProps): string
+  raw: (props?: InputAddonVariantProps) => InputAddonVariantProps
+  variantMap: InputAddonVariantMap
+  variantKeys: Array<keyof InputAddonVariant>
+  splitVariantProps<Props extends InputAddonVariantProps>(props: Props): [InputAddonVariantProps, Pretty<DistributiveOmit<Props, keyof InputAddonVariantProps>>]
+  getVariantProps: (props?: InputAddonVariantProps) => InputAddonVariantProps
+}
+
+/** The styles for the InputAddon component */
+export declare const inputAddon: InputAddonRecipe

package/recipes/input-addon.mjs

@@ -0,0 +1,24 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const inputAddonFn = /* @__PURE__ */ createRecipe('input-addon', {}, [])
+
+const inputAddonVariantMap = {}
+
+const inputAddonVariantKeys = Object.keys(inputAddonVariantMap)
+
+export const inputAddon = /* @__PURE__ */ Object.assign(memo(inputAddonFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'inputAddon',
+  __getCompoundVariantCss__: inputAddonFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: inputAddonVariantKeys,
+  variantMap: inputAddonVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, inputAddonVariantKeys)
+  },
+  getVariantProps: inputAddonFn.getVariantProps,
+})

package/recipes/input-group.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface InputGroupVariant {
+  
+}
+
+type InputGroupVariantMap = {
+  [key in keyof InputGroupVariant]: Array<InputGroupVariant[key]>
+}
+
+export type InputGroupVariantProps = {
+  [key in keyof InputGroupVariant]?: ConditionalValue<InputGroupVariant[key]> | undefined
+}
+
+export interface InputGroupRecipe {
+  __type: InputGroupVariantProps
+  (props?: InputGroupVariantProps): string
+  raw: (props?: InputGroupVariantProps) => InputGroupVariantProps
+  variantMap: InputGroupVariantMap
+  variantKeys: Array<keyof InputGroupVariant>
+  splitVariantProps<Props extends InputGroupVariantProps>(props: Props): [InputGroupVariantProps, Pretty<DistributiveOmit<Props, keyof InputGroupVariantProps>>]
+  getVariantProps: (props?: InputGroupVariantProps) => InputGroupVariantProps
+}
+
+/** The styles for the InputGroup component */
+export declare const inputGroup: InputGroupRecipe

package/recipes/input-group.mjs

@@ -0,0 +1,24 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const inputGroupFn = /* @__PURE__ */ createRecipe('input-group', {}, [])
+
+const inputGroupVariantMap = {}
+
+const inputGroupVariantKeys = Object.keys(inputGroupVariantMap)
+
+export const inputGroup = /* @__PURE__ */ Object.assign(memo(inputGroupFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'inputGroup',
+  __getCompoundVariantCss__: inputGroupFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: inputGroupVariantKeys,
+  variantMap: inputGroupVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, inputGroupVariantKeys)
+  },
+  getVariantProps: inputGroupFn.getVariantProps,
+})

package/recipes/input.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface InputVariant {
+  size: "md"
+}
+
+type InputVariantMap = {
+  [key in keyof InputVariant]: Array<InputVariant[key]>
+}
+
+export type InputVariantProps = {
+  [key in keyof InputVariant]?: ConditionalValue<InputVariant[key]> | undefined
+}
+
+export interface InputRecipe {
+  __type: InputVariantProps
+  (props?: InputVariantProps): string
+  raw: (props?: InputVariantProps) => InputVariantProps
+  variantMap: InputVariantMap
+  variantKeys: Array<keyof InputVariant>
+  splitVariantProps<Props extends InputVariantProps>(props: Props): [InputVariantProps, Pretty<DistributiveOmit<Props, keyof InputVariantProps>>]
+  getVariantProps: (props?: InputVariantProps) => InputVariantProps
+}
+
+/** The styles for the Input component */
+export declare const input: InputRecipe

package/recipes/input.mjs

@@ -0,0 +1,30 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const inputFn = /* @__PURE__ */ createRecipe('input', {
+  "size": "md"
+}, [])
+
+const inputVariantMap = {
+  "size": [
+    "md"
+  ]
+}
+
+const inputVariantKeys = Object.keys(inputVariantMap)
+
+export const input = /* @__PURE__ */ Object.assign(memo(inputFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'input',
+  __getCompoundVariantCss__: inputFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: inputVariantKeys,
+  variantMap: inputVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, inputVariantKeys)
+  },
+  getVariantProps: inputFn.getVariantProps,
+})

package/recipes/select.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface SelectVariant {
+  size: "md"
+}
+
+type SelectVariantMap = {
+  [key in keyof SelectVariant]: Array<SelectVariant[key]>
+}
+
+export type SelectVariantProps = {
+  [key in keyof SelectVariant]?: ConditionalValue<SelectVariant[key]> | undefined
+}
+
+export interface SelectRecipe {
+  __type: SelectVariantProps
+  (props?: SelectVariantProps): Pretty<Record<"label" | "positioner" | "trigger" | "indicator" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "content" | "root" | "control" | "valueText", string>>
+  raw: (props?: SelectVariantProps) => SelectVariantProps
+  variantMap: SelectVariantMap
+  variantKeys: Array<keyof SelectVariant>
+  splitVariantProps<Props extends SelectVariantProps>(props: Props): [SelectVariantProps, Pretty<DistributiveOmit<Props, keyof SelectVariantProps>>]
+  getVariantProps: (props?: SelectVariantProps) => SelectVariantProps
+}
+
+
+export declare const select: SelectRecipe

package/recipes/select.mjs

@@ -0,0 +1,92 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const selectDefaultVariants = {
+  "size": "md"
+}
+const selectCompoundVariants = []
+
+const selectSlotNames = [
+  [
+    "label",
+    "select__label"
+  ],
+  [
+    "positioner",
+    "select__positioner"
+  ],
+  [
+    "trigger",
+    "select__trigger"
+  ],
+  [
+    "indicator",
+    "select__indicator"
+  ],
+  [
+    "clearTrigger",
+    "select__clearTrigger"
+  ],
+  [
+    "item",
+    "select__item"
+  ],
+  [
+    "itemText",
+    "select__itemText"
+  ],
+  [
+    "itemIndicator",
+    "select__itemIndicator"
+  ],
+  [
+    "itemGroup",
+    "select__itemGroup"
+  ],
+  [
+    "itemGroupLabel",
+    "select__itemGroupLabel"
+  ],
+  [
+    "content",
+    "select__content"
+  ],
+  [
+    "root",
+    "select__root"
+  ],
+  [
+    "control",
+    "select__control"
+  ],
+  [
+    "valueText",
+    "select__valueText"
+  ]
+]
+const selectSlotFns = /* @__PURE__ */ selectSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, selectDefaultVariants, getSlotCompoundVariant(selectCompoundVariants, slotName))])
+
+const selectFn = memo((props = {}) => {
+  return Object.fromEntries(selectSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const selectVariantKeys = [
+  "size"
+]
+const getVariantProps = (variants) => ({ ...selectDefaultVariants, ...compact(variants) })
+
+export const select = /* @__PURE__ */ Object.assign(selectFn, {
+  __recipe__: false,
+  __name__: 'select',
+  raw: (props) => props,
+  variantKeys: selectVariantKeys,
+  variantMap: {
+  "size": [
+    "md"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, selectVariantKeys)
+  },
+  getVariantProps
+})

package/tokens/index.mjs

@@ -835,6 +835,10 @@ const tokens = {
     "value": "12px",
     "variable": "var(--spacing-space-12)"
   },
+  "spacing.space-10": {
+    "value": "10px",
+    "variable": "var(--spacing-space-10)"
+  },
   "spacing.space-14": {
     "value": "14px",
     "variable": "var(--spacing-space-14)"
@@ -843,6 +847,10 @@ const tokens = {
     "value": "16px",
     "variable": "var(--spacing-space-16)"
   },
+  "spacing.space-18": {
+    "value": "18px",
+    "variable": "var(--spacing-space-18)"
+  },
   "spacing.space-2": {
     "value": "2px",
     "variable": "var(--spacing-space-2)"
@@ -1259,6 +1267,10 @@ const tokens = {
     "value": "calc(var(--spacing-space-12) * -1)",
     "variable": "var(--spacing-space-12)"
   },
+  "spacing.-space-10": {
+    "value": "calc(var(--spacing-space-10) * -1)",
+    "variable": "var(--spacing-space-10)"
+  },
   "spacing.-space-14": {
     "value": "calc(var(--spacing-space-14) * -1)",
     "variable": "var(--spacing-space-14)"
@@ -1267,6 +1279,10 @@ const tokens = {
     "value": "calc(var(--spacing-space-16) * -1)",
     "variable": "var(--spacing-space-16)"
   },
+  "spacing.-space-18": {
+    "value": "calc(var(--spacing-space-18) * -1)",
+    "variable": "var(--spacing-space-18)"
+  },
   "spacing.-space-2": {
     "value": "calc(var(--spacing-space-2) * -1)",
     "variable": "var(--spacing-space-2)"

package/tokens/tokens.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export type Token = "animations.backdrop-in" | "animations.backdrop-out" | "animations.bounce" | "animations.dialog-in" | "animations.dialog-out" | "animations.drawer-in-left" | "animations.drawer-in-right" | "animations.drawer-out-left" | "animations.drawer-out-right" | "animations.fade-in" | "animations.ping" | "animations.pulse" | "animations.skeleton-pulse" | "animations.spin" | "animations.collapse-in" | "animations.collapse-out" | "aspectRatios.golden" | "aspectRatios.landscape" | "aspectRatios.portrait" | "aspectRatios.square" | "aspectRatios.ultrawide" | "aspectRatios.wide" | "blurs.2xl" | "blurs.3xl" | "blurs.base" | "blurs.lg" | "blurs.md" | "blurs.sm" | "blurs.xl" | "borders.border.none" | "colors.black" | "colors.current" | "colors.transparent" | "colors.white" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.grey.50" | "colors.grey.100" | "colors.grey.200" | "colors.grey.300" | "colors.grey.400" | "colors.grey.500" | "colors.grey.600" | "colors.grey.700" | "colors.grey.800" | "colors.grey.900" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "durations.fast" | "durations.faster" | "durations.fastest" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "easings.default" | "easings.ease-bounce-1" | "easings.ease-bounce-2" | "easings.ease-bounce-3" | "easings.ease-bounce-4" | "easings.ease-bounce-5" | "easings.ease-spring-1" | "easings.ease-spring-2" | "easings.ease-spring-3" | "easings.ease-spring-4" | "easings.ease-spring-5" | "easings.emphasized-in" | "easings.emphasized-out" | "easings.in" | "easings.in-out" | "easings.linear" | "easings.out" | "easings.pulse" | "fontSizes.body.lg" | "fontSizes.body.md" | "fontSizes.body.sm" | "fontSizes.heading.desktop.2xl" | "fontSizes.heading.desktop.lg" | "fontSizes.heading.desktop.md" | "fontSizes.heading.desktop.sm" | "fontSizes.heading.desktop.xs" | "fontSizes.heading.mobile.2xl" | "fontSizes.heading.mobile.lg" | "fontSizes.heading.mobile.md" | "fontSizes.heading.mobile.sm" | "fontSizes.heading.mobile.xs" | "fontWeights.black" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.medium" | "fontWeights.normal" | "fontWeights.semibold" | "fontWeights.thin" | "fonts.satoshi" | "fonts.cabinet" | "fonts.mono" | "fonts.sans" | "fonts.serif" | "letterSpacings.normal" | "letterSpacings.tight" | "letterSpacings.tighter" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "radii.radius-0" | "radii.radius-2" | "radii.radius-4" | "radii.radius-6" | "radii.radius-8" | "radii.radius-10" | "radii.radius-12" | "radii.radius-16" | "radii.radius-20" | "radii.radius-24" | "radii.radius-28" | "radii.radius-32" | "radii.radius-36" | "radii.radius-40" | "radii.radius-44" | "radii.radius-48" | "radii.radius-52" | "radii.radius-56" | "radii.radius-60" | "radii.radius-64" | "radii.full" | "shadows.2xl" | "shadows.inner" | "shadows.lg" | "shadows.md" | "shadows.sm" | "shadows.xl" | "shadows.xs" | "sizes.size-0" | "sizes.size-12" | "sizes.size-14" | "sizes.size-16" | "sizes.size-2" | "sizes.size-20" | "sizes.size-24" | "sizes.size-28" | "sizes.size-32" | "sizes.size-36" | "sizes.size-4" | "sizes.size-40" | "sizes.size-6" | "sizes.size-44" | "sizes.size-8" | "sizes.full" | "sizes.max" | "sizes.size-48" | "sizes.fit" | "sizes.size-52" | "sizes.min" | "sizes.size-56" | "sizes.size-60" | "sizes.size-64" | "sizes.size-68" | "sizes.size-72" | "sizes.size-76" | "sizes.size-80" | "sizes.breakpoint-xl" | "sizes.breakpoint-lg" | "sizes.breakpoint-md" | "sizes.breakpoint-sm" | "spacing.space-0" | "spacing.space-12" | "spacing.space-14" | "spacing.space-16" | "spacing.space-2" | "spacing.space-20" | "spacing.space-24" | "spacing.space-28" | "spacing.space-32" | "spacing.space-36" | "spacing.space-4" | "spacing.space-40" | "spacing.space-6" | "spacing.space-44" | "spacing.space-8" | "spacing.space-48" | "spacing.space-52" | "spacing.space-56" | "spacing.space-60" | "spacing.space-64" | "spacing.space-68" | "spacing.space-72" | "spacing.space-76" | "spacing.space-80" | "zIndex.banner" | "zIndex.base" | "zIndex.docked" | "zIndex.dropdown" | "zIndex.hide" | "zIndex.modal" | "zIndex.overlay" | "zIndex.popover" | "zIndex.skipLink" | "zIndex.sticky" | "zIndex.toast" | "zIndex.tooltip" | "breakpoints.xl" | "breakpoints.lg" | "breakpoints.md" | "breakpoints.sm" | "colors.decorative.red.light" | "colors.decorative.red.mid" | "colors.decorative.red.dark" | "colors.decorative.blue.light" | "colors.decorative.blue.mid" | "colors.decorative.blue.dark" | "colors.decorative.yellow.light" | "colors.decorative.yellow.mid" | "colors.decorative.yellow.dark" | "colors.decorative.purple.light" | "colors.decorative.purple.mid" | "colors.decorative.purple.dark" | "colors.decorative.green.light" | "colors.decorative.green.mid" | "colors.decorative.green.dark" | "colors.decorative.brown.light" | "colors.decorative.brown.mid" | "colors.decorative.brown.dark" | "colors.primary.100" | "colors.primary.200" | "colors.primary.300" | "colors.primary.400" | "colors.primary.500" | "colors.primary.600" | "colors.primary.700" | "colors.primary.800" | "colors.primary.900" | "colors.secondary.100" | "colors.secondary.200" | "colors.secondary.300" | "colors.secondary.400" | "colors.secondary.500" | "colors.secondary.600" | "colors.secondary.700" | "colors.secondary.800" | "colors.secondary.900" | "colors.error.100" | "colors.error.200" | "colors.error.300" | "colors.error.400" | "colors.error.500" | "colors.error.600" | "colors.error.700" | "colors.error.800" | "colors.error.900" | "colors.success.100" | "colors.success.200" | "colors.success.300" | "colors.success.400" | "colors.success.500" | "colors.success.600" | "colors.success.700" | "colors.success.800" | "colors.success.900" | "colors.warning.100" | "colors.warning.200" | "colors.warning.300" | "colors.warning.400" | "colors.warning.500" | "colors.warning.600" | "colors.warning.700" | "colors.warning.800" | "colors.warning.900" | "colors.text" | "colors.text.disabled" | "colors.text.heading" | "spacing.-space-0" | "spacing.-space-12" | "spacing.-space-14" | "spacing.-space-16" | "spacing.-space-2" | "spacing.-space-20" | "spacing.-space-24" | "spacing.-space-28" | "spacing.-space-32" | "spacing.-space-36" | "spacing.-space-4" | "spacing.-space-40" | "spacing.-space-6" | "spacing.-space-44" | "spacing.-space-8" | "spacing.-space-48" | "spacing.-space-52" | "spacing.-space-56" | "spacing.-space-60" | "spacing.-space-64" | "spacing.-space-68" | "spacing.-space-72" | "spacing.-space-76" | "spacing.-space-80" | "colors.colorPalette" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.50" | "colors.colorPalette.red.light" | "colors.colorPalette.light" | "colors.colorPalette.red.mid" | "colors.colorPalette.mid" | "colors.colorPalette.red.dark" | "colors.colorPalette.dark" | "colors.colorPalette.blue.light" | "colors.colorPalette.blue.mid" | "colors.colorPalette.blue.dark" | "colors.colorPalette.yellow.light" | "colors.colorPalette.yellow.mid" | "colors.colorPalette.yellow.dark" | "colors.colorPalette.purple.light" | "colors.colorPalette.purple.mid" | "colors.colorPalette.purple.dark" | "colors.colorPalette.green.light" | "colors.colorPalette.green.mid" | "colors.colorPalette.green.dark" | "colors.colorPalette.brown.light" | "colors.colorPalette.brown.mid" | "colors.colorPalette.brown.dark" | "colors.colorPalette.disabled" | "colors.colorPalette.heading"
+export type Token = "animations.backdrop-in" | "animations.backdrop-out" | "animations.bounce" | "animations.dialog-in" | "animations.dialog-out" | "animations.drawer-in-left" | "animations.drawer-in-right" | "animations.drawer-out-left" | "animations.drawer-out-right" | "animations.fade-in" | "animations.ping" | "animations.pulse" | "animations.skeleton-pulse" | "animations.spin" | "animations.collapse-in" | "animations.collapse-out" | "aspectRatios.golden" | "aspectRatios.landscape" | "aspectRatios.portrait" | "aspectRatios.square" | "aspectRatios.ultrawide" | "aspectRatios.wide" | "blurs.2xl" | "blurs.3xl" | "blurs.base" | "blurs.lg" | "blurs.md" | "blurs.sm" | "blurs.xl" | "borders.border.none" | "colors.black" | "colors.current" | "colors.transparent" | "colors.white" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.grey.50" | "colors.grey.100" | "colors.grey.200" | "colors.grey.300" | "colors.grey.400" | "colors.grey.500" | "colors.grey.600" | "colors.grey.700" | "colors.grey.800" | "colors.grey.900" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "durations.fast" | "durations.faster" | "durations.fastest" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "easings.default" | "easings.ease-bounce-1" | "easings.ease-bounce-2" | "easings.ease-bounce-3" | "easings.ease-bounce-4" | "easings.ease-bounce-5" | "easings.ease-spring-1" | "easings.ease-spring-2" | "easings.ease-spring-3" | "easings.ease-spring-4" | "easings.ease-spring-5" | "easings.emphasized-in" | "easings.emphasized-out" | "easings.in" | "easings.in-out" | "easings.linear" | "easings.out" | "easings.pulse" | "fontSizes.body.lg" | "fontSizes.body.md" | "fontSizes.body.sm" | "fontSizes.heading.desktop.2xl" | "fontSizes.heading.desktop.lg" | "fontSizes.heading.desktop.md" | "fontSizes.heading.desktop.sm" | "fontSizes.heading.desktop.xs" | "fontSizes.heading.mobile.2xl" | "fontSizes.heading.mobile.lg" | "fontSizes.heading.mobile.md" | "fontSizes.heading.mobile.sm" | "fontSizes.heading.mobile.xs" | "fontWeights.black" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.medium" | "fontWeights.normal" | "fontWeights.semibold" | "fontWeights.thin" | "fonts.satoshi" | "fonts.cabinet" | "fonts.mono" | "fonts.sans" | "fonts.serif" | "letterSpacings.normal" | "letterSpacings.tight" | "letterSpacings.tighter" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "radii.radius-0" | "radii.radius-2" | "radii.radius-4" | "radii.radius-6" | "radii.radius-8" | "radii.radius-10" | "radii.radius-12" | "radii.radius-16" | "radii.radius-20" | "radii.radius-24" | "radii.radius-28" | "radii.radius-32" | "radii.radius-36" | "radii.radius-40" | "radii.radius-44" | "radii.radius-48" | "radii.radius-52" | "radii.radius-56" | "radii.radius-60" | "radii.radius-64" | "radii.full" | "shadows.2xl" | "shadows.inner" | "shadows.lg" | "shadows.md" | "shadows.sm" | "shadows.xl" | "shadows.xs" | "sizes.size-0" | "sizes.size-12" | "sizes.size-14" | "sizes.size-16" | "sizes.size-2" | "sizes.size-20" | "sizes.size-24" | "sizes.size-28" | "sizes.size-32" | "sizes.size-36" | "sizes.size-4" | "sizes.size-40" | "sizes.size-6" | "sizes.size-44" | "sizes.size-8" | "sizes.full" | "sizes.max" | "sizes.size-48" | "sizes.fit" | "sizes.size-52" | "sizes.min" | "sizes.size-56" | "sizes.size-60" | "sizes.size-64" | "sizes.size-68" | "sizes.size-72" | "sizes.size-76" | "sizes.size-80" | "sizes.breakpoint-xl" | "sizes.breakpoint-lg" | "sizes.breakpoint-md" | "sizes.breakpoint-sm" | "spacing.space-0" | "spacing.space-12" | "spacing.space-10" | "spacing.space-14" | "spacing.space-16" | "spacing.space-18" | "spacing.space-2" | "spacing.space-20" | "spacing.space-24" | "spacing.space-28" | "spacing.space-32" | "spacing.space-36" | "spacing.space-4" | "spacing.space-40" | "spacing.space-6" | "spacing.space-44" | "spacing.space-8" | "spacing.space-48" | "spacing.space-52" | "spacing.space-56" | "spacing.space-60" | "spacing.space-64" | "spacing.space-68" | "spacing.space-72" | "spacing.space-76" | "spacing.space-80" | "zIndex.banner" | "zIndex.base" | "zIndex.docked" | "zIndex.dropdown" | "zIndex.hide" | "zIndex.modal" | "zIndex.overlay" | "zIndex.popover" | "zIndex.skipLink" | "zIndex.sticky" | "zIndex.toast" | "zIndex.tooltip" | "breakpoints.xl" | "breakpoints.lg" | "breakpoints.md" | "breakpoints.sm" | "colors.decorative.red.light" | "colors.decorative.red.mid" | "colors.decorative.red.dark" | "colors.decorative.blue.light" | "colors.decorative.blue.mid" | "colors.decorative.blue.dark" | "colors.decorative.yellow.light" | "colors.decorative.yellow.mid" | "colors.decorative.yellow.dark" | "colors.decorative.purple.light" | "colors.decorative.purple.mid" | "colors.decorative.purple.dark" | "colors.decorative.green.light" | "colors.decorative.green.mid" | "colors.decorative.green.dark" | "colors.decorative.brown.light" | "colors.decorative.brown.mid" | "colors.decorative.brown.dark" | "colors.primary.100" | "colors.primary.200" | "colors.primary.300" | "colors.primary.400" | "colors.primary.500" | "colors.primary.600" | "colors.primary.700" | "colors.primary.800" | "colors.primary.900" | "colors.secondary.100" | "colors.secondary.200" | "colors.secondary.300" | "colors.secondary.400" | "colors.secondary.500" | "colors.secondary.600" | "colors.secondary.700" | "colors.secondary.800" | "colors.secondary.900" | "colors.error.100" | "colors.error.200" | "colors.error.300" | "colors.error.400" | "colors.error.500" | "colors.error.600" | "colors.error.700" | "colors.error.800" | "colors.error.900" | "colors.success.100" | "colors.success.200" | "colors.success.300" | "colors.success.400" | "colors.success.500" | "colors.success.600" | "colors.success.700" | "colors.success.800" | "colors.success.900" | "colors.warning.100" | "colors.warning.200" | "colors.warning.300" | "colors.warning.400" | "colors.warning.500" | "colors.warning.600" | "colors.warning.700" | "colors.warning.800" | "colors.warning.900" | "colors.text" | "colors.text.disabled" | "colors.text.heading" | "spacing.-space-0" | "spacing.-space-12" | "spacing.-space-10" | "spacing.-space-14" | "spacing.-space-16" | "spacing.-space-18" | "spacing.-space-2" | "spacing.-space-20" | "spacing.-space-24" | "spacing.-space-28" | "spacing.-space-32" | "spacing.-space-36" | "spacing.-space-4" | "spacing.-space-40" | "spacing.-space-6" | "spacing.-space-44" | "spacing.-space-8" | "spacing.-space-48" | "spacing.-space-52" | "spacing.-space-56" | "spacing.-space-60" | "spacing.-space-64" | "spacing.-space-68" | "spacing.-space-72" | "spacing.-space-76" | "spacing.-space-80" | "colors.colorPalette" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.50" | "colors.colorPalette.red.light" | "colors.colorPalette.light" | "colors.colorPalette.red.mid" | "colors.colorPalette.mid" | "colors.colorPalette.red.dark" | "colors.colorPalette.dark" | "colors.colorPalette.blue.light" | "colors.colorPalette.blue.mid" | "colors.colorPalette.blue.dark" | "colors.colorPalette.yellow.light" | "colors.colorPalette.yellow.mid" | "colors.colorPalette.yellow.dark" | "colors.colorPalette.purple.light" | "colors.colorPalette.purple.mid" | "colors.colorPalette.purple.dark" | "colors.colorPalette.green.light" | "colors.colorPalette.green.mid" | "colors.colorPalette.green.dark" | "colors.colorPalette.brown.light" | "colors.colorPalette.brown.mid" | "colors.colorPalette.brown.dark" | "colors.colorPalette.disabled" | "colors.colorPalette.heading"
 
 export type ColorPalette = "black" | "current" | "transparent" | "white" | "purple" | "blue" | "grey" | "red" | "green" | "yellow" | "decorative" | "decorative.red" | "decorative.blue" | "decorative.yellow" | "decorative.purple" | "decorative.green" | "decorative.brown" | "primary" | "secondary" | "error" | "success" | "warning" | "text"
 
@@ -31,7 +31,7 @@ export type ShadowToken = "2xl" | "inner" | "lg" | "md" | "sm" | "xl" | "xs"
 
 export type SizeToken = "size-0" | "size-12" | "size-14" | "size-16" | "size-2" | "size-20" | "size-24" | "size-28" | "size-32" | "size-36" | "size-4" | "size-40" | "size-6" | "size-44" | "size-8" | "full" | "max" | "size-48" | "fit" | "size-52" | "min" | "size-56" | "size-60" | "size-64" | "size-68" | "size-72" | "size-76" | "size-80" | "breakpoint-xl" | "breakpoint-lg" | "breakpoint-md" | "breakpoint-sm"
 
-export type SpacingToken = "space-0" | "space-12" | "space-14" | "space-16" | "space-2" | "space-20" | "space-24" | "space-28" | "space-32" | "space-36" | "space-4" | "space-40" | "space-6" | "space-44" | "space-8" | "space-48" | "space-52" | "space-56" | "space-60" | "space-64" | "space-68" | "space-72" | "space-76" | "space-80" | "-space-0" | "-space-12" | "-space-14" | "-space-16" | "-space-2" | "-space-20" | "-space-24" | "-space-28" | "-space-32" | "-space-36" | "-space-4" | "-space-40" | "-space-6" | "-space-44" | "-space-8" | "-space-48" | "-space-52" | "-space-56" | "-space-60" | "-space-64" | "-space-68" | "-space-72" | "-space-76" | "-space-80"
+export type SpacingToken = "space-0" | "space-12" | "space-10" | "space-14" | "space-16" | "space-18" | "space-2" | "space-20" | "space-24" | "space-28" | "space-32" | "space-36" | "space-4" | "space-40" | "space-6" | "space-44" | "space-8" | "space-48" | "space-52" | "space-56" | "space-60" | "space-64" | "space-68" | "space-72" | "space-76" | "space-80" | "-space-0" | "-space-12" | "-space-10" | "-space-14" | "-space-16" | "-space-18" | "-space-2" | "-space-20" | "-space-24" | "-space-28" | "-space-32" | "-space-36" | "-space-4" | "-space-40" | "-space-6" | "-space-44" | "-space-8" | "-space-48" | "-space-52" | "-space-56" | "-space-60" | "-space-64" | "-space-68" | "-space-72" | "-space-76" | "-space-80"
 
 export type ZIndexToken = "banner" | "base" | "docked" | "dropdown" | "hide" | "modal" | "overlay" | "popover" | "skipLink" | "sticky" | "toast" | "tooltip"