@resistdesign/voltra 3.0.0-alpha.35 → 3.0.0-alpha.36

package/api/index.js

@@ -1,6 +1,6 @@
 import { ITEM_RELATIONSHIP_DAC_RESOURCE_NAME, ComparisonOperators } from '../chunk-7AMEFPPP.js';
-import { getNoErrorDescriptor, getErrorDescriptor, ERROR_MESSAGE_CONSTANTS, validateTypeOperationAllowed, getValidityValue, validateTypeInfoValue, validateTypeInfoFieldValue } from '../chunk-WTD5BBJP.js';
-import { mergeStringPaths, getPathString, getPathArray } from '../chunk-GYWRAW3Y.js';
+import { getNoErrorDescriptor, getErrorDescriptor, ERROR_MESSAGE_CONSTANTS, validateTypeOperationAllowed, getValidityValue, validateTypeInfoValue, validateTypeInfoFieldValue } from '../chunk-C3LXDJM5.js';
+import { mergeStringPaths, getPathString, getPathArray } from '../chunk-WNFRDIBW.js';
 import '../chunk-I2KLQ2HA.js';
 import { QueryCommand, GetItemCommand, BatchGetItemCommand, BatchWriteItemCommand, DynamoDBClient, PutItemCommand, UpdateItemCommand, DeleteItemCommand, ScanCommand } from '@aws-sdk/client-dynamodb';
 import { marshall, unmarshall } from '@aws-sdk/util-dynamodb';

package/app/index.js

@@ -1,9 +1,9 @@
-export { createEasyLayout, getEasyLayoutTemplateDetails, getPascalCaseAreaName } from '../chunk-BKRJZXWX.js';
+export { createEasyLayout, getEasyLayoutTemplateDetails, getPascalCaseAreaName } from '../chunk-TNQLXU6L.js';
 export { computeTrackPixels } from '../chunk-TJFTWPXQ.js';
-export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas } from '../chunk-X3NHBZUT.js';
+export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas, wrapRouteAdapterWithPathResolver } from '../chunk-Z7T6VEWO.js';
 import '../chunk-7AMEFPPP.js';
