@pareto-engineering/design-system 4.0.0-alpha.46 → 4.0.0-alpha.48

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

@@ -21,7 +21,6 @@ $default-spacing: var(--gap);
   }
 
   >* {
-    display: inline-block;
     scroll-snap-align: start;
 
     &:first-child {

package/dist/cjs/a/Tip/Tip.js

@@ -24,8 +24,10 @@ const Tip = _ref => {
     className: userClassName,
     style,
     children,
+    icon,
     as: Wrapper,
-    color
+    color,
+    backgroundColor
     // ...otherProps
   } = _ref;
   (0, React.useInsertionEffect)(() => {
@@ -33,10 +35,12 @@ const Tip = _ref => {
   }, []);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${backgroundColor}`].filter(e => e).join(' '),
     style: style
     // {...otherProps}
-  }, children);
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `x-${color} c-x icon`
+  }, icon), children);
 };
 Tip.propTypes = {
   /**
@@ -56,9 +60,17 @@ Tip.propTypes = {
    */
   children: _propTypes.default.node.isRequired,
   /**
-   * The color of the bar
+   * The icon
+   */
+  icon: _propTypes.default.string,
+  /**
+   * The color of the icon
    */
   color: _propTypes.default.string,
+  /**
+   * The background color
+   */
+  backgroundColor: _propTypes.default.string,
   /**
    * The wrapper html type
    */
@@ -66,7 +78,9 @@ Tip.propTypes = {
 };
 Tip.defaultProps = {
   as: 'p',
-  color: 'main'
+  icon: ')',
+  color: 'interactive',
+  backgroundColor: 'background-near'
 };
 var _default = Tip;
 exports.default = _default;

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

@@ -4,19 +4,13 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-bar-width: 2px;
-$default-padding: 1em;
+$default-padding: calc(var(--gap) * 2);
 
 .#{bem.$base}.tip {
-  padding-left: $default-padding;
-  position: relative;
-
-  &::before {
-    background: var(--x);
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    width: $default-bar-width;
-  }
+  align-items: center;
+  background: var(--x);
+  border-radius: var(--theme-default-border-radius);
+  display: flex;
+  gap: var(--gap);
+  padding: $default-padding;
 }

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

@@ -47,7 +47,7 @@ const Button = _ref => {
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
     style: {
-      '--x': 'var(--on-x)'
+      '--x': 'var(--stroke-color, var(--on-x))'
     },
     heightWidth: "1.15em"
   }) : buttonText);

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

@@ -23,9 +23,6 @@ $default-spacing: var(--gap);
     &.desktop-grid {
       display: grid;
       grid-template-columns: repeat(var(--columns), 1fr);
-    }
-
-    &.snap-scroller {
       margin-left: unset;
       margin-right: unset;
     }

package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js

@@ -32,6 +32,10 @@ const defaultsMap = {
   linkedin: {
     icon: 'l',
     link: 'LINKEDIN'
+  },
+  threads: {
+    icon: 'u',
+    link: 'THREADS'
   }
 };
 
@@ -57,7 +61,7 @@ const SocialMediaButton = _ref => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   const content = type && defaultsMap[type];
-  const href = link || applicationContext?.SOCIAL?.[content.link];
+  const href = link || applicationContext?.SOCIAL?.[content?.link];
   return /*#__PURE__*/React.createElement("a", {
     href: href,
     target: "_blank",

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

@@ -37,20 +37,22 @@ const ThemeSelector = _ref => {
     const current = themes.indexOf(userTheme);
     setPreferredTheme(themes[(current + 1) % themes.length]);
   }, [userTheme]);
-  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
-    React.createElement("a", {
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-      id: id,
-      style: style,
-      onClick: loopThemes,
-      onKeyDown: loopThemes
-    }, themeText)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    id: id,
+    style: style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "c-x x-paragraph"
+  }, "Theme:", ' ', userTheme && userTheme[0].toUpperCase() + userTheme.slice(1)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: loopThemes
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: "switch",
+    checked: userTheme === 'dark'
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "switch"
+  })));
 };
 ThemeSelector.propTypes = {
   /**

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

@@ -2,8 +2,51 @@
 
 @use "@pareto-engineering/bem";
 
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: 1.2em;
+
 .#{bem.$base}.theme-selector {
-  cursor: pointer;
-  display: block;
-  text-decoration: none;
+  align-items: center;
+  display: flex;
+  gap: var(--gap);
+
+  > button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+
+    >input {
+      height: 0;
+      visibility: hidden;
+      width: 0;
+    }
+
+    >label {
+      background: var(--interactive);
+      border-radius: $default-border-radius;
+      cursor: pointer;
+      display: block;
+      height: $default-size;
+      position: relative;
+      width: calc($default-size * 2);
+
+      &::after {
+        background: var(--background-far);
+        border: 1px solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        content: "";
+        height: $default-size;
+        left: 0;
+        position: absolute;
+        top: 0;
+        transition: .3s;
+        width: $default-size;
+      }
+    }
+
+    >input:checked + label::after {
+      left: $default-size;
+    }
+  }
 }

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

@@ -21,7 +21,6 @@ $default-spacing: var(--gap);
   }
 
   >* {
-    display: inline-block;
     scroll-snap-align: start;
 
     &:first-child {

package/dist/es/a/Tip/Tip.js

@@ -17,8 +17,10 @@ const Tip = ({
   className: userClassName,
   style,
   children,
+  icon,
   as: Wrapper,
-  color
+  color,
+  backgroundColor
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -26,10 +28,12 @@ const Tip = ({
   }, []);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${backgroundColor}`].filter(e => e).join(' '),
     style: style
     // {...otherProps}
-  }, children);
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `x-${color} c-x icon`
+  }, icon), children);
 };
 Tip.propTypes = {
   /**
@@ -49,9 +53,17 @@ Tip.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * The color of the bar
+   * The icon
+   */
+  icon: PropTypes.string,
+  /**
+   * The color of the icon
    */
   color: PropTypes.string,
+  /**
+   * The background color
+   */
+  backgroundColor: PropTypes.string,
   /**
    * The wrapper html type
    */
@@ -59,6 +71,8 @@ Tip.propTypes = {
 };
 Tip.defaultProps = {
   as: 'p',
-  color: 'main'
+  icon: ')',
+  color: 'interactive',
+  backgroundColor: 'background-near'
 };
 export default Tip;

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

@@ -4,19 +4,13 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-bar-width: 2px;
-$default-padding: 1em;
+$default-padding: calc(var(--gap) * 2);
 
 .#{bem.$base}.tip {
-  padding-left: $default-padding;
-  position: relative;
-
-  &::before {
-    background: var(--x);
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    width: $default-bar-width;
-  }
+  align-items: center;
+  background: var(--x);
+  border-radius: var(--theme-default-border-radius);
+  display: flex;
+  gap: var(--gap);
+  padding: $default-padding;
 }

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

