@vygruppen/spor-react 12.4.1 → 12.4.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.4.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.4.3 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -10,17 +10,17 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
+ESM dist/index.mjs           294.22 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs           295.23 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       633.84 KB
-ESM ⚡️ Build success in 2800ms
-CJS dist/index.js           315.85 KB
+ESM dist/index.mjs.map       633.63 KB
+ESM ⚡️ Build success in 2624ms
+CJS dist/index.js           314.70 KB
 CJS dist/icons/index.js     380.00 B
-CJS dist/index.js.map       633.84 KB
 CJS dist/icons/index.js.map 157.00 B
-CJS ⚡️ Build success in 2801ms
-DTS ⚡️ Build success in 30877ms
+CJS dist/index.js.map       633.63 KB
+CJS ⚡️ Build success in 2627ms
+DTS ⚡️ Build success in 29298ms
 DTS dist/icons/index.d.ts  44.00 B
 DTS dist/index.d.ts        126.10 KB
 DTS dist/icons/index.d.mts 44.00 B

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.4.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.4.3 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 12.4.3
+
+### Patch Changes
+
+- 144aca1: Support exporting icons directly from spor, which seems to fix SSR issues for icons.
+
+## 12.4.2
+
+### Patch Changes
+
+- d96b924: Revert exporting icons, which caused issues with tokens with remix.
+
 ## 12.4.1
 
 ### Patch Changes

package/dist/index.js

