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

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

@@ -28,16 +28,6 @@ var _default = function _default(initialTheme) {
       setUserTheme('light');
     }
   }, [preferredTheme, isClient]);
-  (0, _react.useEffect)(() => {
-    const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light';
-    let link = document.querySelector("link[rel~='icon']");
-    if (!link) {
-      link = document.createElement('link');
-      link.rel = 'icon';
-      document.getElementsByTagName('head')[0].appendChild(link);
-    }
-    link.href = `/${fav_theme}.svg`;
-  }, [userTheme]);
   const isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
   return {
     userTheme,

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

@@ -6,11 +6,12 @@
 $default-dot-size: .5em;
 $default-margin: 1em;
 $default-padding: 1em;
+$default-navigation-height: 3.64rem;
 
 .#{bem.$base}.content-tree {
   > .#{bem.$base}.tree {
     position: sticky;
-    top: var(--spacing-2);
+    top: calc($default-navigation-height + var(--spacing-2));
 
     ul {
       list-style: none;

package/dist/cjs/a/Conversation/common/Message/Message.js

@@ -27,6 +27,7 @@ const Message = _ref => {
     className: userClassName,
     style,
     message,
+    customMessage,
     sender,
     from,
     attachment,
@@ -46,7 +47,7 @@ const Message = _ref => {
     className: "sender"
   }, sender, ":"), /*#__PURE__*/React.createElement("div", {
     className: "message-content"
-  }, /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
+  }, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
     className: `attachment y-${attachmentColor}`
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
@@ -68,7 +69,11 @@ Message.propTypes = {
   /**
    * The message in the conversation
    */
-  message: _propTypes.default.string.isRequired,
+  message: _propTypes.default.string,
+  /**
+   * The custom message if it uses more complex html
+   */
+  customMessage: _propTypes.default.node,
   /**
    * The sender of the message
    */

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

@@ -1,5 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* stylelint-disable selector-max-compound-selectors -- Required here  */
+/* stylelint-disable max-nesting-depth -- Required here  */
+/* stylelint-disable selector-max-universal -- Required here  */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -33,6 +35,7 @@ $default-message-border: 1px solid var(--hard-background-cards);
 
       > .sender {
         margin: 0;
+        padding: 0 var(--gap);
       }
 
       > .message-content {
@@ -47,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
           color: var(--on-x);
         }
 
+        > ul {
+          padding: 0 var(--gap);
+          text-align: left;
+
+          > li {
+            color: var(--on-x);
+          }
+        }
+
+        > * {
+          &:not(:last-child) {
+            margin-bottom: 0;
+          }
+        }
+
         > .attachment {
           align-items: center;
           align-self: flex-end;
@@ -56,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
         }
       }
 
-      &.#{bem.$base}.ours {
+      &.#{bem.$base}.theirs {
         align-self: flex-end;
+
+        > .sender {
+          text-align: end;
+        }
       }
     }
   }

package/dist/cjs/a/MetaCard/MetaCard.js

@@ -24,14 +24,15 @@ const MetaCard = _ref => {
     className: userClassName,
     style,
     children,
-    hasBackgroundBlur
+    hasBackgroundBlur,
+    spaced
   } = _ref;
   (0, React.useInsertionEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur, spaced && _exports.default.modifierSpaced].filter(e => e).join(' '),
     style: style
   }, children);
 };
