@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

package/src/common/brand-components/icons/NSLogoMark.tsx

@@ -1,39 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-const NSLogoMark = (props: SvgIconProps):ReactElement => {
-    return (
-        <SvgIcon
-            viewBox="0 0 51 52"
-            fill="none"
-            data-testid="logo"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
-            <path
-                d="M50.041 20.6435C49.3218 18.9662 48.2764 17.4488 46.9662 16.1793C44.1811 13.5595 40.2549 12.5391 36.5481 13.472C32.8413 14.4047 29.8642 17.1622 28.6486 20.7888C28.0296 22.4814 27.7126 24.2696 27.7116 26.0719C27.7116 33.9438 27.7116 41.8201 27.7116 49.7006C27.7116 51.0214 27.7116 51.0214 26.2599 50.9554C26.2599 50.7044 26.2599 50.4271 26.2599 50.1628C26.2599 41.2608 26.2599 32.3632 26.2599 23.47C26.0387 17.9191 29.4097 12.8556 34.6136 10.9226C35.2421 10.703 35.886 10.5308 36.5405 10.4075C37.1737 10.2754 37.8602 10.2225 38.4934 10.1433C37.6885 6.45834 30.9842 2.21863 25.547 1.96768C19.7457 1.82825 14.3682 4.99786 11.677 10.1433C12.2972 10.2225 12.9044 10.2622 13.4849 10.3678C18.8789 11.2894 23.0428 15.6226 23.7525 21.0529C23.8991 22.0412 23.974 23.0388 23.9766 24.0379C23.9766 32.7288 23.9766 41.4193 23.9766 50.1101C23.9766 50.7968 23.8182 51.0875 23.0793 51.0081C22.3401 50.929 22.4194 50.7044 22.4194 50.2159C22.4194 47.4552 22.4194 44.6948 22.4194 41.9212C22.4194 36.4532 22.4194 30.9852 22.4194 25.5172C22.4658 22.3039 21.2911 19.193 19.1332 16.8132C16.5801 14.0518 12.8165 12.7501 9.10424 13.3445C5.39204 13.939 2.22225 16.3508 0.657194 19.7718C0.485803 20.102 0.340436 20.4454 0.103027 20.9341C2.27367 8.85927 12.7463 0.0553189 25.0052 0.000259583C37.2638 -0.0547998 47.8152 8.65471 50.0937 20.7095"
-                fill={props.color}
-            />
-            <path
-                d="M33.7936 49.41C33.7936 49.1591 33.7936 48.9873 33.7936 48.8157C33.7936 44.1663 33.7936 39.5703 33.7936 34.8551C33.7088 32.5992 34.5699 30.4108 36.1692 28.819C38.1948 26.8776 41.2056 26.3842 43.7444 27.5775C46.2721 28.5237 47.9495 30.9388 47.9543 33.6398C48.0301 36.4561 47.0132 39.192 45.1168 41.2738C42.3431 44.7864 38.7052 47.5172 34.5591 49.1985C34.3125 49.2868 34.0614 49.3618 33.8069 49.4231"
-                fill={props.color}
-            />
-            <path
-                d="M16.4134 49.5949C14.7636 48.7363 13.2065 48.0496 11.7681 47.1646C8.4545 45.2066 5.68241 42.4507 3.70443 39.1475C2.56468 37.3357 2.09748 35.1804 2.38472 33.0589C2.7694 29.7773 5.45008 27.2445 8.74587 27.0492C12.2156 26.5971 15.4457 28.902 16.1493 32.3324C16.3906 33.327 16.5147 34.3466 16.5188 35.3701C16.5188 39.7552 16.5188 44.1533 16.5188 48.5778C16.5188 48.8288 16.5188 49.0667 16.4397 49.5552"
-                fill={props.color}
-            />
-            <path
-                d="M20.1482 50.4005C18.8285 50.4005 18.7095 50.308 18.7095 49.1721V30.3114C18.8828 26.8698 16.8673 23.6935 13.6814 22.3867C10.1653 20.905 6.10269 21.6983 3.40106 24.3943C1.68238 26.3444 0.742587 28.8603 0.76163 31.4604C0.767026 31.7375 0.698784 32.0109 0.563576 32.253C0.418211 31.619 0.24682 30.9321 0.167472 30.351C-0.284175 27.8623 0.184929 25.2941 1.48719 23.1263C2.39143 21.5993 3.78764 20.4255 5.44632 19.798C8.97191 18.413 12.9285 18.6596 16.2551 20.4716C18.706 21.7014 20.2237 24.2401 20.1482 26.983C20.2142 34.6566 20.1482 42.3303 20.1482 49.991C20.1482 50.1495 20.1482 50.2947 20.1482 50.4402"
-                fill={props.color}
-            />
-            <path
-                d="M29.9422 50.427V49.476C29.9422 42.3969 30.0213 35.3175 29.9422 28.238C29.8629 22.5058 33.0698 20.036 37.5834 19.1246C39.8521 18.6682 42.2024 18.8418 44.3797 19.6266C48.243 21.0933 50.6295 24.9853 50.1867 29.0965C50.0944 30.1707 49.9134 31.2353 49.6456 32.2796C49.4212 30.9588 49.3288 29.6381 48.9724 28.3173C48.2014 25.4313 46.0698 23.1046 43.2638 22.0861C40.4577 21.0675 37.3314 21.4856 34.891 23.2059C32.5944 24.7671 31.2823 27.4182 31.4333 30.1928C31.4333 36.4798 31.4333 42.7667 31.4333 49.0535C31.4333 50.3743 31.4333 50.3743 29.9159 50.3743"
-                fill={props.color}
-            />
-        </SvgIcon>
-    );
-};
-
-export default NSLogoMark;