@@ -61,9 +61,8 @@ var paletteJson__default = /*#__PURE__*/_interopDefault(paletteJson);
 var warnAboutMismatchingIcon = ({
   icon
 }) => {
-  var _a5, _b4;
   if (process.env.NODE_ENV !== "production") {
-    const displayName = (_b4 = (_a5 = icon == null ? void 0 : icon.type) == null ? void 0 : _a5.render) == null ? void 0 : _b4.displayName;
+    const displayName = icon?.type?.render?.displayName;
     if (!displayName) {
       return;
     }
@@ -829,7 +828,6 @@ var badgeRecipie = react.defineRecipe({
 });
 
 // src/theme/recipes/code.ts
-var _a;
 var codeRecipie = react.defineRecipe({
   base: {
     fontFamily: "monospace",
@@ -838,7 +836,7 @@ var codeRecipie = react.defineRecipe({
     paddingX: 1
   },
   variants: {
-    colorPalette: ((_a = badgeRecipie.variants) == null ? void 0 : _a.colorPalette) ?? {}
+    colorPalette: badgeRecipie.variants?.colorPalette ?? {}
   }
 });
 var StyledCode = react.chakra(react.Code, codeRecipie);
@@ -1155,7 +1153,7 @@ var Alert = React28.forwardRef((props, ref) => {
   const { open, onClose } = react.useDisclosure({ defaultOpen: true });
   const handleAlertClose = () => {
     onClose();
-    onAlertClose == null ? void 0 : onAlertClose();
+    onAlertClose?.();
   };
   const recipe = react.useSlotRecipe({ key: "alert" });
   const styles = recipe({ variant: props.variant });
@@ -1991,8 +1989,7 @@ function CalendarCell({
     stateProps["data-unavailable"] = true;
   }
   React28.useEffect(() => {
-    var _a5;
-    (_a5 = ref.current) == null ? void 0 : _a5.addEventListener(
+    ref.current?.addEventListener(
       "touchend",
       (event) => {
         event.preventDefault();
@@ -2038,7 +2035,7 @@ var getCurrentTime = () => {
   return date.parseTime(now.toTimeString().split(" ")[0]);
 };
 var getTimestampFromTime = (time) => {
-  return `${(time == null ? void 0 : time.hour) ?? 0}:${(time == null ? void 0 : time.minute) ?? 0}`;
+  return `${time?.hour ?? 0}:${time?.minute ?? 0}`;
 };
 var weekDays = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "L\xF8", "S\xF8"],
@@ -2342,7 +2339,6 @@ function createCalendar2(identifier) {
 }
 var DateField = React28.forwardRef(
   ({ labelId, ...props }, externalRef) => {
-    var _a5;
     const locale = useCurrentLocale();
     const recipe = react.useSlotRecipe({
       key: "datePicker",
@@ -2388,7 +2384,7 @@ var DateField = React28.forwardRef(
         "input",
         {
           type: "hidden",
-          value: ((_a5 = state.value) == null ? void 0 : _a5.toString()) ?? "",
+          value: state.value?.toString() ?? "",
           name: props.name
         }
       )
@@ -2474,8 +2470,8 @@ var DatePicker = React28.forwardRef(
       ...props,
       shouldCloseOnSelect: true,
       errorMessage: errorText,
-      isRequired: props.isRequired ?? (chakraFieldProps == null ? void 0 : chakraFieldProps.required),
-      validationState: (chakraFieldProps == null ? void 0 : chakraFieldProps.invalid) ? "invalid" : "valid"
+      isRequired: props.isRequired ?? chakraFieldProps?.required,
+      validationState: chakraFieldProps?.invalid ? "invalid" : "valid"
     });
     const internalRef = React28.useRef(null);
     const ref = externalRef ?? internalRef;
@@ -2611,8 +2607,8 @@ function DateRangePicker({
     shouldCloseOnSelect: true,
     isInvalid: invalid,
     errorMessage: errorText,
-    isRequired: props.required ?? (fieldContextPRops == null ? void 0 : fieldContextPRops.required),
-    validationState: (fieldContextPRops == null ? void 0 : fieldContextPRops.invalid) ? "invalid" : "valid"
+    isRequired: props.required ?? fieldContextPRops?.required,
+    validationState: fieldContextPRops?.invalid ? "invalid" : "valid"
   });
   const ref = React28.useRef(null);
   const uniqueId = reactAria.useId();
@@ -2788,7 +2784,7 @@ var TimePicker = ({
   )}`;
   const inputLabel = label ?? t(texts11.time);
   const ariaLabel = `${inputLabel} \u2013 ${t(
-    texts11.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts11.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`)
   )}`;
   return /* @__PURE__ */ jsxRuntime.jsx(Field3, { as: "time", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     StyledField,
@@ -3136,7 +3132,6 @@ var Popover = React28.forwardRef(
     hasBackdrop = true,
     containerPadding = 12
   }, ref) => {
-    var _a5;
     const internalRef = React28.useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = reactAria.usePopover(
@@ -3157,7 +3152,7 @@ var Popover = React28.forwardRef(
       {
         ...popoverProps,
         ref: popoverRef,
-        minWidth: ((_a5 = triggerRef.current) == null ? void 0 : _a5.clientWidth) ?? "auto",
+        minWidth: triggerRef.current?.clientWidth ?? "auto",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
           children,
@@ -3539,8 +3534,7 @@ function Option({ item, state }) {
     dataFields["data-focus-visible"] = true;
   }
   React28.useEffect(() => {
-    var _a5;
-    (_a5 = ref == null ? void 0 : ref.current) == null ? void 0 : _a5.addEventListener(
+    ref?.current?.addEventListener(
       "touchend",
       (event) => {
         event.preventDefault();
@@ -3558,7 +3552,6 @@ var useOptionContext = () => {
   return React28.useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
-  var _a5, _b4;
   const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
@@ -3580,7 +3573,7 @@ function ListBoxSection({ section, state }) {
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
+    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...state.collection.getChildren?.(section.key) ?? []].map(
       (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
     ) })
   ] }) });
@@ -3720,7 +3713,6 @@ function coreText(state) {
 }
 
 // src/theme/slot-recipes/native-select.ts
-var _a2, _b;
 var nativeSelectSlotRecipe = react.defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
   className: "spor-nativeSelect",
@@ -3759,12 +3751,12 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
     variant: {
       core: {
         field: {
-          ...(_a2 = inputRecipe.variants) == null ? void 0 : _a2.variant.core
+          ...inputRecipe.variants?.variant.core
         }
       },
       floating: {
         field: {
-          ...(_b = inputRecipe.variants) == null ? void 0 : _b.variant.floating
+          ...inputRecipe.variants?.variant.floating
         }
       }
     }
@@ -3907,8 +3899,7 @@ var NumericStepper = React28__namespace.default.forwardRef((props, ref) => {
   });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
   const focusOnAddButton = () => {
-    var _a5;
-    (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
+    addButtonRef.current?.focus();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4165,10 +4156,7 @@ var CountryCodeSelect = React28.forwardRef((props, ref) => {
   const { t } = useTranslation();
   if (props.allowedCountryCodes) {
     callingCodes.items = callingCodes.items.filter(
-      (callingCode) => {
-        var _a5;
-        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.some((code) => code === callingCode.label);
-      }
+      (callingCode) => props.allowedCountryCodes?.some((code) => code === callingCode.label)
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4872,8 +4860,7 @@ var icons = {
   walk: { sm: sporIconReact.WalkFill18Icon, md: sporIconReact.WalkFill24Icon, lg: sporIconReact.WalkFill30Icon }
 };
 var getCorrectIcon = ({ variant, size }) => {
-  var _a5;
-  return ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
+  return icons[variant]?.[size] ?? react.Box;
 };
 var LineIcon = React28.forwardRef(
   function LineIcon2({
@@ -5031,7 +5018,7 @@ var ExternalIcon = ({ label }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fra
 var TextLink = React28.forwardRef(
   ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
-    const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
+    const isExternal = external ?? Boolean(href?.startsWith("http://") || href?.startsWith("https://"));
     const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
     if (props.asChild && React28.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href, ...props, ref, children: React28.cloneElement(children, {
@@ -6833,7 +6820,6 @@ var linkRecipe = react.defineRecipe({
     }
   }
 });
-var _a3, _b2;
 var textareaRecipe = react.defineRecipe({
   className: "spor-textarea",
   base: {
@@ -6850,10 +6836,10 @@ var textareaRecipe = react.defineRecipe({
   variants: {
     variant: {
       core: {
-        ...(_a3 = inputRecipe.variants) == null ? void 0 : _a3.variant.core
+        ...inputRecipe.variants?.variant.core
       },
       floating: {
-        ...(_b2 = inputRecipe.variants) == null ? void 0 : _b2.variant.floating
+        ...inputRecipe.variants?.variant.floating
       }
     }
   }
@@ -8458,7 +8444,6 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
 });
 
 // src/theme/slot-recipes/info-tag.ts
-var _a4, _b3, _c, _d;
 var infoTagSlotRecipe = react.defineSlotRecipe({
   slots: infoTagAnatomy.keys(),
   className: "spor-info-tag",
@@ -8491,21 +8476,21 @@ var infoTagSlotRecipe = react.defineSlotRecipe({
       }
     },
     size: {
-      ...(_a4 = travelTagSlotRecipe.variants) == null ? void 0 : _a4.size,
+      ...travelTagSlotRecipe.variants?.size,
       sm: {
-        ...(_b3 = travelTagSlotRecipe.variants) == null ? void 0 : _b3.size.sm,
+        ...travelTagSlotRecipe.variants?.size.sm,
         iconContainer: {
           borderRadius: "0.375rem"
         }
       },
       md: {
-        ...(_c = travelTagSlotRecipe.variants) == null ? void 0 : _c.size.md,
+        ...travelTagSlotRecipe.variants?.size.md,
         iconContainer: {
           borderRadius: "0.375rem"
         }
       },
       lg: {
-        ...(_d = travelTagSlotRecipe.variants) == null ? void 0 : _d.size.lg,
+        ...travelTagSlotRecipe.variants?.size.lg,
         iconContainer: {
           borderRadius: "sm"
         }