@pareto-engineering/design-system 4.0.0-alpha.23 → 4.0.0-alpha.25

package/dist/cjs/a/BlurOverlay/BlurOverlay.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+const baseClassName = _exports.default.base;
+const componentClassName = 'blur-overlay';
+const BlurOverlay = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    blur
+  } = _ref;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, blur && _exports.default.modifierActive].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+BlurOverlay.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node,
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur: _propTypes.default.bool
+};
+BlurOverlay.defaultProps = {
+  blur: true
+  // someProp:false
+};
+var _default = BlurOverlay;
+exports.default = _default;

package/dist/cjs/a/BlurOverlay/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BlurOverlay", {
+  enumerable: true,
+  get: function () {
+    return _BlurOverlay.default;
+  }
+});
+var _BlurOverlay = _interopRequireDefault(require("./BlurOverlay"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/BlurOverlay/styles.scss

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    height: 100%;
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/cjs/a/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AppContextProvider", {
     return _AppContext.AppContextProvider;
   }
 });
+Object.defineProperty(exports, "BlurOverlay", {
+  enumerable: true,
+  get: function () {
+    return _BlurOverlay.BlurOverlay;
+  }
+});
 Object.defineProperty(exports, "ContentTree", {
   enumerable: true,
   get: function () {
@@ -154,6 +160,7 @@ Object.defineProperty(exports, "useTheme", {
   }
 });
 var _AppContext = require("./AppContext");
+var _BlurOverlay = require("./BlurOverlay");
 var _ContentTree = require("./ContentTree");
 var _Conversation = require("./Conversation");
 var _DotInfo = require("./DotInfo");

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

@@ -41,7 +41,7 @@ const Button = _ref => {
   }, children) : children;
   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, isSpaced && _exports.default.modifierSpaced, 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, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {

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

@@ -113,8 +113,8 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      border: 1px solid var(--x, var(--#{$default-color}));
-      color: var(--x, var(--#{$default-color}));
+      border: 1px solid var(--hard-disabled, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
@@ -150,12 +150,12 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      color: var(--x, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--x);
+    background: var(--hard-disabled);
     filter: brightness(125%);
   }
 }

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

@@ -37,7 +37,9 @@ const ThemeSelector = _ref => {
     const current = themes.indexOf(userTheme);
     setPreferredTheme(themes[(current + 1) % themes.length]);
   }, [userTheme]);
-  const themeText = userTheme && userTheme.charAt(0).toUpperCase() + userTheme.slice(1);
+  const current = userTheme ? themes.indexOf(userTheme) : 0;
+  const nextTheme = themes[(current + 1) % themes.length];
+  const themeText = nextTheme && nextTheme.charAt(0).toUpperCase() + nextTheme.slice(1);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions

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

@@ -34,8 +34,9 @@ const ChoicesInput = _ref => {
     label,
     optional,
     disabled,
-    description
-    // ...otherProps
+    description,
+    spaceBetween,
+    ...otherProps
   } = _ref;
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -53,7 +54,7 @@ const ChoicesInput = _ref => {
     as: "p",
     optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: "choices"
+    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     labelClassName: "with-faded-border",
     key: choice.value,
@@ -62,7 +63,7 @@ const ChoicesInput = _ref => {
     multiple: multiple,
     validate: validate,
     disabled: disabled
-  }, choice)))), /*#__PURE__*/React.createElement(_common2.FormDescription, {
+  }, otherProps, choice)))), /*#__PURE__*/React.createElement(_common2.FormDescription, {
     className: "v50 mt-v s-1",
     description: description,
     name: name

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

@@ -16,6 +16,10 @@ $default-label-height: .5em;
     flex-wrap: wrap;
     gap: $default-flex-separator;
 
+    &.space-between {
+      justify-content: space-between;
+    }
+
     >.choice {
       display: flex;
 

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

@@ -8,7 +8,7 @@ $default-symbol-left: 1em;
 $default-padding-with-symbol:
   .75em
   calc($default-symbol-left - 1em)
-  .55em
+  .75em
   calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -30,7 +30,8 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
         content: var(--symbol);
         left: $default-symbol-left;
         position: absolute;
-        top: .5em;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
 
       input {

package/dist/es/a/BlurOverlay/BlurOverlay.js

@@ -0,0 +1,51 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react';
+import { useInsertionEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+const baseClassName = styleNames.base;
+const componentClassName = 'blur-overlay';
+const BlurOverlay = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  blur
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, blur && styleNames.modifierActive].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+BlurOverlay.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur: PropTypes.bool
+};
+BlurOverlay.defaultProps = {
+  blur: true
+  // someProp:false
+};
+
+export default BlurOverlay;

package/dist/es/a/BlurOverlay/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as BlurOverlay } from "./BlurOverlay";

package/dist/es/a/BlurOverlay/styles.scss

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    height: 100%;
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/dist/es/a/index.js

@@ -1,4 +1,5 @@
 export { AppContext, AppContextProvider, useApp, useTheme } from "./AppContext";
+export { BlurOverlay } from "./BlurOverlay";
 export { ContentTree } from "./ContentTree";
 export { Conversation } from "./Conversation";
 export { DotInfo } from "./DotInfo";

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

@@ -36,7 +36,7 @@ const Button = ({
   }, children) : children;
   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, isSpaced && styleNames.modifierSpaced, 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, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {

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

@@ -113,8 +113,8 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      border: 1px solid var(--x, var(--#{$default-color}));
-      color: var(--x, var(--#{$default-color}));
+      border: 1px solid var(--hard-disabled, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
@@ -150,12 +150,12 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      color: var(--x, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--x);
+    background: var(--hard-disabled);
     filter: brightness(125%);
   }
 }

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

@@ -30,7 +30,9 @@ const ThemeSelector = ({
     const current = themes.indexOf(userTheme);
     setPreferredTheme(themes[(current + 1) % themes.length]);
   }, [userTheme]);
-  const themeText = userTheme && userTheme.charAt(0).toUpperCase() + userTheme.slice(1);
+  const current = userTheme ? themes.indexOf(userTheme) : 0;
+  const nextTheme = themes[(current + 1) % themes.length];
+  const themeText = nextTheme && nextTheme.charAt(0).toUpperCase() + nextTheme.slice(1);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions

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

@@ -29,8 +29,9 @@ const ChoicesInput = ({
   label,
   optional,
   disabled,
-  description
-  // ...otherProps
+  description,
+  spaceBetween,
+  ...otherProps
 }) => {
   useInsertionEffect(() => {
     import("./styles.scss");
@@ -48,7 +49,7 @@ const ChoicesInput = ({
     as: "p",
     optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: "choices"
+    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
     labelClassName: "with-faded-border",
     key: choice.value,
@@ -57,7 +58,7 @@ const ChoicesInput = ({
     multiple: multiple,
     validate: validate,
     disabled: disabled
-  }, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+  }, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
     className: "v50 mt-v s-1",
     description: description,
     name: name

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

@@ -16,6 +16,10 @@ $default-label-height: .5em;
     flex-wrap: wrap;
     gap: $default-flex-separator;
 
+    &.space-between {
+      justify-content: space-between;
+    }
+
     >.choice {
       display: flex;
 

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

@@ -8,7 +8,7 @@ $default-symbol-left: 1em;
 $default-padding-with-symbol:
   .75em
   calc($default-symbol-left - 1em)
-  .55em
+  .75em
   calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -30,7 +30,8 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
         content: var(--symbol);
         left: $default-symbol-left;
         position: absolute;
-        top: .5em;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
 
       input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.23",
+  "version": "4.0.0-alpha.25",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -52,7 +52,8 @@
   "dependencies": {
     "@pareto-engineering/assets": "^4.0.0-alpha.23",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.23",
+    "@pareto-engineering/styles": "^4.0.0-alpha.24",
+    "@pareto-engineering/utils": "^4.0.0-alpha.23",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -67,5 +68,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "de98b880c6cd021cfdb4c925a18c476b596924fe"
+  "gitHead": "5d40a485bd42cbbcd36042c43c806f07e234f7ea"
 }

package/src/stories/a/BlurOverlay.stories.jsx

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { BlurOverlay } from 'ui'
+
+export default {
+  title        :'a/BlurOverlay',
+  component    :BlurOverlay,
+  subcomponents:{
+    // Item:BlurOverlay.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{},
+  controls:{
+    blur:{ type: 'boolean' },
+  },
+}
+
+export const Base = (args) => (
+  <BlurOverlay {...args}>
+    <div style={{
+      height         :'100px',
+      bottom         :'0',
+      minWidth       :'100%',
+      position       :'fixed',
+      backgroundColor:'blue',
+      color          :'white',
+    }}
+    >
+      Sample Foreground Component
+    </div>
+  </BlurOverlay>
+
+)
+Base.args = {
+  blur:true,
+}

package/src/ui/a/BlurOverlay/BlurOverlay.jsx

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'blur-overlay'
+
+const BlurOverlay = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  blur,
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        blur && styleNames.modifierActive,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      { children }
+    </div>
+  )
+}
+
+BlurOverlay.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  Boolean to toggle blur effect
+   */
+  blur:PropTypes.bool,
+}
+
+BlurOverlay.defaultProps = {
+  blur:true,
+  // someProp:false
+}
+
+export default BlurOverlay

package/src/ui/a/BlurOverlay/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as BlurOverlay } from './BlurOverlay'

package/src/ui/a/BlurOverlay/styles.scss

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.blur-overlay {
+  background: inherit;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+  &.#{bem.$modifier-active} {
+    animation: blurAnimation .3s ease-in-out;
+    backdrop-filter: blur(5px);
+    height: 100%;
+  }
+}
+
+@keyframes blurAnimation {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  1% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

package/src/ui/a/index.js

@@ -1,6 +1,7 @@
 export {
   AppContext, AppContextProvider, useApp, useTheme,
 } from './AppContext'
+export { BlurOverlay } from './BlurOverlay'
 export { ContentTree } from './ContentTree'
 export { Conversation } from './Conversation'
 export { DotInfo } from './DotInfo'

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

@@ -48,7 +48,7 @@ const Button = ({
         isSimple && styleNames.modifierSimple,
         isGradient && styleNames.modifierGradient,
         isSpaced && styleNames.modifierSpaced,
-        arrowDirection && `arrow-${arrowDirection}`,
+        !isLoading && arrowDirection && `arrow-${arrowDirection}`,
       ]
         .filter((e) => e)
         .join(' ')}

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

@@ -113,8 +113,8 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      border: 1px solid var(--x, var(--#{$default-color}));
-      color: var(--x, var(--#{$default-color}));
+      border: 1px solid var(--hard-disabled, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
@@ -150,12 +150,12 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      color: var(--x, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--x);
+    background: var(--hard-disabled);
     filter: brightness(125%);
   }
 }

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

@@ -36,7 +36,9 @@ const ThemeSelector = ({
   },
   [userTheme])
 
-  const themeText = userTheme && userTheme.charAt(0).toUpperCase() + userTheme.slice(1)
+  const current = userTheme ? themes.indexOf(userTheme) : 0
+  const nextTheme = themes[(current + 1) % themes.length]
+  const themeText = nextTheme && nextTheme.charAt(0).toUpperCase() + nextTheme.slice(1)
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions

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

@@ -35,7 +35,8 @@ const ChoicesInput = ({
   optional,
   disabled,
   description,
-  // ...otherProps
+  spaceBetween,
+  ...otherProps
 }) => {
   useInsertionEffect(() => {
     import('./styles.scss')
@@ -67,7 +68,7 @@ const ChoicesInput = ({
         {label}
       </FormLabel>
       )}
-      <div className="choices">
+      <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
         { options.map((choice) => (
           <Choice
             labelClassName="with-faded-border"
@@ -77,6 +78,7 @@ const ChoicesInput = ({
             multiple={multiple}
             validate={validate}
             disabled={disabled}
+            {...otherProps}
             {...choice}
           />
         ))}

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

@@ -16,6 +16,10 @@ $default-label-height: .5em;
     flex-wrap: wrap;
     gap: $default-flex-separator;
 
+    &.space-between {
+      justify-content: space-between;
+    }
+
     >.choice {
       display: flex;
 

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

@@ -8,7 +8,7 @@ $default-symbol-left: 1em;
 $default-padding-with-symbol:
   .75em
   calc($default-symbol-left - 1em)
-  .55em
+  .75em
   calc($default-symbol-left + 1em);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -30,7 +30,8 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
         content: var(--symbol);
         left: $default-symbol-left;
         position: absolute;
-        top: .5em;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
 
       input {

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

@@ -451,6 +451,27 @@ exports[`Storyshots Example/Page Logged Out 1`] = `
 
 exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
 
+exports[`Storyshots a/BlurOverlay Base 1`] = `
+<div
+  className="base blur-overlay modifierActive"
+>
+  <div
+    style={
+      {
+        "backgroundColor": "blue",
+        "bottom": "0",
+        "color": "white",
+        "height": "100px",
+        "minWidth": "100%",
+        "position": "fixed",
+      }
+    }
+  >
+    Sample Foreground Component
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/ContentTree Base 1`] = `
 <div
   style={
@@ -3151,7 +3172,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  7 months ago
+  8 months ago
 </p>
 `;
 
@@ -14117,7 +14138,9 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     className="base theme-selector"
     onClick={[Function]}
     onKeyDown={[Function]}
-  />
+  >
+    Dark
+  </a>
 </div>
 `;