@@ -42,7 +42,7 @@ const Button = ({
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
     style: {
-      '--x': 'var(--on-x)'
+      '--x': 'var(--stroke-color, var(--on-x))'
     },
     heightWidth: "1.15em"
   }) : buttonText);

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

@@ -23,9 +23,6 @@ $default-spacing: var(--gap);
     &.desktop-grid {
       display: grid;
       grid-template-columns: repeat(var(--columns), 1fr);
-    }
-
-    &.snap-scroller {
       margin-left: unset;
       margin-right: unset;
     }

package/dist/es/b/SocialMediaButton/SocialMediaButton.js

@@ -26,6 +26,10 @@ const defaultsMap = {
   linkedin: {
     icon: 'l',
     link: 'LINKEDIN'
+  },
+  threads: {
+    icon: 'u',
+    link: 'THREADS'
   }
 };
 
@@ -50,7 +54,7 @@ const SocialMediaButton = ({
     import("./styles.scss");
   }, []);
   const content = type && defaultsMap[type];
-  const href = link || applicationContext?.SOCIAL?.[content.link];
+  const href = link || applicationContext?.SOCIAL?.[content?.link];
   return /*#__PURE__*/React.createElement("a", {
     href: href,
     target: "_blank",

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

@@ -30,20 +30,22 @@ const ThemeSelector = ({
     const current = themes.indexOf(userTheme);
     setPreferredTheme(themes[(current + 1) % themes.length]);
   }, [userTheme]);
-  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
-    React.createElement("a", {
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-      id: id,
-      style: style,
-      onClick: loopThemes,
-      onKeyDown: loopThemes
-    }, themeText)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    id: id,
+    style: style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "c-x x-paragraph"
+  }, "Theme:", ' ', userTheme && userTheme[0].toUpperCase() + userTheme.slice(1)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: loopThemes
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: "switch",
+    checked: userTheme === 'dark'
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "switch"
+  })));
 };
 ThemeSelector.propTypes = {
   /**

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

@@ -2,8 +2,51 @@
 
 @use "@pareto-engineering/bem";
 
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: 1.2em;
+
 .#{bem.$base}.theme-selector {
-  cursor: pointer;
-  display: block;
-  text-decoration: none;
+  align-items: center;
+  display: flex;
+  gap: var(--gap);
+
+  > button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+
+    >input {
+      height: 0;
+      visibility: hidden;
+      width: 0;
+    }
+
+    >label {
+      background: var(--interactive);
+      border-radius: $default-border-radius;
+      cursor: pointer;
+      display: block;
+      height: $default-size;
+      position: relative;
+      width: calc($default-size * 2);
+
+      &::after {
+        background: var(--background-far);
+        border: 1px solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        content: "";
+        height: $default-size;
+        left: 0;
+        position: absolute;
+        top: 0;
+        transition: .3s;
+        width: $default-size;
+      }
+    }
+
+    >input:checked + label::after {
+      left: $default-size;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.46",
+  "version": "4.0.0-alpha.48",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,9 +51,9 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.45",
+    "@pareto-engineering/assets": "^4.0.0-alpha.48",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.46",
+    "@pareto-engineering/styles": "^4.0.0-alpha.48",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -70,5 +70,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "b2719ca8ef140bea2c08806f532564610b4008e6"
+  "gitHead": "38ad4d7544d818f09deafd3b4ac951916c7e4810"
 }

package/src/stories/a/AppContext.stories.jsx

@@ -30,6 +30,8 @@ export const Base = () => (
         FACEBOOK :'https://www.facebook.com/hellopareto',
         INSTAGRAM:'https://www.instagram.com/hellopareto',
         TWITTER  :'https://www.twitter.com/hellopareto',
+        THREADS  :'https://www.threads.net/@hellopareto',
+        LINKEDIN :'https://www.linkedin.com/company/hellopareto',
       },
       EXTRA:{
         SURVEY:'https://survey.pareto.ai',

package/src/stories/a/Tip.stories.jsx

@@ -13,7 +13,8 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    color:{ control: 'color' },
+    color          :{ control: 'text' },
+    backgroundColor:{ control: 'text' },
   },
 }
 
@@ -24,5 +25,5 @@ const Template = (args) => (
 export const Base = Template.bind({})
 Base.args = {
   children:'Remember to wash your vegetables before eating them.',
-  color   :'main',
+  color   :'interactive',
 }

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -25,6 +25,7 @@ const Template = ({ isTransparent = false, ...rest }) => (
     <SocialMediaButton type="twitter" isTransparent={isTransparent} />
     <SocialMediaButton type="instagram" isTransparent={isTransparent} />
     <SocialMediaButton type="linkedin" isTransparent={isTransparent} />
+    <SocialMediaButton type="threads" isTransparent={isTransparent} />
   </AppContextProvider>
 )
 
@@ -42,6 +43,7 @@ Base.args = {
       INSTAGRAM:'https://www.instagram.com/hellopareto',
       TWITTER  :'https://www.twitter.com/hellopareto',
       LINKEDIN :'https://www.linkedin.com/company/hellopareto',
+      THREADS  :'https://www.threads.net/@hellopareto',
     },
     EXTRA:{
       SURVEY:'https://survey.pareto.ai',

package/src/stories/b/ThemeSelector.stories.jsx

@@ -39,10 +39,6 @@ export const Base = () => {
          ].filter((e) => e).join(' ')
        }
       >
-        <p>
-          Theme :
-          { userTheme }
-        </p>
         <ThemeSelector />
       </div>
     )

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

@@ -21,7 +21,6 @@ $default-spacing: var(--gap);
   }
 
   >* {
-    display: inline-block;
     scroll-snap-align: start;
 
     &:first-child {

package/src/ui/a/Tip/Tip.jsx

@@ -21,8 +21,10 @@ const Tip = ({
   className:userClassName,
   style,
   children,
+  icon,
   as:Wrapper,
   color,
+  backgroundColor,
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -36,13 +38,16 @@ const Tip = ({
         baseClassName,
         componentClassName,
         userClassName,
-        `x-${color}`,
+        `x-${backgroundColor}`,
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
       // {...otherProps}
     >
+      <span className={`x-${color} c-x icon`}>
+        {icon}
+      </span>
       {children}
     </Wrapper>
   )
@@ -70,10 +75,20 @@ Tip.propTypes = {
   children:PropTypes.node.isRequired,
 
   /**
-   * The color of the bar
+   * The icon
+   */
+  icon:PropTypes.string,
+
+  /**
+   * The color of the icon
    */
   color:PropTypes.string,
 
+  /**
+   * The background color
+   */
+  backgroundColor:PropTypes.string,
+
   /**
    * The wrapper html type
    */
@@ -81,8 +96,10 @@ Tip.propTypes = {
 }
 
 Tip.defaultProps = {
-  as   :'p',
-  color:'main',
+  as             :'p',
+  icon           :')',
+  color          :'interactive',
+  backgroundColor:'background-near',
 }
 
 export default Tip

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

@@ -4,19 +4,13 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-bar-width: 2px;
-$default-padding: 1em;
+$default-padding: calc(var(--gap) * 2);
 
 .#{bem.$base}.tip {
-  padding-left: $default-padding;
-  position: relative;
-
-  &::before {
-    background: var(--x);
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    width: $default-bar-width;
-  }
+  align-items: center;
+  background: var(--x);
+  border-radius: var(--theme-default-border-radius);
+  display: flex;
+  gap: var(--gap);
+  padding: $default-padding;
 }

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