-import '../chunk-WTD5BBJP.js';
-import { mergeStringPaths, PATH_DELIMITER } from '../chunk-GYWRAW3Y.js';
+import '../chunk-C3LXDJM5.js';
+import { mergeStringPaths, PATH_DELIMITER } from '../chunk-WNFRDIBW.js';
 import '../chunk-I2KLQ2HA.js';
 import { createContext, useContext, useRef, useMemo, useCallback, useState, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/app/utils/Route.d.ts

@@ -14,7 +14,12 @@ export type RouteAdapter = {
     getPath: () => string;
     /** Subscribe to path changes. */
     subscribe: (listener: (path: string) => void) => () => void;
-    /** Optional navigation helper for adapters that can push state. */
+    /**
+     * Optional navigation helper for adapters that can push state.
+     *
+     * `push`/`replace` paths are normalized through shared routing utils:
+     * absolute (`/x`), relative (`x`, `./x`, `../x`), and empty (`""` => `/`).
+     */
     push?: (path: string, title?: string) => void;
     /** Optional navigation helper for adapters that can replace state. */
     replace?: (path: string, title?: string) => void;
@@ -105,6 +110,16 @@ export declare const RouteContextProvider: import("react").Provider<RouteContext
  * @returns The current route context.
  */
 export declare const useRouteContext: () => RouteContextType;
+/**
+ * Wrap a RouteAdapter so `push` and `replace` resolve relative paths.
+ *
+ * This preserves existing adapter behavior for subscriptions/back navigation,
+ * while normalizing path syntax consistently across web/native/app wrappers.
+ *
+ * @param adapter - RouteAdapter to normalize.
+ * @returns Adapter with relative-aware `push` and `replace`.
+ */
+export declare const wrapRouteAdapterWithPathResolver: (adapter: RouteAdapter) => RouteAdapter;
 /**
  * RouteProvider props.
  */

package/app/utils/RouteHistory.d.ts

@@ -13,6 +13,7 @@ import type { RouteAdapter } from "./Route";
  *
  * Adapter navigation methods call history with `replaceSearch: true` so a
  * path-only navigation does not accidentally retain a previous query string.
+ * Relative navigation input is resolved against the current history path.
  *
  * Example:
  * ```ts

package/build/index.js

@@ -1,4 +1,4 @@
-import { getPotentialJSONValue, getPathArray } from '../chunk-GYWRAW3Y.js';
+import { getPotentialJSONValue, getPathArray } from '../chunk-WNFRDIBW.js';
 import '../chunk-I2KLQ2HA.js';
 import { SyntaxKind, isLiteralTypeNode, isStringLiteral, isNumericLiteral, createSourceFile, ScriptTarget } from 'typescript';
 

package/{chunk-WTD5BBJP.js → chunk-C3LXDJM5.js}

@@ -1,4 +1,4 @@
-import { getPathString } from './chunk-GYWRAW3Y.js';
+import { getPathString } from './chunk-WNFRDIBW.js';
 
 // src/common/TypeParsing/TypeInfo.ts
 var TypeOperation = /* @__PURE__ */ ((TypeOperation2) => {

package/{chunk-BKRJZXWX.js → chunk-TNQLXU6L.js}

@@ -1,4 +1,4 @@
-import { parseTemplate, validateAreas } from './chunk-X3NHBZUT.js';
+import { parseTemplate, validateAreas } from './chunk-Z7T6VEWO.js';
 
 // src/app/utils/EasyLayout.tsx
 var getPascalCaseAreaName = (area) => {

package/{chunk-GYWRAW3Y.js → chunk-WNFRDIBW.js}

@@ -33,22 +33,65 @@ var mergeStringPaths = (path1, path2, delimiter = PATH_DELIMITER, filterEmptyOut
   useJson,
   uriEncodeParts
 );
-var resolvePath = (currentPath, newPath) => {
-  const newSegments = getPathArray(newPath, PATH_DELIMITER, true);
-  let currentSegments = getPathArray(currentPath, PATH_DELIMITER, true);
-  if (newPath.startsWith("/")) {
-    currentSegments = [];
+var splitRoutePathParts = (rawPath) => {
+  let path = rawPath;
+  let hash = "";
+  let search = "";
+  const hashIndex = path.indexOf("#");
+  if (hashIndex >= 0) {
+    hash = path.slice(hashIndex);
+    path = path.slice(0, hashIndex);
   }
-  newSegments.forEach((segment) => {
+  const searchIndex = path.indexOf("?");
+  if (searchIndex >= 0) {
+    search = path.slice(searchIndex);
+    path = path.slice(0, searchIndex);
+  }
+  return {
+    path,
+    search,
+    hash
+  };
+};
+var resolveRouteAdapterPath = (currentPath, nextPath) => {
+  const rawNextPath = String(nextPath ?? "").trim();
+  if (rawNextPath === "") {
+    return "/";
+  }
+  const { path: rawCurrentBase } = splitRoutePathParts(
+    String(currentPath ?? "").trim()
+  );
+  const { path: rawRelativePath, search, hash } = splitRoutePathParts(rawNextPath);
+  const isAbsoluteTarget = rawRelativePath.startsWith(PATH_DELIMITER);
+  const currentSegments = getPathArray(
+    rawCurrentBase || PATH_DELIMITER,
+    PATH_DELIMITER,
+    true,
+    true,
+    false,
+    false
+  );
+  const outputSegments = isAbsoluteTarget ? [] : [...currentSegments];
+  const relativeSegments = getPathArray(
+    rawRelativePath,
+    PATH_DELIMITER,
+    true,
+    true,
+    false,
+    false
+  );
+  relativeSegments.forEach((segment) => {
+    if (segment === "." || segment === "") {
+      return;
+    }
     if (segment === "..") {
-      if (currentSegments.length > 0) {
-        currentSegments.pop();
-      }
-    } else if (segment !== ".") {
-      currentSegments.push(segment);
+      outputSegments.pop();
+      return;
     }
+    outputSegments.push(segment);
   });
-  return "/" + currentSegments.join("/");
+  const resolvedPath = outputSegments.length > 0 ? `/${outputSegments.join(PATH_DELIMITER)}` : PATH_DELIMITER;
+  return `${resolvedPath}${search}${hash}`;
 };
 var getParamsAndTestPath = (path, testPath, exact = false) => {
   const pathList = getPathArray(path);
@@ -75,4 +118,4 @@ var getParamsAndTestPath = (path, testPath, exact = false) => {
   }
 };
 
-export { PATH_DELIMITER, getParamsAndTestPath, getPathArray, getPathString, getPotentialJSONValue, mergeStringPaths, resolvePath };
+export { PATH_DELIMITER, getParamsAndTestPath, getPathArray, getPathString, getPotentialJSONValue, mergeStringPaths, resolveRouteAdapterPath };

package/{chunk-X3NHBZUT.js → chunk-Z7T6VEWO.js}

@@ -1,6 +1,6 @@
-import { getErrorDescriptor, getNoErrorDescriptor, validateTypeInfoDataItem, getArrayItemErrorMap, getErrorDescriptors, ERROR_MESSAGE_CONSTANTS } from './chunk-WTD5BBJP.js';
-import { getPathString, mergeStringPaths, getParamsAndTestPath, resolvePath } from './chunk-GYWRAW3Y.js';
-import { createContext, useContext, useState, useEffect, useMemo, useCallback, createElement, useRef } from 'react';
+import { getErrorDescriptor, getNoErrorDescriptor, validateTypeInfoDataItem, getArrayItemErrorMap, getErrorDescriptors, ERROR_MESSAGE_CONSTANTS } from './chunk-C3LXDJM5.js';
+import { resolveRouteAdapterPath, getPathString, mergeStringPaths, getParamsAndTestPath } from './chunk-WNFRDIBW.js';
+import { createContext, useContext, useMemo, useState, useEffect, useCallback, createElement, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/app/utils/easy-layout/parseTemplate.ts
@@ -309,10 +309,14 @@ var createRouteAdapterFromHistory = (history) => {
       });
     },
     push: (path) => {
-      history.push(path, { replaceSearch: true });
+      history.push(resolveRouteAdapterPath(history.location.path, path), {
+        replaceSearch: true
+      });
     },
     replace: (path) => {
-      history.replace(path, { replaceSearch: true });
+      history.replace(resolveRouteAdapterPath(history.location.path, path), {
+        replaceSearch: true
+      });
     },
     back: history.back,
     canGoBack: () => history.index > 0
@@ -365,22 +369,30 @@ var createBrowserRouteAdapter = () => {
       if (!WINDOW?.history) {
         return;
       }
-      const targetPath = parseHistoryPath(path).path;
+      const resolvedPath = resolveRouteAdapterPath(
+        WINDOW.location?.pathname ?? "",
+        path
+      );
+      const targetPath = parseHistoryPath(resolvedPath).path;
       if (targetPath === (WINDOW.location?.pathname ?? "")) {
         return;
       }
-      WINDOW.history.pushState({}, title, path);
+      WINDOW.history.pushState({}, title, resolvedPath);
       notify();
     },
     replace: (path, title = "") => {
       if (!WINDOW?.history?.replaceState) {
         return;
       }
-      const targetPath = parseHistoryPath(path).path;
+      const resolvedPath = resolveRouteAdapterPath(
+        WINDOW.location?.pathname ?? "",
+        path
+      );
+      const targetPath = parseHistoryPath(resolvedPath).path;
       if (targetPath === (WINDOW.location?.pathname ?? "")) {
         return;
       }
-      WINDOW.history.replaceState({}, title, path);
+      WINDOW.history.replaceState({}, title, resolvedPath);
       notify();
     },
     back: () => WINDOW?.history?.back(),
@@ -434,16 +446,18 @@ var createNativeRouteAdapter = (initialPath = "/", ingress) => {
   return {
     ...adapter,
     push: (path, title) => {
-      if (parseHistoryPath(path).path === history.location.path) {
+      const resolvedPath = resolveRouteAdapterPath(history.location.path, path);
+      if (parseHistoryPath(resolvedPath).path === history.location.path) {
         return;
       }
-      adapter.push?.(path, title);
+      adapter.push?.(resolvedPath, title);
     },
     replace: (path, title) => {
-      if (parseHistoryPath(path).path === history.location.path) {
+      const resolvedPath = resolveRouteAdapterPath(history.location.path, path);
+      if (parseHistoryPath(resolvedPath).path === history.location.path) {
         return;
       }
-      adapter.replace?.(path, title);
+      adapter.replace?.(resolvedPath, title);
     },
     subscribe: (listener) => {
       subscribers += 1;
@@ -490,8 +504,8 @@ var createManualRouteAdapter = (initialPath = "/") => {
         listeners.delete(listener);
       };
     },
-    push: (path) => updatePath(path),
-    replace: (path) => updatePath(path)
+    push: (path) => updatePath(resolveRouteAdapterPath(currentPath, path)),
+    replace: (path) => updatePath(resolveRouteAdapterPath(currentPath, path))
   };
   return {
     adapter,
@@ -543,6 +557,27 @@ var {
   Consumer: RouteContextConsumer
 } = RouteContext;
 var useRouteContext = () => useContext(RouteContext);
+var wrappedRouteAdapterCache = /* @__PURE__ */ new WeakMap();
+var wrapRouteAdapterWithPathResolver = (adapter) => {
+  if (!adapter.push && !adapter.replace) {
+    return adapter;
+  }
+  const cachedAdapter = wrappedRouteAdapterCache.get(adapter);
+  if (cachedAdapter) {
+    return cachedAdapter;
+  }
+  const wrappedAdapter = {
+    ...adapter,
+    push: adapter.push ? (path, title) => {
+      adapter.push?.(resolveRouteAdapterPath(adapter.getPath(), path), title);
+    } : void 0,
+    replace: adapter.replace ? (path, title) => {
+      adapter.replace?.(resolveRouteAdapterPath(adapter.getPath(), path), title);
+    } : void 0
+  };
+  wrappedRouteAdapterCache.set(adapter, wrappedAdapter);
+  return wrappedAdapter;
+};
 var getWindow2 = () => {
   if (typeof globalThis === "undefined") {
     return void 0;
@@ -576,7 +611,10 @@ var useBrowserLinkInterceptor = (adapter) => {
         new URL(href);
         return;
       } catch (error) {
-        const nextPath = resolvePath(WINDOW.location?.pathname ?? "", href);
+        const nextPath = resolveRouteAdapterPath(
+          WINDOW.location?.pathname ?? "",
+          href
+        );
         event.preventDefault();
         adapter.push?.(nextPath, title);
       }
@@ -592,23 +630,27 @@ var RouteProvider = ({
   initialPath,
   children
 }) => {
+  const normalizedAdapter = useMemo(
+    () => wrapRouteAdapterWithPathResolver(adapter),
+    [adapter]
+  );
   const [currentPath, setCurrentPath] = useState(
-    initialPath ?? adapter.getPath()
+    initialPath ?? normalizedAdapter.getPath()
   );
   useEffect(() => {
-    return adapter.subscribe((nextPath) => {
+    return normalizedAdapter.subscribe((nextPath) => {
       setCurrentPath(nextPath);
     });
-  }, [adapter]);
+  }, [normalizedAdapter]);
   const contextValue = useMemo(
     () => ({
       currentWindowPath: currentPath,
       parentPath: "",
       params: {},
       isTopLevel: true,
-      adapter
+      adapter: normalizedAdapter
     }),
-    [currentPath, adapter]
+    [currentPath, normalizedAdapter]
   );
   return /* @__PURE__ */ jsx(RouteContextProvider, { value: contextValue, children });
 };
@@ -1140,4 +1182,4 @@ var AutoForm = ({
   );
 };
 
-export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas };
+export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas, wrapRouteAdapterWithPathResolver };

package/common/Routing.d.ts

@@ -56,6 +56,20 @@ export declare const mergeStringPaths: (path1: string, path2: string, delimiter?
  * @returns Resolved path string.
  * */
 export declare const resolvePath: (currentPath: string, newPath: string) => string;
+/**
+ * Resolve RouteAdapter navigation input against the current path.
+ *
+ * Rules:
+ * - `"/x"` resolves from root.
+ * - `"x"` and `"./x"` resolve under current path.
+ * - `"../x"` resolves one level up per `..`.
+ * - `"/"` and `""` both resolve to root (`"/"`).
+ *
+ * @param currentPath - Current absolute path (query/hash ignored).
+ * @param nextPath - Adapter navigation target (absolute or relative).
+ * @returns Resolved absolute path string.
+ */
+export declare const resolveRouteAdapterPath: (currentPath: string, nextPath: string) => string;
 /**
  * Get the parameter values from a path string and test the `path` against a `testPath`.
  *

package/common/index.js

@@ -1,6 +1,6 @@
 export { ComparisonOperators, ITEM_RELATIONSHIP_DAC_RESOURCE_NAME, LogicalOperators, OperationGroup, RelationshipOperation, TypeInfoORMAPIRoutePaths, TypeInfoORMServiceError } from '../chunk-7AMEFPPP.js';
-export { DENIED_TYPE_OPERATIONS, ERROR_MESSAGE_CONSTANTS, INVALID_CUSTOM_TYPE, PRIMITIVE_ERROR_MESSAGE_CONSTANTS, RelationshipValidationType, TYPE_KEYWORD_ERROR_MESSAGE_CONSTANTS, TYPE_KEYWORD_VALIDATORS, TypeOperation, getArrayItemErrorMap, getErrorDescriptor, getErrorDescriptors, getNoErrorDescriptor, getValidityValue, hasValue, isArrayErrorDescriptorCollection, validateArrayOfTypeInfoFieldValues, validateCustomType, validateKeywordType, validateTypeInfoDataItem, validateTypeInfoFieldOperationAllowed, validateTypeInfoFieldValue, validateTypeInfoValue, validateTypeOperationAllowed, validateValueMatchesPattern } from '../chunk-WTD5BBJP.js';
-import '../chunk-GYWRAW3Y.js';
+export { DENIED_TYPE_OPERATIONS, ERROR_MESSAGE_CONSTANTS, INVALID_CUSTOM_TYPE, PRIMITIVE_ERROR_MESSAGE_CONSTANTS, RelationshipValidationType, TYPE_KEYWORD_ERROR_MESSAGE_CONSTANTS, TYPE_KEYWORD_VALIDATORS, TypeOperation, getArrayItemErrorMap, getErrorDescriptor, getErrorDescriptors, getNoErrorDescriptor, getValidityValue, hasValue, isArrayErrorDescriptorCollection, validateArrayOfTypeInfoFieldValues, validateCustomType, validateKeywordType, validateTypeInfoDataItem, validateTypeInfoFieldOperationAllowed, validateTypeInfoFieldValue, validateTypeInfoValue, validateTypeOperationAllowed, validateValueMatchesPattern } from '../chunk-C3LXDJM5.js';
+import '../chunk-WNFRDIBW.js';
 import '../chunk-I2KLQ2HA.js';
 
 // src/common/CommandLine/collectRequiredEnvironmentVariables.ts

package/native/index.js

@@ -1,7 +1,7 @@
 import { computeTrackPixels } from '../chunk-TJFTWPXQ.js';
-import { createFormRenderer, createHistoryBackHandler, buildHistoryPath, AutoFormView, AutoForm, parseTemplate, validateAreas, computeAreaBounds, parseHistoryPath, createMemoryHistory, Route, buildRoutePath } from '../chunk-X3NHBZUT.js';
-import { ERROR_MESSAGE_CONSTANTS } from '../chunk-WTD5BBJP.js';
-import { getPathArray } from '../chunk-GYWRAW3Y.js';
+import { createFormRenderer, createHistoryBackHandler, buildHistoryPath, AutoFormView, AutoForm, parseTemplate, validateAreas, computeAreaBounds, parseHistoryPath, createMemoryHistory, Route, buildRoutePath } from '../chunk-Z7T6VEWO.js';
+import { ERROR_MESSAGE_CONSTANTS } from '../chunk-C3LXDJM5.js';
+import { resolveRouteAdapterPath, getPathArray } from '../chunk-WNFRDIBW.js';
 import '../chunk-I2KLQ2HA.js';
 import { createElement, useMemo } from 'react';
 import { Text, View, Platform, Switch, TextInput, Pressable, BackHandler } from 'react-native';
@@ -658,13 +658,14 @@ var createNativeHistory = (options = {}) => {
 var createNativeBackHandler = (history) => createHistoryBackHandler(history);
 var createNavigationStateRouteAdapter = (options) => {
   const getPath = () => options.toPath(options.getState());
+  const resolvePath = (path) => resolveRouteAdapterPath(getPath(), path);
   return {
     getPath,
     subscribe: (listener) => options.subscribe(() => {
       listener(getPath());
     }),
-    push: options.navigate ? (path) => options.navigate?.(path) : void 0,
-    replace: options.replace ? (path) => options.replace?.(path) : void 0
+    push: options.navigate ? (path) => options.navigate?.(resolvePath(path)) : void 0,
+    replace: options.replace ? (path) => options.replace?.(resolvePath(path)) : void 0
   };
 };
 var createNativeHardwareBackHandler = (adapter) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resistdesign/voltra",
-  "version": "3.0.0-alpha.35",
+  "version": "3.0.0-alpha.36",
   "description": "With our powers combined!",
   "homepage": "https://voltra.app",
   "repository": "git@github.com:resistdesign/voltra.git",

package/web/index.js

@@ -1,7 +1,7 @@
-import { createEasyLayout } from '../chunk-BKRJZXWX.js';
-import { createFormRenderer, AutoFormView, AutoForm, createBrowserRouteAdapter, Route } from '../chunk-X3NHBZUT.js';
-import { ERROR_MESSAGE_CONSTANTS } from '../chunk-WTD5BBJP.js';
-import '../chunk-GYWRAW3Y.js';
+import { createEasyLayout } from '../chunk-TNQLXU6L.js';
+import { createFormRenderer, AutoFormView, AutoForm, createBrowserRouteAdapter, Route } from '../chunk-Z7T6VEWO.js';
+import { ERROR_MESSAGE_CONSTANTS } from '../chunk-C3LXDJM5.js';
+import '../chunk-WNFRDIBW.js';
 import { __export, __reExport } from '../chunk-I2KLQ2HA.js';
 import { createElement, useCallback, useRef } from 'react';
 import * as styledBase from 'styled-components';