@@ -51,7 +52,11 @@ MetaCard.propTypes = {
   /**
    * Whether the card has a background blur
    * */
-  hasBackgroundBlur: _propTypes.default.bool
+  hasBackgroundBlur: _propTypes.default.bool,
+  /**
+   * Whether to apply a gap to the top and bottom
+   * */
+  spaced: _propTypes.default.bool
 };
 MetaCard.defaultProps = {
   // someProp:false

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

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
     margin-left: calc((var(--gap)) * -1);
     margin-right: calc((var(--gap)) * -1);
     padding: 0 var(--gap);
+
+    &.#{bem.$modifier-spaced} {
+      padding: var(--gap);
+
+      > * {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }

package/dist/cjs/b/Card/common/Group/styles.scss

@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
   &.snap-scroller {
     margin-left: calc($default-spacing * -1);
     margin-right: calc($default-spacing * -1);
-
-    > .#{bem.$base}.card {
-      height: 100%;
-    }
   }
 
   &.vertical-flexbox {

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

@@ -26,7 +26,7 @@ const helmetMap = [{
     key: "title_tag"
   }, `
           ${v}
-          ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
+          ${c.SITE?.TITLE_SUFFIX ? c.SITE.TITLE_SUFFIX : ''}
         `)
 }, {
   variables: ['meta_description'],

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

@@ -33,6 +33,7 @@ $default-label-height: .5em;
       > label {
         background-color: var(--background-inputs);
         border-radius: var(--theme-default-border-radius);
+        color: var(--paragraph);
         cursor: pointer;
         display: block;
         height: $default-label-height;
@@ -40,6 +41,7 @@ $default-label-height: .5em;
         padding: $default-label-padding;
         position: relative;
         transition: $default-transition;
+        white-space: nowrap;
 
         &:hover {
           box-shadow: var(--theme-default-input-box-shadow);

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

@@ -6,7 +6,7 @@
 
 
 $default-spacing-size: 1em;
-$default-padding: .75em;
+$default-padding: .5em;
 $default-bg-gradient: var(--background-far);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
   >.select-wrapper {
     background-color: var(--background-inputs);
     border-radius: $default-input-border-radius;
-    padding: $default-padding;
+    padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
     position: relative;
 
     &::after {
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
 
     select {
       appearance: none;
-      background-color: inherit;
+      background-color: transparent;
       background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
       background-position: calc(100% - $default-spacing-size);
       background-repeat: no-repeat;
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
       padding-right: $default-spacing-size;
 
       &.input {
+        color: var(--paragraph);
         width: 100%;
 
         &:disabled {

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

@@ -21,16 +21,6 @@ export default ((initialTheme, storageKey = 'theme') => {
       setUserTheme('light');
     }
   }, [preferredTheme, isClient]);
-  useEffect(() => {
-    const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light';
-    let link = document.querySelector("link[rel~='icon']");
-    if (!link) {
-      link = document.createElement('link');
-      link.rel = 'icon';
-      document.getElementsByTagName('head')[0].appendChild(link);
-    }
-    link.href = `/${fav_theme}.svg`;
-  }, [userTheme]);
   const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
   return {
     userTheme,

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

@@ -6,11 +6,12 @@
 $default-dot-size: .5em;
 $default-margin: 1em;
 $default-padding: 1em;
+$default-navigation-height: 3.64rem;
 
 .#{bem.$base}.content-tree {
   > .#{bem.$base}.tree {
     position: sticky;
-    top: var(--spacing-2);
+    top: calc($default-navigation-height + var(--spacing-2));
 
     ul {
       list-style: none;

package/dist/es/a/Conversation/common/Message/Message.js

@@ -17,6 +17,7 @@ const Message = ({
   className: userClassName,
   style,
   message,
+  customMessage,
   sender,
   from,
   attachment,
@@ -36,7 +37,7 @@ const Message = ({
     className: "sender"
   }, sender, ":"), /*#__PURE__*/React.createElement("div", {
     className: "message-content"
-  }, /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
+  }, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
     className: `attachment y-${attachmentColor}`
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
@@ -58,7 +59,11 @@ Message.propTypes = {
   /**
    * The message in the conversation
    */
-  message: PropTypes.string.isRequired,
+  message: PropTypes.string,
+  /**
+   * The custom message if it uses more complex html
+   */
+  customMessage: PropTypes.node,
   /**
    * The sender of the message
    */

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

@@ -1,5 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* stylelint-disable selector-max-compound-selectors -- Required here  */
+/* stylelint-disable max-nesting-depth -- Required here  */
+/* stylelint-disable selector-max-universal -- Required here  */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -33,6 +35,7 @@ $default-message-border: 1px solid var(--hard-background-cards);
 
       > .sender {
         margin: 0;
+        padding: 0 var(--gap);
       }
 
       > .message-content {
@@ -47,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
           color: var(--on-x);
         }
 
+        > ul {
+          padding: 0 var(--gap);
+          text-align: left;
+
+          > li {
+            color: var(--on-x);
+          }
+        }
+
+        > * {
+          &:not(:last-child) {
+            margin-bottom: 0;
+          }
+        }
+
         > .attachment {
           align-items: center;
           align-self: flex-end;
@@ -56,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
         }
       }
 
-      &.#{bem.$base}.ours {
+      &.#{bem.$base}.theirs {
         align-self: flex-end;
+
+        > .sender {
+          text-align: end;
+        }
       }
     }
   }

package/dist/es/a/MetaCard/MetaCard.js

@@ -17,14 +17,15 @@ const MetaCard = ({
   className: userClassName,
   style,
   children,
-  hasBackgroundBlur
+  hasBackgroundBlur,
+  spaced
 }) => {
   useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur, spaced && styleNames.modifierSpaced].filter(e => e).join(' '),
     style: style
   }, children);
 };
@@ -44,7 +45,11 @@ MetaCard.propTypes = {
   /**
    * Whether the card has a background blur
    * */
-  hasBackgroundBlur: PropTypes.bool
+  hasBackgroundBlur: PropTypes.bool,
+  /**
+   * Whether to apply a gap to the top and bottom
+   * */
+  spaced: PropTypes.bool
 };
 MetaCard.defaultProps = {
   // someProp:false

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

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
     margin-left: calc((var(--gap)) * -1);
     margin-right: calc((var(--gap)) * -1);
     padding: 0 var(--gap);
+
+    &.#{bem.$modifier-spaced} {
+      padding: var(--gap);
+
+      > * {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }

package/dist/es/b/Card/common/Group/styles.scss

@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
   &.snap-scroller {
     margin-left: calc($default-spacing * -1);
     margin-right: calc($default-spacing * -1);
-
-    > .#{bem.$base}.card {
-      height: 100%;
-    }
   }
 
   &.vertical-flexbox {

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

@@ -17,7 +17,7 @@ const helmetMap = [{
     key: "title_tag"
   }, `
           ${v}
-          ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
+          ${c.SITE?.TITLE_SUFFIX ? c.SITE.TITLE_SUFFIX : ''}
         `)
 }, {
   variables: ['meta_description'],

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

@@ -33,6 +33,7 @@ $default-label-height: .5em;
       > label {
         background-color: var(--background-inputs);
         border-radius: var(--theme-default-border-radius);
+        color: var(--paragraph);
         cursor: pointer;
         display: block;
         height: $default-label-height;
@@ -40,6 +41,7 @@ $default-label-height: .5em;
         padding: $default-label-padding;
         position: relative;
         transition: $default-transition;
+        white-space: nowrap;
 
         &:hover {
           box-shadow: var(--theme-default-input-box-shadow);

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

@@ -6,7 +6,7 @@
 
 
 $default-spacing-size: 1em;
-$default-padding: .75em;
+$default-padding: .5em;
 $default-bg-gradient: var(--background-far);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
   >.select-wrapper {
     background-color: var(--background-inputs);
     border-radius: $default-input-border-radius;
-    padding: $default-padding;
+    padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
     position: relative;
 
     &::after {
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
 
     select {
       appearance: none;
-      background-color: inherit;
+      background-color: transparent;
       background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
       background-position: calc(100% - $default-spacing-size);
       background-repeat: no-repeat;
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
       padding-right: $default-spacing-size;
 
       &.input {
+        color: var(--paragraph);
         width: 100%;
 
         &:disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.22",
+  "version": "4.0.0-alpha.23",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -50,9 +50,9 @@
     "style-loader": "^3.3.2"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^4.0.0-alpha.22",
+    "@pareto-engineering/assets": "^4.0.0-alpha.23",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.22",
+    "@pareto-engineering/styles": "^4.0.0-alpha.23",
     "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": "3701cf2d7e297e33391876a0323bd055f7106ceb"
+  "gitHead": "de98b880c6cd021cfdb4c925a18c476b596924fe"
 }

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

@@ -32,17 +32,6 @@ export default (
     }
   }, [preferredTheme, isClient])
 
-  useEffect(() => {
-    const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light'
-    let link = document.querySelector("link[rel~='icon']")
-    if (!link) {
-      link = document.createElement('link')
-      link.rel = 'icon'
-      document.getElementsByTagName('head')[0].appendChild(link)
-    }
-    link.href = `/${fav_theme}.svg`
-  }, [userTheme])
-
   const isTheme = useCallback((theme) => (userTheme === theme) || undefined, [userTheme])
 
   return {

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

@@ -6,11 +6,12 @@
 $default-dot-size: .5em;
 $default-margin: 1em;
 $default-padding: 1em;
+$default-navigation-height: 3.64rem;
 
 .#{bem.$base}.content-tree {
   > .#{bem.$base}.tree {
     position: sticky;
-    top: var(--spacing-2);
+    top: calc($default-navigation-height + var(--spacing-2));
 
     ul {
       list-style: none;

package/src/ui/a/Conversation/common/Message/Message.jsx

@@ -21,6 +21,7 @@ const Message = ({
   className:userClassName,
   style,
   message,
+  customMessage,
   sender,
   from,
   attachment,
@@ -51,9 +52,9 @@ const Message = ({
         </p>
       )}
       <div className="message-content">
-        <p>
-          {message}
-        </p>
+        {
+          customMessage || <p>{ message }</p>
+        }
         {attachment
       && (
       <div className={`attachment y-${attachmentColor}`}>
@@ -86,7 +87,12 @@ Message.propTypes = {
   /**
    * The message in the conversation
    */
-  message:PropTypes.string.isRequired,
+  message:PropTypes.string,
+
+  /**
+   * The custom message if it uses more complex html
+   */
+  customMessage:PropTypes.node,
 
   /**
    * The sender of the message

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

@@ -1,5 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* stylelint-disable selector-max-compound-selectors -- Required here  */
+/* stylelint-disable max-nesting-depth -- Required here  */
+/* stylelint-disable selector-max-universal -- Required here  */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -33,6 +35,7 @@ $default-message-border: 1px solid var(--hard-background-cards);
 
       > .sender {
         margin: 0;
+        padding: 0 var(--gap);
       }
 
       > .message-content {
@@ -47,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
           color: var(--on-x);
         }
 
+        > ul {
+          padding: 0 var(--gap);
+          text-align: left;
+
+          > li {
+            color: var(--on-x);
+          }
+        }
+
+        > * {
+          &:not(:last-child) {
+            margin-bottom: 0;
+          }
+        }
+
         > .attachment {
           align-items: center;
           align-self: flex-end;
@@ -56,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
         }
       }
 
-      &.#{bem.$base}.ours {
+      &.#{bem.$base}.theirs {
         align-self: flex-end;
+
+        > .sender {
+          text-align: end;
+        }
       }
     }
   }

package/src/ui/a/MetaCard/MetaCard.jsx

@@ -22,6 +22,7 @@ const MetaCard = ({
   style,
   children,
   hasBackgroundBlur,
+  spaced,
 }) => {
   useInsertionEffect(() => {
     import('./styles.scss')
@@ -35,6 +36,7 @@ const MetaCard = ({
         componentClassName,
         userClassName,
         hasBackgroundBlur && styleNames.modifierBlur,
+        spaced && styleNames.modifierSpaced,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -65,6 +67,11 @@ MetaCard.propTypes = {
    * Whether the card has a background blur
    * */
   hasBackgroundBlur:PropTypes.bool,
+
+  /**
+   * Whether to apply a gap to the top and bottom
+   * */
+  spaced:PropTypes.bool,
 }
 
 MetaCard.defaultProps = {

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

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
     margin-left: calc((var(--gap)) * -1);
     margin-right: calc((var(--gap)) * -1);
     padding: 0 var(--gap);
+
+    &.#{bem.$modifier-spaced} {
+      padding: var(--gap);
+
+      > * {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }

package/src/ui/b/Card/common/Group/styles.scss

@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
   &.snap-scroller {
     margin-left: calc($default-spacing * -1);
     margin-right: calc($default-spacing * -1);
-
-    > .#{bem.$base}.card {
-      height: 100%;
-    }
   }
 
   &.vertical-flexbox {

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

@@ -23,7 +23,7 @@ const helmetMap = [
       <title key="title_tag">
         {`
           ${v}
-          ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
+          ${c.SITE?.TITLE_SUFFIX ? c.SITE.TITLE_SUFFIX : ''}
         `}
       </title>
     ),

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

@@ -33,6 +33,7 @@ $default-label-height: .5em;
       > label {
         background-color: var(--background-inputs);
         border-radius: var(--theme-default-border-radius);
+        color: var(--paragraph);
         cursor: pointer;
         display: block;
         height: $default-label-height;
@@ -40,6 +41,7 @@ $default-label-height: .5em;
         padding: $default-label-padding;
         position: relative;
         transition: $default-transition;
+        white-space: nowrap;
 
         &:hover {
           box-shadow: var(--theme-default-input-box-shadow);

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

@@ -6,7 +6,7 @@
 
 
 $default-spacing-size: 1em;
-$default-padding: .75em;
+$default-padding: .5em;
 $default-bg-gradient: var(--background-far);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
   >.select-wrapper {
     background-color: var(--background-inputs);
     border-radius: $default-input-border-radius;
-    padding: $default-padding;
+    padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
     position: relative;
 
     &::after {
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
 
     select {
       appearance: none;
-      background-color: inherit;
+      background-color: transparent;
       background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
       background-position: calc(100% - $default-spacing-size);
       background-repeat: no-repeat;
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
       padding-right: $default-spacing-size;
 
       &.input {
+        color: var(--paragraph);
         width: 100%;
 
         &:disabled {