@@ -61,7 +61,7 @@ const Button = ({
       {isLoading ? (
         <LoadingCircle
           style={{
-            '--x':'var(--on-x)',
+            '--x':'var(--stroke-color, var(--on-x))',
           }}
           heightWidth="1.15em"
         />

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

@@ -23,9 +23,6 @@ $default-spacing: var(--gap);
     &.desktop-grid {
       display: grid;
       grid-template-columns: repeat(var(--columns), 1fr);
-    }
-
-    &.snap-scroller {
       margin-left: unset;
       margin-right: unset;
     }

package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx

@@ -32,6 +32,10 @@ const defaultsMap = {
     icon:'l',
     link:'LINKEDIN',
   },
+  threads:{
+    icon:'u',
+    link:'THREADS',
+  },
 }
 
 /**
@@ -57,7 +61,7 @@ const SocialMediaButton = ({
   }, [])
 
   const content = type && defaultsMap[type]
-  const href = link || applicationContext?.SOCIAL?.[content.link]
+  const href = link || applicationContext?.SOCIAL?.[content?.link]
 
   return (
     <a href={href} target="_blank" rel="noreferrer">

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

@@ -17,7 +17,7 @@ const componentClassName = 'theme-selector'
  */
 const ThemeSelector = ({
   id,
-  className:userClassName,
+  className: userClassName,
   style,
   themes,
 }) => {
@@ -36,13 +36,8 @@ const ThemeSelector = ({
   },
   [userTheme])
 
-  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
-    <a
+    <div
       className={[
         baseClassName,
         componentClassName,
@@ -52,11 +47,21 @@ const ThemeSelector = ({
         .join(' ')}
       id={id}
       style={style}
-      onClick={loopThemes}
-      onKeyDown={loopThemes}
     >
-      {themeText}
-    </a>
+      <span className="c-x x-paragraph">
+        Theme:
+        {' '}
+        {userTheme && userTheme[0].toUpperCase() + userTheme.slice(1)}
+      </span>
+      <button
+        type="button"
+        onClick={loopThemes}
+      >
+        <input type="checkbox" id="switch" checked={userTheme === 'dark'} />
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label htmlFor="switch" />
+      </button>
+    </div>
   )
 }
 

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

@@ -2,8 +2,51 @@
 
 @use "@pareto-engineering/bem";
 
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: 1.2em;
+
 .#{bem.$base}.theme-selector {
-  cursor: pointer;
-  display: block;
-  text-decoration: none;
+  align-items: center;
+  display: flex;
+  gap: var(--gap);
+
+  > button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+
+    >input {
+      height: 0;
+      visibility: hidden;
+      width: 0;
+    }
+
+    >label {
+      background: var(--interactive);
+      border-radius: $default-border-radius;
+      cursor: pointer;
+      display: block;
+      height: $default-size;
+      position: relative;
+      width: calc($default-size * 2);
+
+      &::after {
+        background: var(--background-far);
+        border: 1px solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        content: "";
+        height: $default-size;
+        left: 0;
+        position: absolute;
+        top: 0;
+        transition: .3s;
+        width: $default-size;
+      }
+    }
+
+    >input:checked + label::after {
+      left: $default-size;
+    }
+  }
 }

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

@@ -3199,7 +3199,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  12 months ago
+  about 1 year ago
 </p>
 `;
 
@@ -3227,8 +3227,13 @@ exports[`Storyshots a/Timestamp Relative Format 1`] = `
 
 exports[`Storyshots a/Tip Base 1`] = `
 <p
-  className="base tip x-main"
+  className="base tip x-background-near"
 >
+  <span
+    className="x-interactive c-x icon"
+  >
+    )
+  </span>
   Remember to wash your vegetables before eating them.
 </p>
 `;
@@ -8076,7 +8081,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8117,7 +8122,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8158,7 +8163,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8199,7 +8204,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8240,7 +8245,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8281,7 +8286,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8322,7 +8327,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8363,7 +8368,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8404,7 +8409,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8445,7 +8450,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8486,7 +8491,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8527,7 +8532,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8568,7 +8573,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8609,7 +8614,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8650,7 +8655,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8691,7 +8696,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8732,7 +8737,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8773,7 +8778,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8814,7 +8819,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8855,7 +8860,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8896,7 +8901,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8937,7 +8942,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -8978,7 +8983,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9019,7 +9024,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9060,7 +9065,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9101,7 +9106,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9142,7 +9147,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9183,7 +9188,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9224,7 +9229,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9265,7 +9270,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9306,7 +9311,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9347,7 +9352,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9388,7 +9393,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9429,7 +9434,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9470,7 +9475,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9511,7 +9516,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9552,7 +9557,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9593,7 +9598,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -9634,7 +9639,7 @@ exports[`Storyshots b/Button Loading 1`] = `
         {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
-          "--x": "var(--on-x)",
+          "--x": "var(--stroke-color, var(--on-x))",
         }
       }
     >
@@ -13838,6 +13843,18 @@ exports[`Storyshots b/SocialMediaButton Base 1`] = `
       l
     </button>
   </a>,
+  <a
+    href="https://www.threads.net/@hellopareto"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <button
+      className="base x-threads social-media-button"
+      type="button"
+    >
+      u
+    </button>
+  </a>,
 ]
 `;
 
@@ -13891,6 +13908,18 @@ exports[`Storyshots b/SocialMediaButton Transparent 1`] = `
       l
     </button>
   </a>,
+  <a
+    href="https://www.threads.net/@hellopareto"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <button
+      className="base x-threads modifierTransparent social-media-button"
+      type="button"
+    >
+      u
+    </button>
+  </a>,
 ]
 `;
 
@@ -13898,16 +13927,29 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
 <div
   className="ui-undefined y-background-far b-y"
 >
-  <p>
-    Theme :
-  </p>
-  <a
+  <div
     className="base theme-selector"
-    onClick={[Function]}
-    onKeyDown={[Function]}
   >
-    Dark
-  </a>
+    <span
+      className="c-x x-paragraph"
+    >
+      Theme:
+       
+    </span>
+    <button
+      onClick={[Function]}
+      type="button"
+    >
+      <input
+        checked={false}
+        id="switch"
+        type="checkbox"
+      />
+      <label
+        htmlFor="switch"
+      />
+    </button>
+  </div>
 </div>
 `;