@npm_leadtech/legal-lib-components 5.7.5 → 5.7.7

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.js

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+export const RatafiaSubscriptionCardStyled = styled.div `
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  gap: 0.5rem;
+  min-width: 320px;
+  padding: 1rem;
+  border-radius: var(--global-border-radius);
+
+  &.primary {
+    background-color: var(--neutral-neutral-6);
+
+    .icon-svg-with-theme-color {
+      background-color: var(--primary-main-light-1);
+    }
+
+    .ratafia-card__feature {
+      &.ratafia-card__ai-feature {
+        background-color: var(--primary-main-light-6);
+      }
+    }
+  }
+
+  &.secondary {
+    background-color: var(--primary-main-light-4);
+
+    .icon-svg-with-theme-color {
+      background-color: var(--primary-main-dark-2);
+    }
+
+    .ratafia-card__feature {
+      &.ratafia-card__ai-feature {
+        background-color: var(--secondary-main-light-3);
+      }
+    }
+  }
+
+  .ratafia-card {
+    &__header {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem 1rem;
+    }
+
+    &__title {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.8rem;
+      font-weight: bold;
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid var(--neutral-neutral-4);
+      width: 100%;
+    }
+
+    &__body {
+      display: flex;
+      flex-flow: column;
+      flex: 1;
+    }
+
+    &__feature {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-1);
+      text-align: left;
+      padding: 0.25rem 0;
+
+      .icon-svg-with-theme-color {
+        flex-basis: 1rem;
+        margin-top: 0.2rem;
+      }
+
+      &.ratafia-card__ai-feature {
+        background-color: var(--primary-main-light-6);
+        padding-left: 0.5rem;
+      }
+    }
+
+    &__footer {
+      display: flex;
+      margin-top: 1.5rem;
+    }
+  }
+`;

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.styled.ts

