@tempoxyz/ds 0.2.2 → 0.2.4

package/src/web/components/RadioGroup.tsx

@@ -105,13 +105,13 @@ namespace styles {
           medium: {
             selectors: {
               '& [role="radio"]': { height: '20', width: '20' },
-              '& [role="radio"] > span': { height: '7px !custom', width: '7px !custom' },
+              '& [role="radio"] > span': { height: '8', width: '8' },
             },
           },
           small: {
             selectors: {
               '& [role="radio"]': { height: '16', width: '16' },
-              '& [role="radio"] > span': { height: '6px !custom', width: '6px !custom' },
+              '& [role="radio"] > span': { height: '6', width: '6' },
             },
           },
         },
@@ -125,7 +125,7 @@ namespace styles {
       backgroundColor: 'background.surface',
       borderRadius: 'full',
       height: '8',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'overshoot',
       width: '8',
@@ -157,30 +157,30 @@ namespace styles {
       height: '24',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
       position: 'relative',
-      transitionDuration: '160ms',
+      transitionDuration: '160',
       transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
       transitionTimingFunction: 'snappy',
       width: '24',
       selectors: {
-        '&::after': { content: '"" !custom', inset: '-10px !custom', position: 'absolute' },
+        '&::after': { content: '"" !custom', inset: '-10', position: 'absolute' },
         '&:active:not([data-disabled])': { transform: 'scale(0.96) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover:not([data-disabled])': { backgroundColor: 'grayAlpha.400' },
         '&[data-checked]': { backgroundColor: 'foreground' },
         '&[data-checked]:hover:not([data-disabled])': {
           backgroundColor: 'foreground',
-          opacity: '0.86 !custom',
+          opacity: 'hover',
         },
-        '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         '&[data-invalid]': {
           outlineColor: 'red.800',
           outlineStyle: 'solid !custom',
-          outlineWidth: '1px !custom',
+          outlineWidth: '1',
         },
       },
       '@media (prefers-reduced-motion: reduce)': {

package/src/web/components/Rows.tsx

@@ -328,7 +328,7 @@ namespace styles {
     {
       color: 'gray.700',
       flexShrink: '0 !custom',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
@@ -358,7 +358,7 @@ namespace styles {
         boxSizing: 'border-box',
         color: 'gray.900',
         padding: '16',
-        transitionDuration: '200ms',
+        transitionDuration: '200',
         transitionProperty: 'opacity, transform',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
@@ -451,13 +451,13 @@ namespace styles {
         display: 'flex',
         font: 'inherit !custom',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingBlock: '8',
         textAlign: 'start',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
@@ -471,9 +471,9 @@ namespace styles {
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '-2px !custom',
+            outlineOffset: '-2',
           },
-          '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
           '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(180deg) !custom' },
         },
         '@media (prefers-reduced-motion: reduce)': {

package/src/web/components/SecretValue.tsx

@@ -118,18 +118,18 @@ namespace styles {
         display: 'flex',
         minWidth: '0',
         position: 'relative',
-        transitionDuration: '200ms, 160ms',
-        transitionProperty: 'background-color, transform',
+        transitionDuration: '200ms, 160ms !custom',
+        transitionProperty: 'background-color, scale',
         transitionTimingFunction: 'snappy',
         selectors: {
           // Inner buttons keep their own hover, so the block only reacts beside them.
           '&:hover:not(:has(button:hover))': { backgroundColor: 'grayAlpha.200' },
-          '&:active:not(:has(button:active))': { transform: 'scale(0.985) !custom' },
+          '&:active:not(:has(button:active))': { scale: 'press' },
           '&[data-copied]': { backgroundColor: 'green.200' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color',
-          selectors: { '&:active:not(:has(button:active))': { transform: 'none !custom' } },
+          selectors: { '&:active:not(:has(button:active))': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { size: 'medium' },

package/src/web/components/Select.tsx

@@ -298,7 +298,7 @@ namespace styles {
       display: 'inline-flex',
       flexShrink: '0 !custom',
       fontSize: '16',
-      transitionDuration: '200ms !custom',
+      transitionDuration: '200',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
       selectors: {

package/src/web/components/SidebarMenu.tsx

@@ -204,7 +204,7 @@ namespace styles {
     {
       color: 'gray.900',
       marginInlineStart: 'auto !custom',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       selectors: { '[data-panel-open] > &': { transform: 'rotate(90deg) !custom' } },
@@ -222,7 +222,7 @@ namespace styles {
         selectors: {
           // Groups sit 24px below preceding content, and a divider separates adjacent groups.
           '* + &': { marginTop: '20' },
-          '[data-sidebar-menu-size="small"] &': { rowGap: '2px !custom' },
+          '[data-sidebar-menu-size="small"] &': { rowGap: '2' },
           '[data-sidebar-menu-size="small"] * + &': { marginTop: '12' },
           '& + &': {
             borderTopColor: 'grayAlpha.200',
@@ -266,16 +266,15 @@ namespace styles {
         minHeight: '40',
         minWidth: '0',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingBlock: '8',
         paddingInline: '12',
         textAlign: 'start',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms !custom',
-        transitionProperty:
-          'background-color, color, outline-color, outline-offset, transform !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, color, outline-color, outline-offset, scale !custom',
         transitionTimingFunction: 'snappy',
         typography: 'label.14.strong',
         width: '100% !custom',
@@ -293,13 +292,13 @@ namespace styles {
             typography: 'label.14.strong',
           },
           '[data-sidebar-menu-size="small"] & > svg': { fontSize: '16' },
-          '&:active': { transform: 'scale(0.98) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '-2px !custom' },
+          '&:active': { scale: 'press' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '-2' },
           '&:hover': { backgroundColor: 'grayAlpha.100', color: 'foreground' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, outline-color !custom',
-          selectors: { '&:active': { transform: 'none !custom' } },
+          selectors: { '&:active': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { active: false },
@@ -317,7 +316,7 @@ namespace styles {
     {
       base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '4' },
       defaultVariants: { size: 'medium' },
-      variants: { size: { large: {}, medium: {}, small: { rowGap: '2px !custom' } } },
+      variants: { size: { large: {}, medium: {}, small: { rowGap: '2' } } },
     },
     { id: 'tds/web/sidebar-menu' },
   )
@@ -333,8 +332,8 @@ namespace styles {
       selectors: {
         '[data-sidebar-menu-size="small"] &': {
           paddingInlineStart: '24',
-          paddingTop: '2px !custom',
-          rowGap: '2px !custom',
+          paddingTop: '2',
+          rowGap: '2',
         },
       },
     },
@@ -347,11 +346,11 @@ namespace styles {
         height: 'var(--collapsible-panel-height) !custom',
         overflow: 'hidden',
         // Revealing content needs its measured height, which a transform cannot provide.
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'height, opacity',
         transitionTimingFunction: 'spring',
         selectors: {
-          '&[data-ending-style]': { transitionDuration: '180ms' },
+          '&[data-ending-style]': { transitionDuration: '180' },
           '&[data-ending-style], &[data-starting-style]': {
             height: '0',
             opacity: '0 !custom',

package/src/web/components/Slider.tsx

@@ -193,7 +193,7 @@ namespace styles {
     {
       boxSizing: 'border-box',
       width: '100% !custom',
-      selectors: { '&[data-disabled]': { opacity: '0.4 !custom' } },
+      selectors: { '&[data-disabled]': { opacity: 'disabled' } },
     },
     { id: 'tds/web/slider' },
   )
@@ -202,20 +202,19 @@ namespace styles {
     {
       backgroundColor: 'white',
       borderRadius: 'full',
-      boxShadow:
-        '0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12) !custom',
+      boxShadow: 'thumb',
       boxSizing: 'border-box',
       height: '24',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '200ms',
+      outlineWidth: '2',
+      transitionDuration: '200',
       transitionProperty: 'outline-color, outline-offset, transform',
       transitionTimingFunction: 'snappy',
       width: '24',
       selectors: {
-        '&:has(:focus-visible)': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:has(:focus-visible)': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&[data-dragging]': { transform: 'scale(1.08) !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {

package/src/web/components/Snippet.tsx

@@ -86,19 +86,19 @@ namespace styles {
         display: 'flex',
         minWidth: '0',
         position: 'relative',
-        transitionDuration: '200ms, 160ms',
-        transitionProperty: 'background-color, transform',
+        transitionDuration: '200ms, 160ms !custom',
+        transitionProperty: 'background-color, scale',
         transitionTimingFunction: 'snappy',
         typography: 'label.14.mono',
         selectors: {
           // Inner buttons keep their own hover, so the block only reacts beside them.
           '&:hover:not(:has(button:hover))': { backgroundColor: 'grayAlpha.200' },
-          '&:active:not(:has(button:active))': { transform: 'scale(0.985) !custom' },
+          '&:active:not(:has(button:active))': { scale: 'press' },
           '&[data-copied]': { backgroundColor: 'green.200' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color',
-          selectors: { '&:active:not(:has(button:active))': { transform: 'none !custom' } },
+          selectors: { '&:active:not(:has(button:active))': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { size: 'medium' },
@@ -136,16 +136,16 @@ namespace styles {
       fontFamily: 'mono',
       minWidth: '0',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       overflowX: 'auto',
-      transitionDuration: '160ms',
+      transitionDuration: '160',
       transitionProperty: 'outline-color, outline-offset',
       transitionTimingFunction: 'snappy',
       whiteSpace: 'nowrap',
       selectors: {
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'outline-color' },
     },

package/src/web/components/SplitButton.tsx

@@ -96,15 +96,27 @@ namespace styles {
       display: 'inline-flex',
       selectors: {
         '& > :first-child': {
-          borderBottomRightRadius: '0 !custom',
-          borderTopRightRadius: '0 !custom',
+          borderBottomRightRadius: '0',
+          borderTopRightRadius: '0',
         },
+        // The trigger is a segment of the group, so its outer corners follow the action's size
+        // radius rather than the circle of an icon button.
         '& > [aria-haspopup]': {
-          borderBottomLeftRadius: '0 !custom',
-          borderTopLeftRadius: '0 !custom',
+          borderBottomLeftRadius: '0',
+          borderBottomRightRadius: '12',
+          borderTopLeftRadius: '0',
+          borderTopRightRadius: '12',
+        },
+        '& > [aria-haspopup][data-size="large"]': {
+          borderBottomRightRadius: '16',
+          borderTopRightRadius: '16',
+        },
+        '& > [aria-haspopup][data-size="small"]': {
+          borderBottomRightRadius: '8',
+          borderTopRightRadius: '8',
         },
         '& > [aria-haspopup] > svg': {
-          transitionDuration: '240ms',
+          transitionDuration: '240',
           transitionProperty: 'transform',
           transitionTimingFunction: 'spring',
         },

package/src/web/components/Stepper.tsx

@@ -71,7 +71,7 @@ namespace styles {
         borderRadius: 'full',
         flex: '1 !custom',
         height: '8',
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'background-color',
         transitionTimingFunction: 'snappy',
       },

package/src/web/components/Surface.tsx

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { variants } from '../zyzz.config.js'
+import { variants, vars } from '../zyzz.config.js'
 
 /**
  * A card container that renders a `div` by default. Pass `render` to swap the element, such as a
@@ -123,18 +123,18 @@ namespace styles {
           // A trailing text button bleeds by its inline padding, so its label aligns with the content
           // edge, but never past the surface padding.
           '& > [data-variant="text"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-20px !custom',
+            marginInlineEnd: '-20',
           },
           '& > [data-variant="text"][data-size="small"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-12px !custom',
+            marginInlineEnd: '-12',
           },
           '& > [data-variant="text"][data-size="large"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-24px !custom',
+            marginInlineEnd: '-24',
           },
           '[data-surface-size="medium"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
-            { marginInlineEnd: '-16px !custom' },
+            { marginInlineEnd: '-16' },
           '[data-surface-size="small"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
-            { marginInlineEnd: '-12px !custom' },
+            { marginInlineEnd: '-12' },
         },
       },
     },
@@ -158,15 +158,15 @@ namespace styles {
             cursor: 'pointer',
             font: 'inherit !custom',
             outlineColor: 'transparent !custom',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
             outlineStyle: 'solid !custom',
-            outlineWidth: '2px !custom',
+            outlineWidth: '2',
             padding: '0',
             textDecorationColor: 'transparent !custom',
             textDecorationLine: 'underline !custom',
             textDecorationThickness: '1px !custom',
             textUnderlineOffset: '4px !custom',
-            transitionDuration: '160ms',
+            transitionDuration: '160',
             transitionProperty: 'color, outline-color, text-decoration-color',
             transitionTimingFunction: 'snappy',
           },
@@ -187,12 +187,12 @@ namespace styles {
         color: 'foreground',
         display: 'block',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         textAlign: 'start',
-        transitionDuration: '160ms',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
         selectors: {
@@ -207,11 +207,11 @@ namespace styles {
           },
           '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
             backgroundColor: 'gray.200',
-            transform: 'scale(0.99) !custom',
+            scale: 'press',
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
           },
           // Edge-to-edge row fills would otherwise cross the rounded corners. A table clips rather
           // than hides its overflow, so a sticky header still sticks to the scrolling ancestor.
@@ -227,14 +227,14 @@ namespace styles {
             height: 'auto !custom',
           },
           '& > table[data-size="large"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '18px !custom' },
+            { paddingBlockStart: '18' },
           '& > table[data-size="medium"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '10px !custom' },
+            { paddingBlockStart: '10' },
           '& > table[data-size="small"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '6px !custom' },
+            { paddingBlockStart: '6' },
           '&:disabled, &[aria-disabled="true"]': {
             cursor: 'default',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
             pointerEvents: 'none',
           },
         },
@@ -242,7 +242,7 @@ namespace styles {
           transitionProperty: 'background-color, opacity, outline-color',
           selectors: {
             '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])':
-              { transform: 'none !custom' },
+              { scale: 'none !custom' },
           },
         },
       },
@@ -258,22 +258,22 @@ namespace styles {
             borderRadius: '16',
             padding: '24',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-24px !custom' },
-              '& > [data-rows]': { marginBlock: '-12px !custom' },
-              '& > table': { width: 'calc(100% + 48px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-24' },
+              '& > [data-rows]': { marginBlock: '-12' },
+              '& > table': { width: `calc(100% + ${vars.spacing['48']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '24px !custom',
+                paddingInlineStart: '24',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '24px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-24px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '24' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '24px !custom',
+                paddingBlockStart: '24',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-24px !custom',
+                marginBlockEnd: '-24',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '24px !custom',
+                paddingBlockEnd: '24',
               },
             },
           },
@@ -281,22 +281,22 @@ namespace styles {
             borderRadius: '12',
             padding: '16',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-16px !custom' },
-              '& > [data-rows]': { marginBlock: '-8px !custom' },
-              '& > table': { width: 'calc(100% + 32px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-16' },
+              '& > [data-rows]': { marginBlock: '-8' },
+              '& > table': { width: `calc(100% + ${vars.spacing['32']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '16px !custom',
+                paddingInlineStart: '16',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '16px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-16px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '16' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '16px !custom',
+                paddingBlockStart: '16',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-16px !custom',
+                marginBlockEnd: '-16',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '16px !custom',
+                paddingBlockEnd: '16',
               },
             },
           },
@@ -304,22 +304,22 @@ namespace styles {
             borderRadius: '8',
             padding: '12',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-12px !custom' },
-              '& > [data-rows]': { marginBlock: '-6px !custom' },
-              '& > table': { width: 'calc(100% + 24px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-12' },
+              '& > [data-rows]': { marginBlock: '-6' },
+              '& > table': { width: `calc(100% + ${vars.spacing['24']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '12px !custom',
+                paddingInlineStart: '12',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '12px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-12px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '12' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '12px !custom',
+                paddingBlockStart: '12',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-12px !custom',
+                marginBlockEnd: '-12',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '12px !custom',
+                paddingBlockEnd: '12',
               },
             },
           },