@vygruppen/spor-react 12.19.1 → 12.20.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.19.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.20.1 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs           313.28 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       667.32 KB
-ESM ⚡️ Build success in 2695ms
-CJS dist/index.cjs           336.53 KB
+CJS dist/index.cjs           337.20 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       667.32 KB
+CJS dist/index.cjs.map       668.38 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2695ms
-DTS ⚡️ Build success in 18723ms
+CJS ⚡️ Build success in 2567ms
+ESM dist/index.mjs           313.92 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       668.38 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM ⚡️ Build success in 2567ms
+DTS ⚡️ Build success in 18616ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        158.94 KB
+DTS dist/index.d.ts        158.95 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       158.94 KB
+DTS dist/index.d.cts       158.95 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.19.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.20.1 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 [dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @vygruppen/spor-react
 
+## 12.20.1
+
+### Patch Changes
+
+- b3659ad: Don't render SelectContent portalled on server side"
+
+## 12.20.0
+
+### Minor Changes
+
+- d8fd719: Add ESLint rule to disallow unnecessary curly braces in JSX props.
+  Also add rule to prevent abbreviations
+
+### Patch Changes
+
+- 1ed4bc2: Added colors that support darkmode to shadow-token
+- Updated dependencies [1ed4bc2]
+- Updated dependencies [d8fd719]
+  - @vygruppen/spor-design-tokens@4.3.0
+  - @vygruppen/spor-icon-react@4.4.0
+
 ## 12.19.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -312,7 +312,10 @@ var LightSpinner = ({
     children && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
-var useRotatingLabel = ({ label, delay }) => {
+var useRotatingLabel = ({
+  label,
+  delay
+}) => {
   const loadingTextArray = React29.useMemo(
     () => Array.isArray(label) ? label : [label],
     [label]
@@ -320,7 +323,7 @@ var useRotatingLabel = ({ label, delay }) => {
   const [currentLoadingTextIndex, setCurrentLoadingTextIndex] = React29.useState(0);
   usehooksTs.useInterval(() => {
     setCurrentLoadingTextIndex(
-      (prevIndex) => (prevIndex + 1) % loadingTextArray.length
+      (previousIndex) => (previousIndex + 1) % loadingTextArray.length
     );
   }, delay);
   return loadingTextArray[currentLoadingTextIndex];
@@ -1230,12 +1233,12 @@ var ServiceAlert = React29.forwardRef(
 ServiceAlert.displayName = "ServiceAlert";
 var texts6 = createTexts({
   notification: (notification) => {
-    const numNotification = Number(notification);
+    const numberNotification = Number(notification);
     return {
-      nb: `${numNotification} ${numNotification > 1 ? "varsler" : "varsel"}`,
-      nn: `${numNotification} ${numNotification > 1 ? "varslar" : "varsel"}`,
-      sv: `${numNotification} ${numNotification > 1 ? "underr\xE4ttelser" : "underr\xE4ttelse"}`,
-      en: `${numNotification} ${numNotification > 1 ? "notifications" : "notification"}`
+      nb: `${numberNotification} ${numberNotification > 1 ? "varsler" : "varsel"}`,
+      nn: `${numberNotification} ${numberNotification > 1 ? "varslar" : "varsel"}`,
+      sv: `${numberNotification} ${numberNotification > 1 ? "underr\xE4ttelser" : "underr\xE4ttelse"}`,
+      en: `${numberNotification} ${numberNotification > 1 ? "notifications" : "notification"}`
     };
   },
   service: {
@@ -1268,11 +1271,11 @@ var Breadcrumb = React29.forwardRef(
 Breadcrumb.displayName = "Breadcrumb";
 
 // src/calendar/utils.ts
-var capitalizeFirstLetter = (str) => str.replace(/^./, (c) => c.toUpperCase());
-function getSafeRangeValue(val) {
-  if (!val)
+var capitalizeFirstLetter = (string_) => string_.replace(/^./, (c) => c.toUpperCase());
+function getSafeRangeValue(value) {
+  if (!value)
     return null;
-  const [start, end] = val;
+  const [start, end] = value;
   const startDv = start;
   const endDv = end;
   if (startDv && endDv)
@@ -1310,10 +1313,10 @@ var getTimestampFromTime = (time) => {
 };
 var CalendarContext = React29.createContext(null);
 function useCalendar() {
-  const ctx = React29.useContext(CalendarContext);
-  if (!ctx)
+  const context = React29.useContext(CalendarContext);
+  if (!context)
     throw new Error("useCalendar must be used within CalendarProvider");
-  return ctx;
+  return context;
 }
 function CalendarProvider(props) {
   const locale = useCurrentLocale();
@@ -1343,7 +1346,7 @@ function CalendarProvider(props) {
   });
   const {
     calendarProps: singleCalendarProps,
-    prevButtonProps: singlePrevButtonProps,
+    prevButtonProps: singlePreviousButtonProps,
     nextButtonProps: singleNextButtonProps
   } = reactAria.useCalendar(
     calendarProps,
@@ -1369,7 +1372,7 @@ function CalendarProvider(props) {
   });
   const {
     calendarProps: rangeCalendarProps,
-    prevButtonProps: rangePrevButtonProps,
+    prevButtonProps: rangePreviousButtonProps,
     nextButtonProps: rangeNextButtonProps
   } = reactAria.useRangeCalendar(
     calendarProps,
@@ -1401,7 +1404,7 @@ function CalendarProvider(props) {
     mode: "range",
     calendarProps: rangeCalendarProps,
     nextButtonProps: rangeNextButtonProps,
-    prevButtonProps: rangePrevButtonProps,
+    prevButtonProps: rangePreviousButtonProps,
     startValue: getRangeStartValue(),
     endValue: getRangeEndValue(),
     isSelectingRange: rangeState.anchorDate !== null && !rangeState.isDragging,
@@ -1411,7 +1414,7 @@ function CalendarProvider(props) {
     mode: "single",
     calendarProps: singleCalendarProps,
     nextButtonProps: singleNextButtonProps,
-    prevButtonProps: singlePrevButtonProps,
+    prevButtonProps: singlePreviousButtonProps,
     startValue: singleState.value,
     endValue: null,
     isSelectingRange: false,
@@ -1594,7 +1597,14 @@ function CalendarGrid({ offset = {} }) {
       index
     ) }, index)) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: weeksInMonth }, (_, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map(
-      (date, i) => date ? /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { date, currentMonth: startDate }, i) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
+      (date, index) => date ? /* @__PURE__ */ jsxRuntime.jsx(
+        CalendarCell,
+        {
+          date,
+          currentMonth: startDate
+        },
+        index
+      ) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, index)
     ) }, weekIndex)) })
   ] });
 }
@@ -1707,7 +1717,7 @@ function Calendar({ dualView }) {
 }
 function ScrollCalendar(boxProps) {
   const { state, calendarProps, ref, startValue } = useCalendar();
-  const monthRefs = React29.useRef([]);
+  const monthReferences = React29.useRef([]);
   const hasScrolledRef = React29.useRef(false);
   const startMonth = state.visibleRange.start.year * 12 + state.visibleRange.start.month;
   const endMonth = state.visibleRange.end.year * 12 + state.visibleRange.end.month;
@@ -1725,7 +1735,7 @@ function ScrollCalendar(boxProps) {
       const targetMonth = targetDate.year * 12 + targetDate.month;
       const monthIndex = targetMonth - startMonth;
       if (monthIndex > 0 && monthIndex < monthCount) {
-        const element = monthRefs.current[monthIndex];
+        const element = monthReferences.current[monthIndex];
         if (element) {
           element.scrollIntoView({
             behavior: "instant",
@@ -1740,8 +1750,8 @@ function ScrollCalendar(boxProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width: "fit-content", ...calendarProps, ...boxProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flexDirection: "column", gap: 4, children: Array.from({ length: monthCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
     react.Box,
     {
-      ref: (el) => {
-        monthRefs.current[index] = el;
+      ref: (element) => {
+        monthReferences.current[index] = element;
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1992,7 +2002,7 @@ function CalendarGrid2({
     state
   );
   const weeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
-  const weeksInMonthRange = Array.from({ length: weeksInMonth }).fill(0).map((_, i) => i);
+  const weeksInMonthRange = Array.from({ length: weeksInMonth }).fill(0).map((_, index) => index);
   const recipe = react.useSlotRecipe({
     key: "datePicker"
   });
@@ -2088,7 +2098,7 @@ function CalendarHeader2({
     )
   ] });
 }
-var capitalize = (str = "") => str.charAt(0).toUpperCase() + str.slice(1);
+var capitalize = (string_ = "") => string_.charAt(0).toUpperCase() + string_.slice(1);
 var CalendarNavigator = ({
   title,
   unit,
@@ -2299,14 +2309,14 @@ var DateField = React29.forwardRef(
           ] })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(
         DateTimeSegment,
         {
           segment,
           ariaDescription: t(getAriaLabel(segment.type)),
           state
         },
-        i
+        index
       )) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -2871,8 +2881,8 @@ var DrawerContent = React29.forwardRef(
     const { size, placement } = useRootDrawerProps();
     const { setOpen } = react.useDialogContext();
     const handlers = reactSwipeable.useSwipeable({
-      onSwiped: (e) => {
-        const shouldClose = placement === "bottom" && e.dir === "Down" || placement === "top" && e.dir === "Up" || placement === "end" && e.dir === "Right" || placement === "start" && e.dir === "Left";
+      onSwiped: ({ dir }) => {
+        const shouldClose = placement === "bottom" && dir === "Down" || placement === "top" && dir === "Up" || placement === "end" && dir === "Right" || placement === "start" && dir === "Left";
         if (shouldClose) {
           setOpen(false);
         }
@@ -3306,18 +3316,18 @@ var useInputWidth = (inputRef) => {
   }, [inputRef]);
   return inputWidth;
 };
-function styleProps(obj) {
+function styleProps(object) {
   return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0)
+    Object.entries(object).filter(([, value]) => value !== void 0)
   );
 }
-var debounce = (fn, ms = 100) => {
+var debounce = (function_, ms = 100) => {
   let timer;
   return () => {
     clearTimeout(timer);
     timer = setTimeout(() => {
       timer = null;
-      fn();
+      function_();
     }, ms);
   };
 };
@@ -3360,18 +3370,18 @@ function useFloatingInputState({
       return () => cancelAnimationFrame(id);
     }
   }, [isControlled, syncFromRef]);
-  const handleFocus = (e) => {
-    onFocus == null ? void 0 : onFocus(e);
+  const handleFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
     setFocused(true);
   };
-  const handleBlur = (e) => {
-    onBlur == null ? void 0 : onBlur(e);
+  const handleBlur = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
     setFocused(false);
   };
-  const handleChange = (e) => {
-    onChange == null ? void 0 : onChange(e);
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(event);
     if (!isControlled) {
-      setUncontrolledValue(e.target.value);
+      setUncontrolledValue(event.target.value);
     }
   };
   return {
@@ -3561,34 +3571,25 @@ function ListBoxSection({ section, state }) {
   });
   const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsxRuntime.jsx(List, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    react.ListItem,
-    {
-      ...itemProps,
-      listStyleType: "none",
-      marginLeft: "0",
-      paddingX: "1",
-      children: [
-        section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
-          react.Box,
-          {
-            fontSize: ["mobile.sm", "desktop.sm"],
-            color: titleColor,
-            paddingTop: 1,
-            marginTop: isFirstSection ? 0 : 2,
-            marginLeft: "1",
-            textTransform: "uppercase",
-            fontWeight: "bold",
-            ...headingProps,
-            children: section.rendered
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: Array.from(((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []).map(
-          (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
-        ) })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(List, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.ListItem, { ...itemProps, listStyleType: "none", marginLeft: "0", paddingX: "1", children: [
+    section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
+      react.Box,
+      {
+        fontSize: ["mobile.sm", "desktop.sm"],
+        color: titleColor,
+        paddingTop: 1,
+        marginTop: isFirstSection ? 0 : 2,
+        marginLeft: "1",
+        textTransform: "uppercase",
+        fontWeight: "bold",
+        ...headingProps,
+        children: section.rendered
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: Array.from(((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []).map(
+      (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
+    ) })
+  ] }) });
 }
 var NativeSelect = React29__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
@@ -3641,9 +3642,9 @@ var NativeSelect = React29__namespace.forwardRef(function NativeSelect2(props, r
 });
 var NumericStepper = React29__namespace.default.forwardRef((props, ref) => {
   const {
-    name: nameProp,
-    id: idProp,
-    value: valueProp,
+    name: nameProperty,
+    id: idProperty,
+    value: valueProperty,
     defaultValue = 1,
     onValueChange,
     minValue = 0,
@@ -3659,7 +3660,7 @@ var NumericStepper = React29__namespace.default.forwardRef((props, ref) => {
   const recipe = react.useSlotRecipe({ key: "numericStepper" });
   const styles = recipe();
   const [value, onChange] = react.useControllableState({
-    value: valueProp,
+    value: valueProperty,
     onChange: onValueChange,
     defaultValue
   });
@@ -3668,7 +3669,7 @@ var NumericStepper = React29__namespace.default.forwardRef((props, ref) => {
     var _a5;
     (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, id: idProp, ref, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, id: idProperty, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       VerySmallButton,
       {
@@ -3686,7 +3687,7 @@ var NumericStepper = React29__namespace.default.forwardRef((props, ref) => {
           }
         },
         disabled: disabled || value <= minValue,
-        id: value <= minValue ? void 0 : idProp
+        id: value <= minValue ? void 0 : idProperty
       }
     ),
     withInput ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3694,16 +3695,16 @@ var NumericStepper = React29__namespace.default.forwardRef((props, ref) => {
       {
         min: minValue,
         max: maxValue,
-        name: nameProp,
+        name: nameProperty,
         value,
         disabled,
-        id: value === 0 ? void 0 : idProp,
+        id: value === 0 ? void 0 : idProperty,
         css: styles.input,
         width: `${Math.max(value.toString().length + 1, 3)}ch`,
         "aria-live": "assertive",
         "aria-label": ariaLabelContext.plural === "" ? "" : t(texts14.currentNumberAriaLabel(ariaLabelContext.plural)),
-        onChange: (e) => {
-          const numericInput = Number(e.target.value);
+        onChange: (event) => {
+          const numericInput = Number(event.target.value);
           if (Number.isNaN(numericInput)) {
             return;
           }
@@ -3735,7 +3736,7 @@ var NumericStepper = React29__namespace.default.forwardRef((props, ref) => {
         ),
         onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
         disabled: disabled || value >= maxValue,
-        id: value >= maxValue ? void 0 : idProp
+        id: value >= maxValue ? void 0 : idProperty
       }
     )
   ] });
@@ -3828,14 +3829,14 @@ var PasswordInput = React29.forwardRef(
   (props, ref) => {
     const {
       defaultVisible,
-      visible: visibleProp,
+      visible: visibleProperty,
       onVisibleChange,
       label,
       startElement,
       ...rest
     } = props;
     const [visible, setVisible] = react.useControllableState({
-      value: visibleProp,
+      value: visibleProperty,
       defaultValue: defaultVisible || false,
       onChange: onVisibleChange
     });
@@ -3852,12 +3853,12 @@ var PasswordInput = React29.forwardRef(
           {
             variant: "ghost",
             disabled: rest.disabled,
-            onPointerDown: (e) => {
+            onPointerDown: (event) => {
               if (rest.disabled)
                 return;
-              if (e.button !== 0)
+              if (event.button !== 0)
                 return;
-              e.preventDefault();
+              event.preventDefault();
               setVisible(!visible);
             },
             children: visible ? t(texts15.hidePassword) : t(texts15.showPassword)
@@ -4003,8 +4004,8 @@ var PhoneNumberInput = React29.forwardRef((props, ref) => {
         value: value.nationalNumber,
         invalid,
         errorText,
-        onChange: (e) => {
-          const target = e.target;
+        onChange: (event) => {
+          const target = event.target;
           const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
           onChange({
             countryCode: value.countryCode,
@@ -4126,7 +4127,14 @@ var Select = React29__namespace.forwardRef(
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
               label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, children })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SelectContent,
+                {
+                  css: styles.selectContent,
+                  portalled: globalThis.window !== void 0,
+                  children
+                }
+              )
             ]
           }
         )
@@ -4413,7 +4421,11 @@ var icons = {
   },
   walk: { sm: spor_icon_react_star.WalkFill18Icon, md: spor_icon_react_star.WalkFill24Icon, lg: spor_icon_react_star.WalkFill30Icon }
 };
-var LinjeTagIcon = ({ variant, size, css }) => {
+var LinjeTagIcon = ({
+  variant,
+  size,
+  css
+}) => {
   var _a5;
   const IconComponent2 = ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent2, {}) });
@@ -5290,7 +5302,7 @@ var NudgeContent = React29.forwardRef(
           {
             isLastStep,
             onNext: () => {
-              setCurrentStep((prev) => prev + 1);
+              setCurrentStep((previous) => previous + 1);
             }
           }
         )
@@ -5598,13 +5610,13 @@ var ProgressIndicator = React29.forwardRef(({ numberOfSteps, activeStep }, ref)
       "aria-valuenow": activeStep,
       "aria-valuetext": t(texts25.stepsOf(activeStep, numberOfSteps)),
       ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
         ProgressDot,
         {
-          "aria-valuenow": i + 1,
-          isActive: activeStep === i + 1
+          "aria-valuenow": index + 1,
+          isActive: activeStep === index + 1
         },
-        i
+        index
       )) })
     }
   );
@@ -6591,17 +6603,24 @@ var radii = react.defineSemanticTokens.radii({
   round: { value: "50%" }
 });
 var shadows = react.defineSemanticTokens.shadows({
-  none: {
-    value: "none"
-  },
+  none: { value: "none" },
   sm: {
-    value: tokens23__namespace.default.depth.shadow.sm.value
+    value: {
+      _light: tokens23__namespace.default.depth.shadow.sm.value._light,
+      _dark: tokens23__namespace.default.depth.shadow.sm.value._dark
+    }
   },
   md: {
-    value: tokens23__namespace.default.depth.shadow.md.value
+    value: {
+      _light: tokens23__namespace.default.depth.shadow.md.value._light,
+      _dark: tokens23__namespace.default.depth.shadow.md.value._dark
+    }
   },
   lg: {
-    value: tokens23__namespace.default.depth.shadow.lg.value
+    value: {
+      _light: tokens23__namespace.default.depth.shadow.lg.value._light,
+      _dark: tokens23__namespace.default.depth.shadow.lg.value._dark
+    }
   }
 });