@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;AACxE,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;AACpE,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC/E,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAiHlD,KAAK,YAAY,GAAG,aAAa,GAC/B,cAAc,GAAG;IACf,KAAK,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;CACjC,CAAA;AAEH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAAC,CAAC,EAAE,YAAY,CAAC,CAAA;AAE9F,eAAO,MAAM,IAAI,uJAwEf,CAAA"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;AACxE,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;AACpE,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC/E,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;AAiHlD,KAAK,YAAY,GAAG,aAAa,GAC/B,cAAc,GAAG;IACf,KAAK,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;CACjC,CAAA;AAEH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAAC,CAAC,EAAE,YAAY,CAAC,CAAA;AAE9F,eAAO,MAAM,IAAI,uJA4Ef,CAAA"}

package/dist/components/flex/Flex.js

@@ -106,7 +106,7 @@ const Flex = React.forwardRef(function Flex2({
     gridArea,
     ...layoutProps
   } = props;
-  const resolvedProps = extractLayoutProps(layoutProps, BOX_PROP_DEFS, FLEX_PROP_DEFS);
+  const resolvedProps = extractLayoutProps({ ...layoutProps, gap }, BOX_PROP_DEFS, FLEX_PROP_DEFS);
   const mergedStyle = writeBoxChildStyleVars(style, {
     flex,
     flexGrow,

package/dist/components/flex/Flex.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/flex/Flex.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Slot } from '../slot/Slot'\nimport {\n  BOX_PROP_DEFS,\n  FLEX_PROP_DEFS,\n  extractLayoutProps,\n  type BoxStyleProps,\n  type FlexStyleProps,\n} from '../../layout/layout.props'\nimport {\n  assignResponsiveVars,\n  toResponsiveMap,\n  type ResponsiveCondition,\n  type ResponsiveValue,\n} from '../../layout/responsive.props'\nimport { type PolymorphicProps } from '../../foundations/Shared'\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'\ntype FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'\ntype FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\ntype FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'\n\nconst RESPONSIVE_CONDITIONS: ResponsiveCondition[] = ['initial', 'sm', 'md', 'lg', 'xl', '2xl']\n\nconst directionUtilityValues = new Set<string>(['row', 'column', 'row-reverse', 'column-reverse'])\nconst alignUtilityValues = new Set<string>(['start', 'center', 'end', 'stretch', 'baseline'])\nconst justifyUtilityValues = new Set<string>(['start', 'center', 'end', 'between', 'around', 'evenly'])\nconst wrapUtilityValues = new Set<string>(['nowrap', 'wrap', 'wrap-reverse'])\n\nfunction getUtilityClassValue(value: string) {\n  if (value === 'none') {\n    return '0'\n  }\n  return value.split('_').join('-')\n}\n\nfunction getResponsiveUtilityClassNames<T extends string | number | boolean>(\n  className: string,\n  value: ResponsiveValue<T> | undefined,\n  utilityValues: Set<string>,\n) {\n  const responsive = toResponsiveMap(value)\n  const classNames: string[] = []\n  const conditions: ResponsiveCondition[] = ['initial', ...RESPONSIVE_CONDITIONS.filter((condition) => condition !== 'initial')]\n\n  for (const condition of conditions) {\n    const nextValue = responsive[condition]\n\n    if (nextValue === undefined) {\n      continue\n    }\n\n    const baseClassName =\n      typeof nextValue === 'string' && utilityValues.has(nextValue)\n        ? `${className}-${getUtilityClassValue(nextValue)}`\n        : className\n    classNames.push(condition === 'initial' ? baseClassName : `${condition}:${baseClassName}`)\n  }\n\n  return classNames.length > 0 ? classNames.join(' ') : undefined\n}\n\nfunction getFlexUtilityClassName({\n  align,\n  direction,\n  justify,\n  wrap,\n}: {\n  align?: ResponsiveValue<FlexAlign>\n  direction?: ResponsiveValue<FlexDirection>\n  justify?: ResponsiveValue<FlexJustify>\n  wrap?: ResponsiveValue<FlexWrap>\n}) {\n  return classNames(\n    getResponsiveUtilityClassNames('dsx-r-fd', direction, directionUtilityValues),\n    getResponsiveUtilityClassNames('dsx-r-ai', align, alignUtilityValues),\n    getResponsiveUtilityClassNames('dsx-r-jc', justify, justifyUtilityValues),\n    getResponsiveUtilityClassNames('dsx-r-fw', wrap, wrapUtilityValues),\n  )\n}\n\nfunction serializeResponsiveValue<T extends string | number | boolean>(value: ResponsiveValue<T> | undefined) {\n  const responsive = toResponsiveMap(value)\n  const entries = RESPONSIVE_CONDITIONS.flatMap((condition) => {\n    const nextValue = responsive[condition]\n\n    if (nextValue === undefined) {\n      return []\n    }\n\n    return [[condition, nextValue] as const]\n  })\n\n  if (entries.length === 0) {\n    return undefined\n  }\n\n  if (entries.length === 1 && entries[0][0] === 'initial') {\n    return String(entries[0][1])\n  }\n\n  return entries.map(([condition, nextValue]) => `${condition}:${String(nextValue)}`).join(';')\n}\n\n/**\n * Write child-sizing custom properties to a style object so box.css\n * can consume them via var(--dsx-box-flex, initial) etc.\n */\nfunction writeBoxChildStyleVars(\n  style: React.CSSProperties | undefined,\n  props: {\n    flex?: ResponsiveValue<number | string>\n    flexGrow?: ResponsiveValue<number>\n    flexShrink?: ResponsiveValue<number>\n    flexBasis?: ResponsiveValue<number | string>\n    order?: ResponsiveValue<number>\n    gridColumn?: ResponsiveValue<string>\n    gridRow?: ResponsiveValue<string>\n    gridArea?: ResponsiveValue<string>\n  },\n): React.CSSProperties {\n  const vars: Record<`--${string}`, string | number | undefined> = {}\n  assignResponsiveVars(vars, 'dsx-box-flex', props.flex, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-flex-grow', props.flexGrow, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-flex-shrink', props.flexShrink, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-flex-basis', props.flexBasis, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-order', props.order, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-grid-column', props.gridColumn, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-grid-row', props.gridRow, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-grid-area', props.gridArea, (value) => String(value))\n  return Object.keys(vars).length > 0 ? { ...vars, ...style } : style ?? {}\n}\n\ntype FlexOwnProps = BoxStyleProps &\n  FlexStyleProps & {\n    align?: ResponsiveValue<FlexAlign>\n    direction?: ResponsiveValue<FlexDirection>\n    justify?: ResponsiveValue<FlexJustify>\n    wrap?: ResponsiveValue<FlexWrap>\n  }\n\nexport type FlexProps<T extends React.ElementType = 'div'> = PolymorphicProps<T, FlexOwnProps>\n\nexport const Flex = React.forwardRef(function Flex<T extends React.ElementType = 'div'>(\n  {\n    align,\n    as,\n    asChild = false,\n    children,\n    className,\n    direction = 'row',\n    gap,\n    hide,\n    justify,\n    show,\n    style,\n    wrap = 'nowrap',\n    ...props\n  }: FlexProps<T>,\n  ref: React.Ref<HTMLElement>,\n) {\n  const Component = asChild ? Slot : (as ?? 'div')\n\n  // Extract child-sizing props before passing to extractLayoutProps\n  const {\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    order,\n    gridColumn,\n    gridRow,\n    gridArea,\n    ...layoutProps\n  } = props\n\n  const resolvedProps = extractLayoutProps(layoutProps, BOX_PROP_DEFS, FLEX_PROP_DEFS)\n\n  const mergedStyle = writeBoxChildStyleVars(style, {\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    order,\n    gridColumn,\n    gridRow,\n    gridArea,\n  })\n\n  const displayVars: Record<`--${string}`, string | number | undefined> = {}\n  assignResponsiveVars(displayVars, 'dsx-box-display', hide, (value) => (value ? 'none' : 'flex'))\n  assignResponsiveVars(displayVars, 'dsx-box-display', show, (value) => (value ? 'flex' : 'none'))\n  const finalStyle = Object.keys(displayVars).length > 0\n    ? { ...displayVars, ...mergedStyle }\n    : mergedStyle\n\n  return (\n    <Component\n      {...resolvedProps}\n      ref={ref as never}\n      className={classNames(\n        'dsx-box',\n        'dsx-flex',\n        getFlexUtilityClassName({ align, direction, justify, wrap }),\n        resolvedProps.className,\n        className,\n      )}\n      data-gap={serializeResponsiveValue(gap)}\n      data-align={serializeResponsiveValue(align)}\n      data-justify={serializeResponsiveValue(justify)}\n      style={finalStyle}\n    >\n      {children}\n    </Component>\n  )\n})\n\nFlex.displayName = 'Flex'\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Slot } from '../slot/Slot'\nimport {\n  BOX_PROP_DEFS,\n  FLEX_PROP_DEFS,\n  extractLayoutProps,\n  type BoxStyleProps,\n  type FlexStyleProps,\n} from '../../layout/layout.props'\nimport {\n  assignResponsiveVars,\n  toResponsiveMap,\n  type ResponsiveCondition,\n  type ResponsiveValue,\n} from '../../layout/responsive.props'\nimport { type PolymorphicProps } from '../../foundations/Shared'\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'\ntype FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'\ntype FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\ntype FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'\n\nconst RESPONSIVE_CONDITIONS: ResponsiveCondition[] = ['initial', 'sm', 'md', 'lg', 'xl', '2xl']\n\nconst directionUtilityValues = new Set<string>(['row', 'column', 'row-reverse', 'column-reverse'])\nconst alignUtilityValues = new Set<string>(['start', 'center', 'end', 'stretch', 'baseline'])\nconst justifyUtilityValues = new Set<string>(['start', 'center', 'end', 'between', 'around', 'evenly'])\nconst wrapUtilityValues = new Set<string>(['nowrap', 'wrap', 'wrap-reverse'])\n\nfunction getUtilityClassValue(value: string) {\n  if (value === 'none') {\n    return '0'\n  }\n  return value.split('_').join('-')\n}\n\nfunction getResponsiveUtilityClassNames<T extends string | number | boolean>(\n  className: string,\n  value: ResponsiveValue<T> | undefined,\n  utilityValues: Set<string>,\n) {\n  const responsive = toResponsiveMap(value)\n  const classNames: string[] = []\n  const conditions: ResponsiveCondition[] = ['initial', ...RESPONSIVE_CONDITIONS.filter((condition) => condition !== 'initial')]\n\n  for (const condition of conditions) {\n    const nextValue = responsive[condition]\n\n    if (nextValue === undefined) {\n      continue\n    }\n\n    const baseClassName =\n      typeof nextValue === 'string' && utilityValues.has(nextValue)\n        ? `${className}-${getUtilityClassValue(nextValue)}`\n        : className\n    classNames.push(condition === 'initial' ? baseClassName : `${condition}:${baseClassName}`)\n  }\n\n  return classNames.length > 0 ? classNames.join(' ') : undefined\n}\n\nfunction getFlexUtilityClassName({\n  align,\n  direction,\n  justify,\n  wrap,\n}: {\n  align?: ResponsiveValue<FlexAlign>\n  direction?: ResponsiveValue<FlexDirection>\n  justify?: ResponsiveValue<FlexJustify>\n  wrap?: ResponsiveValue<FlexWrap>\n}) {\n  return classNames(\n    getResponsiveUtilityClassNames('dsx-r-fd', direction, directionUtilityValues),\n    getResponsiveUtilityClassNames('dsx-r-ai', align, alignUtilityValues),\n    getResponsiveUtilityClassNames('dsx-r-jc', justify, justifyUtilityValues),\n    getResponsiveUtilityClassNames('dsx-r-fw', wrap, wrapUtilityValues),\n  )\n}\n\nfunction serializeResponsiveValue<T extends string | number | boolean>(value: ResponsiveValue<T> | undefined) {\n  const responsive = toResponsiveMap(value)\n  const entries = RESPONSIVE_CONDITIONS.flatMap((condition) => {\n    const nextValue = responsive[condition]\n\n    if (nextValue === undefined) {\n      return []\n    }\n\n    return [[condition, nextValue] as const]\n  })\n\n  if (entries.length === 0) {\n    return undefined\n  }\n\n  if (entries.length === 1 && entries[0][0] === 'initial') {\n    return String(entries[0][1])\n  }\n\n  return entries.map(([condition, nextValue]) => `${condition}:${String(nextValue)}`).join(';')\n}\n\n/**\n * Write child-sizing custom properties to a style object so box.css\n * can consume them via var(--dsx-box-flex, initial) etc.\n */\nfunction writeBoxChildStyleVars(\n  style: React.CSSProperties | undefined,\n  props: {\n    flex?: ResponsiveValue<number | string>\n    flexGrow?: ResponsiveValue<number>\n    flexShrink?: ResponsiveValue<number>\n    flexBasis?: ResponsiveValue<number | string>\n    order?: ResponsiveValue<number>\n    gridColumn?: ResponsiveValue<string>\n    gridRow?: ResponsiveValue<string>\n    gridArea?: ResponsiveValue<string>\n  },\n): React.CSSProperties {\n  const vars: Record<`--${string}`, string | number | undefined> = {}\n  assignResponsiveVars(vars, 'dsx-box-flex', props.flex, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-flex-grow', props.flexGrow, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-flex-shrink', props.flexShrink, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-flex-basis', props.flexBasis, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-order', props.order, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-grid-column', props.gridColumn, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-grid-row', props.gridRow, (value) => String(value))\n  assignResponsiveVars(vars, 'dsx-box-grid-area', props.gridArea, (value) => String(value))\n  return Object.keys(vars).length > 0 ? { ...vars, ...style } : style ?? {}\n}\n\ntype FlexOwnProps = BoxStyleProps &\n  FlexStyleProps & {\n    align?: ResponsiveValue<FlexAlign>\n    direction?: ResponsiveValue<FlexDirection>\n    justify?: ResponsiveValue<FlexJustify>\n    wrap?: ResponsiveValue<FlexWrap>\n  }\n\nexport type FlexProps<T extends React.ElementType = 'div'> = PolymorphicProps<T, FlexOwnProps>\n\nexport const Flex = React.forwardRef(function Flex<T extends React.ElementType = 'div'>(\n  {\n    align,\n    as,\n    asChild = false,\n    children,\n    className,\n    direction = 'row',\n    gap,\n    hide,\n    justify,\n    show,\n    style,\n    wrap = 'nowrap',\n    ...props\n  }: FlexProps<T>,\n  ref: React.Ref<HTMLElement>,\n) {\n  const Component = asChild ? Slot : (as ?? 'div')\n\n  // Extract child-sizing props before passing to extractLayoutProps\n  const {\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    order,\n    gridColumn,\n    gridRow,\n    gridArea,\n    ...layoutProps\n  } = props\n\n  // `gap` was destructured out above (to read it for `data-gap`) but never made it back\n  // into the props object handed to extractLayoutProps \u2014 so it was silently dropped for\n  // every Flex, at every gap value. Re-added here; Grid's own component already does\n  // this correctly (`gap: responsiveGap` in its own propsForExtraction object).\n  const resolvedProps = extractLayoutProps({ ...layoutProps, gap }, BOX_PROP_DEFS, FLEX_PROP_DEFS)\n\n  const mergedStyle = writeBoxChildStyleVars(style, {\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    order,\n    gridColumn,\n    gridRow,\n    gridArea,\n  })\n\n  const displayVars: Record<`--${string}`, string | number | undefined> = {}\n  assignResponsiveVars(displayVars, 'dsx-box-display', hide, (value) => (value ? 'none' : 'flex'))\n  assignResponsiveVars(displayVars, 'dsx-box-display', show, (value) => (value ? 'flex' : 'none'))\n  const finalStyle = Object.keys(displayVars).length > 0\n    ? { ...displayVars, ...mergedStyle }\n    : mergedStyle\n\n  return (\n    <Component\n      {...resolvedProps}\n      ref={ref as never}\n      className={classNames(\n        'dsx-box',\n        'dsx-flex',\n        getFlexUtilityClassName({ align, direction, justify, wrap }),\n        resolvedProps.className,\n        className,\n      )}\n      data-gap={serializeResponsiveValue(gap)}\n      data-align={serializeResponsiveValue(align)}\n      data-justify={serializeResponsiveValue(justify)}\n      style={finalStyle}\n    >\n      {children}\n    </Component>\n  )\n})\n\nFlex.displayName = 'Flex'\n"],
+  "mappings": "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",
   "names": ["classNames", "Flex"]
 }

package/dist/components/flex.css

@@ -4,34 +4,58 @@
 
 .dsx-flex {
   display: var(--dsx-box-display, flex);
+  flex-direction: var(--dsx-flex-direction, row);
+  align-items: var(--dsx-flex-align, stretch);
+  justify-content: var(--dsx-flex-justify, flex-start);
+  flex-wrap: var(--dsx-flex-wrap, nowrap);
 }
 
 @media (min-width: 640px) {
   .dsx-flex {
     display: var(--dsx-box-display-sm, var(--dsx-box-display, flex));
+    flex-direction: var(--dsx-flex-direction-sm, var(--dsx-flex-direction, row));
+    align-items: var(--dsx-flex-align-sm, var(--dsx-flex-align, stretch));
+    justify-content: var(--dsx-flex-justify-sm, var(--dsx-flex-justify, flex-start));
+    flex-wrap: var(--dsx-flex-wrap-sm, var(--dsx-flex-wrap, nowrap));
   }
 }
 
 @media (min-width: 768px) {
   .dsx-flex {
     display: var(--dsx-box-display-md, var(--dsx-box-display-sm, var(--dsx-box-display, flex)));
+    flex-direction: var(--dsx-flex-direction-md, var(--dsx-flex-direction-sm, var(--dsx-flex-direction, row)));
+    align-items: var(--dsx-flex-align-md, var(--dsx-flex-align-sm, var(--dsx-flex-align, stretch)));
+    justify-content: var(--dsx-flex-justify-md, var(--dsx-flex-justify-sm, var(--dsx-flex-justify, flex-start)));
+    flex-wrap: var(--dsx-flex-wrap-md, var(--dsx-flex-wrap-sm, var(--dsx-flex-wrap, nowrap)));
   }
 }
 
 @media (min-width: 1024px) {
   .dsx-flex {
     display: var(--dsx-box-display-lg, var(--dsx-box-display-md, var(--dsx-box-display-sm, var(--dsx-box-display, flex))));
+    flex-direction: var(--dsx-flex-direction-lg, var(--dsx-flex-direction-md, var(--dsx-flex-direction-sm, var(--dsx-flex-direction, row))));
+    align-items: var(--dsx-flex-align-lg, var(--dsx-flex-align-md, var(--dsx-flex-align-sm, var(--dsx-flex-align, stretch))));
+    justify-content: var(--dsx-flex-justify-lg, var(--dsx-flex-justify-md, var(--dsx-flex-justify-sm, var(--dsx-flex-justify, flex-start))));
+    flex-wrap: var(--dsx-flex-wrap-lg, var(--dsx-flex-wrap-md, var(--dsx-flex-wrap-sm, var(--dsx-flex-wrap, nowrap))));
   }
 }
 
 @media (min-width: 1280px) {
   .dsx-flex {
     display: var(--dsx-box-display-xl, var(--dsx-box-display-lg, var(--dsx-box-display-md, var(--dsx-box-display-sm, var(--dsx-box-display, flex)))));
+    flex-direction: var(--dsx-flex-direction-xl, var(--dsx-flex-direction-lg, var(--dsx-flex-direction-md, var(--dsx-flex-direction-sm, var(--dsx-flex-direction, row)))));
+    align-items: var(--dsx-flex-align-xl, var(--dsx-flex-align-lg, var(--dsx-flex-align-md, var(--dsx-flex-align-sm, var(--dsx-flex-align, stretch)))));
+    justify-content: var(--dsx-flex-justify-xl, var(--dsx-flex-justify-lg, var(--dsx-flex-justify-md, var(--dsx-flex-justify-sm, var(--dsx-flex-justify, flex-start)))));
+    flex-wrap: var(--dsx-flex-wrap-xl, var(--dsx-flex-wrap-lg, var(--dsx-flex-wrap-md, var(--dsx-flex-wrap-sm, var(--dsx-flex-wrap, nowrap)))));
   }
 }
 
 @media (min-width: 1536px) {
   .dsx-flex {
     display: var(--dsx-box-display-2xl, var(--dsx-box-display-xl, var(--dsx-box-display-lg, var(--dsx-box-display-md, var(--dsx-box-display-sm, var(--dsx-box-display, flex))))));
+    flex-direction: var(--dsx-flex-direction-2xl, var(--dsx-flex-direction-xl, var(--dsx-flex-direction-lg, var(--dsx-flex-direction-md, var(--dsx-flex-direction-sm, var(--dsx-flex-direction, row))))));
+    align-items: var(--dsx-flex-align-2xl, var(--dsx-flex-align-xl, var(--dsx-flex-align-lg, var(--dsx-flex-align-md, var(--dsx-flex-align-sm, var(--dsx-flex-align, stretch))))));
+    justify-content: var(--dsx-flex-justify-2xl, var(--dsx-flex-justify-xl, var(--dsx-flex-justify-lg, var(--dsx-flex-justify-md, var(--dsx-flex-justify-sm, var(--dsx-flex-justify, flex-start))))));
+    flex-wrap: var(--dsx-flex-wrap-2xl, var(--dsx-flex-wrap-xl, var(--dsx-flex-wrap-lg, var(--dsx-flex-wrap-md, var(--dsx-flex-wrap-sm, var(--dsx-flex-wrap, nowrap))))));
   }
 }

package/dist/components/floating-panel.css

@@ -5,16 +5,17 @@
   display: flex;
   flex-direction: column;
   border-radius: var(--dsx-rounded-xl);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  background: var(--dsx-color-surface-overlay);
-  box-shadow: var(--dsx-shadow-md);
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  box-shadow: var(--dsx-shadow-elevation-2);
   overflow: hidden;
   z-index: var(--dsx-z-index-overlay-local);
   transition: box-shadow var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
 .dsx-floating-panel[data-dragging] {
-  box-shadow: var(--dsx-shadow-xl);
+  box-shadow: var(--dsx-shadow-elevation-4);
   cursor: grabbing;
 }
 

package/dist/components/fontProvider/FontProvider.cjs

@@ -37,45 +37,69 @@ var React = __toESM(require("react"), 1);
 var import_fontProvider = require("./fontProvider.props");
 var import_jsx_runtime = require("react/jsx-runtime");
 const FontContext = React.createContext(null);
-const MERRIWEATHER_GOOGLE_FONTS_URL = "https://fonts.googleapis.com/css2?family=Merriweather:opsz,wght@7..72,400;7..72,700;7..72,900&display=swap&subset=cyrillic,latin";
+const DEFAULT_GOOGLE_FONTS_URL = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Science+Gothic:CTRS,slnt,wdth,wght@0..75,-10..0,50..200,100..900&display=swap&subset=cyrillic,latin";
+const DISPLAY_FONT_VARS = [
+  "--dsx-typography-display-large-font-family",
+  "--dsx-typography-display-medium-font-family",
+  "--dsx-typography-headline-large-font-family",
+  "--dsx-typography-headline-medium-font-family"
+];
+const BODY_FONT_VARS = [
+  "--dsx-typography-body-large-font-family",
+  "--dsx-typography-body-medium-font-family",
+  "--dsx-typography-body-small-font-family",
+  "--dsx-typography-label-large-font-family",
+  "--dsx-typography-label-medium-font-family",
+  "--dsx-typography-label-small-font-family"
+];
 function FontProvider({
   children,
-  fontFamily = "var(--dsx-typography-body-medium-font-family, sans-serif)",
-  displayFontFamily = "var(--dsx-typography-display-font-family, serif)",
+  fontFamily = "Science Gothic, ui-sans-serif, system-ui, sans-serif",
+  displayFontFamily = "Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif",
   loadGoogleFonts = false
 }) {
   const contextValue = React.useMemo(
     () => ({ fontFamily }),
     [fontFamily]
   );
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const html = document.documentElement;
-    const previousFont = html.style.getPropertyValue("--dsx-font-family");
-    const previousDisplayFont = html.style.getPropertyValue("--dsx-display-font-family");
-    html.style.setProperty("--dsx-font-family", fontFamily);
-    html.style.setProperty("--dsx-display-font-family", displayFontFamily);
-    return () => {
-      if (previousFont) {
-        html.style.setProperty("--dsx-font-family", previousFont);
-      } else {
-        html.style.removeProperty("--dsx-font-family");
+    const body = document.body;
+    const elements = body ? [html, body] : [html];
+    const previousValues = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      const previous = /* @__PURE__ */ new Map();
+      for (const name of DISPLAY_FONT_VARS) {
+        previous.set(name, el.style.getPropertyValue(name));
+        el.style.setProperty(name, displayFontFamily);
       }
-      if (previousDisplayFont) {
-        html.style.setProperty("--dsx-display-font-family", previousDisplayFont);
-      } else {
-        html.style.removeProperty("--dsx-display-font-family");
+      for (const name of BODY_FONT_VARS) {
+        previous.set(name, el.style.getPropertyValue(name));
+        el.style.setProperty(name, fontFamily);
+      }
+      previousValues.set(el, previous);
+    }
+    return () => {
+      for (const [el, previous] of previousValues) {
+        for (const [name, value] of previous) {
+          if (value) {
+            el.style.setProperty(name, value);
+          } else {
+            el.style.removeProperty(name);
+          }
+        }
       }
     };
   }, [fontFamily, displayFontFamily]);
   React.useEffect(() => {
     if (!loadGoogleFonts) return;
     if (typeof document === "undefined") return;
-    const linkId = "dsx-font-provider-merriweather";
+    const linkId = "dsx-font-provider-default-fonts";
     if (document.getElementById(linkId)) return;
     const link = document.createElement("link");
     link.id = linkId;
     link.rel = "stylesheet";
-    link.href = MERRIWEATHER_GOOGLE_FONTS_URL;
+    link.href = DEFAULT_GOOGLE_FONTS_URL;
     document.head.appendChild(link);
     return () => {
       const existing = document.getElementById(linkId);
@@ -89,7 +113,7 @@ function FontProvider({
 function useFont() {
   const context = React.useContext(FontContext);
   if (!context) {
-    return { fontFamily: "var(--dsx-typography-body-medium-font-family, sans-serif)" };
+    return { fontFamily: "Science Gothic, ui-sans-serif, system-ui, sans-serif" };
   }
   return context;
 }

package/dist/components/fontProvider/FontProvider.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/fontProvider/FontProvider.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { type FontProviderProps } from './fontProvider.props'\n\ntype FontContextValue = {\n  fontFamily: string\n}\n\nconst FontContext = React.createContext<FontContextValue | null>(null)\n\nconst MERRIWEATHER_GOOGLE_FONTS_URL =\n  'https://fonts.googleapis.com/css2?family=Merriweather:opsz,wght@7..72,400;7..72,700;7..72,900&display=swap&subset=cyrillic,latin'\n\nfunction FontProvider({\n  children,\n  fontFamily = 'var(--dsx-typography-body-medium-font-family, sans-serif)',\n  displayFontFamily = 'var(--dsx-typography-display-font-family, serif)',\n  loadGoogleFonts = false,\n}: FontProviderProps) {\n  const contextValue = React.useMemo<FontContextValue>(\n    () => ({ fontFamily }),\n    [fontFamily],\n  )\n\n  React.useEffect(() => {\n    const html = document.documentElement\n    const previousFont = html.style.getPropertyValue('--dsx-font-family')\n    const previousDisplayFont = html.style.getPropertyValue('--dsx-display-font-family')\n\n    html.style.setProperty('--dsx-font-family', fontFamily)\n    html.style.setProperty('--dsx-display-font-family', displayFontFamily)\n\n    return () => {\n      if (previousFont) {\n        html.style.setProperty('--dsx-font-family', previousFont)\n      } else {\n        html.style.removeProperty('--dsx-font-family')\n      }\n      if (previousDisplayFont) {\n        html.style.setProperty('--dsx-display-font-family', previousDisplayFont)\n      } else {\n        html.style.removeProperty('--dsx-display-font-family')\n      }\n    }\n  }, [fontFamily, displayFontFamily])\n\n  // Inject Google Fonts link for Merriweather when cyrillic support is requested\n  React.useEffect(() => {\n    if (!loadGoogleFonts) return\n    if (typeof document === 'undefined') return\n\n    const linkId = 'dsx-font-provider-merriweather'\n    if (document.getElementById(linkId)) return\n\n    const link = document.createElement('link')\n    link.id = linkId\n    link.rel = 'stylesheet'\n    link.href = MERRIWEATHER_GOOGLE_FONTS_URL\n    document.head.appendChild(link)\n\n    return () => {\n      const existing = document.getElementById(linkId)\n      if (existing) {\n        document.head.removeChild(existing)\n      }\n    }\n  }, [loadGoogleFonts])\n\n  return (\n    <FontContext.Provider value={contextValue}>\n      {children}\n    </FontContext.Provider>\n  )\n}\n\nfunction useFont(): FontContextValue {\n  const context = React.useContext(FontContext)\n\n  if (!context) {\n    return { fontFamily: 'var(--dsx-typography-body-medium-font-family, sans-serif)' }\n  }\n\n  return context\n}\n\nexport { FontProvider, useFont }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AAEvB,0BAAuC;AAmEnC;AA7DJ,MAAM,cAAc,MAAM,cAAuC,IAAI;AAErE,MAAM,gCACJ;AAEF,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAsB;AACpB,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO,EAAE,WAAW;AAAA,IACpB,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,SAAS;AACtB,UAAM,eAAe,KAAK,MAAM,iBAAiB,mBAAmB;AACpE,UAAM,sBAAsB,KAAK,MAAM,iBAAiB,2BAA2B;AAEnF,SAAK,MAAM,YAAY,qBAAqB,UAAU;AACtD,SAAK,MAAM,YAAY,6BAA6B,iBAAiB;AAErE,WAAO,MAAM;AACX,UAAI,cAAc;AAChB,aAAK,MAAM,YAAY,qBAAqB,YAAY;AAAA,MAC1D,OAAO;AACL,aAAK,MAAM,eAAe,mBAAmB;AAAA,MAC/C;AACA,UAAI,qBAAqB;AACvB,aAAK,MAAM,YAAY,6BAA6B,mBAAmB;AAAA,MACzE,OAAO;AACL,aAAK,MAAM,eAAe,2BAA2B;AAAA,MACvD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,CAAC;AAGlC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,gBAAiB;AACtB,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,SAAS;AACf,QAAI,SAAS,eAAe,MAAM,EAAG;AAErC,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,KAAK;AACV,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,aAAS,KAAK,YAAY,IAAI;AAE9B,WAAO,MAAM;AACX,YAAM,WAAW,SAAS,eAAe,MAAM;AAC/C,UAAI,UAAU;AACZ,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,4CAAC,YAAY,UAAZ,EAAqB,OAAO,cAC1B,UACH;AAEJ;AAEA,SAAS,UAA4B;AACnC,QAAM,UAAU,MAAM,WAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO,EAAE,YAAY,4DAA4D;AAAA,EACnF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { type FontProviderProps } from './fontProvider.props'\n\ntype FontContextValue = {\n  fontFamily: string\n}\n\nconst FontContext = React.createContext<FontContextValue | null>(null)\n\nconst DEFAULT_GOOGLE_FONTS_URL =\n  'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Science+Gothic:CTRS,slnt,wdth,wght@0..75,-10..0,50..200,100..900&display=swap&subset=cyrillic,latin'\n\n// The real typography CSS (heading.css, text.css) never reads a single global\n// `--dsx-font-family` / `--dsx-display-font-family` \u2014 each type-scale variant\n// reads its own token (`--dsx-typography-display-large-font-family`,\n// `--dsx-typography-body-medium-font-family`, etc.), defined once in\n// generated/tokens.css. Overriding only the two vars this component used to\n// write was a no-op: nothing in the package ever consumed them. `caption` is\n// intentionally left alone \u2014 its token is `inherit` by design.\nconst DISPLAY_FONT_VARS = [\n  '--dsx-typography-display-large-font-family',\n  '--dsx-typography-display-medium-font-family',\n  '--dsx-typography-headline-large-font-family',\n  '--dsx-typography-headline-medium-font-family',\n]\nconst BODY_FONT_VARS = [\n  '--dsx-typography-body-large-font-family',\n  '--dsx-typography-body-medium-font-family',\n  '--dsx-typography-body-small-font-family',\n  '--dsx-typography-label-large-font-family',\n  '--dsx-typography-label-medium-font-family',\n  '--dsx-typography-label-small-font-family',\n]\n\nfunction FontProvider({\n  children,\n  fontFamily = 'Science Gothic, ui-sans-serif, system-ui, sans-serif',\n  displayFontFamily = 'Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif',\n  loadGoogleFonts = false,\n}: FontProviderProps) {\n  const contextValue = React.useMemo<FontContextValue>(\n    () => ({ fontFamily }),\n    [fontFamily],\n  )\n\n  // useLayoutEffect, not useEffect (2026-08-26, real bug found live): with useEffect, React\n  // defers this DOM mutation until after the browser has already painted the just-hydrated\n  // frame \u2014 so on every reload the DS's default typography tokens\n  // paint first, then visibly swap to the override font a beat later. Measured live: default\n  // tokens still showing 100ms after commit, override not applied until ~300ms. useLayoutEffect\n  // runs synchronously in the same commit as hydration, before that frame paints, so the\n  // override is already applied by the first frame the browser shows post-hydration \u2014 it\n  // cannot remove the one truly unavoidable flash (the server-rendered HTML painting before any\n  // JS runs at all, inherent to Next.js's single root layout owning <html>/<body>), only the\n  // second, avoidable one stacked on top of it.\n  React.useLayoutEffect(() => {\n    const html = document.documentElement\n    const body = document.body\n    // foundations/Theme.tsx's applyThemeToDocument sets every theme data-attribute\n    // on BOTH html and body \u2014 deliberately, so Radix portals (Select/Dialog/\n    // DropdownMenu content, rendered into document.body, not under the app's\n    // themed root) still pick up theme-scoped tokens. Overriding only html left\n    // body \u2014 a same-attribute match for `[data-dsx-theme=\"dark\"]` in\n    // generated/tokens.css \u2014 still asserting the default package families\n    // stack, which then wins for anything under body (i.e. everything), since\n    // custom-property resolution takes the nearest ancestor's value. That's why\n    // The custom display family only rendered correctly in light mode: that block\n    // doesn't define font-family tokens at all, so body had nothing to\n    // re-assert there. Writing to both elements matches the real architecture.\n    const elements = body ? [html, body] : [html]\n    const previousValues = new Map<Element, Map<string, string>>()\n\n    for (const el of elements) {\n      const previous = new Map<string, string>()\n      for (const name of DISPLAY_FONT_VARS) {\n        previous.set(name, (el as HTMLElement).style.getPropertyValue(name))\n        ;(el as HTMLElement).style.setProperty(name, displayFontFamily)\n      }\n      for (const name of BODY_FONT_VARS) {\n        previous.set(name, (el as HTMLElement).style.getPropertyValue(name))\n        ;(el as HTMLElement).style.setProperty(name, fontFamily)\n      }\n      previousValues.set(el, previous)\n    }\n\n    return () => {\n      for (const [el, previous] of previousValues) {\n        for (const [name, value] of previous) {\n          if (value) {\n            (el as HTMLElement).style.setProperty(name, value)\n          } else {\n            (el as HTMLElement).style.removeProperty(name)\n          }\n        }\n      }\n    }\n  }, [fontFamily, displayFontFamily])\n\n  // Optional hosted compatibility path for the canonical bilingual and mono families.\n  React.useEffect(() => {\n    if (!loadGoogleFonts) return\n    if (typeof document === 'undefined') return\n\n    const linkId = 'dsx-font-provider-default-fonts'\n    if (document.getElementById(linkId)) return\n\n    const link = document.createElement('link')\n    link.id = linkId\n    link.rel = 'stylesheet'\n    link.href = DEFAULT_GOOGLE_FONTS_URL\n    document.head.appendChild(link)\n\n    return () => {\n      const existing = document.getElementById(linkId)\n      if (existing) {\n        document.head.removeChild(existing)\n      }\n    }\n  }, [loadGoogleFonts])\n\n  return (\n    <FontContext.Provider value={contextValue}>\n      {children}\n    </FontContext.Provider>\n  )\n}\n\nfunction useFont(): FontContextValue {\n  const context = React.useContext(FontContext)\n\n  if (!context) {\n    return { fontFamily: 'Science Gothic, ui-sans-serif, system-ui, sans-serif' }\n  }\n\n  return context\n}\n\nexport { FontProvider, useFont }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AAEvB,0BAAuC;AAwHnC;AAlHJ,MAAM,cAAc,MAAM,cAAuC,IAAI;AAErE,MAAM,2BACJ;AASF,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAsB;AACpB,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO,EAAE,WAAW;AAAA,IACpB,CAAC,UAAU;AAAA,EACb;AAYA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,OAAO,SAAS;AAYtB,UAAM,WAAW,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI;AAC5C,UAAM,iBAAiB,oBAAI,IAAkC;AAE7D,eAAW,MAAM,UAAU;AACzB,YAAM,WAAW,oBAAI,IAAoB;AACzC,iBAAW,QAAQ,mBAAmB;AACpC,iBAAS,IAAI,MAAO,GAAmB,MAAM,iBAAiB,IAAI,CAAC;AAClE,QAAC,GAAmB,MAAM,YAAY,MAAM,iBAAiB;AAAA,MAChE;AACA,iBAAW,QAAQ,gBAAgB;AACjC,iBAAS,IAAI,MAAO,GAAmB,MAAM,iBAAiB,IAAI,CAAC;AAClE,QAAC,GAAmB,MAAM,YAAY,MAAM,UAAU;AAAA,MACzD;AACA,qBAAe,IAAI,IAAI,QAAQ;AAAA,IACjC;AAEA,WAAO,MAAM;AACX,iBAAW,CAAC,IAAI,QAAQ,KAAK,gBAAgB;AAC3C,mBAAW,CAAC,MAAM,KAAK,KAAK,UAAU;AACpC,cAAI,OAAO;AACT,YAAC,GAAmB,MAAM,YAAY,MAAM,KAAK;AAAA,UACnD,OAAO;AACL,YAAC,GAAmB,MAAM,eAAe,IAAI;AAAA,UAC/C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,CAAC;AAGlC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,gBAAiB;AACtB,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,SAAS;AACf,QAAI,SAAS,eAAe,MAAM,EAAG;AAErC,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,KAAK;AACV,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,aAAS,KAAK,YAAY,IAAI;AAE9B,WAAO,MAAM;AACX,YAAM,WAAW,SAAS,eAAe,MAAM;AAC/C,UAAI,UAAU;AACZ,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,4CAAC,YAAY,UAAZ,EAAqB,OAAO,cAC1B,UACH;AAEJ;AAEA,SAAS,UAA4B;AACnC,QAAM,UAAU,MAAM,WAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO,EAAE,YAAY,uDAAuD;AAAA,EAC9E;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/components/fontProvider/FontProvider.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"FontProvider.d.cts","sourceRoot":"","sources":["../../../src/components/fontProvider/FontProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAOD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAwE,EACxE,iBAAsE,EACtE,eAAuB,GACxB,EAAE,iBAAiB,2CAuDnB;AAED,iBAAS,OAAO,IAAI,gBAAgB,CAQnC;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"FontProvider.d.cts","sourceRoot":"","sources":["../../../src/components/fontProvider/FontProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AA6BD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAmE,EACnE,iBAAwF,EACxF,eAAuB,GACxB,EAAE,iBAAiB,2CAsFnB;AAED,iBAAS,OAAO,IAAI,gBAAgB,CAQnC;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/fontProvider/FontProvider.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"FontProvider.d.mts","sourceRoot":"","sources":["../../../src/components/fontProvider/FontProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAOD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAwE,EACxE,iBAAsE,EACtE,eAAuB,GACxB,EAAE,iBAAiB,2CAuDnB;AAED,iBAAS,OAAO,IAAI,gBAAgB,CAQnC;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"FontProvider.d.mts","sourceRoot":"","sources":["../../../src/components/fontProvider/FontProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AA6BD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAmE,EACnE,iBAAwF,EACxF,eAAuB,GACxB,EAAE,iBAAiB,2CAsFnB;AAED,iBAAS,OAAO,IAAI,gBAAgB,CAQnC;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/fontProvider/FontProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontProvider.d.ts","sourceRoot":"","sources":["../../../src/components/fontProvider/FontProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAOD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAwE,EACxE,iBAAsE,EACtE,eAAuB,GACxB,EAAE,iBAAiB,2CAuDnB;AAED,iBAAS,OAAO,IAAI,gBAAgB,CAQnC;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"FontProvider.d.ts","sourceRoot":"","sources":["../../../src/components/fontProvider/FontProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAE7D,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AA6BD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,UAAmE,EACnE,iBAAwF,EACxF,eAAuB,GACxB,EAAE,iBAAiB,2CAsFnB;AAED,iBAAS,OAAO,IAAI,gBAAgB,CAQnC;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/fontProvider/FontProvider.js

@@ -3,45 +3,69 @@ import * as React from "react";
 import {} from "./fontProvider.props.js";
 import { jsx } from "react/jsx-runtime";
 const FontContext = React.createContext(null);
-const MERRIWEATHER_GOOGLE_FONTS_URL = "https://fonts.googleapis.com/css2?family=Merriweather:opsz,wght@7..72,400;7..72,700;7..72,900&display=swap&subset=cyrillic,latin";
+const DEFAULT_GOOGLE_FONTS_URL = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Science+Gothic:CTRS,slnt,wdth,wght@0..75,-10..0,50..200,100..900&display=swap&subset=cyrillic,latin";
+const DISPLAY_FONT_VARS = [
+  "--dsx-typography-display-large-font-family",
+  "--dsx-typography-display-medium-font-family",
+  "--dsx-typography-headline-large-font-family",
+  "--dsx-typography-headline-medium-font-family"
+];
+const BODY_FONT_VARS = [
+  "--dsx-typography-body-large-font-family",
+  "--dsx-typography-body-medium-font-family",
+  "--dsx-typography-body-small-font-family",
+  "--dsx-typography-label-large-font-family",
+  "--dsx-typography-label-medium-font-family",
+  "--dsx-typography-label-small-font-family"
+];
 function FontProvider({
   children,
-  fontFamily = "var(--dsx-typography-body-medium-font-family, sans-serif)",
-  displayFontFamily = "var(--dsx-typography-display-font-family, serif)",
+  fontFamily = "Science Gothic, ui-sans-serif, system-ui, sans-serif",
+  displayFontFamily = "Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif",
   loadGoogleFonts = false
 }) {
   const contextValue = React.useMemo(
     () => ({ fontFamily }),
     [fontFamily]
   );
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const html = document.documentElement;
-    const previousFont = html.style.getPropertyValue("--dsx-font-family");
-    const previousDisplayFont = html.style.getPropertyValue("--dsx-display-font-family");
-    html.style.setProperty("--dsx-font-family", fontFamily);
-    html.style.setProperty("--dsx-display-font-family", displayFontFamily);
-    return () => {
-      if (previousFont) {
-        html.style.setProperty("--dsx-font-family", previousFont);
-      } else {
-        html.style.removeProperty("--dsx-font-family");
+    const body = document.body;
+    const elements = body ? [html, body] : [html];
+    const previousValues = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      const previous = /* @__PURE__ */ new Map();
+      for (const name of DISPLAY_FONT_VARS) {
+        previous.set(name, el.style.getPropertyValue(name));
+        el.style.setProperty(name, displayFontFamily);
       }
-      if (previousDisplayFont) {
-        html.style.setProperty("--dsx-display-font-family", previousDisplayFont);
-      } else {
-        html.style.removeProperty("--dsx-display-font-family");
+      for (const name of BODY_FONT_VARS) {
+        previous.set(name, el.style.getPropertyValue(name));
+        el.style.setProperty(name, fontFamily);
+      }
+      previousValues.set(el, previous);
+    }
+    return () => {
+      for (const [el, previous] of previousValues) {
+        for (const [name, value] of previous) {
+          if (value) {
+            el.style.setProperty(name, value);
+          } else {
+            el.style.removeProperty(name);
+          }
+        }
       }
     };
   }, [fontFamily, displayFontFamily]);
   React.useEffect(() => {
     if (!loadGoogleFonts) return;
     if (typeof document === "undefined") return;
-    const linkId = "dsx-font-provider-merriweather";
+    const linkId = "dsx-font-provider-default-fonts";
     if (document.getElementById(linkId)) return;
     const link = document.createElement("link");
     link.id = linkId;
     link.rel = "stylesheet";
-    link.href = MERRIWEATHER_GOOGLE_FONTS_URL;
+    link.href = DEFAULT_GOOGLE_FONTS_URL;
     document.head.appendChild(link);
     return () => {
       const existing = document.getElementById(linkId);
@@ -55,7 +79,7 @@ function FontProvider({
 function useFont() {
   const context = React.useContext(FontContext);
   if (!context) {
-    return { fontFamily: "var(--dsx-typography-body-medium-font-family, sans-serif)" };
+    return { fontFamily: "Science Gothic, ui-sans-serif, system-ui, sans-serif" };
   }
   return context;
 }

package/dist/components/fontProvider/FontProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/fontProvider/FontProvider.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { type FontProviderProps } from './fontProvider.props'\n\ntype FontContextValue = {\n  fontFamily: string\n}\n\nconst FontContext = React.createContext<FontContextValue | null>(null)\n\nconst MERRIWEATHER_GOOGLE_FONTS_URL =\n  'https://fonts.googleapis.com/css2?family=Merriweather:opsz,wght@7..72,400;7..72,700;7..72,900&display=swap&subset=cyrillic,latin'\n\nfunction FontProvider({\n  children,\n  fontFamily = 'var(--dsx-typography-body-medium-font-family, sans-serif)',\n  displayFontFamily = 'var(--dsx-typography-display-font-family, serif)',\n  loadGoogleFonts = false,\n}: FontProviderProps) {\n  const contextValue = React.useMemo<FontContextValue>(\n    () => ({ fontFamily }),\n    [fontFamily],\n  )\n\n  React.useEffect(() => {\n    const html = document.documentElement\n    const previousFont = html.style.getPropertyValue('--dsx-font-family')\n    const previousDisplayFont = html.style.getPropertyValue('--dsx-display-font-family')\n\n    html.style.setProperty('--dsx-font-family', fontFamily)\n    html.style.setProperty('--dsx-display-font-family', displayFontFamily)\n\n    return () => {\n      if (previousFont) {\n        html.style.setProperty('--dsx-font-family', previousFont)\n      } else {\n        html.style.removeProperty('--dsx-font-family')\n      }\n      if (previousDisplayFont) {\n        html.style.setProperty('--dsx-display-font-family', previousDisplayFont)\n      } else {\n        html.style.removeProperty('--dsx-display-font-family')\n      }\n    }\n  }, [fontFamily, displayFontFamily])\n\n  // Inject Google Fonts link for Merriweather when cyrillic support is requested\n  React.useEffect(() => {\n    if (!loadGoogleFonts) return\n    if (typeof document === 'undefined') return\n\n    const linkId = 'dsx-font-provider-merriweather'\n    if (document.getElementById(linkId)) return\n\n    const link = document.createElement('link')\n    link.id = linkId\n    link.rel = 'stylesheet'\n    link.href = MERRIWEATHER_GOOGLE_FONTS_URL\n    document.head.appendChild(link)\n\n    return () => {\n      const existing = document.getElementById(linkId)\n      if (existing) {\n        document.head.removeChild(existing)\n      }\n    }\n  }, [loadGoogleFonts])\n\n  return (\n    <FontContext.Provider value={contextValue}>\n      {children}\n    </FontContext.Provider>\n  )\n}\n\nfunction useFont(): FontContextValue {\n  const context = React.useContext(FontContext)\n\n  if (!context) {\n    return { fontFamily: 'var(--dsx-typography-body-medium-font-family, sans-serif)' }\n  }\n\n  return context\n}\n\nexport { FontProvider, useFont }\n"],
-  "mappings": ";AAEA,YAAY,WAAW;AAEvB,eAAuC;AAmEnC;AA7DJ,MAAM,cAAc,MAAM,cAAuC,IAAI;AAErE,MAAM,gCACJ;AAEF,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAsB;AACpB,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO,EAAE,WAAW;AAAA,IACpB,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,SAAS;AACtB,UAAM,eAAe,KAAK,MAAM,iBAAiB,mBAAmB;AACpE,UAAM,sBAAsB,KAAK,MAAM,iBAAiB,2BAA2B;AAEnF,SAAK,MAAM,YAAY,qBAAqB,UAAU;AACtD,SAAK,MAAM,YAAY,6BAA6B,iBAAiB;AAErE,WAAO,MAAM;AACX,UAAI,cAAc;AAChB,aAAK,MAAM,YAAY,qBAAqB,YAAY;AAAA,MAC1D,OAAO;AACL,aAAK,MAAM,eAAe,mBAAmB;AAAA,MAC/C;AACA,UAAI,qBAAqB;AACvB,aAAK,MAAM,YAAY,6BAA6B,mBAAmB;AAAA,MACzE,OAAO;AACL,aAAK,MAAM,eAAe,2BAA2B;AAAA,MACvD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,CAAC;AAGlC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,gBAAiB;AACtB,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,SAAS;AACf,QAAI,SAAS,eAAe,MAAM,EAAG;AAErC,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,KAAK;AACV,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,aAAS,KAAK,YAAY,IAAI;AAE9B,WAAO,MAAM;AACX,YAAM,WAAW,SAAS,eAAe,MAAM;AAC/C,UAAI,UAAU;AACZ,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC1B,UACH;AAEJ;AAEA,SAAS,UAA4B;AACnC,QAAM,UAAU,MAAM,WAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO,EAAE,YAAY,4DAA4D;AAAA,EACnF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { type FontProviderProps } from './fontProvider.props'\n\ntype FontContextValue = {\n  fontFamily: string\n}\n\nconst FontContext = React.createContext<FontContextValue | null>(null)\n\nconst DEFAULT_GOOGLE_FONTS_URL =\n  'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Science+Gothic:CTRS,slnt,wdth,wght@0..75,-10..0,50..200,100..900&display=swap&subset=cyrillic,latin'\n\n// The real typography CSS (heading.css, text.css) never reads a single global\n// `--dsx-font-family` / `--dsx-display-font-family` \u2014 each type-scale variant\n// reads its own token (`--dsx-typography-display-large-font-family`,\n// `--dsx-typography-body-medium-font-family`, etc.), defined once in\n// generated/tokens.css. Overriding only the two vars this component used to\n// write was a no-op: nothing in the package ever consumed them. `caption` is\n// intentionally left alone \u2014 its token is `inherit` by design.\nconst DISPLAY_FONT_VARS = [\n  '--dsx-typography-display-large-font-family',\n  '--dsx-typography-display-medium-font-family',\n  '--dsx-typography-headline-large-font-family',\n  '--dsx-typography-headline-medium-font-family',\n]\nconst BODY_FONT_VARS = [\n  '--dsx-typography-body-large-font-family',\n  '--dsx-typography-body-medium-font-family',\n  '--dsx-typography-body-small-font-family',\n  '--dsx-typography-label-large-font-family',\n  '--dsx-typography-label-medium-font-family',\n  '--dsx-typography-label-small-font-family',\n]\n\nfunction FontProvider({\n  children,\n  fontFamily = 'Science Gothic, ui-sans-serif, system-ui, sans-serif',\n  displayFontFamily = 'Science Gothic, Arial Narrow, ui-sans-serif, system-ui, sans-serif',\n  loadGoogleFonts = false,\n}: FontProviderProps) {\n  const contextValue = React.useMemo<FontContextValue>(\n    () => ({ fontFamily }),\n    [fontFamily],\n  )\n\n  // useLayoutEffect, not useEffect (2026-08-26, real bug found live): with useEffect, React\n  // defers this DOM mutation until after the browser has already painted the just-hydrated\n  // frame \u2014 so on every reload the DS's default typography tokens\n  // paint first, then visibly swap to the override font a beat later. Measured live: default\n  // tokens still showing 100ms after commit, override not applied until ~300ms. useLayoutEffect\n  // runs synchronously in the same commit as hydration, before that frame paints, so the\n  // override is already applied by the first frame the browser shows post-hydration \u2014 it\n  // cannot remove the one truly unavoidable flash (the server-rendered HTML painting before any\n  // JS runs at all, inherent to Next.js's single root layout owning <html>/<body>), only the\n  // second, avoidable one stacked on top of it.\n  React.useLayoutEffect(() => {\n    const html = document.documentElement\n    const body = document.body\n    // foundations/Theme.tsx's applyThemeToDocument sets every theme data-attribute\n    // on BOTH html and body \u2014 deliberately, so Radix portals (Select/Dialog/\n    // DropdownMenu content, rendered into document.body, not under the app's\n    // themed root) still pick up theme-scoped tokens. Overriding only html left\n    // body \u2014 a same-attribute match for `[data-dsx-theme=\"dark\"]` in\n    // generated/tokens.css \u2014 still asserting the default package families\n    // stack, which then wins for anything under body (i.e. everything), since\n    // custom-property resolution takes the nearest ancestor's value. That's why\n    // The custom display family only rendered correctly in light mode: that block\n    // doesn't define font-family tokens at all, so body had nothing to\n    // re-assert there. Writing to both elements matches the real architecture.\n    const elements = body ? [html, body] : [html]\n    const previousValues = new Map<Element, Map<string, string>>()\n\n    for (const el of elements) {\n      const previous = new Map<string, string>()\n      for (const name of DISPLAY_FONT_VARS) {\n        previous.set(name, (el as HTMLElement).style.getPropertyValue(name))\n        ;(el as HTMLElement).style.setProperty(name, displayFontFamily)\n      }\n      for (const name of BODY_FONT_VARS) {\n        previous.set(name, (el as HTMLElement).style.getPropertyValue(name))\n        ;(el as HTMLElement).style.setProperty(name, fontFamily)\n      }\n      previousValues.set(el, previous)\n    }\n\n    return () => {\n      for (const [el, previous] of previousValues) {\n        for (const [name, value] of previous) {\n          if (value) {\n            (el as HTMLElement).style.setProperty(name, value)\n          } else {\n            (el as HTMLElement).style.removeProperty(name)\n          }\n        }\n      }\n    }\n  }, [fontFamily, displayFontFamily])\n\n  // Optional hosted compatibility path for the canonical bilingual and mono families.\n  React.useEffect(() => {\n    if (!loadGoogleFonts) return\n    if (typeof document === 'undefined') return\n\n    const linkId = 'dsx-font-provider-default-fonts'\n    if (document.getElementById(linkId)) return\n\n    const link = document.createElement('link')\n    link.id = linkId\n    link.rel = 'stylesheet'\n    link.href = DEFAULT_GOOGLE_FONTS_URL\n    document.head.appendChild(link)\n\n    return () => {\n      const existing = document.getElementById(linkId)\n      if (existing) {\n        document.head.removeChild(existing)\n      }\n    }\n  }, [loadGoogleFonts])\n\n  return (\n    <FontContext.Provider value={contextValue}>\n      {children}\n    </FontContext.Provider>\n  )\n}\n\nfunction useFont(): FontContextValue {\n  const context = React.useContext(FontContext)\n\n  if (!context) {\n    return { fontFamily: 'Science Gothic, ui-sans-serif, system-ui, sans-serif' }\n  }\n\n  return context\n}\n\nexport { FontProvider, useFont }\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AAEvB,eAAuC;AAwHnC;AAlHJ,MAAM,cAAc,MAAM,cAAuC,IAAI;AAErE,MAAM,2BACJ;AASF,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,kBAAkB;AACpB,GAAsB;AACpB,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO,EAAE,WAAW;AAAA,IACpB,CAAC,UAAU;AAAA,EACb;AAYA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,OAAO,SAAS;AAYtB,UAAM,WAAW,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI;AAC5C,UAAM,iBAAiB,oBAAI,IAAkC;AAE7D,eAAW,MAAM,UAAU;AACzB,YAAM,WAAW,oBAAI,IAAoB;AACzC,iBAAW,QAAQ,mBAAmB;AACpC,iBAAS,IAAI,MAAO,GAAmB,MAAM,iBAAiB,IAAI,CAAC;AAClE,QAAC,GAAmB,MAAM,YAAY,MAAM,iBAAiB;AAAA,MAChE;AACA,iBAAW,QAAQ,gBAAgB;AACjC,iBAAS,IAAI,MAAO,GAAmB,MAAM,iBAAiB,IAAI,CAAC;AAClE,QAAC,GAAmB,MAAM,YAAY,MAAM,UAAU;AAAA,MACzD;AACA,qBAAe,IAAI,IAAI,QAAQ;AAAA,IACjC;AAEA,WAAO,MAAM;AACX,iBAAW,CAAC,IAAI,QAAQ,KAAK,gBAAgB;AAC3C,mBAAW,CAAC,MAAM,KAAK,KAAK,UAAU;AACpC,cAAI,OAAO;AACT,YAAC,GAAmB,MAAM,YAAY,MAAM,KAAK;AAAA,UACnD,OAAO;AACL,YAAC,GAAmB,MAAM,eAAe,IAAI;AAAA,UAC/C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,CAAC;AAGlC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,gBAAiB;AACtB,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,SAAS;AACf,QAAI,SAAS,eAAe,MAAM,EAAG;AAErC,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,KAAK;AACV,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,aAAS,KAAK,YAAY,IAAI;AAE9B,WAAO,MAAM;AACX,YAAM,WAAW,SAAS,eAAe,MAAM;AAC/C,UAAI,UAAU;AACZ,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC1B,UACH;AAEJ;AAEA,SAAS,UAA4B;AACnC,QAAM,UAAU,MAAM,WAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO,EAAE,YAAY,uDAAuD;AAAA,EAC9E;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/components/fontProvider/fontProvider.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/fontProvider/fontProvider.props.ts"],
-  "sourcesContent": ["import type { ReactNode } from 'react'\n\nexport type FontProviderProps = {\n  children?: ReactNode\n  fontFamily?: string\n  displayFontFamily?: string\n  loadGoogleFonts?: boolean\n}\n"],
+  "sourcesContent": ["import type { ReactNode } from 'react'\n\nexport type FontProviderProps = {\n  children?: ReactNode\n  fontFamily?: string\n  displayFontFamily?: string\n  /** Load the canonical Science Gothic and JetBrains Mono families from Google Fonts. */\n  loadGoogleFonts?: boolean\n}\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/components/fontProvider/fontProvider.props.d.cts

@@ -3,6 +3,7 @@ export type FontProviderProps = {
     children?: ReactNode;
     fontFamily?: string;
     displayFontFamily?: string;
+    /** Load the canonical Science Gothic and JetBrains Mono families from Google Fonts. */
     loadGoogleFonts?: boolean;
 };
 //# sourceMappingURL=fontProvider.props.d.cts.map

package/dist/components/fontProvider/fontProvider.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"fontProvider.props.d.cts","sourceRoot":"","sources":["../../../src/components/fontProvider/fontProvider.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"fontProvider.props.d.cts","sourceRoot":"","sources":["../../../src/components/fontProvider/fontProvider.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA"}

package/dist/components/fontProvider/fontProvider.props.d.mts

@@ -3,6 +3,7 @@ export type FontProviderProps = {
     children?: ReactNode;
     fontFamily?: string;
     displayFontFamily?: string;
+    /** Load the canonical Science Gothic and JetBrains Mono families from Google Fonts. */
     loadGoogleFonts?: boolean;
 };
 //# sourceMappingURL=fontProvider.props.d.mts.map

package/dist/components/fontProvider/fontProvider.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"fontProvider.props.d.mts","sourceRoot":"","sources":["../../../src/components/fontProvider/fontProvider.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"fontProvider.props.d.mts","sourceRoot":"","sources":["../../../src/components/fontProvider/fontProvider.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA"}

package/dist/components/fontProvider/fontProvider.props.d.ts

@@ -3,6 +3,7 @@ export type FontProviderProps = {
     children?: ReactNode;
     fontFamily?: string;
     displayFontFamily?: string;
+    /** Load the canonical Science Gothic and JetBrains Mono families from Google Fonts. */
     loadGoogleFonts?: boolean;
 };
 //# sourceMappingURL=fontProvider.props.d.ts.map

package/dist/components/fontProvider/fontProvider.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fontProvider.props.d.ts","sourceRoot":"","sources":["../../../src/components/fontProvider/fontProvider.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"fontProvider.props.d.ts","sourceRoot":"","sources":["../../../src/components/fontProvider/fontProvider.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA"}

package/dist/components/form/Form.cjs

@@ -67,7 +67,7 @@ function useFieldId() {
 }
 const Form = React.forwardRef((props, forwardedRef) => {
   const layout = props.layout ?? "standard";
-  const { asChild, className, form, onSubmit, ...formProps } = (0, import_extractProps.extractProps)({ ...props, layout }, import_form.formPropDefs);
+  const { asChild, className, form, onSubmit, layout: _layout, ...formProps } = (0, import_extractProps.extractProps)({ ...props, layout }, import_form.formPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "form";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Comp,