css-in-props 3.8.0 → 3.8.1

package/README.md

@@ -57,9 +57,9 @@ The prefix-to-handler registry that powers media queries, selectors, conditional
 | `[` | Attribute selector | `[disabled]`, `[data-active]` |
 | `>` | Child combinator | `> .child` |
 | `&` | Self selector | `&.active` |
-| `$` | Case conditional | `$isActive` |
-| `.` | Truthy conditional | `.visible` |
-| `!` | Falsy conditional | `!hidden` |
+| `$` | Global case (from `context.cases`) | `$isSafari` |
+| `.` | Truthy conditional (props/state, then `context.cases`) | `.visible` |
+| `!` | Falsy conditional (props/state, then `context.cases`) | `!hidden` |
 | `-` | CSS variable | `--my-var` |
 | `*`, `+`, `~` | CSS combinators | `* div`, `+ .sibling`, `~ .general` |
 
@@ -88,3 +88,48 @@ if (CSS_SELECTOR_PREFIXES.has(firstChar)) {
 ```
 
 > **Lesson learned:** Without the define-awareness check, keys like `$propsCollection` were moved into `props` and became invisible to the define system, breaking collection-based rendering in projects like Rosi and BigBrother.
+
+## Global Cases
+
+Cases are defined in `symbols/cases.js` and added to `context.cases` (not `designSystem`). Case functions receive the element as `this` and as the first argument, but must also work without element context (arrow functions).
+
+```javascript
+// symbols/cases.js
+export default {
+  isSafari: () => /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
+  isGeorgian () { return this?.state?.root?.language === 'ka' },
+  isMobile: () => window.innerWidth < 768
+}
+```
+
+```javascript
+// symbols/context.js
+import cases from './cases.js'
+export default { cases, /* ...other context */ }
+```
+
+### Resolution order
+
+- **`$` prefix**: Checks `context.cases[key]` first (call if function, check truthiness if value). Falls back to `element.props[key]`.
+- **`.` prefix**: Checks `element.props[key]` / `element.state[key]` / `element[key]` first. Falls back to `context.cases[key]`.
+- **`!` prefix**: Same as `.` but inverted — applies when condition is falsy.
+
+```javascript
+const Button = {
+  padding: 'A',
+  '$isSafari': { padding: 'B' },           // global case
+  '.isActive': { background: 'blue' },      // props/state, then cases
+  '!isMobile': { maxWidth: '1200px' }       // inverted
+}
+```
+
+## CSS Variable Resolution
+
+String values starting with `--` are automatically wrapped in `var()` for all CSS properties:
+
+```javascript
+const Box = {
+  padding: '--my-gap',      // → var(--my-gap)
+  fontSize: '--base-size',  // → var(--base-size)
+}
+```

package/dist/cjs/props/block.js

@@ -141,6 +141,12 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
     };
   },
+  // Traditional directional margin
+  marginTop: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, props),
+  marginBottom: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, props),
+  marginLeft: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, props),
+  marginRight: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, props),
+  // Logical properties
   marginInlineStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, props),
   marginInlineEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, props),
   marginBlockStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, props),

package/dist/cjs/transform/executors.js

@@ -66,7 +66,10 @@ const usePropsAsCSS = (sourceObj, element, opts) => {
       if (result) setToObj(key, result);
       if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
     } else if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-      const result = (0, import_utils.exec)(value, element);
+      let result = (0, import_utils.exec)(value, element);
+      if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
+        result = `var(${result})`;
+      }
       setToObj(key, { [key]: result });
       if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
     } else {

package/dist/cjs/transform/transformers.js

@@ -22,6 +22,7 @@ __export(transformers_exports, {
   transformersByPrefix: () => transformersByPrefix
 });
 module.exports = __toCommonJS(transformers_exports);
+var import_utils = require("@domql/utils");
 var import_executors = require("./executors");
 const applyMediaProps = (key, selectorProps, element) => {
   const { context } = element;
@@ -38,10 +39,18 @@ const applySelectorProps = (key, selectorProps, element) => {
   const selectorKey = `&${key}`;
   return { [selectorKey]: (0, import_executors.useCssInProps)(selectorProps, element) };
 };
+const resolveCase = (caseKey, element) => {
+  const caseFn = element.context?.cases?.[caseKey];
+  if (caseFn === void 0) return void 0;
+  if ((0, import_utils.isFunction)(caseFn)) return caseFn.call(element, element);
+  return !!caseFn;
+};
 const applyCaseProps = (key, selectorProps, element) => {
-  const { cases: CASES } = element.context?.designSystem || {};
   const caseKey = key.slice(1);
-  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
+  let isCaseTrue = resolveCase(caseKey, element);
+  if (isCaseTrue === void 0) {
+    isCaseTrue = !!element.props?.[caseKey];
+  }
   if (!isCaseTrue) return;
   return (0, import_executors.useCssInProps)(selectorProps, element);
 };
@@ -50,13 +59,21 @@ const applyVariableProps = (key, selectorVal, element) => {
 };
 const applyConditionalCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isCaseTrue) {
+    const caseResult = resolveCase(caseKey, element);
+    if (caseResult !== void 0) isCaseTrue = caseResult;
+  }
   if (!isCaseTrue) return;
   return (0, import_executors.useCssInProps)(selectorProps, element);
 };
 const applyConditionalFalsyProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isCaseTrue) {
+    const caseResult = resolveCase(caseKey, element);
+    if (caseResult !== void 0) isCaseTrue = caseResult;
+  }
   if (isCaseTrue) return;
   return (0, import_executors.useCssInProps)(selectorProps, element);
 };

package/dist/esm/props/block.js

@@ -124,6 +124,12 @@ const BLOCK_PROPS = {
       ...transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
     };
   },
+  // Traditional directional margin
+  marginTop: (val, { props }) => transformSizeRatio("marginBlockStart", val, props),
+  marginBottom: (val, { props }) => transformSizeRatio("marginBlockEnd", val, props),
+  marginLeft: (val, { props }) => transformSizeRatio("marginInlineStart", val, props),
+  marginRight: (val, { props }) => transformSizeRatio("marginInlineEnd", val, props),
+  // Logical properties
   marginInlineStart: (val, { props }) => transformSizeRatio("marginInlineStart", val, props),
   marginInlineEnd: (val, { props }) => transformSizeRatio("marginInlineEnd", val, props),
   marginBlockStart: (val, { props }) => transformSizeRatio("marginBlockStart", val, props),

package/dist/esm/transform/executors.js

@@ -40,7 +40,10 @@ const usePropsAsCSS = (sourceObj, element, opts) => {
       if (result) setToObj(key, result);
       if (!isProd && isObject(obj[key])) obj[key].label = key;
     } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-      const result = exec(value, element);
+      let result = exec(value, element);
+      if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
+        result = `var(${result})`;
+      }
       setToObj(key, { [key]: result });
       if (!isProd && isObject(obj[key])) obj[key].label = key;
     } else {

package/dist/esm/transform/transformers.js

@@ -1,3 +1,4 @@
+import { isFunction } from "@domql/utils";
 import { useCssInProps } from "./executors";
 const applyMediaProps = (key, selectorProps, element) => {
   const { context } = element;
@@ -14,10 +15,18 @@ const applySelectorProps = (key, selectorProps, element) => {
   const selectorKey = `&${key}`;
   return { [selectorKey]: useCssInProps(selectorProps, element) };
 };
+const resolveCase = (caseKey, element) => {
+  const caseFn = element.context?.cases?.[caseKey];
+  if (caseFn === void 0) return void 0;
+  if (isFunction(caseFn)) return caseFn.call(element, element);
+  return !!caseFn;
+};
 const applyCaseProps = (key, selectorProps, element) => {
-  const { cases: CASES } = element.context?.designSystem || {};
   const caseKey = key.slice(1);
-  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
+  let isCaseTrue = resolveCase(caseKey, element);
+  if (isCaseTrue === void 0) {
+    isCaseTrue = !!element.props?.[caseKey];
+  }
   if (!isCaseTrue) return;
   return useCssInProps(selectorProps, element);
 };
@@ -26,13 +35,21 @@ const applyVariableProps = (key, selectorVal, element) => {
 };
 const applyConditionalCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isCaseTrue) {
+    const caseResult = resolveCase(caseKey, element);
+    if (caseResult !== void 0) isCaseTrue = caseResult;
+  }
   if (!isCaseTrue) return;
   return useCssInProps(selectorProps, element);
 };
 const applyConditionalFalsyProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isCaseTrue) {
+    const caseResult = resolveCase(caseKey, element);
+    if (caseResult !== void 0) isCaseTrue = caseResult;
+  }
   if (isCaseTrue) return;
   return useCssInProps(selectorProps, element);
 };

package/dist/iife/index.js

@@ -49,7 +49,7 @@ var CssInProps = (() => {
   });
 
   // src/transform/executors.js
-  var import_utils5 = __require("@domql/utils");
+  var import_utils6 = __require("@domql/utils");
 
   // src/props/animation.js
   var import_utils = __require("@domql/utils");
@@ -272,6 +272,12 @@ var CssInProps = (() => {
         ...(0, import_scratch2.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
       };
     },
+    // Traditional directional margin
+    marginTop: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockStart", val, props),
+    marginBottom: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockEnd", val, props),
+    marginLeft: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineStart", val, props),
+    marginRight: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineEnd", val, props),
+    // Logical properties
     marginInlineStart: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineStart", val, props),
     marginInlineEnd: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginInlineEnd", val, props),
     marginBlockStart: (val, { props }) => (0, import_scratch2.transformSizeRatio)("marginBlockStart", val, props),
@@ -888,6 +894,7 @@ var CssInProps = (() => {
   ]);
 
   // src/transform/transformers.js
+  var import_utils5 = __require("@domql/utils");
   var applyMediaProps = (key, selectorProps, element) => {
     const { context } = element;
     if (!context.designSystem?.media) return;
@@ -903,10 +910,18 @@ var CssInProps = (() => {
     const selectorKey = `&${key}`;
     return { [selectorKey]: useCssInProps(selectorProps, element) };
   };
+  var resolveCase = (caseKey, element) => {
+    const caseFn = element.context?.cases?.[caseKey];
+    if (caseFn === void 0) return void 0;
+    if ((0, import_utils5.isFunction)(caseFn)) return caseFn.call(element, element);
+    return !!caseFn;
+  };
   var applyCaseProps = (key, selectorProps, element) => {
-    const { cases: CASES } = element.context?.designSystem || {};
     const caseKey = key.slice(1);
-    const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey];
+    let isCaseTrue = resolveCase(caseKey, element);
+    if (isCaseTrue === void 0) {
+      isCaseTrue = !!element.props?.[caseKey];
+    }
     if (!isCaseTrue) return;
     return useCssInProps(selectorProps, element);
   };
@@ -915,13 +930,21 @@ var CssInProps = (() => {
   };
   var applyConditionalCaseProps = (key, selectorProps, element) => {
     const caseKey = key.slice(1);
-    const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    if (!isCaseTrue) {
+      const caseResult = resolveCase(caseKey, element);
+      if (caseResult !== void 0) isCaseTrue = caseResult;
+    }
     if (!isCaseTrue) return;
     return useCssInProps(selectorProps, element);
   };
   var applyConditionalFalsyProps = (key, selectorProps, element) => {
     const caseKey = key.slice(1);
-    const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    if (!isCaseTrue) {
+      const caseResult = resolveCase(caseKey, element);
+      if (caseResult !== void 0) isCaseTrue = caseResult;
+    }
     if (isCaseTrue) return;
     return useCssInProps(selectorProps, element);
   };
@@ -946,7 +969,7 @@ var CssInProps = (() => {
   };
 
   // src/transform/executors.js
-  var isProd = (0, import_utils5.isProduction)();
+  var isProd = (0, import_utils6.isProduction)();
   var usePropsAsCSS = (sourceObj, element, opts) => {
     let obj = {};
     const rest = {};
@@ -963,30 +986,33 @@ var CssInProps = (() => {
         const val = value.split(" ");
         if (val.length) {
           const CLASS = element.context.designSystem.class;
-          const result = val.reduce((acc, curr) => (0, import_utils5.merge)(acc, CLASS[curr]), {});
+          const result = val.reduce((acc, curr) => (0, import_utils6.merge)(acc, CLASS[curr]), {});
           obj.designSystemClass = result;
         }
       } else if (key === "true") {
-        const val = (0, import_utils5.exec)(value, element);
-        (0, import_utils5.merge)(obj, applyTrueProps(val, element));
+        const val = (0, import_utils6.exec)(value, element);
+        (0, import_utils6.merge)(obj, applyTrueProps(val, element));
       } else if (element.classlist[key]) {
         const originalFromClass = element.classlist[key];
-        const result = (0, import_utils5.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
+        const result = (0, import_utils6.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
         if (result) setToObj(key, result);
-        if (!isProd && (0, import_utils5.isObject)(obj[key])) obj[key].label = key;
+        if (!isProd && (0, import_utils6.isObject)(obj[key])) obj[key].label = key;
       } else if (CSS_PROPS_REGISTRY[key]) {
-        let val = (0, import_utils5.exec)(value, element);
-        if ((0, import_utils5.isArray)(val)) {
-          val = val.reduce((a, c) => (0, import_utils5.merge)(a, c), {});
+        let val = (0, import_utils6.exec)(value, element);
+        if ((0, import_utils6.isArray)(val)) {
+          val = val.reduce((a, c) => (0, import_utils6.merge)(a, c), {});
         }
         let result = CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
-        if ((0, import_utils5.isArray)(result)) result = result.reduce((a, c) => (0, import_utils5.merge)(a, c), {});
+        if ((0, import_utils6.isArray)(result)) result = result.reduce((a, c) => (0, import_utils6.merge)(a, c), {});
         if (result) setToObj(key, result);
-        if (!isProd && (0, import_utils5.isObject)(obj[key])) obj[key].label = key;
+        if (!isProd && (0, import_utils6.isObject)(obj[key])) obj[key].label = key;
       } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-        const result = (0, import_utils5.exec)(value, element);
+        let result = (0, import_utils6.exec)(value, element);
+        if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
+          result = `var(${result})`;
+        }
         setToObj(key, { [key]: result });
-        if (!isProd && (0, import_utils5.isObject)(obj[key])) obj[key].label = key;
+        if (!isProd && (0, import_utils6.isObject)(obj[key])) obj[key].label = key;
       } else {
         rest[key] = value;
       }
@@ -1003,7 +1029,7 @@ var CssInProps = (() => {
           for (const k in result) {
             if (Object.prototype.hasOwnProperty.call(result, k)) {
               if (obj[k] && typeof obj[k] === "object" && typeof result[k] === "object") {
-                (0, import_utils5.overwriteDeep)(obj[k], result[k]);
+                (0, import_utils6.overwriteDeep)(obj[k], result[k]);
               } else {
                 obj[k] = result[k];
               }
@@ -1023,7 +1049,7 @@ var CssInProps = (() => {
       break;
     }
     if (hasSelectors) {
-      if (opts.unpack) return (0, import_utils5.overwrite)(cssObj, selectorsObj);
+      if (opts.unpack) return (0, import_utils6.overwrite)(cssObj, selectorsObj);
       cssObj._selectors = selectorsObj;
     }
     return cssObj;
@@ -1039,11 +1065,11 @@ var CssInProps = (() => {
   };
 
   // src/emotion.js
-  var import_utils6 = __require("@domql/utils");
+  var import_utils7 = __require("@domql/utils");
   var import_emotion2 = __require("@symbo.ls/emotion");
   var { css } = import_emotion2.emotion;
   var transformEmotion = (props, callback) => {
-    return (0, import_utils6.isFunction)(callback) ? callback(props) : css(props);
+    return (0, import_utils7.isFunction)(callback) ? callback(props) : css(props);
   };
   return __toCommonJS(index_exports);
 })();

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -35,9 +35,9 @@
     "src"
   ],
   "dependencies": {
-    "@domql/utils": "^3.8.0",
-    "@symbo.ls/emotion": "^3.8.0",
-    "@symbo.ls/scratch": "^3.8.0"
+    "@domql/utils": "^3.8.1",
+    "@symbo.ls/emotion": "^3.8.1",
+    "@symbo.ls/scratch": "^3.8.1"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "browser": "./dist/esm/index.js",

package/src/props/block.js

@@ -142,6 +142,13 @@ export const BLOCK_PROPS = {
       ...transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
     }
   },
+  // Traditional directional margin
+  marginTop: (val, { props }) => transformSizeRatio('marginBlockStart', val, props),
+  marginBottom: (val, { props }) => transformSizeRatio('marginBlockEnd', val, props),
+  marginLeft: (val, { props }) => transformSizeRatio('marginInlineStart', val, props),
+  marginRight: (val, { props }) => transformSizeRatio('marginInlineEnd', val, props),
+
+  // Logical properties
   marginInlineStart: (val, { props }) => transformSizeRatio('marginInlineStart', val, props),
   marginInlineEnd: (val, { props }) => transformSizeRatio('marginInlineEnd', val, props),
   marginBlockStart: (val, { props }) => transformSizeRatio('marginBlockStart', val, props),

package/src/transform/executors.js

@@ -56,7 +56,10 @@ export const usePropsAsCSS = (sourceObj, element, opts) => {
       if (!isProd && isObject(obj[key])) obj[key].label = key
     } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
       // they can be grouped
-      const result = exec(value, element)
+      let result = exec(value, element)
+      if (typeof result === 'string' && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
+        result = `var(${result})`
+      }
       setToObj(key, { [key]: result })
       if (!isProd && isObject(obj[key])) obj[key].label = key
     } else {

package/src/transform/transformers.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { isFunction } from '@domql/utils'
 import { useCssInProps } from './executors'
 
 /**
@@ -32,11 +33,21 @@ const applySelectorProps = (key, selectorProps, element) => {
   return { [selectorKey]: useCssInProps(selectorProps, element) }
 }
 
-// Conditional applicators
+// Resolve a case value from context.cases
+const resolveCase = (caseKey, element) => {
+  const caseFn = element.context?.cases?.[caseKey]
+  if (caseFn === undefined) return undefined
+  if (isFunction(caseFn)) return caseFn.call(element, element)
+  return !!caseFn
+}
+
+// $ prefix: Global cases from context.cases
 const applyCaseProps = (key, selectorProps, element) => {
-  const { cases: CASES } = element.context?.designSystem || {}
   const caseKey = key.slice(1)
-  const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey]
+  let isCaseTrue = resolveCase(caseKey, element)
+  if (isCaseTrue === undefined) {
+    isCaseTrue = !!element.props?.[caseKey]
+  }
   if (!isCaseTrue) return
   return useCssInProps(selectorProps, element)
 }
@@ -45,16 +56,26 @@ const applyVariableProps = (key, selectorVal, element) => {
   return { [key]: selectorVal }
 }
 
+// . prefix: Truthy conditional (props/state first, then context.cases)
 const applyConditionalCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1)
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
+  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
+  if (!isCaseTrue) {
+    const caseResult = resolveCase(caseKey, element)
+    if (caseResult !== undefined) isCaseTrue = caseResult
+  }
   if (!isCaseTrue) return
   return useCssInProps(selectorProps, element)
 }
 
+// ! prefix: Falsy conditional (props/state first, then context.cases)
 const applyConditionalFalsyProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1)
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
+  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
+  if (!isCaseTrue) {
+    const caseResult = resolveCase(caseKey, element)
+    if (caseResult !== undefined) isCaseTrue = caseResult
+  }
   if (isCaseTrue) return
   return useCssInProps(selectorProps, element)
 }