@pareto-engineering/design-system 4.0.0-alpha.17 → 4.0.0-alpha.18

package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _ = require("./..");
 var _webGIRenderer = require("./webGIRenderer");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,6 +28,9 @@ const AnimatedGradient = _ref => {
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  const {
+    userTheme
+  } = (0, _.useApp)();
   const isClient = typeof window !== 'undefined';
   (0, React.useEffect)(() => {
     // Only initialize the Gradient if we're in the browser
@@ -34,7 +38,7 @@ const AnimatedGradient = _ref => {
       const gradient = new _webGIRenderer.Gradient();
       gradient.initGradient('#gradient-canvas');
     }
-  }, []);
+  }, [userTheme]);
   return /*#__PURE__*/React.createElement("canvas", {
     id: "gradient-canvas",
     "data-transition-in": true,

package/dist/cjs/a/AppContext/useTheme.js

@@ -14,19 +14,15 @@ var _default = function _default(initialTheme) {
     const storage = window.localStorage;
     if (isClient) {
       const storedTheme = window.localStorage.getItem(storageKey);
-      // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && storedTheme !== userTheme) {
-        // console.warn('Theme load')
         setPreferredTheme(storedTheme);
         setUserTheme(storedTheme);
       } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
         setUserTheme(preferredTheme);
         storage.setItem(storageKey, preferredTheme);
-        // console.warn('theme change', preferredTheme)
       } else {
         setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
         storage.removeItem(storageKey);
-        // console.warn('theme reset')
       }
     } else {
       setUserTheme('light');

package/dist/cjs/b/Button/Button.js

@@ -29,6 +29,7 @@ const Button = _ref => {
     isGhost,
     isSimple,
     isGradient,
+    isSpaced,
     arrowDirection,
     ...otherProps
   } = _ref;
@@ -37,7 +38,7 @@ const Button = _ref => {
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
@@ -80,6 +81,10 @@ Button.propTypes = {
    * Should this button have a gradient
    */
   isGradient: _propTypes.default.bool,
+  /**
+   * Should this button be spaced
+   */
+  isSpaced: _propTypes.default.bool,
   /**
    * The button color
    */

package/dist/cjs/b/Button/styles.scss

@@ -104,6 +104,11 @@ $default-animation-time: .31s;
     }
   }
 
+  &.#{bem.$modifier-spaced} {
+    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
+  }
+
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;

package/dist/cjs/b/Page/Page.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _a = require("../../a");
 var _common = require("./common");
 var _Context = _interopRequireDefault(require("./Context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,6 +38,9 @@ const Page = _ref => {
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  const {
+    userTheme
+  } = (0, _a.useApp)();
   (0, React.useEffect)(() => {
     // If we're on the client, we make sure to scroll up when the page loads
     // This is a necessary transform to make react apt for website pages
@@ -51,7 +55,7 @@ const Page = _ref => {
     }
   }, /*#__PURE__*/React.createElement(Wrapper, _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, userTheme && `ui-${userTheme}`].filter(e => e).join(' '),
     style: style,
     itemType: itemType,
     itemScope: itemType && ' '

package/dist/cjs/b/Page/common/Section/Section.js

@@ -20,7 +20,7 @@ const Section = _ref => {
     className: userClassName,
     style,
     children,
-    spaced,
+    isSpaced,
     padded,
     ...otherProps
   } = _ref;
@@ -30,7 +30,7 @@ const Section = _ref => {
   const sectionId = userId && `${pageId}_${userId}`;
   return /*#__PURE__*/React.createElement("section", _extends({
     id: sectionId,
-    className: [baseClassName, componentClassName, userClassName, spaced && _exports.default.modifierSpaced, padded && 'padded', 'grid'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, isSpaced && _exports.default.modifierSpaced, padded && 'padded', 'grid'].filter(e => e).join(' '),
     style: style
   }, otherProps), children);
 };

package/dist/cjs/b/ThemeSelector/ThemeSelector.js

@@ -24,8 +24,6 @@ const ThemeSelector = _ref => {
     id,
     className: userClassName,
     style,
-    // children
-
     themes,
     iconMap
   } = _ref;
@@ -47,7 +45,7 @@ const ThemeSelector = _ref => {
     style: style,
     onClick: loopThemes
   }, /*#__PURE__*/React.createElement("span", {
-    className: "v0 m-v icon"
+    className: "icon"
   }, iconMap[userTheme]), /*#__PURE__*/React.createElement("span", null, userTheme));
 };
 ThemeSelector.propTypes = {
@@ -63,11 +61,6 @@ ThemeSelector.propTypes = {
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   *  The children JSX
-   */
-  // children: PropTypes.node,
-
   /**
    * The themes and the order in which they appear
    */
@@ -80,9 +73,9 @@ ThemeSelector.propTypes = {
 ThemeSelector.defaultProps = {
   themes: ['light', 'dark'],
   iconMap: {
-    dark: 'n',
+    dark: 'd',
     // sun,
-    light: 'm' // moon,
+    light: 'T' // moon,
   }
 };
 var _default = ThemeSelector;

package/dist/cjs/b/ThemeSelector/styles.scss

@@ -5,10 +5,11 @@
 $default-color:var(--x, var(--contrast));
 
 .#{bem.$base}.theme-selector {
+  align-items: center;
   background: transparent;
   border: none;
   color: $default-color;
   cursor: pointer;
+  display: flex;
+  gap: var(--gap);
 }
-
-

package/dist/cjs/f/fields/TextInput/TextInput.js

@@ -37,7 +37,8 @@ const TextInput = _ref => {
     disabled,
     placeholder,
     optional,
-    autoComplete
+    autoComplete,
+    symbol
     // ...otherProps
   } = _ref;
   (0, React.useInsertionEffect)(() => {
@@ -47,6 +48,9 @@ const TextInput = _ref => {
     name,
     validate
   });
+  const symbolStyle = symbol ? {
+    '--symbol': symbol
+  } : {};
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
@@ -58,7 +62,8 @@ const TextInput = _ref => {
     color: labelColor,
     optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: "input-wrapper with-faded-border"
+    className: `input-wrapper with-faded-border ${symbol ? 'has-symbol' : ''}`,
+    style: symbolStyle
   }, /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
@@ -133,7 +138,11 @@ TextInput.propTypes = {
    * The autoComplete value that the browser should watch for the input
    * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
    */
-  autoComplete: _propTypes.default.string
+  autoComplete: _propTypes.default.string,
+  /**
+   * A symbol to be set inside the input field
+   */
+  symbol: _propTypes.default.string
 };
 TextInput.defaultProps = {
   type: 'text',

package/dist/cjs/f/fields/TextInput/styles.scss

@@ -4,6 +4,12 @@
 @use "../../../form.scss";
 
 $default-padding: .75em .75em .55em;
+$default-symbol-left: 3em;
+$default-padding-with-symbol:
+  .75em
+  calc($default-symbol-left - 1em)
+  .55em
+  calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
 
@@ -18,6 +24,20 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
       border-radius: $default-input-border-radius;
     }
 
+    &.has-symbol {
+      &::before {
+        color: var(--interactive);
+        content: var(--symbol);
+        left: $default-symbol-left;
+        position: absolute;
+        top: .5em;
+      }
+
+      input {
+        padding: $default-padding-with-symbol;
+      }
+    }
+
     > input {
       background-color: var(--background-inputs);
       border-radius: $default-input-border-radius;

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useEffect, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { useApp } from "./..";
 import { Gradient } from "./webGIRenderer";
 
 // Local Definitions
@@ -20,6 +21,9 @@ const AnimatedGradient = ({
   useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
+  const {
+    userTheme
+  } = useApp();
   const isClient = typeof window !== 'undefined';
   useEffect(() => {
     // Only initialize the Gradient if we're in the browser
@@ -27,7 +31,7 @@ const AnimatedGradient = ({
       const gradient = new Gradient();
       gradient.initGradient('#gradient-canvas');
     }
-  }, []);
+  }, [userTheme]);
   return /*#__PURE__*/React.createElement("canvas", {
     id: "gradient-canvas",
     "data-transition-in": true,

package/dist/es/a/AppContext/useTheme.js

@@ -7,19 +7,15 @@ export default ((initialTheme, storageKey = 'theme') => {
     const storage = window.localStorage;
     if (isClient) {
       const storedTheme = window.localStorage.getItem(storageKey);
-      // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && storedTheme !== userTheme) {
-        // console.warn('Theme load')
         setPreferredTheme(storedTheme);
         setUserTheme(storedTheme);
       } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
         setUserTheme(preferredTheme);
         storage.setItem(storageKey, preferredTheme);
-        // console.warn('theme change', preferredTheme)
       } else {
         setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
         storage.removeItem(storageKey);
-        // console.warn('theme reset')
       }
     } else {
       setUserTheme('light');

package/dist/es/b/Button/Button.js

@@ -24,6 +24,7 @@ const Button = ({
   isGhost,
   isSimple,
   isGradient,
+  isSpaced,
   arrowDirection,
   ...otherProps
 }) => {
@@ -32,7 +33,7 @@ const Button = ({
   }, []);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
@@ -75,6 +76,10 @@ Button.propTypes = {
    * Should this button have a gradient
    */
   isGradient: PropTypes.bool,
+  /**
+   * Should this button be spaced
+   */
+  isSpaced: PropTypes.bool,
   /**
    * The button color
    */

package/dist/es/b/Button/styles.scss

@@ -104,6 +104,11 @@ $default-animation-time: .31s;
     }
   }
 
+  &.#{bem.$modifier-spaced} {
+    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
+  }
+
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;

package/dist/es/b/Page/Page.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useInsertionEffect, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { useApp } from "../../a";
 
 // Imports from the component folder
 import { PageHelmet, Section } from "./common";
@@ -33,6 +34,9 @@ const Page = ({
   useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
+  const {
+    userTheme
+  } = useApp();
   useEffect(() => {
     // If we're on the client, we make sure to scroll up when the page loads
     // This is a necessary transform to make react apt for website pages
@@ -47,7 +51,7 @@ const Page = ({
     }
   }, /*#__PURE__*/React.createElement(Wrapper, _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, userTheme && `ui-${userTheme}`].filter(e => e).join(' '),
     style: style,
     itemType: itemType,
     itemScope: itemType && ' '

package/dist/es/b/Page/common/Section/Section.js

@@ -13,7 +13,7 @@ const Section = ({
   className: userClassName,
   style,
   children,
-  spaced,
+  isSpaced,
   padded,
   ...otherProps
 }) => {
@@ -23,7 +23,7 @@ const Section = ({
   const sectionId = userId && `${pageId}_${userId}`;
   return /*#__PURE__*/React.createElement("section", _extends({
     id: sectionId,
-    className: [baseClassName, componentClassName, userClassName, spaced && styleNames.modifierSpaced, padded && 'padded', 'grid'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, isSpaced && styleNames.modifierSpaced, padded && 'padded', 'grid'].filter(e => e).join(' '),
     style: style
   }, otherProps), children);
 };

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -17,8 +17,6 @@ const ThemeSelector = ({
   id,
   className: userClassName,
   style,
-  // children
-
   themes,
   iconMap
 }) => {
@@ -40,7 +38,7 @@ const ThemeSelector = ({
     style: style,
     onClick: loopThemes
   }, /*#__PURE__*/React.createElement("span", {
-    className: "v0 m-v icon"
+    className: "icon"
   }, iconMap[userTheme]), /*#__PURE__*/React.createElement("span", null, userTheme));
 };
 ThemeSelector.propTypes = {
@@ -56,11 +54,6 @@ ThemeSelector.propTypes = {
    * The React-written, css properties for this element.
    */
   style: PropTypes.objectOf(PropTypes.string),
-  /**
-   *  The children JSX
-   */
-  // children: PropTypes.node,
-
   /**
    * The themes and the order in which they appear
    */
@@ -73,9 +66,9 @@ ThemeSelector.propTypes = {
 ThemeSelector.defaultProps = {
   themes: ['light', 'dark'],
   iconMap: {
-    dark: 'n',
+    dark: 'd',
     // sun,
-    light: 'm' // moon,
+    light: 'T' // moon,
   }
 };
 

package/dist/es/b/ThemeSelector/styles.scss

@@ -5,10 +5,11 @@
 $default-color:var(--x, var(--contrast));
 
 .#{bem.$base}.theme-selector {
+  align-items: center;
   background: transparent;
   border: none;
   color: $default-color;
   cursor: pointer;
+  display: flex;
+  gap: var(--gap);
 }
-
-

package/dist/es/f/fields/TextInput/TextInput.js

@@ -30,7 +30,8 @@ const TextInput = ({
   disabled,
   placeholder,
   optional,
-  autoComplete
+  autoComplete,
+  symbol
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -40,6 +41,9 @@ const TextInput = ({
     name,
     validate
   });
+  const symbolStyle = symbol ? {
+    '--symbol': symbol
+  } : {};
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
@@ -51,7 +55,8 @@ const TextInput = ({
     color: labelColor,
     optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: "input-wrapper with-faded-border"
+    className: `input-wrapper with-faded-border ${symbol ? 'has-symbol' : ''}`,
+    style: symbolStyle
   }, /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
@@ -126,7 +131,11 @@ TextInput.propTypes = {
    * The autoComplete value that the browser should watch for the input
    * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
    */
-  autoComplete: PropTypes.string
+  autoComplete: PropTypes.string,
+  /**
+   * A symbol to be set inside the input field
+   */
+  symbol: PropTypes.string
 };
 TextInput.defaultProps = {
   type: 'text',

package/dist/es/f/fields/TextInput/styles.scss

@@ -4,6 +4,12 @@
 @use "../../../form.scss";
 
 $default-padding: .75em .75em .55em;
+$default-symbol-left: 3em;
+$default-padding-with-symbol:
+  .75em
+  calc($default-symbol-left - 1em)
+  .55em
+  calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
 
@@ -18,6 +24,20 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
       border-radius: $default-input-border-radius;
     }
 
+    &.has-symbol {
+      &::before {
+        color: var(--interactive);
+        content: var(--symbol);
+        left: $default-symbol-left;
+        position: absolute;
+        top: .5em;
+      }
+
+      input {
+        padding: $default-padding-with-symbol;
+      }
+    }
+
     > input {
       background-color: var(--background-inputs);
       border-radius: $default-input-border-radius;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.17",
+  "version": "4.0.0-alpha.18",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@pareto-engineering/assets": "^4.0.0-alpha.11",
     "@pareto-engineering/bem": "^4.0.0-alpha.11",
-    "@pareto-engineering/styles": "^4.0.0-alpha.16",
+    "@pareto-engineering/styles": "^4.0.0-alpha.18",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -67,5 +67,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "54fc8906a8d9b0d73d38468ac42f433873317458"
+  "gitHead": "e1735bceb078ee7d063407d7f6fcd36ff11d0ef9"
 }

package/src/stories/f/TextInput.stories.jsx

@@ -34,6 +34,7 @@ export default {
     name        :{ control: 'text' },
     label       :{ control: 'text' },
     optional    :{ control: 'boolean' },
+    symbol      :{ control: 'text' },
   },
 }
 
@@ -104,3 +105,9 @@ Time.args = {
   name :'time',
   label:'Select time',
 }
+
+export const HasSymbol = Template.bind({})
+HasSymbol.args = {
+  ...Base.args,
+  symbol:"'$'",
+}

package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -10,6 +10,8 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import { useApp } from 'ui/a'
+
 import { Gradient } from './webGIRenderer'
 
 // Local Definitions
@@ -29,6 +31,8 @@ const AnimatedGradient = ({
     import('./styles.scss')
   }, [])
 
+  const { userTheme } = useApp()
+
   const isClient = typeof window !== 'undefined'
 
   useEffect(() => {
@@ -37,7 +41,7 @@ const AnimatedGradient = ({
       const gradient = new Gradient()
       gradient.initGradient('#gradient-canvas')
     }
-  }, [])
+  }, [userTheme])
 
   return (
     <canvas

package/src/ui/a/AppContext/useTheme.js

@@ -14,9 +14,7 @@ export default (
     const storage = window.localStorage
     if (isClient) {
       const storedTheme = window.localStorage.getItem(storageKey)
-      // console.log(storedTheme, storedTheme != userTheme)
       if (storedTheme && (storedTheme !== userTheme)) {
-        // console.warn('Theme load')
         setPreferredTheme(storedTheme)
         setUserTheme(storedTheme)
       } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
@@ -25,11 +23,9 @@ export default (
           storageKey,
           preferredTheme,
         )
-        // console.warn('theme change', preferredTheme)
       } else {
         setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light')
         storage.removeItem(storageKey)
-        // console.warn('theme reset')
       }
     } else {
       setUserTheme('light')

package/src/ui/b/Button/Button.jsx

@@ -24,6 +24,7 @@ const Button = ({
   isGhost,
   isSimple,
   isGradient,
+  isSpaced,
   arrowDirection,
   ...otherProps
 }) => {
@@ -43,6 +44,7 @@ const Button = ({
         isCompact && styleNames.modifierCompact,
         isSimple && styleNames.modifierSimple,
         isGradient && styleNames.modifierGradient,
+        isSpaced && styleNames.modifierSpaced,
         arrowDirection && `arrow-${arrowDirection}`,
       ]
         .filter((e) => e)
@@ -104,6 +106,11 @@ Button.propTypes = {
    */
   isGradient:PropTypes.bool,
 
+  /**
+   * Should this button be spaced
+   */
+  isSpaced:PropTypes.bool,
+
   /**
    * The button color
    */

package/src/ui/b/Button/styles.scss

@@ -104,6 +104,11 @@ $default-animation-time: .31s;
     }
   }
 
+  &.#{bem.$modifier-spaced} {
+    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
+  }
+
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;

package/src/ui/b/Page/Page.jsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { useInsertionEffect, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
+import { useApp } from 'ui/a'
 
 // Imports from the component folder
 import { PageHelmet, Section } from './common'
@@ -33,6 +34,8 @@ const Page = ({
     import('./styles.scss')
   }, [])
 
+  const { userTheme } = useApp()
+
   useEffect(() => {
     // If we're on the client, we make sure to scroll up when the page loads
     // This is a necessary transform to make react apt for website pages
@@ -54,6 +57,7 @@ const Page = ({
           baseClassName,
           componentClassName,
           userClassName,
+          userTheme && `ui-${userTheme}`,
         ]
           .filter((e) => e)
           .join(' ')}

package/src/ui/b/Page/common/Section/Section.jsx

@@ -14,7 +14,7 @@ const Section = ({
   className:userClassName,
   style,
   children,
-  spaced,
+  isSpaced,
   padded,
   ...otherProps
 }) => {
@@ -30,7 +30,7 @@ const Section = ({
         baseClassName,
         componentClassName,
         userClassName,
-        spaced && styleNames.modifierSpaced,
+        isSpaced && styleNames.modifierSpaced,
         padded && 'padded',
         'grid',
       ]

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -19,8 +19,6 @@ const ThemeSelector = ({
   id,
   className:userClassName,
   style,
-  // children
-
   themes,
   iconMap,
 }) => {
@@ -53,7 +51,7 @@ const ThemeSelector = ({
       style={style}
       onClick={loopThemes}
     >
-      <span className="v0 m-v icon">
+      <span className="icon">
         { iconMap[userTheme] }
       </span>
       <span>
@@ -79,11 +77,6 @@ ThemeSelector.propTypes = {
    */
   style:PropTypes.objectOf(PropTypes.string),
 
-  /**
-   *  The children JSX
-   */
-  // children: PropTypes.node,
-
   /**
    * The themes and the order in which they appear
    */
@@ -99,8 +92,8 @@ ThemeSelector.propTypes = {
 ThemeSelector.defaultProps = {
   themes :['light', 'dark'],
   iconMap:{
-    dark :'n', // sun,
-    light:'m', // moon,
+    dark :'d', // sun,
+    light:'T', // moon,
   },
 }
 

package/src/ui/b/ThemeSelector/styles.scss

@@ -5,10 +5,11 @@
 $default-color:var(--x, var(--contrast));
 
 .#{bem.$base}.theme-selector {
+  align-items: center;
   background: transparent;
   border: none;
   color: $default-color;
   cursor: pointer;
+  display: flex;
+  gap: var(--gap);
 }
-
-

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -36,6 +36,7 @@ const TextInput = ({
   placeholder,
   optional,
   autoComplete,
+  symbol,
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -43,6 +44,9 @@ const TextInput = ({
   }, [])
 
   const [field] = useField({ name, validate })
+  const symbolStyle = symbol
+    ? { '--symbol': symbol }
+    : {}
 
   return (
     <div
@@ -68,7 +72,10 @@ const TextInput = ({
       >
         { label }
       </FormLabel>
-      <div className="input-wrapper with-faded-border">
+      <div
+        className={`input-wrapper with-faded-border ${symbol ? 'has-symbol' : ''}`}
+        style={symbolStyle}
+      >
         <input
           id={name}
           className="input"
@@ -171,6 +178,10 @@ TextInput.propTypes = {
    * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
    */
   autoComplete:PropTypes.string,
+  /**
+   * A symbol to be set inside the input field
+   */
+  symbol      :PropTypes.string,
 }
 
 TextInput.defaultProps = {

package/src/ui/f/fields/TextInput/styles.scss

@@ -4,6 +4,12 @@
 @use "../../../form.scss";
 
 $default-padding: .75em .75em .55em;
+$default-symbol-left: 3em;
+$default-padding-with-symbol:
+  .75em
+  calc($default-symbol-left - 1em)
+  .55em
+  calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
 
@@ -18,6 +24,20 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
       border-radius: $default-input-border-radius;
     }
 
+    &.has-symbol {
+      &::before {
+        color: var(--interactive);
+        content: var(--symbol);
+        left: $default-symbol-left;
+        position: absolute;
+        top: .5em;
+      }
+
+      input {
+        padding: $default-padding-with-symbol;
+      }
+    }
+
     > input {
       background-color: var(--background-inputs);
       border-radius: $default-input-border-radius;

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -13336,8 +13336,9 @@ exports[`Storyshots b/Page With Sections 1`] = `
     Section 1
   </section>
   <section
-    className="base section x-main b-x modifierSpaced padded grid"
+    className="base section x-main b-x padded grid"
     id="with-sections_s2"
+    spaced={true}
   >
     Section 2. This section is spaced
   </section>
@@ -13463,7 +13464,7 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     type="button"
   >
     <span
-      className="v0 m-v icon"
+      className="icon"
     />
     <span />
   </button>
@@ -14287,7 +14288,8 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14311,7 +14313,8 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your last name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14518,7 +14521,8 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14542,7 +14546,8 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your last name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14729,7 +14734,8 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
       Extended type input
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14772,7 +14778,8 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14918,7 +14925,8 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -15128,7 +15136,8 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -18978,7 +18987,8 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19026,7 +19036,8 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
         Select date
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19054,6 +19065,59 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextInput Has Symbol 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className=" u2 pb-u"
+  >
+    <div
+      className="base text-input y-background2"
+    >
+      <label
+        className="base form-label v50 mb-v x-main2"
+        htmlFor="email"
+      >
+        How can we reach you ?
+      </label>
+      <div
+        className="input-wrapper with-faded-border has-symbol"
+        style={
+          {
+            "--symbol": "'$'",
+          }
+        }
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextInput Optional 1`] = `
 <form
   action="#"
@@ -19074,7 +19138,8 @@ exports[`Storyshots f/fields/TextInput Optional 1`] = `
          (Optional)
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19122,7 +19187,8 @@ exports[`Storyshots f/fields/TextInput Time 1`] = `
         Select time
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19169,7 +19235,8 @@ exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           autoComplete="off"
@@ -19218,7 +19285,8 @@ exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19266,7 +19334,8 @@ exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19315,7 +19384,8 @@ exports[`Storyshots f/fields/TextInput With Validation 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"