package/src/common/brand-components/icons/NSLogoPoweredBy.tsx

@@ -1,103 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-const NSLogoPoweredBy = (props: SvgIconProps):ReactElement => {
-    const { color } = props
-    return (
-        <SvgIcon
-            viewBox="0 0 100 38"
-            data-testid="logo"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}>
-            <path
-                d="M15 8.8855V0.885498H17.7031C18.3307 0.885498 18.8438 0.998779 19.2422 1.22534C19.6432 1.4493 19.9401 1.75269 20.1328 2.1355C20.3255 2.51831 20.4219 2.94539 20.4219 3.41675C20.4219 3.8881 20.3255 4.31649 20.1328 4.7019C19.9427 5.08732 19.6484 5.39461 19.25 5.62378C18.8516 5.85034 18.3411 5.96362 17.7188 5.96362H15.7812V5.10425H17.6875C18.1172 5.10425 18.4622 5.03003 18.7227 4.88159C18.9831 4.73315 19.1719 4.53263 19.2891 4.28003C19.4089 4.02482 19.4688 3.73706 19.4688 3.41675C19.4688 3.09644 19.4089 2.80998 19.2891 2.55737C19.1719 2.30477 18.9818 2.10685 18.7188 1.96362C18.4557 1.81779 18.1068 1.74487 17.6719 1.74487H15.9688V8.8855H15Z"
-                fill={color}
-            />
-            <path
-                d="M28.7324 4.8855C28.7324 5.72925 28.5801 6.45841 28.2754 7.073C27.9707 7.68758 27.5527 8.16154 27.0215 8.49487C26.4902 8.82821 25.8835 8.99487 25.2012 8.99487C24.5189 8.99487 23.9121 8.82821 23.3809 8.49487C22.8496 8.16154 22.4316 7.68758 22.127 7.073C21.8223 6.45841 21.6699 5.72925 21.6699 4.8855C21.6699 4.04175 21.8223 3.31258 22.127 2.698C22.4316 2.08342 22.8496 1.60946 23.3809 1.27612C23.9121 0.94279 24.5189 0.776123 25.2012 0.776123C25.8835 0.776123 26.4902 0.94279 27.0215 1.27612C27.5527 1.60946 27.9707 2.08342 28.2754 2.698C28.5801 3.31258 28.7324 4.04175 28.7324 4.8855ZM27.7949 4.8855C27.7949 4.19279 27.679 3.60815 27.4473 3.13159C27.2181 2.65503 26.9069 2.29435 26.5137 2.04956C26.123 1.80477 25.6855 1.68237 25.2012 1.68237C24.7168 1.68237 24.278 1.80477 23.8848 2.04956C23.4941 2.29435 23.1829 2.65503 22.9512 3.13159C22.722 3.60815 22.6074 4.19279 22.6074 4.8855C22.6074 5.57821 22.722 6.16284 22.9512 6.6394C23.1829 7.11597 23.4941 7.47664 23.8848 7.72144C24.278 7.96623 24.7168 8.08862 25.2012 8.08862C25.6855 8.08862 26.123 7.96623 26.5137 7.72144C26.9069 7.47664 27.2181 7.11597 27.4473 6.6394C27.679 6.16284 27.7949 5.57821 27.7949 4.8855Z"
-                fill={color}
-            />
-            <path
-                d="M31.8145 8.8855L29.627 0.885498H30.6113L32.2832 7.40112H32.3613L34.0645 0.885498H35.1582L36.8613 7.40112H36.9395L38.6113 0.885498H39.5957L37.4082 8.8855H36.4082L34.6426 2.5105H34.5801L32.8145 8.8855H31.8145Z"
-                fill={color}
-            />
-            <path
-                d="M40.8027 8.8855V0.885498H45.6309V1.74487H41.7715V4.448H45.3809V5.30737H41.7715V8.02612H45.6934V8.8855H40.8027Z"
-                fill={color}
-            />
-            <path
-                d="M47.377 8.8855V0.885498H50.0801C50.7051 0.885498 51.2181 0.992269 51.6191 1.20581C52.0202 1.41675 52.3171 1.70711 52.5098 2.0769C52.7025 2.4467 52.7988 2.86727 52.7988 3.33862C52.7988 3.80998 52.7025 4.22795 52.5098 4.59253C52.3171 4.95711 52.0215 5.24357 51.623 5.4519C51.2246 5.65763 50.7155 5.7605 50.0957 5.7605H47.9082V4.8855H50.0645C50.4915 4.8855 50.8353 4.823 51.0957 4.698C51.3587 4.573 51.5488 4.39592 51.666 4.16675C51.7858 3.93498 51.8457 3.65894 51.8457 3.33862C51.8457 3.01831 51.7858 2.73836 51.666 2.49878C51.5462 2.2592 51.3548 2.0743 51.0918 1.94409C50.8288 1.81128 50.4811 1.74487 50.0488 1.74487H48.3457V8.8855H47.377ZM51.1426 5.29175L53.1113 8.8855H51.9863L50.0488 5.29175H51.1426Z"
-                fill={color}
-            />
-            <path
-                d="M54.4131 8.8855V0.885498H59.2412V1.74487H55.3818V4.448H58.9912V5.30737H55.3818V8.02612H59.3037V8.8855H54.4131Z"
-                fill={color}
-            />
-            <path
-                d="M63.4561 8.8855H60.9873V0.885498H63.5654C64.3415 0.885498 65.0055 1.04565 65.5576 1.36597C66.1097 1.68368 66.5329 2.14071 66.8271 2.73706C67.1214 3.33081 67.2686 4.04175 67.2686 4.86987C67.2686 5.70321 67.1201 6.42065 66.8232 7.02222C66.5264 7.62118 66.0941 8.08211 65.5264 8.40503C64.9587 8.72534 64.2686 8.8855 63.4561 8.8855ZM61.9561 8.02612H63.3936C64.055 8.02612 64.6032 7.89852 65.0381 7.64331C65.473 7.3881 65.7972 7.02482 66.0107 6.55347C66.2243 6.08211 66.3311 5.52092 66.3311 4.86987C66.3311 4.22404 66.2256 3.66805 66.0146 3.2019C65.8037 2.73315 65.4886 2.37378 65.0693 2.12378C64.6501 1.87118 64.1279 1.74487 63.5029 1.74487H61.9561V8.02612Z"
-                fill={color}
-            />
-            <path
-                d="M71.9873 8.8855V0.885498H74.7842C75.3415 0.885498 75.8011 0.981852 76.1631 1.17456C76.5251 1.36466 76.7946 1.62118 76.9717 1.94409C77.1488 2.2644 77.2373 2.61987 77.2373 3.0105C77.2373 3.35425 77.1761 3.6381 77.0537 3.86206C76.9339 4.08602 76.7751 4.2631 76.5771 4.39331C76.3818 4.52352 76.1696 4.61987 75.9404 4.68237V4.7605C76.1852 4.77612 76.4313 4.86206 76.6787 5.01831C76.9261 5.17456 77.1331 5.39852 77.2998 5.69019C77.4665 5.98185 77.5498 6.33862 77.5498 6.7605C77.5498 7.16154 77.4587 7.52222 77.2764 7.84253C77.0941 8.16284 76.8063 8.41675 76.4131 8.60425C76.0199 8.79175 75.5081 8.8855 74.8779 8.8855H71.9873ZM72.9561 8.02612H74.8779C75.5107 8.02612 75.96 7.90373 76.2256 7.65894C76.4938 7.41154 76.6279 7.11206 76.6279 6.7605C76.6279 6.48966 76.5589 6.23967 76.4209 6.0105C76.2829 5.77873 76.0863 5.59383 75.8311 5.45581C75.5758 5.31519 75.2738 5.24487 74.9248 5.24487H72.9561V8.02612ZM72.9561 4.40112H74.7529C75.0446 4.40112 75.3076 4.34383 75.542 4.22925C75.779 4.11467 75.9665 3.95321 76.1045 3.74487C76.2451 3.53654 76.3154 3.29175 76.3154 3.0105C76.3154 2.65894 76.193 2.36076 75.9482 2.11597C75.7034 1.86857 75.3154 1.74487 74.7842 1.74487H72.9561V4.40112Z"
-                fill={color}
-            />
-            <path
-                d="M78.4541 0.885498H79.5635L81.7822 4.61987H81.876L84.0947 0.885498H85.2041L82.3135 5.58862V8.8855H81.3447V5.58862L78.4541 0.885498Z"
-                fill={color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M98.8441 32.3669C98.2276 32.3669 97.7076 32.8865 97.7076 33.4781C97.7076 34.0709 98.2276 34.5892 98.8441 34.5892C99.518 34.5892 100 34.0709 100 33.4781C100 32.8496 99.518 32.3669 98.8441 32.3669ZM98.844 34.4599C98.286 34.4599 97.8221 33.9962 97.8221 33.478C97.8221 32.9421 98.286 32.4974 98.844 32.4974C99.4217 32.4974 99.8461 32.9421 99.8461 33.478C99.8461 33.9962 99.4217 34.4599 98.844 34.4599ZM99.3046 33.2195C99.3046 33.0903 99.2286 32.831 98.806 32.831H98.4385V34.1445H98.6138V33.5708H98.9019L99.1514 34.1445H99.3046L99.0743 33.5514C99.2102 33.5337 99.3046 33.3868 99.3046 33.2195ZM98.8239 33.4588H98.6138V32.9779H98.862C99.0358 32.9779 99.1699 33.0347 99.1699 33.2196C99.1699 33.3311 99.1119 33.4588 98.8239 33.4588Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M37.9119 33.8485L28.4715 22.2537V33.6435H27.4075V19.8303L27.6589 19.7744L37.0221 31.2387V19.9796H38.1053V33.8112L37.9119 33.8485Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M46.4815 33.8485C43.1568 33.8485 41.1619 31.9733 41.1619 28.6206V19.7744H42.2571V28.6015C42.2571 31.443 43.9194 32.8826 46.4815 32.8826C49.0435 32.8826 50.7449 31.4051 50.7449 28.6015V19.7744H51.8597V28.6206C51.8597 31.8786 49.7279 33.8485 46.4815 33.8485Z"
-                fill={color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M62.06 33.8485C60.5561 33.8485 59.2066 33.3652 57.9728 32.5842L58.4934 31.6733C59.6309 32.4169 60.884 32.9004 62.1562 32.9004C64.0262 32.9004 65.2795 31.7475 65.2795 30.2416C65.2795 28.6613 64.1808 27.9733 62.1757 27.0996C59.9971 26.1699 58.6669 25.2031 58.6669 23.3256C58.6669 21.3547 60.3827 19.7744 62.908 19.7744C64.1419 19.7744 65.2601 20.1648 66.0891 20.7039L65.5687 21.5778C64.8553 21.0943 63.8722 20.7225 62.8118 20.7225C60.9224 20.7225 59.7465 21.838 59.7465 23.251C59.7465 24.7198 60.9418 25.4262 62.6576 26.1887C65.0866 27.2483 66.3782 28.1594 66.3782 30.1115C66.3782 32.3426 64.4505 33.8485 62.06 33.8485Z"
-                fill={color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M77.2052 33.8485L70.4931 26.898V33.8485H69.4347V19.7744H70.4931V26.3217L76.9783 19.7744H78.3394L71.5141 26.6097L78.6043 33.8485H77.2052Z"
-                fill={color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M80.8967 33.8485H81.8901V19.7744H80.8967V33.8485Z"
-                fill={color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M95.9857 33.8485L86.5454 22.2537V33.6435H85.4814V19.8303L85.7331 19.7744L95.0958 31.2387V19.9796H96.1793V33.8112L95.9857 33.8485Z"
-                fill={color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M17.2824 21.0565C17.2824 21.0565 19.2781 20.9567 20.7785 22.6234C21.2739 23.179 21.7551 23.8912 22.024 24.8884C21.3163 19.5037 16.7162 15.33 11.1394 15.33C5.57676 15.33 0.962469 19.5037 0.240601 24.9026C0.509532 23.9055 0.990778 23.1932 1.48618 22.6376C3.00069 20.971 4.98229 21.0707 4.98229 21.0707C9.93628 21.3271 9.96459 26.3414 9.96459 26.3414V37.3955C10.1911 37.424 10.4317 37.4382 10.6723 37.4525V25.6291C10.6723 24.0194 10.1769 22.4525 9.05872 21.3414C8.03961 20.3157 6.72326 19.7459 5.33614 19.7174C5.93062 18.6775 6.75157 17.8086 7.72822 17.1961C8.76148 16.555 9.93628 16.2131 11.1394 16.2131C12.3425 16.2131 13.5315 16.555 14.5647 17.1961C15.5414 17.8086 16.3623 18.6775 16.9568 19.7174C15.5697 19.7459 14.2392 20.3157 13.2201 21.3414C12.1019 22.4525 11.5923 24.0194 11.5923 25.6291V37.424C11.833 37.4097 12.0594 37.3955 12.3 37.367V26.3271C12.3 26.3271 12.3284 21.3129 17.2824 21.0565ZM17.7353 27.0251C17.7353 27.0251 16.9852 27.0393 16.3624 27.4382C15.6122 27.9083 14.8337 28.8627 14.8337 30.8285V36.7972C17.0418 35.9995 18.9243 34.518 20.2265 32.5949C21.0899 31.1846 21.1182 30.0735 20.9059 29.2616C20.5945 28.2217 19.6462 26.9254 17.7353 27.0251ZM17.3956 23.5066C18.8818 23.5066 19.8726 23.9054 20.5379 24.4325C21.0758 24.9026 22.661 26.555 21.6136 29.6604C21.5995 27.424 21.0758 26.6262 20.4954 25.9567C19.2498 24.6035 17.5938 24.7601 17.5938 24.7601C15.6264 24.8171 14.7063 25.8 14.2817 26.6975C13.8854 27.4952 13.9137 28.2074 13.9137 28.2074V37.0821C13.6872 37.1391 13.4607 37.196 13.2201 37.2388V27.2103C13.2201 23.5351 17.3956 23.5066 17.3956 23.5066ZM4.88322 23.5066C3.39702 23.5066 2.40622 23.9054 1.74097 24.4325C1.20311 24.9026 -0.382169 26.555 0.651093 29.6604C0.665248 27.424 1.18896 26.6262 1.76928 25.9567C3.0007 24.6035 4.67091 24.7601 4.67091 24.7601C6.63835 24.8171 7.55838 25.8 7.98301 26.6975C8.37933 27.4809 8.35102 28.2074 8.35102 28.2074V37.0821C8.57749 37.1391 8.81811 37.196 9.05874 37.2388V27.2245C9.07289 23.5351 4.88322 23.5066 4.88322 23.5066ZM4.55768 27.0251C4.55768 27.0251 5.30786 27.0393 5.93065 27.4382C6.66667 27.9083 7.45931 28.8627 7.45931 30.8285V36.7972C5.25125 35.9995 3.36873 34.518 2.06653 32.5949C1.21727 31.1846 1.17481 30.0735 1.38713 29.2616C1.68437 28.2217 2.6327 26.9111 4.55768 27.0251Z"
-                fill={color}
-            />
-        </SvgIcon>
-    )
-}
-
-export default NSLogoPoweredBy

package/src/common/brand-components/icons/NSLogoStacked.tsx

@@ -1,57 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-const NSLogoStacked = (props: SvgIconProps):ReactElement => {
-    return (
-        <SvgIcon
-            viewBox="0 0 155 108"
-            fill="none"
-            data-testid="logo"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}>
-            <g clipPath="url(#clip0_11117_50399)">
-                <path
-                    d="M145.803 20.6435C145.084 18.9662 144.039 17.4488 142.728 16.1793C139.943 13.5595 136.017 12.5391 132.31 13.472C128.604 14.4047 125.626 17.1622 124.411 20.7888C123.792 22.4814 123.475 24.2696 123.474 26.0719C123.474 33.9438 123.474 41.8201 123.474 49.7006C123.474 51.0214 123.474 51.0214 122.022 50.9554C122.022 50.7044 122.022 50.4271 122.022 50.1628C122.022 41.2608 122.022 32.3632 122.022 23.47C121.801 17.9191 125.172 12.8556 130.376 10.9226C131.004 10.703 131.648 10.5308 132.303 10.4075C132.936 10.2754 133.622 10.2225 134.256 10.1433C133.451 6.45834 126.746 2.21863 121.309 1.96768C115.508 1.82825 110.13 4.99786 107.439 10.1433C108.059 10.2225 108.667 10.2622 109.247 10.3678C114.641 11.2894 118.805 15.6226 119.515 21.0529C119.661 22.0412 119.736 23.0388 119.739 24.0379C119.739 32.7288 119.739 41.4193 119.739 50.1101C119.739 50.7968 119.58 51.0875 118.842 51.0081C118.102 50.929 118.182 50.7044 118.182 50.2159C118.182 47.4552 118.182 44.6948 118.182 41.9212C118.182 36.4532 118.182 30.9852 118.182 25.5172C118.228 22.3039 117.053 19.193 114.895 16.8132C112.342 14.0518 108.579 12.7501 104.866 13.3445C101.154 13.939 97.9845 16.3508 96.4194 19.7718C96.248 20.102 96.1026 20.4454 95.8652 20.9341C98.0359 8.85927 108.509 0.0553189 120.767 0.000259583C133.026 -0.0547998 143.577 8.65471 145.856 20.7095"
-                    fill={props.color}
-                />
-                <path
-                    d="M129.556 49.41C129.556 49.1591 129.556 48.9873 129.556 48.8157C129.556 44.1663 129.556 39.5703 129.556 34.8551C129.471 32.5992 130.332 30.4108 131.931 28.819C133.957 26.8776 136.968 26.3842 139.507 27.5775C142.034 28.5237 143.712 30.9388 143.716 33.6398C143.792 36.4561 142.775 39.192 140.879 41.2738C138.105 44.7864 134.467 47.5172 130.321 49.1985C130.075 49.2868 129.824 49.3618 129.569 49.4231"
-                    fill={props.color}
-                />
-                <path
-                    d="M112.176 49.5949C110.526 48.7363 108.969 48.0496 107.53 47.1646C104.217 45.2066 101.445 42.4507 99.4666 39.1475C98.3269 37.3357 97.8597 35.1804 98.1469 33.0589C98.5316 29.7773 101.212 27.2445 104.508 27.0492C107.978 26.5971 111.208 28.902 111.912 32.3324C112.153 33.327 112.277 34.3466 112.281 35.3701C112.281 39.7552 112.281 44.1533 112.281 48.5778C112.281 48.8288 112.281 49.0667 112.202 49.5552"
-                    fill={props.color}
-                />
-                <path
-                    d="M115.91 50.4005C114.591 50.4005 114.472 50.308 114.472 49.1721V30.3114C114.645 26.8698 112.63 23.6935 109.444 22.3867C105.928 20.905 101.865 21.6983 99.1633 24.3943C97.4446 26.3444 96.5048 28.8603 96.5238 31.4604C96.5292 31.7375 96.461 32.0109 96.3258 32.253C96.1804 31.619 96.009 30.9321 95.9297 30.351C95.478 27.8623 95.9471 25.2941 97.2494 23.1263C98.1536 21.5993 99.5498 20.4255 101.209 19.798C104.734 18.413 108.691 18.6596 112.017 20.4716C114.468 21.7014 115.986 24.2401 115.91 26.983C115.976 34.6566 115.91 42.3303 115.91 49.991C115.91 50.1495 115.91 50.2947 115.91 50.4402"
-                    fill={props.color}
-                />
-                <path
-                    d="M125.704 50.427V49.476C125.704 42.3969 125.783 35.3175 125.704 28.238C125.625 22.5058 128.832 20.036 133.346 19.1246C135.614 18.6682 137.965 18.8418 140.142 19.6266C144.005 21.0933 146.392 24.9853 145.949 29.0965C145.856 30.1707 145.676 31.2353 145.408 32.2796C145.183 30.9588 145.091 29.6381 144.734 28.3173C143.964 25.4313 141.832 23.1046 139.026 22.0861C136.22 21.0675 133.094 21.4856 130.653 23.2059C128.356 24.7671 127.044 27.4182 127.195 30.1928C127.195 36.4798 127.195 42.7667 127.195 49.0535C127.195 50.3743 127.195 50.3743 125.678 50.3743"
-                    fill={props.color}
-                />
-                <path
-                    d="M27.714 93.128C27.714 86.9072 24.9822 83.6714 15.2691 79.2862C9.55475 76.6447 7.35082 74.0031 7.35082 70.8333C7.35082 66.567 10.3334 63.0141 16.1797 63.0141C19.1984 63.0878 22.1225 64.0833 24.5599 65.8672L26.843 61.5482C23.781 59.4956 20.1818 58.393 16.4964 58.3784C7.91831 58.3784 2.21712 64.3746 2.21712 71.0843C2.21712 76.6711 5.1997 80.3297 13.2631 83.8562C20.8779 87.2242 22.5011 89.6412 22.5011 93.7093C22.5011 97.7771 19.7034 101.845 13.7383 101.845C9.66038 101.629 5.74215 100.188 2.49426 97.711L0 102.162C3.94083 104.954 8.64596 106.462 13.4743 106.481C21.5378 106.481 27.6876 100.696 27.6876 93.128H27.714ZM71.951 105.715L49.3309 81.7563L70.9214 59.0915H64.5076L44.2501 80.8052V59.0915H39.1693V105.715H44.2501V82.8655L65.2731 105.715H71.951ZM89.5955 59.0915H84.462V105.715H89.5428L89.5955 59.0915ZM141.408 106.376V59.0915H136.327V93.8942L106.475 58.2329L105.458 58.4839V105.715H110.539V70.3842L140.774 106.639L141.408 106.376Z"
-                    fill={props.color}
-                />
-                <path
-                    d="M39.4206 50.1894V2.91866H34.3131V37.6684L4.47444 2.00732L3.45825 2.25827V49.4893H8.53915V14.1849L38.7607 50.414L39.4206 50.1894ZM85.0167 32.7814V2.91866H79.9359V32.3983C79.9359 41.6438 74.6571 45.6855 67.425 45.6855C60.1929 45.6855 55.0461 41.7232 55.0461 32.3983V2.91866H49.965V32.7814C49.965 43.9686 56.7616 50.2555 67.425 50.2555C77.8373 50.2555 85.0167 43.5856 85.0167 32.7814Z"
-                    fill={props.color}
-                />
-                <path
-                    d="M150.431 107.7C152.737 107.7 154.569 105.785 154.569 103.5C154.569 101.162 152.737 99.2468 150.431 99.2468C148.124 99.2468 146.318 101.136 146.318 103.5C146.318 105.811 148.15 107.7 150.431 107.7ZM150.431 107.119C148.52 107.119 146.977 105.441 146.977 103.513C146.977 101.492 148.52 99.8808 150.431 99.8808C152.368 99.8808 153.91 101.505 153.91 103.513C153.91 105.455 152.368 107.119 150.431 107.119ZM149.811 102.007C149.93 101.981 150.128 101.981 150.299 101.981C150.866 101.981 151.208 102.258 151.208 102.668C151.208 103.183 150.866 103.473 150.246 103.473C150.128 103.473 149.969 103.473 149.798 103.447V102.007H149.811ZM149.126 105.521H149.811V104.028C149.983 104.055 150.101 104.055 150.18 104.055C150.233 104.055 150.378 104.055 150.497 104.028L151.406 105.521H152.21L151.156 103.87C151.617 103.672 151.907 103.183 151.907 102.641C151.907 101.955 151.367 101.36 150.22 101.36C149.798 101.36 149.455 101.387 149.126 101.439V105.521Z"
-                    fill={props.color}
-                />
-            </g>
-            <defs>
-                <clipPath id="clip0_11117_50399">
-                    <rect width="155" height="108" fill="white" />
-                </clipPath>
-            </defs>
-        </SvgIcon>
-    )
-}
-
-export default NSLogoStacked

package/src/common/brand-components/icons/NSWordMark.tsx

@@ -1,60 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-const NSLogoWordMark = (props: SvgIconProps):ReactElement => {
-    return (
-        <SvgIcon
-            viewBox="0 0 98 20"
-            data-testid="logo"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}>
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M96.4395 17C95.6072 17 94.9053 17.7014 94.9053 18.5C94.9053 19.3004 95.6072 20 96.4395 20C97.3493 20 98 19.3004 98 18.5C98 17.6516 97.3493 17 96.4395 17ZM96.4393 19.8255C95.686 19.8255 95.0598 19.1996 95.0598 18.5C95.0598 17.7765 95.686 17.1762 96.4393 17.1762C97.2193 17.1762 97.7922 17.7765 97.7922 18.5C97.7922 19.1996 97.2193 19.8255 96.4393 19.8255ZM97.0612 18.151C97.0612 17.9766 96.9586 17.6265 96.388 17.6265H95.892V19.3997H96.1287V18.6252H96.5176L96.8544 19.3997H97.0612L96.7503 18.599C96.9337 18.5751 97.0612 18.3768 97.0612 18.151ZM96.4123 18.474H96.1286V17.8248H96.4637C96.6983 17.8248 96.8794 17.9014 96.8794 18.151C96.8794 18.3016 96.8011 18.474 96.4123 18.474Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M14.181 19L1.43645 3.34704V18.7232H0V0.0754862L0.339466 0L12.9798 15.4768V0.277025H14.4421V18.9497L14.181 19Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M25.7499 19C21.2617 19 18.5685 16.4685 18.5685 11.9423V0H20.0471V11.9165C20.0471 15.7525 22.2912 17.696 25.7499 17.696C29.2087 17.696 31.5056 15.7014 31.5056 11.9165V0H33.0106V11.9423C33.0106 16.3406 30.1326 19 25.7499 19Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M46.781 19C44.7507 19 42.9289 18.3475 41.2632 17.2933L41.966 16.0636C43.5016 17.0674 45.1934 17.7201 46.9109 17.7201C49.4353 17.7201 51.1273 16.1637 51.1273 14.1307C51.1273 11.9973 49.644 11.0685 46.9371 9.889C43.9961 8.63396 42.2002 7.32873 42.2002 4.79404C42.2002 2.13339 44.5165 0 47.9257 0C49.5914 0 51.101 0.527014 52.2202 1.2548L51.5176 2.43455C50.5545 1.78181 49.2274 1.27989 47.7959 1.27989C45.2452 1.27989 43.6578 2.78589 43.6578 4.69342C43.6578 6.67624 45.2714 7.62988 47.5877 8.6593C50.8668 10.0898 52.6106 11.3197 52.6106 13.955C52.6106 16.967 50.008 19 46.781 19Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M67.227 19L58.1657 9.61689V19H56.7368V0H58.1657V8.83886L66.9207 0H68.7582L59.5441 9.22763L69.1158 19H67.227Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M72.2106 19H73.5516V0H72.2106V19Z"
-                fill={props.color}
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M92.5808 19L79.8364 3.34704V18.7232H78.4V0.0754862L78.7397 0L91.3794 15.4768V0.277025H92.8421V18.9497L92.5808 19Z"
-                fill={props.color}
-            />
-        </SvgIcon>
-    )
-}
-
-export default NSLogoWordMark

package/src/common/brand-components/index.ts

@@ -1,2 +0,0 @@
-export { default as NsBrandComponent } from './NsBrandComponent';
-export type { NsBrandComponentProps } from './types.d';

package/src/common/brand-components/types.d.ts

@@ -1,11 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-export type NsBrandComponentProps = {
-    variant?: 'stacked' | 'horizontal' | 'poweredBy' | 'logomark' | 'wordmark';
-    size?: string;
-    color?: FoundationTheme.PaletteColors;
-};
-
-export type SVGLogoProps = {
-    color: string;
-};

package/src/common/breadcrumb/NsBreadcrumb.spec.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { NsBreadcrumb } from './';
-import { breadcrumbItems, dummyItems } from './data';
-const { getByText } = screen;
-
-describe('Breadcrumb', () => {
-    it('1. renders breadcrumb items', () => {
-        render(<NsBreadcrumb items={breadcrumbItems} />);
-        expect(getByText('Home')).toBeInTheDocument();
-        expect(getByText('Products')).toBeInTheDocument();
-        expect(getByText('Shirts')).toBeInTheDocument();
-        expect(getByText('Blue shirt')).toBeInTheDocument();
-    });
-
-    it('2. renders breadcrumb items with navigation icons', () => {
-        render(<NsBreadcrumb items={breadcrumbItems} />);
-        expect(getByText('Home')).toBeInTheDocument();
-        expect(getByText('Products')).toBeInTheDocument();
-        expect(getByText('Shirts')).toBeInTheDocument();
-        expect(getByText('Blue shirt')).toBeInTheDocument();
-    });
-
-    it('3. renders breadcrumb items with navigation icons', () => {
-        render(<NsBreadcrumb items={dummyItems} />);
-        expect(getByText('Home')).toBeInTheDocument();
-    });
-});

package/src/common/breadcrumb/NsBreadcrumb.stories.tsx

@@ -1,39 +0,0 @@
-/**
- * @description NsBanner component.
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsBreadcrumb } from './';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { breadcrumbItems } from './data';
-
-type ComponentType = typeof NsBreadcrumb;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Navigation/NsBreadcrumb',
-    component: NsBreadcrumb,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        underline: { control: 'boolean' },
-    },
-    args: {
-        items: [
-            { label: 'Home', href: 'home', icon: 'home' },
-            { label: 'Call to action', href: '/products' },
-            { label: 'Call to action', href: '/products/shirts' },
-            { label: 'Product', href: '' },
-        ],
-        underline: true,
-        separator: 'chevronRight',
-    },
-} as MetaStory;
-
-export const Breadcrumb: Story = {};
-export const WithIcons: Story = {
-    args: {
-        items: breadcrumbItems
-    },
-};

package/src/common/breadcrumb/NsBreadcrumb.styled.tsx

@@ -1,36 +0,0 @@
-import { styled } from '@nuskin/foundation-theme';
-import { NsLink } from '../link';
-
-export const BreadcrumbContainer = styled.nav`
-    margin-bottom: 10px;
-`;
-
-export const BreadcrumbList = styled.ol`
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-`;
-
-export const BreadcrumbItem = styled.li`
-    display: flex;
-    align-items: center;
-    :not(:first-of-type) {
-        margin-left: 12px;
-    }
-    & a {
-        display: flex;
-        gap: 8px;
-        margin-right: 12px;
-    }
-    .slashIcon {
-        transform: rotate(20deg);
-    }
-`;
-
-export const BreadcrumbStyledLink = styled(NsLink)<{ underlineVisibility?: boolean }>`
-    text-decoration: ${({ underlineVisibility }) => (underlineVisibility ? 'underline' : 'none')};
-    text-underline-offset: 4px;
-    font-weight: 700;
-`;

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -1,85 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsBreadcrumb.tsx
- * @description NsBreadcrumb component with a navigation items array props
- */
-
-import {
-    PropsWithChildren,
-    ReactElement,
-} from 'react';
-
-import { useTheme } from '@mui/material/styles';
-import { ColorUtils } from '@nuskin/foundation-theme';
-
-import {
-    NsIcon,
-    NsTypography,
-} from '../';
-import {
-    BreadcrumbContainer,
-    BreadcrumbItem,
-    BreadcrumbList,
-    BreadcrumbStyledLink,
-} from './NsBreadcrumb.styled';
-import {
-    ItemProps,
-    NsBreadcrumbProps,
-} from './types.d';
-
-const { color } = ColorUtils;
-
-const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>):ReactElement => {
-    const { items, underline = true, separator = 'chevronRight' } = props;
-
-    const theme = useTheme();
-    const neutral80 = color('neutral', '80')({ theme });
-    const neutral60 = color('neutral', '60')({ theme });
-
-    const getLabel = (item: ItemProps) => {
-        if (item?.href) {
-            return (
-                <NsTypography variant="h6" colorOverride={neutral60}>
-                    <BreadcrumbStyledLink
-                        underlineVisibility={underline}
-                        href={item.href}
-                        underlineOnHover={!underline}
-                    >
-                        {item.icon ? (
-                            <NsIcon name={item.icon} size="medium" testId="nav-icon" colorOverride={neutral60} />
-                        ) : null}
-                        {item.label}
-                    </BreadcrumbStyledLink>
-                </NsTypography>
-            );
-        } else {
-            return (
-                <NsTypography variant="h6" weight="bold" colorOverride={neutral80}>
-                    {item.label}
-                </NsTypography>
-            );
-        }
-    };
-
-    return (
-        <BreadcrumbContainer aria-label="breadcrumb">
-            <BreadcrumbList>
-                {items?.map((item: ItemProps, index: number) => (
-                    <BreadcrumbItem key={item.label}>
-                        {getLabel(item)}
-                        {index !== items.length - 1 ? (
-                            <NsIcon
-                                className={separator === 'slash' && 'slashIcon'}
-                                name={separator}
-                                size="medium"
-                                colorOverride={neutral80}
-                            />
-                        ) : null}
-                    </BreadcrumbItem>
-                ))}
-            </BreadcrumbList>
-        </BreadcrumbContainer>
-    );
-};
-
-export default NsBreadcrumb;

package/src/common/breadcrumb/data.ts

@@ -1,10 +0,0 @@
-import {ItemProps} from './types';
-export const breadcrumbItems: ItemProps[] = [
-    {label: 'Home', href: '/', icon: 'home'},
-    {label: 'Products', href: '/products'},
-    {label: 'Shirts', href: '/products/shirts'},
-    {label: 'Blue shirt', href: '/products/shirts/blue'},
-];
-export const dummyItems: ItemProps[] = [
-    {label: 'Home', icon: 'home'}
-]

package/src/common/breadcrumb/index.ts

@@ -1,2 +0,0 @@
-export { default as NsBreadcrumb } from './NsBreadcrumb';
-export type { NsBreadcrumbProps } from './types.d';

package/src/common/breadcrumb/types.d.ts

@@ -1,14 +0,0 @@
-import { AdditionalProps } from '../common.types';
-import { NsIconNameType } from '../icon';
-
-export type NsBreadcrumbProps = {
-    items?: ItemProps[];
-    underline?: boolean;
-    separator?: 'chevronRight' | 'slash';
-};
-
-export type ItemProps = {
-    label?: string;
-    href?: string;
-    icon?: NsIconNameType;
-} & AdditionalProps;

package/src/common/button/NsButton.spec.tsx

@@ -1,94 +0,0 @@
-import { render, screen } from '@/test-utils/index';
-import { nuskinTheme } from '@nuskin/foundation-theme';
-import React from 'react';
-
-import { NsButton } from '../';
-
-const { palette } = nuskinTheme;
-
-describe('<Button />', () => {
-    it('0. should match snapshot', () => {
-        const text = 'Click Me';
-        const { container } = render(
-            <NsButton color="primary" variant="contained">
-                {text}
-            </NsButton>
-        );
-        expect(container).toMatchSnapshot();
-    });
-    it('1. should render default primary button styles ', () => {
-        const text = 'Click Me';
-        render(
-            <NsButton color="primary" variant="contained">
-                {text}
-            </NsButton>
-        );
-
-        const button = screen.getByText(text);
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
-        // expect(button).toHaveStyle(`background-color: ${palette?.primary?.buttonState?.pressed}`);
-    });
-    it('2. should render default secondary button styles', () => {
-        const text = 'Click Me';
-        render(
-            <NsButton color="success" variant="contained" size="large">
-                {text}
-            </NsButton>
-        );
-
-        const button = screen.getByText(text);
-
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
-        // expect(button).toHaveStyle(`background-color: ${palette.success.buttonState?.pressed}`);
-    });
-    it('3. should render outlined success button', () => {
-        render(
-            <NsButton color="success" variant="outlined" size="large">
-                Click Me
-            </NsButton>
-        );
-
-        const button = screen.getByText('Click Me');
-        expect(button).toBeInTheDocument();
-        // expect(button).toHaveStyle(`color: ${palette.success.main}`);
-    });
-    it('4. should render outlined accentColorA button', () => {
-        render(
-            <NsButton color={'accentColorA' as any} variant="outlined" size="large">
-                Click Me
-            </NsButton>
-        );
-
-        const button = screen.getByText('Click Me');
-        expect(button).toBeInTheDocument();
-        // expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-    });
-    it('5. should render text button styles', () => {
-        const text = 'Click Me';
-        render(
-            <NsButton color="success" variant="text" size="large">
-                {text}
-            </NsButton>
-        );
-
-        const button = screen.getByText(text);
-
-        expect(button).toBeInTheDocument();
-        // expect(button).toHaveStyle(`color: ${palette.success.main}`);
-    });
-    it('6. iconOnly variant', () => {
-        const text = 'Click Me';
-        render(
-            <NsButton color="success" variant="text" size="large" iconOnly>
-                {text}
-            </NsButton>
-        );
-
-        const button = screen.getByText(text);
-
-        expect(button).toBeInTheDocument();
-        // expect(button).toHaveStyle(`color: ${palette.success.main}`);
-    });
-});