@@ -0,0 +1,94 @@
+import styled from 'styled-components'
+
+export const RatafiaSubscriptionCardStyled = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  gap: 0.5rem;
+  min-width: 320px;
+  padding: 1rem;
+  border-radius: var(--global-border-radius);
+
+  &.primary {
+    background-color: var(--neutral-neutral-6);
+
+    .icon-svg-with-theme-color {
+      background-color: var(--primary-main-light-1);
+    }
+
+    .ratafia-card__feature {
+      &.ratafia-card__ai-feature {
+        background-color: var(--primary-main-light-6);
+      }
+    }
+  }
+
+  &.secondary {
+    background-color: var(--primary-main-light-4);
+
+    .icon-svg-with-theme-color {
+      background-color: var(--primary-main-dark-2);
+    }
+
+    .ratafia-card__feature {
+      &.ratafia-card__ai-feature {
+        background-color: var(--secondary-main-light-3);
+      }
+    }
+  }
+
+  .ratafia-card {
+    &__header {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem 1rem;
+    }
+
+    &__title {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.8rem;
+      font-weight: bold;
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid var(--neutral-neutral-4);
+      width: 100%;
+    }
+
+    &__body {
+      display: flex;
+      flex-flow: column;
+      flex: 1;
+    }
+
+    &__feature {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-1);
+      text-align: left;
+      padding: 0.25rem 0;
+
+      .icon-svg-with-theme-color {
+        flex-basis: 1rem;
+        margin-top: 0.2rem;
+      }
+
+      &.ratafia-card__ai-feature {
+        background-color: var(--primary-main-light-6);
+        padding-left: 0.5rem;
+      }
+    }
+
+    &__footer {
+      display: flex;
+      margin-top: 1.5rem;
+    }
+  }
+`

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react'
 
 import { BenefitProps, RatafiaSubscriptionCardProps } from './RatafiaSubscriptionCardProps.types'
 import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms'
+import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled'
 import { stringSlugify } from '../../../utils/stringSlugify'
 
 const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
@@ -25,7 +26,7 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
     ))
 
   return (
-    <div className={`ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`}>
+    <RatafiaSubscriptionCardStyled className={`ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`}>
       <div className='ratafia-card__header'>
         {title && (
           <div className='ratafia-card__title'>
@@ -51,7 +52,7 @@ const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
           />
         </div>
       )}
-    </div>
+    </RatafiaSubscriptionCardStyled>
   )
 }
 

package/dist/src/components/molecules/Snackbar/Snackbar.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { Button } from '../../atoms';
-// import './Snackbar.scss'
+import { SnackbarStyled } from './Snackbar.styled';
 const Snackbar = ({ type, title, text, button, dismissTimeout = 1000, autoDismissTimeout, autoDismiss, onDismiss, onAutoDismiss }) => {
     const [snackbarOpen, changeSnackbarOpen] = useState();
     useEffect(() => {
@@ -38,6 +38,6 @@ const Snackbar = ({ type, title, text, button, dismissTimeout = 1000, autoDismis
         active: snackbarOpen,
         hidden: !(snackbarOpen ?? false)
     });
-    return (_jsxs("div", { className: classes, "aria-hidden": 'true', children: [_jsx("span", { className: 'snackbar-close-icon', onClick: closeSnackbar, tabIndex: 0, children: "\u00D7" }), _jsxs("div", { className: 'snackbar-content', children: [_jsxs("div", { className: 'snackbar-content__text-container', children: [_jsx("p", { className: 'snackbar-title', children: title ?? '' }), _jsx("p", { className: 'snackbar-text', children: text ?? '' })] }), button?.color !== null && Boolean(button?.label) && (_jsx("div", { className: 'snackbar-content__button', children: _jsx(Button, { label: button?.label ?? '', onClick: button?.onClick, color: button?.color ?? 'primary', noLink: true, functionParameters: '', dataQa: 'back' }) }))] })] }));
+    return (_jsxs(SnackbarStyled, { className: classes, "aria-hidden": 'true', children: [_jsx("span", { className: 'snackbar-close-icon', onClick: closeSnackbar, tabIndex: 0, children: "\u00D7" }), _jsxs("div", { className: 'snackbar-content', children: [_jsxs("div", { className: 'snackbar-content__text-container', children: [_jsx("p", { className: 'snackbar-title', children: title ?? '' }), _jsx("p", { className: 'snackbar-text', children: text ?? '' })] }), button?.color !== null && Boolean(button?.label) && (_jsx("div", { className: 'snackbar-content__button', children: _jsx(Button, { label: button?.label ?? '', onClick: button?.onClick, color: button?.color ?? 'primary', noLink: true, functionParameters: '', dataQa: 'back' }) }))] })] }));
 };
 export default Snackbar;

package/dist/src/components/molecules/Snackbar/Snackbar.styled.d.ts

@@ -0,0 +1 @@
+export declare const SnackbarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/Snackbar/Snackbar.styled.js

@@ -0,0 +1,139 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const SnackbarStyled = styled.div `
+  color: var(--neutral-main);
+  line-height: 1.5;
+  margin-bottom: 1em;
+  padding: 0.5em 0 0.5em 0;
+  margin-right: 2%;
+  margin-left: 2%;
+  width: 96%;
+  transition: transform 1s;
+  z-index: 10000;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+
+  @media ${device['portrait-tablets']} {
+    margin: 0;
+    width: 18rem;
+  }
+  @media ${device['landscape-tablets']} {
+    width: 27rem;
+  }
+  @media ${device.laptop} {
+    width: 36rem;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    float: left;
+    margin: 1.25rem 0.75rem 0 0.75rem;
+    @media ${device['portrait-tablets']} {
+      margin: space(3) space(3) 0 space(3);
+    }
+  }
+
+  &.snackbar {
+    &--welcome {
+      background-color: var(--neutral-main);
+      color: var(--others-white);
+      border: 1px solid var(--neutral-neutral-2);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjNUREOEMzIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+          no-repeat;
+      }
+    }
+
+    &--success {
+      background-color: var(--snackbar-success-bg);
+      color: var(--snackbar-success-color);
+      border: 1px solid var(--snackbar-success-border);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNOC44IDE1LjlMNC42IDExLjcgMy4yIDEzLjEgOC44IDE4LjcgMjAuOCA2LjcgMTkuNCA1LjN6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8bWFzayBpZD0icHJlZml4X19iIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcHJlZml4X19hIi8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDxnIGZpbGw9IiMwMjM3NEEiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=)
+          no-repeat;
+      }
+    }
+
+    &--error {
+      background-color: var(--error-main);
+      color: var(--others-white);
+      border: 1px solid get-color(error, error-2);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bS0xLTloMnY2aC0ydi02em0wLTRoMnYyaC0yVjd6IiAvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6IiAvPgogICAgICAgIDxtYXNrIGlkPSJwcmVmaXhfX2IiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2EiIC8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDx1c2UgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjcHJlZml4X19hIiAvPgogICAgICAgIDxnIGZpbGw9IiNGRkYiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiIC8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)
+          no-repeat;
+      }
+    }
+
+    &--reminder {
+      background-color: var(--snackbar-reminder-bg);
+      color: var(--neutral-main);
+      border: 1px solid var(--snackbar-reminder-border);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjOTM2QzJGIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+          no-repeat;
+      }
+    }
+  }
+
+  .snackbar {
+    &-close-icon {
+      cursor: pointer;
+      float: right;
+      font-size: 1.25rem;
+      line-height: 3;
+      margin-left: 1em;
+      margin-right: 1em;
+      opacity: 0.8;
+      @media ${device['portrait-tablets']} {
+        line-height: 2;
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+
+      &__text-container {
+        display: flex;
+        flex-direction: column;
+        margin-right: 1rem;
+        min-width: 1%;
+      }
+
+      &__button button {
+        margin-top: 0.5rem;
+        height: auto !important;
+
+        label {
+          white-space: nowrap;
+        }
+      }
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        margin-top: inherit;
+      }
+    }
+
+    &-title {
+      font-weight: bold;
+    }
+
+    .e-button.remove-yellow {
+      border-color: transparent;
+
+      &:hover {
+        background-color: var(--others-white);
+      }
+    }
+  }
+`;

package/dist/src/components/molecules/Snackbar/Snackbar.styled.ts

@@ -0,0 +1,140 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const SnackbarStyled = styled.div`
+  color: var(--neutral-main);
+  line-height: 1.5;
+  margin-bottom: 1em;
+  padding: 0.5em 0 0.5em 0;
+  margin-right: 2%;
+  margin-left: 2%;
+  width: 96%;
+  transition: transform 1s;
+  z-index: 10000;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+
+  @media ${device['portrait-tablets']} {
+    margin: 0;
+    width: 18rem;
+  }
+  @media ${device['landscape-tablets']} {
+    width: 27rem;
+  }
+  @media ${device.laptop} {
+    width: 36rem;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    float: left;
+    margin: 1.25rem 0.75rem 0 0.75rem;
+    @media ${device['portrait-tablets']} {
+      margin: space(3) space(3) 0 space(3);
+    }
+  }
+
+  &.snackbar {
+    &--welcome {
+      background-color: var(--neutral-main);
+      color: var(--others-white);
+      border: 1px solid var(--neutral-neutral-2);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjNUREOEMzIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+          no-repeat;
+      }
+    }
+
+    &--success {
+      background-color: var(--snackbar-success-bg);
+      color: var(--snackbar-success-color);
+      border: 1px solid var(--snackbar-success-border);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNOC44IDE1LjlMNC42IDExLjcgMy4yIDEzLjEgOC44IDE4LjcgMjAuOCA2LjcgMTkuNCA1LjN6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8bWFzayBpZD0icHJlZml4X19iIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcHJlZml4X19hIi8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDxnIGZpbGw9IiMwMjM3NEEiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=)
+          no-repeat;
+      }
+    }
+
+    &--error {
+      background-color: var(--error-main);
+      color: var(--others-white);
+      border: 1px solid get-color(error, error-2);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bS0xLTloMnY2aC0ydi02em0wLTRoMnYyaC0yVjd6IiAvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6IiAvPgogICAgICAgIDxtYXNrIGlkPSJwcmVmaXhfX2IiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2EiIC8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDx1c2UgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjcHJlZml4X19hIiAvPgogICAgICAgIDxnIGZpbGw9IiNGRkYiIG1hc2s9InVybCgjcHJlZml4X19iKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiIC8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)
+          no-repeat;
+      }
+    }
+
+    &--reminder {
+      background-color: var(--snackbar-reminder-bg);
+      color: var(--neutral-main);
+      border: 1px solid var(--snackbar-reminder-border);
+
+      &:before {
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg2bC0yIDJWNGgxNnYxMnpNNyA5aDJ2Mkg3Vjl6bTQgMGgydjJoLTJWOXptNCAwaDJ2MmgtMlY5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9InByZWZpeF9fYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3ByZWZpeF9fYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjOTM2QzJGIiBtYXNrPSJ1cmwoI3ByZWZpeF9fYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
+          no-repeat;
+      }
+    }
+  }
+
+  .snackbar {
+    &-close-icon {
+      cursor: pointer;
+      float: right;
+      font-size: 1.25rem;
+      line-height: 3;
+      margin-left: 1em;
+      margin-right: 1em;
+      opacity: 0.8;
+      @media ${device['portrait-tablets']} {
+        line-height: 2;
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+
+      &__text-container {
+        display: flex;
+        flex-direction: column;
+        margin-right: 1rem;
+        min-width: 1%;
+      }
+
+      &__button button {
+        margin-top: 0.5rem;
+        height: auto !important;
+
+        label {
+          white-space: nowrap;
+        }
+      }
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+        margin-top: inherit;
+      }
+    }
+
+    &-title {
+      font-weight: bold;
+    }
+
+    .e-button.remove-yellow {
+      border-color: transparent;
+
+      &:hover {
+        background-color: var(--others-white);
+      }
+    }
+  }
+`

package/dist/src/components/molecules/Snackbar/Snackbar.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames'
 
 import { Button } from '../../atoms'
 import { type SnackbarProps } from './SnackbarProps.types'
-// import './Snackbar.scss'
+import { SnackbarStyled } from './Snackbar.styled'
 
 const Snackbar: FC<SnackbarProps> = ({
   type,
@@ -53,7 +53,7 @@ const Snackbar: FC<SnackbarProps> = ({
   })
 
   return (
-    <div className={classes} aria-hidden='true'>
+    <SnackbarStyled className={classes} aria-hidden='true'>
       <span className='snackbar-close-icon' onClick={closeSnackbar} tabIndex={0}>
         &times;
       </span>
@@ -75,7 +75,7 @@ const Snackbar: FC<SnackbarProps> = ({
           </div>
         )}
       </div>
-    </div>
+    </SnackbarStyled>
   )
 }
 

package/dist/src/components/molecules/StepGetForm/StepGetForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './StepGetForm.scss'
+import { StepGetFormStyled } from './StepGetForm.styled';
 const StepGetForm = ({ description, title = '', image }) => {
-    return (_jsxs("div", { className: 'homeStepsItem', children: [image != null && _jsx("div", { className: 'step__image', children: image }), _jsxs("div", { className: 'step__information', children: [_jsx("p", { className: 'step__information__title sans-serif --big', children: title }), _jsx("small", { className: 'sans-serif --small', children: description })] })] }));
+    return (_jsxs(StepGetFormStyled, { className: 'homeStepsItem', children: [image != null && _jsx("div", { className: 'step__image', children: image }), _jsxs("div", { className: 'step__information', children: [_jsx("p", { className: 'step__information__title sans-serif --big', children: title }), _jsx("small", { className: 'sans-serif --small', children: description })] })] }));
 };
 export default StepGetForm;

package/dist/src/components/molecules/StepGetForm/StepGetForm.styled.d.ts

@@ -0,0 +1 @@
+export declare const StepGetFormStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/StepGetForm/StepGetForm.styled.js

@@ -0,0 +1,104 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const StepGetFormStyled = styled.div `
+  border-radius: var(--global-border-radius);
+  display: flex;
+  max-width: 100%;
+  padding: 2rem;
+  flex-flow: row nowrap;
+  min-width: 100%;
+  width: 100%;
+  align-items: flex-start;
+  text-align: center;
+  background: var(--others-white);
+  box-shadow: var(--box-shadow-medium);
+  border: var(--global-border-radius);
+  margin-right: 0.5rem;
+  margin-bottom: 1rem;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @media ${device['portrait-tablets']} {
+    padding: 1.5rem;
+  }
+  @media ${device['landscape-tablets']} {
+    max-width: calc(100% / 3 - 0.5rem);
+    min-width: calc(100% / 3 - 0.5rem);
+    padding: 1.5rem;
+    height: 342px;
+    flex-flow: column nowrap;
+  }
+  @media ${device.laptop} {
+    margin-right: 0;
+    max-width: calc(100% / 3 - 1rem);
+    min-width: calc(100% / 3 - 1rem);
+  }
+
+  .step__information {
+    text-align: left;
+    max-width: 50%;
+    align-self: center;
+
+    @media ${device['landscape-tablets']} {
+      max-width: 100%;
+      text-align: center;
+      margin-top: 0;
+    }
+
+    &_title {
+      font-weight: bold;
+    }
+  }
+
+  .step__image {
+    display: flex;
+    justify-content: center;
+    max-width: 7.5rem;
+    text-align: center;
+    width: 50%;
+    align-self: center;
+    padding-bottom: 0;
+    margin: 0 auto;
+    @media ${device['portrait-tablets']} {
+      padding-bottom: 2.5rem;
+    }
+    @media ${device.laptop} {
+      margin-top: 2rem;
+    }
+
+    @media ${device['landscape-tablets']} {
+      width: 100%;
+    }
+  }
+
+  .gatsby-image-wrapper {
+    width: 88px;
+    @media ${device['portrait-tablets']} {
+      height: 88px;
+    }
+
+    img {
+      height: 100%;
+    }
+  }
+
+  p {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+    @media ${device['portrait-tablets']} {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  small {
+    color: var(--neutral-neutral-2);
+  }
+
+  &:not(:first-child) {
+    .gatsby-image-wrapper {
+      width: 100%;
+    }
+  }
+`;