@nuskin/react-mysite-elements 1.0.0-mysiteshopHeader.3 → 1.0.0-mysiteshopHeader.4

package/README.md

@@ -1,9 +1,35 @@
-# React Component Library Template
+# React Mysite Elements
 
-### This template is for creating react component libraries
+A comprehensive React component library for Nu Skin's Mysite platform, providing reusable UI components with advanced scroll behavior, responsive design, and accessibility features.
 
 ---
 
+## 🚀 Features
+
+- **Advanced Scroll Behavior**: Intelligent scroll detection with external header integration
+- **Responsive Design**: Mobile-first approach with dynamic breakpoints
+- **Performance Optimized**: Debounced scroll handlers and memoized components
+- **Accessibility First**: WCAG compliant with proper ARIA attributes and keyboard navigation
+- **TypeScript Support**: Fully typed components with comprehensive type definitions
+- **Testing Coverage**: Extensive unit tests with Jest and React Testing Library
+- **Modern Build Pipeline**:
+    - Automated testing and linting
+    - Code coverage analysis via SonarQube
+    - Semantic versioning and automated releases
+    - npm package publishing
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @nuskin/react-mysite-elements
+```
+
+```bash
+yarn add @nuskin/react-mysite-elements
+```
+
 ### What this template does for you
 
 - Provides a `.gitlab-ci.yml` to manage the CI/CD pipeline
@@ -18,96 +44,227 @@
 
 ---
 
-### Follow these steps to create a new project using this template:
+## 🔧 Quick Start
 
-#### 1. Clone this project to your local machine and remove the git control file
+```jsx
+import React from 'react';
+import { MysiteHero } from '@nuskin/react-mysite-elements';
 
-Note: We use 'my-project' as the name of your new project
+function App() {
+    return (
+        <MysiteHero
+            shopTitle="My Nu Skin Shop"
+            shopDescription="Welcome to my personalized Nu Skin experience"
+            socialTitleText="Connect with me"
+            email="contact@example.com"
+            socialIcons={[
+                { type: 'facebook', url: 'https://facebook.com/myshop' },
+                { type: 'instagram', url: 'https://instagram.com/myshop' },
+            ]}
+            imageDetails={{
+                imageSrc: '/hero-image.jpg',
+                imageAlt: 'Shop Hero Image',
+                bgColor: '#f0f0f0',
+            }}
+        />
+    );
+}
 
-```bash
-git clone git@code.tls.nuskin.io:ns-am/templates/react-component-library-template.git <my-project>
-cd <my-project>
-rm -rf .git
+export default App;
 ```
 
-#### 2. Create your new project in Gitlab
+## 🧩 Available Components
+
+### MysiteHero
+
+The main hero component for Mysite pages with advanced scroll behavior and responsive design.
+
+#### Props
+
+| Prop              | Type     | Required | Description                                  |
+| ----------------- | -------- | -------- | -------------------------------------------- |
+| `shopTitle`       | `string` | ✅       | The main title displayed in the hero section |
+| `shopDescription` | `string` | ✅       | Description text shown below the title       |
+| `socialTitleText` | `string` | ✅       | Label for the social media section           |
+| `email`           | `string` | ✅       | Contact email address                        |
+| `className`       | `string` | ❌       | Additional CSS classes                       |
+| `backgroundColor` | `string` | ❌       | Custom background color                      |
+| `headlineFont`    | `string` | ❌       | Custom font for headlines                    |
+| `paragraphFont`   | `string` | ❌       | Custom font for paragraphs                   |
+| `imageDetails`    | `object` | ❌       | Hero image configuration                     |
+| `socialIcons`     | `array`  | ❌       | Social media links configuration             |
+
+#### ImageDetails Object
+
+```typescript
+{
+    imageSrc: string; // URL of the hero image
+    imageAlt: string; // Alt text for accessibility
+    bgColor: string; // Background color fallback
+}
+```
+
+#### SocialIcons Array
+
+```typescript
+{
+    type: 'facebook' | 'instagram' | 'youtube' | 'twitter' | 'x' | 'pinterest' | 'vkontakte';
+    url: string; // Social media profile URL
+}
+[];
+```
+
+## ✨ Advanced Features
+
+### Intelligent Scroll Behavior
 
-1. In the appropriate sub-group select **"New project"**
-2. Name your project
-3. Select a project description (optional)
-4. Select **"Create project"**
+The MysiteHero component features advanced scroll detection that:
 
-#### 3. Connect your local project to the gitlab remote project
+- **External Header Integration**: Automatically detects and syncs with Nu Skin's external header states
+- **Dynamic Thresholds**: Adapts scroll thresholds based on external header height (110px full-view, 85px compact)
+- **Smooth Transitions**: Debounced state changes (50ms expansion, 100ms collapse) prevent flickering
+- **Enhanced Sensitivity**: 1px scroll detection near top (< 100px) for responsive slow-scroll behavior
+- **Mobile Optimization**: Different thresholds for mobile (120px) vs desktop (150px) viewports
 
-You can copy and paste the section in the gitlab command line instructions of your new
-project into the command line of your local project. It will look like the following
-but will have your project specific details.
+### Performance Optimizations
+
+- **Memoized Social Icons**: Prevents unnecessary re-renders and API calls to favicon services
+- **Throttled Scroll Handler**: Uses `requestAnimationFrame` for optimal performance
+- **Smart Debouncing**: Different delays for expand vs collapse for better UX
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js 16+ and npm/yarn
+- React 18+
+- TypeScript 4.9+
+
+### Setup
 
 ```bash
-cd <your project folder if you are not already there>
-git init
-git remote add origin <your gitlab project url>
-git add .
-git commit -m "Chore: Initial commit"
-git push -u origin master
+# Clone the repository
+git clone <repository-url>
+cd react-mysite-elements
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Run tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Build for production
+npm run build
+
+# Run Storybook for component development
+npm run storybook
 ```
 
-#### 4. Add rules to your new project repository
+### Testing
 
-- Under _Settings_ Select _Repository_
-    - Select _Push Rules_ ([See Sample](./push-rules.png))
-        1. Check _Do not allow users to remove git tags with `git push`_
-    - Click on **Expand** in the _Protected Branches_ section ([See Sample](./protected-branches.png))
-        - **master** should already be set as your default branch. For **master** do the following:
-            1. Set _Allowed to merge_ to **Developers + Maintainers**
-            2. Set _Allowed to push_ to **Maintainers**
-            3. Set _Code owner approval_ to **Off**
+The library includes comprehensive test coverage with:
 
-#### 5. Update your new project with your project specific settings and information
+- **Unit Tests**: Jest + React Testing Library
+- **Component Testing**: Storybook integration
+- **Accessibility Testing**: Built-in a11y checks
+- **Performance Testing**: Scroll behavior validation
 
-1. Replace the `README.md` with a proper readme that will be displayed on _npmjs_ ([See Sample](./README-sample.md))
-2. Update these settings in your `package.json`
+```bash
+# Run all tests
+npm test
 
-- Note: All module names should be created in the _@nuskin_ namespace.
+# Run tests with coverage
+npm run test:coverage
 
-```JavaScript
-{
-  "name": "@nuskin/react-component-library-template",
-  "description": "The description that will amaze and astound your audience when they read it",
-  "repository": {
-    "type": "git",
-    "url": "git@code.tls.nuskin.io:ns-am/templates/react-component-library-template.git"
-  },
-  "homepage": "https://code.tls.nuskin.io/ns-am/templates/react-component-library-template/blob/master/README.md"
-}
+# Run specific test
+npm test -- --testNamePattern="MysiteHero"
 ```
 
-#### 6. Determine if your module should be public or private
+## 🎨 Styling & Theming
+
+The components support Material-UI theming and custom styling:
 
-If your module should be public and published to _npmjs.com_, nothing needs to be done. This is the default
-behavior. If you need to publish to the private npm repository _nexus3.nuskin.net_, inside `gitlab-ci.yml`
-update **PRIVATE_NPM** to `true`
+```jsx
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-```yaml
-variables:
-    PRIVATE_NPM: 'true'
+const theme = createTheme({
+    palette: {
+        mode: 'dark', // Supports both light and dark modes
+    },
+});
+
+<ThemeProvider theme={theme}>
+    <MysiteHero {...props} />
+</ThemeProvider>;
 ```
 
-#### 7. Turning on your CI/CD pipeline
+### Custom Styling
+
+```jsx
+<MysiteHero
+    className="custom-hero"
+    backgroundColor="#f5f5f5"
+    headlineFont="'Inter', sans-serif"
+    paragraphFont="'Roboto', sans-serif"
+    {...otherProps}
+/>
+```
 
-Once you are ready for your project to start running the CI/CD pipeline, you should rename the `gitlab-ci.yml`
-to `.gitlab-ci.yml`.
+## 🌐 Browser Support
 
-```bash
-git mv gitlab-ci.yml .gitlab-ci.yml
-git commit -am "Chore: renaming gitlab-ci.yml to .gitlab-ci.yml so my pipeline runs"
-git push
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## 📚 API Reference
+
+### External Header Integration
+
+The component automatically detects and integrates with Nu Skin's external header:
+
+```javascript
+// Detects these CSS classes on .nu-header-container
+-'.full-view' - // Header height: 110px
+    '.compact' - // Header height: 85px
+    '.compact-view'; // Header height: 85px
 ```
 
-## TODO: Write documentation about Semantic Release (don't forget prereleases)
+### Scroll Thresholds
+
+| Device  | Collapse Threshold    | Expansion Threshold |
+| ------- | --------------------- | ------------------- |
+| Desktop | 150px + header height | 80px                |
+| Mobile  | 120px + header height | 50px                |
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Commit Convention
+
+We use [Conventional Commits](https://www.conventionalcommits.org/) for semantic versioning:
+
+- `feat:` New features
+- `fix:` Bug fixes
+- `docs:` Documentation changes
+- `style:` Code formatting
+- `refactor:` Code refactoring
+- `test:` Test updates
+- `chore:` Build/config changes
 
-#### How to use Semantic Release in your pipeline
+## 📄 License
 
-Link to another page or write up instructions on how Semantic Release works with the pipeline
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-[eslint commit-analyzer](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint) rules.
+Made with ❤️ by the Nu Skin Development Team

package/dist/common/card/NsProductCard.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
-import { NsCardButton } from '@nuskin/foundation-ui-components';
 import { ProductImageType } from '../types/image';
+import { NsCardButton } from './types';
 type NsProductCardProps = {
     readonly productTitle: string;
     readonly imageDetails?: ProductImageType;

package/dist/common/carousel/NsProductCarousel.d.ts

@@ -37,6 +37,7 @@ interface ProductCardCarouselProps<T = ProductCardEntry> {
     readonly allEntryLink?: string;
     readonly categoryName?: string;
     readonly emptyProductMessage?: string;
+    readonly productsCountLabel?: string;
 }
-export default function ProductCardCarousel({ entries, renderEntry, settings, showControlButtons, allEntryLabel, allEntryLink, categoryName, emptyProductMessage, }: ProductCardCarouselProps): ReactElement;
+export default function ProductCardCarousel({ entries, renderEntry, settings, showControlButtons, allEntryLabel, allEntryLink, categoryName, emptyProductMessage, productsCountLabel, }: ProductCardCarouselProps): ReactElement;
 export {};

package/dist/common/carousel/ProductTabCarousel.d.ts

@@ -31,7 +31,9 @@ interface ProductTabCarouselProps {
     readonly fetchCategories: () => Promise<Category[]>;
     readonly fetchProducts: (categoryId: string) => Promise<ProductCardEntry[]>;
     readonly emptyProductTabs?: string;
+    readonly emptyProductMessage?: string;
     readonly showCustomCategory?: boolean;
+    readonly productsCountLabel?: string;
 }
 declare const ProductTabCarousel: React.FC<ProductTabCarouselProps>;
 export default ProductTabCarousel;

package/dist/common/carousel/index.d.ts

@@ -1,6 +1,3 @@
-export { default as NsCarousal } from '@nuskin/foundation-ui-components';
 export { default as ProductCarousel } from './NsProductCarousel';
-export { default as NsScrollingCarousal } from '@nuskin/foundation-ui-components';
-export { default as NsDefaultCarousalSettings } from '@nuskin/foundation-ui-components';
 export { default as ProductTabCarousel } from './ProductTabCarousel';
 export type { NsCarouselProps, NsScrollingCarouselProps } from './types';

package/dist/common/types/image.d.ts

@@ -6,6 +6,4 @@ export type ProductImageType = {
     className?: string;
     width?: string | number;
     height?: string | number;
-    position?: string;
-    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };

package/dist/index.js

@@ -1 +1 @@
-"use strict";function n(n,e){if(e==null||e>n.length)e=n.length;for(var t=0,i=new Array(e);t<e;t++)i[t]=n[t];return i}function e(n){if(Array.isArray(n))return n}function t(n,e,t){if(e in n){Object.defineProperty(n,e,{value:t,enumerable:true,configurable:true,writable:true})}else{n[e]=t}return n}function i(n,e){var t=n==null?null:typeof Symbol!=="undefined"&&n[Symbol.iterator]||n["@@iterator"];if(t==null)return;var i=[];var r=true;var o=false;var a,l;try{for(t=t.call(n);!(r=(a=t.next()).done);r=true){i.push(a.value);if(e&&i.length===e)break}}catch(n){o=true;l=n}finally{try{if(!r&&t["return"]!=null)t["return"]()}finally{if(o)throw l}}return i}function r(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(n){for(var e=1;e<arguments.length;e++){var i=arguments[e]!=null?arguments[e]:{};var r=Object.keys(i);if(typeof Object.getOwnPropertySymbols==="function"){r=r.concat(Object.getOwnPropertySymbols(i).filter(function(n){return Object.getOwnPropertyDescriptor(i,n).enumerable}))}r.forEach(function(e){t(n,e,i[e])})}return n}function a(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);if(e){i=i.filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})}t.push.apply(t,i)}return t}function l(n,e){e=e!=null?e:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(n,Object.getOwnPropertyDescriptors(e))}else{a(Object(e)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))})}return n}function s(n,e){if(n==null)return{};var t=d(n,e);var i,r;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);for(r=0;r<o.length;r++){i=o[r];if(e.indexOf(i)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(n,i))continue;t[i]=n[i]}}return t}function d(n,e){if(n==null)return{};var t={};var i=Object.keys(n);var r,o;for(o=0;o<i.length;o++){r=i[o];if(e.indexOf(r)>=0)continue;t[r]=n[r]}return t}function c(n,t){return e(n)||i(n,t)||x(n,t)||r()}function u(n,e){if(!e){e=n.slice(0)}return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function p(n){"@swc/helpers - typeof";return n&&typeof Symbol!=="undefined"&&n.constructor===Symbol?"symbol":typeof n}function x(e,t){if(!e)return;if(typeof e==="string")return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);if(i==="Object"&&e.constructor)i=e.constructor.name;if(i==="Map"||i==="Set")return Array.from(i);if(i==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}function f(){var n=u(["\n    width: 200px;\n    text-align: left;\n    margin-bottom: 5px;\n"]);f=function e(){return n};return n}function m(){var n=u(["\n    padding: 30px 0 60px;\n    width: 100%;\n    margin: auto;\n    margin-top: 50px;\n    position: relative;\n\n    .slick-list {\n        padding-left: 24px;\n        padding-right: 24px;\n    }\n    .slick-slide {\n        display: flex;\n        justify-content: center;\n        padding: 0 12px;\n        box-sizing: border-box;\n    }\n    .slick-prev,\n    .slick-next {\n        display: none !important;\n    }\n\n    @media (max-width: 1200px) {\n        max-width: 1024px;\n        .slick-list {\n            padding-left: 12px;\n            padding-right: 12px;\n        }\n        .slick-slide {\n            padding: 0 6px;\n        }\n    }\n    @media (max-width: 700px) {\n        max-width: 100vw;\n        .slick-list {\n            padding-left: 4px;\n            padding-right: 4px;\n        }\n        .slick-slide {\n            padding: 0 2px;\n        }\n    }\n"]);m=function e(){return n};return n}function h(){var n=u(["\n    overflow-x: auto;\n    display: flex;\n    scroll-snap-type: x mandatory;\n    -webkit-overflow-scrolling: touch;\n    gap: 16px;\n    padding: 0 8px 16px;\n    width: 100%;\n    box-sizing: border-box;\n\n    &::-webkit-scrollbar {\n        height: 6px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: #007bff;\n        border-radius: 10px;\n    }\n"]);h=function e(){return n};return n}function g(){var n=u(["\n    display: flex;\n    scroll-snap-align: start;\n    justify-content: center;\n    gap: 15px;\n"]);g=function e(){return n};return n}function b(){var n=u(["\n    position: absolute;\n    bottom: calc(100% + 1px);\n    right: 1px;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n"]);b=function e(){return n};return n}function v(){var n=u(["\n    display: flex;\n    align-items: center;\n    margin-left: 576px;\n\n    @media (max-width: 560px) {\n        margin-left: 0;\n        order: 2;\n    }\n"]);v=function e(){return n};return n}function y(){var n=u(["\n    display: none;\n\n    @media (max-width: 560px) {\n        color: #666666;\n        font-family: Inter;\n        font-size: 16px !important;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 22px;\n        display: flex;\n        align-items: center;\n        order: 1;\n    }\n"]);y=function e(){return n};return n}function w(){var n=u(["\n    display: flex;\n    align-items: center;\n\n    .carousel-prev-button,\n    .carousel-next-button {\n        border-color: #000000;\n    }\n\n    @media (max-width: 560px) {\n        display: none;\n    }\n"]);w=function e(){return n};return n}function C(){var n=u(["\n    @media (max-width: 560px) {\n        overflow-y: hidden;\n        scrollbar-width: thin;\n        scrollbar-color: #007bff #eee;\n        &::-webkit-scrollbar {\n            width: 8px;\n        }\n        &::-webkit-scrollbar-track {\n            background: #eee;\n        }\n        &::-webkit-scrollbar-thumb {\n            background-color: red;\n            border-radius: 8px;\n            border: 2px solid #eee;\n        }\n    }\n"]);C=function e(){return n};return n}function j(){var n=u(["\n    color: #666666;\n    font-family: Inter;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 22px;\n"]);j=function e(){return n};return n}function k(){var n=u(["\n    color: #000000;\n    font-family: Inter, sans-serif;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 22px;\n    text-decoration: none;\n    border-bottom: 1px solid #000000;\n    padding-bottom: 4px;\n    transition: all 0.3s ease;\n\n    &:hover {\n        color: #666666;\n        border-bottom: 1px solid #666666;\n    }\n"]);k=function e(){return n};return n}function S(){var n=u(["\n    padding-top: 20px;\n    font-size: 20px;\n    text-align: center;\n"]);S=function e(){return n};return n}function F(){var n=u(["\n    display: flex;\n    justify-content: flex-end;\n"]);F=function e(){return n};return n}function O(){var n=u(["\n    display: flex;\n    gap: 20px;\n    align-items: center;\n\n    .carousel-prev-button,\n    .carousel-next-button {\n        transition: all 0.3s ease;\n        border: 2px solid #000000;\n\n        svg {\n            transition: all 0.3s ease !important;\n            fill: #000000 !important;\n        }\n\n        &:hover {\n            background-color: #f5f5f5;\n            border: 2px solid #ddd;\n\n            svg {\n                opacity: 0.5;\n            }\n        }\n    }\n"]);O=function e(){return n};return n}function T(){var n=u(["\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n    background-color: #fff;\n    .tabsStyle {\n        display: flex;\n        padding-top: 8.533px;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12.8px;\n        border-right: 1px;\n        border-color: divider;\n        width: 200px;\n        & .Mui-selected {\n            font-weight: 700;\n            font-size: 14px;\n            font-family: 'inter', sans-serif;\n            font-style: normal;\n            font-height: 20px;\n            border-radius: 4px;\n        }\n        & .MuiTabs-indicator {\n            left: 0;\n            background-color: #5b81a5;\n            color: #5b81a5;\n\n            @media (max-width: 768px) {\n                display: none;\n            }\n        }\n    }\n\n    .tabContainer {\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: flex-start;\n        min-width: 100%;\n        background-color: #fff;\n        @media (max-width: 768px) {\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n    }\n\n    .tabStyle {\n        align-items: flex-start;\n        display: flex;\n        text-align: left;\n        font-size: 14px;\n        font-family: 'inter' sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 20px;\n        min-height: 20px;\n        padding: 1px;\n        padding-left: 10px;\n        margin-bottom: 10px;\n        cursor: pointer;\n    }\n    @media (max-width: 768px) {\n        flex-direction: row;\n        padding: 8px;\n\n        .tabsStyle {\n            width: 100%;\n            border-right: none;\n            display: flex;\n            flex-direction: row;\n            justify-content: space-between;\n        }\n\n        .tabStyle {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            font-size: 14px;\n            border: 1px solid #ccc;\n            border-radius: 70px;\n            padding: 8px 16px;\n            text-align: center;\n            margin: 4px;\n            background-color: #fff;\n            cursor: pointer;\n            color: black;\n            font-family: Inter;\n            font-style: normal;\n            font-weight: 600;\n            line-height: 20px;\n        }\n\n        .tabStyle.Mui-selected {\n            background-color: #5b81a5;\n            color: #ffffff !important;\n            font-weight: 700;\n            border-radius: 70px;\n        }\n    }\n    .tabPanel {\n        padding: 8px;\n        text-align: left;\n    }\n"]);T=function e(){return n};return n}function N(){var n=u(["\n    display: flex;\n    flex-direction: ",";\n    align-items: ",";\n    width: 100%;\n    max-width: 1920px;\n    min-height: ",";\n    margin: 0 auto;\n    box-sizing: border-box;\n    overflow: visible;\n    background: #fff;\n    padding: ",";\n\n    @media (max-width: 768px) {\n        padding: 20px 16px 0px 16px;\n        min-height: auto;\n        gap: 16px;\n    }\n\n    @media (min-width: 769px) and (max-width: 1024px) {\n        padding: 30px 40px 0px 40px;\n        gap: 20px;\n    }\n\n    transform: translateZ(0);\n    will-change: auto;\n"]);N=function e(){return n};return n}function z(){var n=u(["\n    min-width: ",";\n    height: ",";\n    flex-shrink: 0;\n\n    @media (max-width: 768px) {\n        width: 100%;\n        height: auto;\n\n        overflow-x: auto;\n        overflow-y: visible;\n        -webkit-overflow-scrolling: touch;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n\n        &::-webkit-scrollbar {\n            display: none;\n        }\n    }\n\n    @media (min-width: 769px) and (max-width: 1024px) {\n        min-width: 200px;\n        margin-right: 20px;\n    }\n"]);z=function e(){return n};return n}function B(){var n=u(["\n    flex: 1;\n    min-width: 0;\n    height: ",";\n\n    @media (max-width: 768px) {\n        width: 100%;\n        height: auto;\n        min-height: 300px;\n\n        -webkit-overflow-scrolling: touch;\n        overflow-x: hidden;\n        overflow-y: auto;\n    }\n\n    @media (min-width: 769px) and (max-width: 1024px) {\n        min-height: 400px;\n    }\n\n    contain: layout style paint;\n    transform: translateZ(0);\n"]);B=function e(){return n};return n}function I(){var n=u(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 200px;\n    padding: 20px;\n\n    @media (max-width: 768px) {\n        min-height: 150px;\n        padding: 16px;\n    }\n"]);I=function e(){return n};return n}function q(){var n=u(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 20px;\n    color: #666;\n    font-size: 16px;\n\n    @media (max-width: 768px) {\n        padding: 20px 16px;\n        font-size: 14px;\n    }\n"]);q=function e(){return n};return n}function L(){var n=u(["\n    padding: 10px;\n    display: flex;\n    justify-content: center;\n"]);L=function e(){return n};return n}var P=Object.create;var M=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var A=function(n,e){return function(){return e||n((e={exports:{}}).exports,e),e.exports}},R=function(n,e){for(var t in e)M(n,t,{get:e[t],enumerable:!0})},_=function(n,e,t,i){var r=true,o=false,a=undefined;if(e&&(typeof e==="undefined"?"undefined":p(e))=="object"||typeof e=="function")try{var l=function(){var r=d.value;!W.call(n,r)&&r!==t&&M(n,r,{get:function(){return e[r]},enumerable:!(i=H(e,r))||i.enumerable})};for(var s=E(e)[Symbol.iterator](),d;!(r=(d=s.next()).done);r=true)l()}catch(n){o=true;a=n}finally{try{if(!r&&s.return!=null){s.return()}}finally{if(o){throw a}}}return n};var V=function(n,e,t){return t=n!=null?P(D(n)):{},_(e||!n||!n.__esModule?M(t,"default",{value:n,enumerable:!0}):t,n)},Y=function(n){return _(M({},"__esModule",{value:!0}),n)};var Z=A(function(n,e){"use strict";var t="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=t});var Q=A(function(n,e){"use strict";var t=function n(){};var i=function n(){};var r=Z();i.resetWarningCache=t;e.exports=function(){function n(n,e,t,i,o,a){if(a!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}n.isRequired=n;function e(){return n}var o={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:e,element:n,elementType:n,instanceOf:e,node:n,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:i,resetWarningCache:t};return o.PropTypes=o,o}});var U=A(function(n,e){"use strict";e.exports=Q()();var t,i});var $={};R($,{MysiteHero:function(){return ex},NsCarousal:function(){return nr.default},NsCategoryNavigation:function(){return nK},NsDefaultCarousalSettings:function(){return nD.default},NsProductCard:function(){return ni},NsScrollingCarousal:function(){return nE.default},ProductCarousel:function(){return nH},ProductTabCarousel:function(){return n9}});module.exports=Y($);var G=require("react"),J=require("@nuskin/foundation-ui-components");var K=require("@nuskin/foundation-theme"),X=(0,K.styled)("div")(f());var nn=require("@mui/material"),ne=require("react/jsx-runtime"),nt=function(n){var e=n.productTitle,t=n.imageDetails,i=n.className,r=n.button,o=n.onCardClick,a=n.productStatusBadge,l=n.mySitePriceComponent,s=n.testId;var d=c((0,G.useState)(!1),2),u=d[0],p=d[1],x=(0,nn.useMediaQuery)("(max-width: 560px)");var f,m,h,g,b,v,y;return(0,ne.jsxs)("button",{className:i,onClick:o,tabIndex:0,"data-testid":"product-card",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"space-between",width:240,height:x?442.08:513,overflow:"hidden",cursor:"pointer",border:"1px solid #EDEDED",background:"var(--color-primary-n-10-primary-white, #FFF)"},children:[(0,ne.jsx)("div",{style:{width:(f=t===null||t===void 0?void 0:t.width)!==null&&f!==void 0?f:240,height:(m=t===null||t===void 0?void 0:t.height)!==null&&m!==void 0?m:240,background:"#f5f5f5",borderRadius:8,overflow:"hidden",marginBottom:0,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:(t===null||t===void 0?void 0:t.imageSrc)?(0,ne.jsx)(J.NsImage,{"data-testid":s!==null&&s!==void 0?s:"test-product-image",className:(h=t.className)!==null&&h!==void 0?h:"",src:t.imageSrc,alt:t.imageAlt,"aria-label":(g=t.areaLabel)!==null&&g!==void 0?g:t.imageAlt,width:"100%",style:{backgroundColor:(b=t===null||t===void 0?void 0:t.bgColor)!==null&&b!==void 0?b:"#f5f5f5",objectFit:(v=t===null||t===void 0?void 0:t.objectFit)!==null&&v!==void 0?v:"cover",objectPosition:(y=t===null||t===void 0?void 0:t.position)!==null&&y!==void 0?y:"center center"}}):(0,ne.jsx)("img",{alt:"",style:{width:"100%",height:"100%",objectFit:"cover",borderRadius:8,display:"block"}})}),(0,ne.jsx)("div",{title:e,"data-testid":"product-title",style:{width:200,marginTop:16,maxHeight:66,textAlign:"left",fontSize:16,fontFamily:"Inter, sans-serif",fontWeight:400,lineHeight:"22px",overflow:"hidden",color:"#666",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical",textOverflow:"ellipsis"},children:e}),(0,ne.jsx)("div",{style:{width:200,textAlign:"left",marginBottom:12},children:a}),(0,ne.jsx)(X,{children:l}),(r===null||r===void 0?void 0:r.showButton)&&(0,ne.jsxs)("button",{tabIndex:0,"data-testid":"add-to-cart-button",onClick:function(n){var e;n.stopPropagation(),(e=r.onClick)===null||e===void 0?void 0:e.call(r)},onMouseEnter:function(){x||p(!0)},onMouseLeave:function(){x||p(!1)},style:{width:200,height:40,borderRadius:4,display:"flex",alignItems:"center",gap:16,fontFamily:"Inter, sans-serif",fontSize:14,fontWeight:600,lineHeight:"20px",letterSpacing:"0.14px",textTransform:"none",justifyContent:"flex-start",paddingLeft:31,overflow:"hidden",whiteSpace:"normal",wordBreak:"break-word",overflowWrap:"break-word",textOverflow:"ellipsis",color:"#fff",backgroundColor:!x&&u?"#888":"#000",border:"none",marginTop:8,marginBottom:10,cursor:"pointer",transition:x?"none":"background-color 0.3s ease",WebkitAppearance:"none",WebkitTapHighlightColor:"transparent"},children:[(0,ne.jsx)("span",{className:"cart-icon",style:{width:24,height:24,flexShrink:0,display:"inline-block",background:"none",transition:"all 0.3s ease"},children:(0,ne.jsx)("svg",{width:"24",height:"22",viewBox:"0 0 24 22",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,ne.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 1.86358C0 1.26109 0.488416 0.772675 1.09091 0.772675H3.48173C4.51054 0.772675 5.39955 1.49136 5.61511 2.49733L5.71309 2.95456H22.9091C23.245 2.95456 23.5622 3.10933 23.7689 3.37411C23.9757 3.63889 24.0489 3.98415 23.9674 4.31005L22.4053 10.5583C21.9197 12.5009 20.1743 13.8636 18.172 13.8636H8.05068L8.28444 14.9546H20.7273C21.3298 14.9546 21.8182 15.443 21.8182 16.0455C21.8182 16.648 21.3298 17.1364 20.7273 17.1364H19.6364H8.18182H7.40252C6.88811 17.1364 6.4436 16.777 6.33582 16.274L3.76449 4.27405L3.48173 2.95449H1.09091C0.488416 2.95449 0 2.46608 0 1.86358ZM8.18182 17.1364C6.97683 17.1364 6 18.1132 6 19.3182C6 20.5232 6.97683 21.5 8.18182 21.5C9.3868 21.5 10.3636 20.5232 10.3636 19.3182C10.3636 18.1132 9.3868 17.1364 8.18182 17.1364ZM19.6364 17.1364C18.4314 17.1364 17.4545 18.1132 17.4545 19.3182C17.4545 20.5232 18.4314 21.5 19.6364 21.5C20.8413 21.5 21.8182 20.5232 21.8182 19.3182C21.8182 18.1132 20.8413 17.1364 19.6364 17.1364ZM7.58317 11.6818H18.172C19.1732 11.6818 20.0459 11.0005 20.2887 10.0292L21.5119 5.13638H6.18062L7.58317 11.6818Z",fill:"#ffffff"})})}),r.buttonText||"ADD TO CART"]})]})},ni=nt;var nr=V(require("@nuskin/foundation-ui-components"));var no=require("react"),na=V(require("react-slick")),nl=V(require("@mui/material/useMediaQuery"));var ns=require("@nuskin/foundation-theme"),nd=V(require("@mui/material/Box")),nc=require("@nuskin/foundation-ui-components"),nu=(0,ns.styled)(nd.default)(m()),np=(0,ns.styled)("div")(h()),nx=(0,ns.styled)("div")(g()),nf=(0,ns.styled)(nd.default)(b()),nm=(0,ns.styled)(nd.default)(v()),nh=(0,ns.styled)(nd.default)(y()),ng=(0,ns.styled)(nd.default)(w()),nb=(0,ns.styled)("div")(C()),nv=(0,ns.styled)(nc.NsTypography)(j()),ny=(0,ns.styled)("a")(k()),nw=(0,ns.styled)("div")(S());var nC=require("@nuskin/foundation-theme"),nj=require("@nuskin/foundation-ui-components");var nk=require("@mui/material"),nS=require("@nuskin/foundation-theme"),nF=require("react/jsx-runtime"),nO={},nT=(0,nS.styled)(nk.Box,nO)(function(n){var e=n.theme;var t,i;var r;return{display:"flex",width:"auto",border:"2px solid ".concat((r=(i=e.palette)===null||i===void 0?void 0:(t=i.primary)===null||t===void 0?void 0:t.main)!==null&&r!==void 0?r:"#252525"),borderRadius:"3px",cursor:"pointer",padding:"9px",boxSizing:"content-box"}}),nN=function(n){var e=n.children,t=n.onClick,i=n.className;return(0,nF.jsx)(nT,{component:"span",className:i!==null&&i!==void 0?i:"",onClick:t,children:e})},nz=nN;var nB=require("react/jsx-runtime"),nI=nC.styled.div(F()),nq=nC.styled.div(O()),nL=function(n){var e=n.next,t=n.prev,i=n.viewAllUrl,r=n.viewAllLabel;return(0,nB.jsx)(nI,{children:(0,nB.jsxs)(nq,{children:[i?(0,nB.jsx)(nj.NsLink,{href:i,underlineOnHover:!1,children:(0,nB.jsx)(nj.NsTypography,{decoration:"underline",variant:"body-l",children:r})}):null,(0,nB.jsx)(nz,{onClick:t,className:"carousel-prev-button",children:(0,nB.jsx)(nj.NsIcon,{name:"arrowLeft",colorOverride:"#000000"})}),(0,nB.jsx)(nz,{onClick:e,className:"carousel-next-button",children:(0,nB.jsx)(nj.NsIcon,{name:"arrowRight",colorOverride:"#000000"})})]})})},nP=nL;var nM=require("react/jsx-runtime");function nH(n){var e=n.entries,t=n.renderEntry,i=n.settings,r=i===void 0?{}:i,a=n.showControlButtons,s=a===void 0?!0:a,d=n.allEntryLabel,c=d===void 0?"View All":d,u=n.allEntryLink,p=u===void 0?"":u,x=n.categoryName,f=n.emptyProductMessage,m=f===void 0?"No Products Available For The Selected Category":f;var h,g,b;var v=(0,no.useRef)(null),y=(0,nl.default)("(max-width: 560px)"),w=(0,no.useCallback)(function(){var n;(n=v.current)===null||n===void 0?void 0:n.slickPrev()},[]),C=(0,no.useCallback)(function(){var n;(n=v.current)===null||n===void 0?void 0:n.slickNext()},[]),j=t!==null&&t!==void 0?t:function(n,e){return(0,nM.jsx)(ni,{productTitle:n.productTitle,imageDetails:n.imageDetails,button:n.button,onCardClick:n.onCardClick,productStatusBadge:n.productStatusBadge,mySitePriceComponent:n.mySitePriceComponent},"".concat(n.productTitle,"-").concat(e))},k=o({dots:!0,infinite:!0,speed:500,slidesToShow:Math.min((h=e===null||e===void 0?void 0:e.length)!==null&&h!==void 0?h:0,4),slidesToScroll:4,swipe:!0,draggable:!0,arrows:!0,responsive:[{breakpoint:1320,settings:{slidesToShow:Math.min((g=e===null||e===void 0?void 0:e.length)!==null&&g!==void 0?g:0,3),slidesToScroll:3}},{breakpoint:900,settings:{slidesToShow:Math.min((b=e===null||e===void 0?void 0:e.length)!==null&&b!==void 0?b:0,2),slidesToScroll:2}},{breakpoint:600,settings:{slidesToShow:1,slidesToScroll:1,arrows:!1}}]},r),S=function(){return(e===null||e===void 0?void 0:e.length)===0?(0,nM.jsx)(nw,{children:m}):y?(0,nM.jsx)(np,{children:(0,nM.jsx)(nx,{children:e.map(function(n,e){return n&&j(n,e)})})}):(0,nM.jsx)(na.default,l(o({},k),{ref:v,children:e.map(function(n,e){return n&&j(n,e)})}))};var F;return(0,nM.jsxs)(nu,{children:[s&&(0,nM.jsxs)(nf,{children:[(0,nM.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[(0,nM.jsxs)("div",{style:{display:"flex",alignItems:"center",flex:1,minWidth:0},children:[(0,nM.jsx)(nh,{children:(0,nM.jsxs)(nv,{variant:"body-m",children:[(F=e===null||e===void 0?void 0:e.length)!==null&&F!==void 0?F:0," Products"]})}),!y&&x&&(0,nM.jsx)("div",{style:{fontFamily:"Lora",fontWeight:400,fontSize:22,marginLeft:16,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"300px",textTransform:"capitalize"},children:x})]}),(0,nM.jsx)(nm,{style:{marginLeft:"auto",marginRight:y?0:24},children:(0,nM.jsx)(ny,{href:p,children:c})})]}),!y&&(0,nM.jsx)(ng,{children:(0,nM.jsx)(nP,{prev:w,next:C})})]}),S()]})}var nE=V(require("@nuskin/foundation-ui-components")),nD=V(require("@nuskin/foundation-ui-components"));var nW=require("react"),nA=require("@mui/material");var nR=V(require("react")),n_=V(require("@mui/material/Tabs")),nV=V(require("@mui/material/Tab")),nY=V(require("@mui/material/Box")),nZ=V(U());var nQ=require("@nuskin/foundation-theme"),nU=nQ.styled.div(T());var n$=require("@mui/material"),nG=require("react/jsx-runtime");function nJ(n){var e=n.children,t=n.value,i=n.index,r=s(n,["children","value","index"]);return(0,nG.jsx)("div",l(o({role:"tabpanel",hidden:t!==i,id:"vertical-tabpanel-".concat(i),"aria-labelledby":"vertical-tab-".concat(i)},r),{children:t===i&&(0,nG.jsx)(nY.default,{className:"tabPanel",children:e})}))}nJ.propTypes={children:nZ.default.node,index:nZ.default.number.isRequired,value:nZ.default.number.isRequired};var nK=function(n){var e=n.itemArray,t=n.value,i=n.onChange;var r=c(nR.useState(0),2),o=r[0],a=r[1],l=(0,n$.useMediaQuery)("(max-width:768px)"),s=t!==null&&t!==void 0?t:o;return(0,nG.jsx)(nU,{children:(0,nG.jsxs)(nY.default,{className:"tabContainer",children:[(0,nG.jsx)(n_.default,{orientation:l?"horizontal":"vertical",variant:"scrollable",value:s,onChange:function(n,e){i?i(n,e):a(e)},"aria-label":"Vertical tabs example",className:"tabsStyle",children:e.map(function(n){return(0,nG.jsx)(nV.default,{label:n.label,className:"tabStyle",sx:{textTransform:"capitalize"}},n.categoryId)})}),e.map(function(n){return(0,nG.jsx)(nJ,{value:s,index:e.findIndex(function(e){return e.categoryId===n.categoryId}),children:n.content},n.categoryId)})]})})};var nX=require("@nuskin/foundation-ui-components");var n0=require("@nuskin/foundation-theme"),n1=(0,n0.styled)("div")(N(),function(n){var e=n.isMobile;return e?"column":"row"},function(n){var e=n.isMobile;return e?"stretch":"flex-start"},function(n){var e=n.isMobile;return e?"auto":"500px"},function(n){var e=n.isMobile;return e?"10px 16px 0px 16px":"50px 60px 0px 60px"}),n2=(0,n0.styled)("div")(z(),function(n){var e=n.isMobile;return e?"100%":"auto"},function(n){var e=n.isMobile;return e?"auto":"100%"}),n6=(0,n0.styled)("div")(B(),function(n){var e=n.isMobile;return e?"auto":"100%"}),n5=(0,n0.styled)("div")(I()),n8=(0,n0.styled)("div")(q()),n4=(0,n0.styled)("div")(L());var n3=require("react/jsx-runtime"),n7=function(n){var e=n.allEntryLabel,t=n.allEntryLink,i=n.renderEntry,r=n.settings,a=n.showControlButtons,s=a===void 0?!0:a,d=n.fetchCategories,u=n.fetchProducts,p=n.showCustomCategory,x=p===void 0?!1:p,f=n.emptyProductTabs,m=f===void 0?"No tabs available":f;var h;var g=(0,nA.useMediaQuery)("(max-width:768px)"),b=c((0,nW.useState)([]),2),v=b[0],y=b[1],w=c((0,nW.useState)(0),2),C=w[0],j=w[1],k=c((0,nW.useState)([]),2),S=k[0],F=k[1],O=c((0,nW.useState)(!1),2),T=O[0],N=O[1],z=c((0,nW.useState)(!0),2),B=z[0],I=z[1],q=(0,nW.useCallback)(function(){var n=document.querySelectorAll('[data-testid*="spinner"], .ns-spinner, [class*="spinner"]');I(n.length===0)},[]);(0,nW.useEffect)(function(){T&&q()},[T,q]),(0,nW.useEffect)(function(){d().then(y)},[d]),(0,nW.useEffect)(function(){v.length>0&&(N(!0),u(v[C].categoryId).then(F).finally(function(){return N(!1)}))},[v,C,u]);var L=v.map(function(n){return{label:n.label,content:"",categoryId:n.categoryId}});return(0,n3.jsxs)(n1,{isMobile:g,children:[x&&(L.length>0?(0,n3.jsx)(n2,{isMobile:g,children:(0,n3.jsx)(nK,{itemArray:L,value:C,onChange:function(n,e){return j(e)}})}):(0,n3.jsx)(n8,{children:m})),(0,n3.jsx)(n6,{isMobile:g,children:T?(0,n3.jsx)(n4,{children:B&&(0,n3.jsx)(nX.NsSpinner,{})}):(0,n3.jsx)(nH,{entries:S,allEntryLabel:e,allEntryLink:t,renderEntry:i?function(n){return i(l(o({},n),{productStatusBadge:n.productStatusBadge}))}:void 0,settings:r,showControlButtons:s,categoryName:(h=v[C])===null||h===void 0?void 0:h.label})})]})},n9=n7;var en=require("react"),ee=require("@mui/material"),et=require("@nuskin/foundation-ui-components");var ei=require("@nuskin/foundation-theme"),er=require("@mui/material"),eo=require("react/jsx-runtime"),ea=(0,ei.styled)(function(n){return(0,eo.jsx)(er.Box,o({},n))})(function(n){var e=n.backgroundColor,t=n.headlineFont,i=n.paragraphFont;return{backgroundClip:"border-box",display:"flex",background:e!==null&&e!==void 0?e:"#383838",position:"relative",overflow:"hidden",width:"100%",height:"auto",flexDirection:"row",alignItems:"center",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"transform, opacity",transform:"translateZ(0)",backfaceVisibility:"hidden","&.scrolled":{top:0,left:0,right:0,boxShadow:"0 2px 8px rgba(0,0,0,0.2)",".content":{paddingTop:"0",justifyContent:"center"},".body-title":{fontSize:"26px",lineHeight:"34px",marginBottom:"0",fontStyle:"normal",fontWeight:"400",fontFamily:t!==null&&t!==void 0?t:"Lora"},".bg-image":{width:"90px !important",height:"90px !important"},".placeholder-image":{"& > div":{width:"90px !important",height:"90px !important"}}},".content":{width:"70%",height:"100%",marginLeft:"2%",marginRight:"auto",paddingTop:"32px",display:"flex",flexDirection:"column",position:"relative",boxSizing:"border-box",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"},".bg-image":{width:"246px",height:"246px",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform"},".placeholder-image":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform","& > div":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"}},".body-title":{fontSize:"32px",lineHeight:"38px",marginBottom:"15px",fontWeight:"400",color:"#FFFFFF",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontFamily:t!==null&&t!==void 0?t:"Lora",paddingLeft:"5px",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"},".body-text":{fontSize:"16px",marginBottom:"15px",fontStyle:"normal",fontWeight:"400",lineHeight:"22px",color:"#FFFFFF",fontFamily:i!==null&&i!==void 0?i:"inherit",display:"-webkit-box",WebkitBoxOrient:"vertical",overflow:"hidden",WebkitLineClamp:3,textOverflow:"ellipsis",paddingLeft:"5px",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)"},".social-media":{display:"flex",flexDirection:"column",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)"},".email-text":{fontSize:"12px",fontStyle:"normal",fontWeight:"600",lineHeight:"16px",letterSpacing:"0.12px",color:"#FFFFFF","& a":{color:"inherit",textDecoration:"none","&:hover":{textDecoration:"underline"}}},".social-title-text":{fontSize:"12px",marginBottom:"16px",fontStyle:"normal",fontWeight:"700",lineHeight:"16px",letterSpacing:"0.48px",color:"#FFFFFF",textTransform:"uppercase",paddingLeft:"5px"},".social-icons":{display:"flex",flexDirection:"row",gap:"10px",paddingBottom:"15px",alignItems:"center"}}}),el=(0,ei.styled)(function(n){return(0,eo.jsx)(er.Box,o({},n))})(function(n){var e=n.backgroundColor,t=n.headlineFont,i=n.paragraphFont;return{backgroundClip:"border-box",display:"flex",background:e!==null&&e!==void 0?e:"#383838",position:"relative",overflow:"hidden",width:"100%",flexDirection:"column",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"transform, opacity",transform:"translateZ(0)",backfaceVisibility:"hidden","&.scrolled":{top:0,left:0,right:0,boxShadow:"0 2px 8px rgba(0,0,0,0.2)",".content-mobile":{paddingTop:"5px",width:"60%"},".body-title-mobile":{fontSize:"26px",lineHeight:"34px",marginBottom:"0",fontStyle:"normal",fontWeight:"400",fontFamily:t!==null&&t!==void 0?t:"Lora"},".bg-image-mobile":{width:"90px !important",height:"90px !important"},".placeholder-image-mobile":{"& > div":{width:"90px !important",height:"90px !important"}}},".image-content-mobile":{display:"flex",flexDirection:"row",width:"100%",justifyContent:"center",alignItems:"center"},".content-mobile":{width:"55%",height:"100%",paddingTop:"10px",paddingLeft:"5px",paddingRight:"10px",marginLeft:"15px",marginRight:"auto",display:"flex",flexDirection:"column",justifyContent:"center",position:"relative",boxSizing:"border-box",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)","@media (max-width: 420px)":{paddingTop:"8px",width:"100%"},"@media (max-width: 400px)":{paddingTop:"6px",width:"100%",height:"100%"},"@media (max-width: 375px)":{paddingTop:"4px",width:"100%",height:"100%"}},".bg-image-mobile":{width:"144px",height:"144px",display:"flex",justifyContent:"center",alignItems:"center",objectFit:"cover",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform","@media (max-width: 420px)":{width:"120px",height:"120px"},"@media (max-width: 400px)":{width:"110px",height:"110px"},"@media (max-width: 375px)":{width:"90px",height:"90px"}},".placeholder-image-mobile":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform","& > div":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",width:"144px !important",height:"144px !important","@media (max-width: 420px)":{width:"120px !important",height:"120px !important"},"@media (max-width: 400px)":{width:"110px !important",height:"110px !important"},"@media (max-width: 375px)":{width:"90px !important",height:"90px !important"}}},".body-title-mobile":{fontSize:"22px",lineHeight:"28px",marginBottom:"13px",fontWeight:"400",color:"#FFFFFF",fontStyle:"normal",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontFamily:t!==null&&t!==void 0?t:"Lora",paddingLeft:"5px",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)","@media (max-width: 420px)":{fontSize:"20px",lineHeight:"26px",marginBottom:"8px"},"@media (max-width: 400px)":{fontSize:"18px",lineHeight:"24px",marginBottom:"6px"},"@media (max-width: 375px)":{fontSize:"16px",lineHeight:"22px",marginBottom:"4px"}},".body-text-mobile":{fontSize:"14px",padding:"20px 25px 20px 25px",fontStyle:"normal",fontWeight:"400",lineHeight:"20px",color:"#252525",backgroundColor:"#E0E0E0",fontFamily:i!==null&&i!==void 0?i:"inherit",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",opacity:1,transform:"translateY(0)"},".email-text-mobile":{fontSize:"12px",paddingBottom:"11px",fontStyle:"normal",fontWeight:"600",lineHeight:"16px",letterSpacing:"0.12px",color:"#FFFFFF",wordBreak:"break-all",overflowWrap:"break-word",paddingLeft:"5px","@media (max-width: 420px)":{fontSize:"11px",lineHeight:"15px",paddingBottom:"8px"},"@media (max-width: 400px)":{fontSize:"10px",lineHeight:"14px",paddingBottom:"6px"},"@media (max-width: 375px)":{fontSize:"8px",lineHeight:"12px",paddingBottom:"4px"}},".social-title-text-mobile":{fontSize:"12px",marginBottom:"11px",fontStyle:"normal",fontWeight:"700",lineHeight:"16px",letterSpacing:"0.48px",color:"#FFFFFF",textTransform:"uppercase",paddingLeft:"5px",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)","@media (max-width: 420px)":{fontSize:"11px",lineHeight:"14px",marginBottom:"8px"},"@media (max-width: 400px)":{fontSize:"10px",lineHeight:"12px",marginBottom:"5px"},"@media (max-width: 375px)":{fontSize:"8px",lineHeight:"11px",marginBottom:"4px"}},".social-icons-mobile":{display:"flex",flexDirection:"row",gap:"10px",paddingBottom:"10px",alignItems:"center",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)","@media (max-width: 420px)":{paddingBottom:"8px"},"@media (max-width: 400px)":{paddingBottom:"6px"},"@media (max-width: 375px)":{paddingBottom:"4px"}}}});var es=require("@mui/material"),ed=require("react/jsx-runtime"),ec=function(n){var e=n.width,t=n.height,i=n.backgroundColor;return(0,ed.jsx)(es.Box,{sx:{width:e,height:t,display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:i},"data-testid":"placeholder-image",children:(0,ed.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"128",height:"129",viewBox:"0 0 128 129",fill:"none",children:(0,ed.jsxs)("g",{id:"ns_logomark",children:[(0,ed.jsx)("path",{id:"Vector",d:"M127.495 52.1946C125.663 47.9538 122.999 44.1171 119.661 40.9073C112.565 34.2835 102.562 31.7037 93.1175 34.0622C83.6733 36.4206 76.0882 43.3926 72.991 52.5619C71.4142 56.8414 70.6063 61.3627 70.6039 65.9196C70.6039 85.8227 70.6039 105.737 70.6039 125.662C70.6039 129.001 70.6039 129.001 66.9051 128.834C66.9051 128.2 66.9051 127.499 66.9051 126.831C66.9051 104.323 66.9051 81.8263 66.9051 59.3409C66.3415 45.3064 74.9302 32.5039 88.1888 27.6164C89.79 27.0612 91.4307 26.6259 93.0981 26.314C94.7114 25.98 96.4605 25.8465 98.0738 25.6461C96.0231 16.3291 78.9419 5.60953 65.0889 4.97504C50.3084 4.62252 36.6074 12.6365 29.7509 25.6461C31.331 25.8465 32.8779 25.9466 34.3569 26.2138C48.0999 28.544 58.7086 39.4998 60.5168 53.2298C60.8904 55.7285 61.0812 58.2508 61.0877 60.7769C61.0877 82.7507 61.0877 104.724 61.0877 126.697C61.0877 128.434 60.6842 129.169 58.8016 128.968C56.9183 128.768 57.1204 128.2 57.1204 126.965C57.1204 119.985 57.1204 113.006 57.1204 105.993C57.1204 92.1674 57.1204 78.3423 57.1204 64.5171C57.2385 56.3928 54.2457 48.5271 48.7477 42.5103C42.2429 35.5282 32.6539 32.2371 23.1959 33.7401C13.7379 35.243 5.66194 41.3411 1.67448 49.9906C1.23781 50.8254 0.867444 51.6937 0.262573 52.9293C5.79294 22.3996 32.4752 0.139867 63.7085 0.000656323C94.9411 -0.138555 121.824 21.8824 127.629 52.3616",fill:"#252525"}),(0,ed.jsx)("path",{id:"Vector_2",d:"M86.0995 124.927C86.0995 124.293 86.0995 123.858 86.0995 123.425C86.0995 111.669 86.0995 100.049 86.0995 88.1269C85.8836 82.4231 88.0775 76.89 92.1523 72.8653C97.3131 67.9567 104.984 66.7091 111.452 69.7263C117.892 72.1185 122.166 78.225 122.178 85.0541C122.372 92.1747 119.781 99.0921 114.949 104.356C107.882 113.237 98.6134 120.141 88.05 124.392C87.4217 124.616 86.782 124.805 86.1335 124.96",fill:"#252525"}),(0,ed.jsx)("path",{id:"Vector_3",d:"M41.8183 125.395C37.6149 123.224 33.6477 121.487 29.9828 119.25C21.5405 114.299 14.4778 107.331 9.43828 98.9796C6.53442 94.3985 5.34408 88.9493 6.07591 83.5852C7.056 75.2882 13.8859 68.8841 22.2829 68.3905C31.1231 67.2473 39.3527 73.0751 41.1455 81.7484C41.76 84.263 42.0762 86.8411 42.0868 89.4287C42.0868 100.516 42.0868 111.636 42.0868 122.823C42.0868 123.457 42.0867 124.059 41.8854 125.294",fill:"#252525"}),(0,ed.jsx)("path",{id:"Vector_4",d:"M51.3337 127.431C47.9713 127.431 47.6681 127.198 47.6681 124.326V76.6386C48.1096 67.937 42.9747 59.906 34.8574 56.602C25.8992 52.8557 15.5485 54.8615 8.66523 61.6779C4.28638 66.6086 1.89197 72.9696 1.94049 79.5438C1.95423 80.2444 1.78037 80.9357 1.43588 81.5476C1.06552 79.9446 0.62885 78.2081 0.426687 76.7387C-0.724024 70.4463 0.471163 63.9529 3.78906 58.472C6.09291 54.6111 9.65016 51.6434 13.8762 50.0567C22.8587 46.555 32.9393 47.1785 41.4148 51.7598C47.6592 54.8694 51.5262 61.2882 51.3337 68.2232C51.5019 87.6249 51.3337 107.027 51.3337 126.396C51.3337 126.797 51.3337 127.164 51.3337 127.532",fill:"#252525"}),(0,ed.jsx)("path",{id:"Vector_5",d:"M76.287 127.499V125.094C76.287 107.196 76.4883 89.2963 76.287 71.3966C76.0848 56.9034 84.2554 50.6588 95.7553 48.3545C101.535 47.2005 107.524 47.6393 113.071 49.6235C122.914 53.3319 128.994 63.1725 127.866 73.5672C127.631 76.2831 127.17 78.975 126.487 81.6151C125.916 78.2758 125.68 74.9364 124.772 71.597C122.808 64.3002 117.377 58.4174 110.228 55.8421C103.078 53.2668 95.1132 54.3239 88.8955 58.6734C83.0441 62.6207 79.7011 69.3237 80.086 76.3389C80.086 92.2349 80.086 108.131 80.086 124.026C80.086 127.366 80.086 127.366 76.2198 127.366",fill:"#252525"})]})})})};var eu=require("react/jsx-runtime"),ep=(0,ee.styled)(ee.Box)({background:"none",border:"2px solid transparent",cursor:"pointer",padding:"2px",display:"flex",alignItems:"center",borderRadius:"8px",transition:"all 0.3s ease","&:hover":{transform:"scale(1.1)",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)"},"&:focus, &:focus-within":{outline:"none",borderColor:"#007bff",boxShadow:"0 0 0 2px rgba(0, 123, 255, 0.25)"},"&:hover svg":{fill:"#ffffff !important"}});function ex(n){var e=n.className,t=n.shopTitle,i=n.shopDescription,r=n.socialTitleText,o=n.imageDetails,a=n.email,l=n.backgroundColor,s=n.headlineFont,d=n.paragraphFont,u=n.socialIcons;var p=(0,ee.useMediaQuery)("(max-width: 560px)"),x=c((0,en.useState)(!1),2),f=x[0],m=x[1];(0,en.useEffect)(function(){var n,e=window.scrollY,t=!1,i="",r=function(){return document.querySelector(".nu-header-container")},o=function(){var n=r();if(!n)return{top:35,isCompact:!1};var e=n.classList.contains("compact")||n.classList.contains("compact-view"),t=n.classList.contains("full-view");return e?{top:85,isCompact:!0}:t?{top:110,isCompact:!1}:{top:35,isCompact:!1}},a=function(){var n=r();return n?n.classList.contains("compact")||n.classList.contains("compact-view")?"compact":n.classList.contains("full-view")?"full-view":"default":"none"},l=function(e){t!==e&&(t=e,clearTimeout(n),n=setTimeout(function(){m(e)},e?100:50))},s=function(){var n=window.scrollY,r=Math.abs(n-e),s=n<100?1:3;if(r<s){e=n;return}var d=n>e,c=n<e,u=a(),x=o(),f=x.top,m=x.isCompact;if(i!==u){i=u,m&&!t?l(!0):!m&&t&&n<80&&l(!1),e=n;return}var h=p?120:150,g=p?50:80,b=h+f,v=g;d&&n>b&&!t?l(!0):c&&n<v&&t&&l(!1),e=n},d=function(){var n=window.scrollY,r=o(),l=r.top;i=a();var s=(p?120:150)+l,d=n>s;t=d,m(d),e=n},c=!1,u=function(){c||(requestAnimationFrame(function(){s(),c=!1}),c=!0)};return d(),window.addEventListener("scroll",u,{passive:!0}),function(){window.removeEventListener("scroll",u),clearTimeout(n)}},[p]);var h=(0,en.useMemo)(function(){return u===null||u===void 0?void 0:u.map(function(n,e){return(0,eu.jsx)(ep,{children:(0,eu.jsx)(et.NsLink,{href:n.url,target:"_blank",rel:"noopener noreferrer",children:(0,eu.jsx)(et.NsImage,{src:"https://www.google.com/s2/favicons?domain=".concat(n===null||n===void 0?void 0:n.url,"&sz=24"),alt:"".concat(n.type," icon"),width:"24",height:"24"},(n===null||n===void 0?void 0:n.type)+e)})},(n===null||n===void 0?void 0:n.type)+e)})},[u]);return p?(0,eu.jsxs)(el,{className:"".concat(e," ").concat(f?"scrolled":""),"data-testid":"my-site-shop-header",backgroundColor:l,headlineFont:s,paragraphFont:d,children:[(0,eu.jsxs)(ee.Box,{className:"image-content-mobile",children:[(o===null||o===void 0?void 0:o.imageSrc)?(0,eu.jsx)(et.NsImage,{className:"bg-image-mobile",src:o===null||o===void 0?void 0:o.imageSrc,alt:o===null||o===void 0?void 0:o.imageAlt}):(0,eu.jsx)(ee.Box,{className:"placeholder-image-mobile",children:(0,eu.jsx)(ec,{width:"144px",height:"144px",backgroundColor:l!==null&&l!==void 0?l:"#5F5F5F"})}),(0,eu.jsxs)(ee.Box,{className:"content-mobile",children:[(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"body-title-mobile",children:t}),!f&&(0,eu.jsxs)(eu.Fragment,{children:[(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"social-title-text-mobile",children:r}),(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"email-text-mobile",children:a}),(0,eu.jsx)(ee.Box,{className:"social-icons-mobile",children:h})]})]})]}),!f&&(0,eu.jsx)(ee.Typography,{className:"body-text-mobile",children:i})]}):(0,eu.jsxs)(ea,{className:"".concat(e," ").concat(f?"scrolled":""),"data-testid":"my-site-shop-header",backgroundColor:l,headlineFont:s,paragraphFont:d,children:[(o===null||o===void 0?void 0:o.imageSrc)?(0,eu.jsx)(et.NsImage,{className:"bg-image",src:o===null||o===void 0?void 0:o.imageSrc,alt:o===null||o===void 0?void 0:o.imageAlt}):(0,eu.jsx)(ee.Box,{className:"placeholder-image",children:(0,eu.jsx)(ec,{width:"246px",height:"246px",backgroundColor:l!==null&&l!==void 0?l:"#5F5F5F"})}),(0,eu.jsxs)(ee.Box,{className:"content",children:[(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"body-title",children:t}),!f&&(0,eu.jsxs)(eu.Fragment,{children:[(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"body-text",children:i}),(0,eu.jsxs)(ee.Box,{className:"social-media",children:[(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"social-title-text",children:r}),(0,eu.jsxs)(ee.Box,{className:"social-icons",children:[h,(0,eu.jsx)(ee.Typography,{tabIndex:0,className:"email-text",children:(0,eu.jsx)("a",{href:"mailto:".concat(a),children:a})})]})]})]})]})]})}//# sourceMappingURL=index.js.map
+"use strict";function n(n,e){if(e==null||e>n.length)e=n.length;for(var t=0,i=new Array(e);t<e;t++)i[t]=n[t];return i}function e(n){if(Array.isArray(n))return n}function t(n,e,t){if(e in n){Object.defineProperty(n,e,{value:t,enumerable:true,configurable:true,writable:true})}else{n[e]=t}return n}function i(n,e){var t=n==null?null:typeof Symbol!=="undefined"&&n[Symbol.iterator]||n["@@iterator"];if(t==null)return;var i=[];var r=true;var o=false;var a,l;try{for(t=t.call(n);!(r=(a=t.next()).done);r=true){i.push(a.value);if(e&&i.length===e)break}}catch(n){o=true;l=n}finally{try{if(!r&&t["return"]!=null)t["return"]()}finally{if(o)throw l}}return i}function r(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(n){for(var e=1;e<arguments.length;e++){var i=arguments[e]!=null?arguments[e]:{};var r=Object.keys(i);if(typeof Object.getOwnPropertySymbols==="function"){r=r.concat(Object.getOwnPropertySymbols(i).filter(function(n){return Object.getOwnPropertyDescriptor(i,n).enumerable}))}r.forEach(function(e){t(n,e,i[e])})}return n}function a(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);if(e){i=i.filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})}t.push.apply(t,i)}return t}function l(n,e){e=e!=null?e:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(n,Object.getOwnPropertyDescriptors(e))}else{a(Object(e)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))})}return n}function s(n,e){if(n==null)return{};var t=d(n,e);var i,r;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);for(r=0;r<o.length;r++){i=o[r];if(e.indexOf(i)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(n,i))continue;t[i]=n[i]}}return t}function d(n,e){if(n==null)return{};var t={};var i=Object.keys(n);var r,o;for(o=0;o<i.length;o++){r=i[o];if(e.indexOf(r)>=0)continue;t[r]=n[r]}return t}function c(n,t){return e(n)||i(n,t)||x(n,t)||r()}function u(n,e){if(!e){e=n.slice(0)}return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function p(n){"@swc/helpers - typeof";return n&&typeof Symbol!=="undefined"&&n.constructor===Symbol?"symbol":typeof n}function x(e,t){if(!e)return;if(typeof e==="string")return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);if(i==="Object"&&e.constructor)i=e.constructor.name;if(i==="Map"||i==="Set")return Array.from(i);if(i==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}function f(){var n=u(["\n    width: 200px;\n    text-align: left;\n    margin-bottom: 5px;\n"]);f=function e(){return n};return n}function m(){var n=u(["\n    padding: 30px 0 60px;\n    width: 100%;\n    margin: auto;\n    margin-top: 50px;\n    position: relative;\n\n    .slick-list {\n        padding-left: 24px;\n        padding-right: 24px;\n    }\n    .slick-slide {\n        display: flex;\n        justify-content: center;\n        padding: 0 12px;\n        box-sizing: border-box;\n    }\n    .slick-prev,\n    .slick-next {\n        display: none !important;\n    }\n\n    @media (max-width: 1200px) {\n        max-width: 1024px;\n        .slick-list {\n            padding-left: 12px;\n            padding-right: 12px;\n        }\n        .slick-slide {\n            padding: 0 6px;\n        }\n    }\n    @media (max-width: 700px) {\n        max-width: 100vw;\n        .slick-list {\n            padding-left: 4px;\n            padding-right: 4px;\n        }\n        .slick-slide {\n            padding: 0 2px;\n        }\n    }\n"]);m=function e(){return n};return n}function h(){var n=u(["\n    overflow-x: auto;\n    display: flex;\n    scroll-snap-type: x mandatory;\n    -webkit-overflow-scrolling: touch;\n    gap: 16px;\n    padding: 0 8px 16px;\n    width: 100%;\n    box-sizing: border-box;\n\n    &::-webkit-scrollbar {\n        height: 6px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: #007bff;\n        border-radius: 10px;\n    }\n"]);h=function e(){return n};return n}function g(){var n=u(["\n    display: flex;\n    scroll-snap-align: start;\n    justify-content: center;\n    gap: 15px;\n"]);g=function e(){return n};return n}function b(){var n=u(["\n    position: absolute;\n    bottom: calc(100% + 1px);\n    right: 1px;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n"]);b=function e(){return n};return n}function v(){var n=u(["\n    display: flex;\n    align-items: center;\n    margin-left: 576px;\n\n    @media (max-width: 560px) {\n        margin-left: 0;\n        order: 2;\n    }\n"]);v=function e(){return n};return n}function y(){var n=u(["\n    display: none;\n\n    @media (max-width: 560px) {\n        color: #666666;\n        font-family: Inter;\n        font-size: 16px !important;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 22px;\n        display: flex;\n        align-items: center;\n        order: 1;\n    }\n"]);y=function e(){return n};return n}function w(){var n=u(["\n    display: flex;\n    align-items: center;\n\n    .carousal-prev-button,\n    .carousal-next-button {\n        transition: all 0.3s ease;\n        border: 2px solid #000000;\n        border-radius: 3px;\n        padding: 9px;\n        cursor: pointer;\n\n        svg {\n            transition: all 0.3s ease;\n        }\n\n        svg polyline {\n            stroke: #000000;\n            fill: none;\n        }\n\n        &:hover {\n            background-color: #f5f5f5;\n            border: 2px solid #ddd;\n\n            svg {\n                opacity: 0.5;\n            }\n\n            svg polyline {\n                stroke: #000000;\n                fill: none;\n            }\n        }\n    }\n\n    @media (max-width: 560px) {\n        display: none;\n    }\n"]);w=function e(){return n};return n}function C(){var n=u(["\n    @media (max-width: 560px) {\n        overflow-y: hidden;\n        scrollbar-width: thin;\n        scrollbar-color: #007bff #eee;\n        &::-webkit-scrollbar {\n            width: 8px;\n        }\n        &::-webkit-scrollbar-track {\n            background: #eee;\n        }\n        &::-webkit-scrollbar-thumb {\n            background-color: red;\n            border-radius: 8px;\n            border: 2px solid #eee;\n        }\n    }\n"]);C=function e(){return n};return n}function j(){var n=u(["\n    color: #666666;\n    font-family: Inter;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 22px;\n"]);j=function e(){return n};return n}function k(){var n=u(["\n    color: #000000;\n    font-family: Inter, sans-serif;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 22px;\n    text-decoration: none;\n    border-bottom: 1px solid #000000;\n    padding-bottom: 4px;\n    transition: all 0.3s ease;\n\n    &:hover {\n        color: #666666;\n        border-bottom: 1px solid #666666;\n    }\n"]);k=function e(){return n};return n}function S(){var n=u(["\n    padding-top: 20px;\n    font-size: 20px;\n    text-align: center;\n"]);S=function e(){return n};return n}function F(){var n=u(["\n    display: flex;\n    justify-content: flex-end;\n"]);F=function e(){return n};return n}function O(){var n=u(["\n    display: flex;\n    gap: 20px;\n    align-items: center;\n\n    .carousel-prev-button,\n    .carousel-next-button {\n        transition: all 0.3s ease;\n        border: 2px solid #000000;\n        border-radius: 3px;\n        padding: 9px;\n\n        svg {\n            transition: all 0.3s ease !important;\n            fill: #000000 !important;\n        }\n\n        &:hover {\n            background-color: #f5f5f5;\n            border: 2px solid #ddd;\n\n            svg {\n                opacity: 0.5;\n            }\n        }\n    }\n"]);O=function e(){return n};return n}function T(){var n=u(["\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n    background-color: #fff;\n    .tabsStyle {\n        display: flex;\n        padding-top: 8.533px;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12.8px;\n        border-right: 1px;\n        border-color: divider;\n        width: 200px;\n        & .Mui-selected {\n            font-weight: 700;\n            font-size: 14px;\n            font-family: 'inter', sans-serif;\n            font-style: normal;\n            font-height: 20px;\n            border-radius: 4px;\n        }\n        & .MuiTabs-indicator {\n            left: 0;\n            background-color: #5b81a5;\n            color: #5b81a5;\n\n            @media (max-width: 768px) {\n                display: none;\n            }\n        }\n    }\n\n    .tabContainer {\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: flex-start;\n        min-width: 100%;\n        background-color: #fff;\n        @media (max-width: 768px) {\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n    }\n\n    .tabStyle {\n        align-items: flex-start;\n        display: flex;\n        text-align: left;\n        font-size: 14px;\n        font-family: 'inter' sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 20px;\n        min-height: 20px;\n        padding: 1px;\n        padding-left: 10px;\n        margin-bottom: 10px;\n        cursor: pointer;\n    }\n    @media (max-width: 768px) {\n        flex-direction: row;\n        padding: 8px;\n\n        .tabsStyle {\n            width: 100%;\n            border-right: none;\n            display: flex;\n            flex-direction: row;\n            justify-content: space-between;\n        }\n\n        .tabStyle {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            font-size: 14px;\n            border: 1px solid #ccc;\n            border-radius: 70px;\n            padding: 8px 16px;\n            text-align: center;\n            margin: 4px;\n            background-color: #fff;\n            cursor: pointer;\n            color: black;\n            font-family: Inter;\n            font-style: normal;\n            font-weight: 600;\n            line-height: 20px;\n        }\n\n        .tabStyle.Mui-selected {\n            background-color: #5b81a5;\n            color: #ffffff !important;\n            font-weight: 700;\n            border-radius: 70px;\n        }\n    }\n    .tabPanel {\n        padding: 8px;\n        text-align: left;\n    }\n"]);T=function e(){return n};return n}function z(){var n=u(["\n    display: flex;\n    flex-direction: ",";\n    align-items: ",";\n    width: 100%;\n    max-width: 1920px;\n    min-height: ",";\n    margin: 0 auto;\n    box-sizing: border-box;\n    overflow: visible;\n    background: #fff;\n    padding: ",";\n\n    @media (max-width: 768px) {\n        padding: 20px 16px 0px 16px;\n        min-height: auto;\n        gap: 16px;\n    }\n\n    @media (min-width: 769px) and (max-width: 1024px) {\n        padding: 30px 40px 0px 40px;\n        gap: 20px;\n    }\n\n    transform: translateZ(0);\n    will-change: auto;\n"]);z=function e(){return n};return n}function B(){var n=u(["\n    min-width: ",";\n    height: ",";\n    flex-shrink: 0;\n\n    @media (max-width: 768px) {\n        width: 100%;\n        height: auto;\n\n        overflow-x: auto;\n        overflow-y: visible;\n        -webkit-overflow-scrolling: touch;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n\n        &::-webkit-scrollbar {\n            display: none;\n        }\n    }\n\n    @media (min-width: 769px) and (max-width: 1024px) {\n        min-width: 200px;\n        margin-right: 20px;\n    }\n"]);B=function e(){return n};return n}function I(){var n=u(["\n    flex: 1;\n    min-width: 0;\n    height: ",";\n\n    @media (max-width: 768px) {\n        width: 100%;\n        height: auto;\n        min-height: 300px;\n\n        -webkit-overflow-scrolling: touch;\n        overflow-x: hidden;\n        overflow-y: auto;\n    }\n\n    @media (min-width: 769px) and (max-width: 1024px) {\n        min-height: 400px;\n    }\n\n    contain: layout style paint;\n    transform: translateZ(0);\n"]);I=function e(){return n};return n}function N(){var n=u(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 200px;\n    padding: 20px;\n\n    @media (max-width: 768px) {\n        min-height: 150px;\n        padding: 16px;\n    }\n"]);N=function e(){return n};return n}function L(){var n=u(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 40px 20px;\n    color: #666;\n    font-size: 16px;\n\n    @media (max-width: 768px) {\n        padding: 20px 16px;\n        font-size: 14px;\n    }\n"]);L=function e(){return n};return n}function P(){var n=u(["\n    padding: 10px;\n    display: flex;\n    justify-content: center;\n"]);P=function e(){return n};return n}var q=Object.create;var M=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var A=function(n,e){return function(){return e||n((e={exports:{}}).exports,e),e.exports}},R=function(n,e){for(var t in e)M(n,t,{get:e[t],enumerable:!0})},_=function(n,e,t,i){var r=true,o=false,a=undefined;if(e&&(typeof e==="undefined"?"undefined":p(e))=="object"||typeof e=="function")try{var l=function(){var r=d.value;!W.call(n,r)&&r!==t&&M(n,r,{get:function(){return e[r]},enumerable:!(i=H(e,r))||i.enumerable})};for(var s=E(e)[Symbol.iterator](),d;!(r=(d=s.next()).done);r=true)l()}catch(n){o=true;a=n}finally{try{if(!r&&s.return!=null){s.return()}}finally{if(o){throw a}}}return n};var V=function(n,e,t){return t=n!=null?q(D(n)):{},_(e||!n||!n.__esModule?M(t,"default",{value:n,enumerable:!0}):t,n)},Y=function(n){return _(M({},"__esModule",{value:!0}),n)};var Z=A(function(n,e){"use strict";var t="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=t});var Q=A(function(n,e){"use strict";var t=function n(){};var i=function n(){};var r=Z();i.resetWarningCache=t;e.exports=function(){function n(n,e,t,i,o,a){if(a!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}n.isRequired=n;function e(){return n}var o={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:e,element:n,elementType:n,instanceOf:e,node:n,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:i,resetWarningCache:t};return o.PropTypes=o,o}});var U=A(function(n,e){"use strict";e.exports=Q()();var t,i});var $={};R($,{MysiteHero:function(){return ei},NsCategoryNavigation:function(){return nR},NsProductCard:function(){return ni},ProductCarousel:function(){return nz},ProductTabCarousel:function(){return nX}});module.exports=Y($);var G=require("react"),J=require("@nuskin/foundation-ui-components");var K=require("@nuskin/foundation-theme"),X=(0,K.styled)("div")(f());var nn=require("@mui/material"),ne=require("react/jsx-runtime"),nt=function(n){var e=n.productTitle,t=n.imageDetails,i=n.className,r=n.button,o=n.onCardClick,a=n.productStatusBadge,l=n.mySitePriceComponent,s=n.testId;var d=c((0,G.useState)(!1),2),u=d[0],p=d[1],x=(0,nn.useMediaQuery)("(max-width: 560px)");var f,m,h,g,b;return(0,ne.jsxs)("button",{className:i,onClick:o,tabIndex:0,"data-testid":"product-card",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"space-between",width:240,height:x?442.08:513,overflow:"hidden",cursor:"pointer",border:"1px solid #EDEDED",background:"var(--color-primary-n-10-primary-white, #FFF)"},children:[(0,ne.jsx)("div",{style:{width:(f=t===null||t===void 0?void 0:t.width)!==null&&f!==void 0?f:240,height:(m=t===null||t===void 0?void 0:t.height)!==null&&m!==void 0?m:240,background:(h=t===null||t===void 0?void 0:t.bgColor)!==null&&h!==void 0?h:"#f5f5f5",borderRadius:8,overflow:"hidden",marginBottom:0,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:(t===null||t===void 0?void 0:t.imageSrc)?(0,ne.jsx)(J.NsImage,{"data-testid":s!==null&&s!==void 0?s:"test-product-image",className:(g=t.className)!==null&&g!==void 0?g:"",src:t.imageSrc,alt:t.imageAlt,"aria-label":(b=t.areaLabel)!==null&&b!==void 0?b:t.imageAlt,width:"100%"}):(0,ne.jsx)("img",{alt:"",style:{width:"100%",height:"100%",objectFit:"cover",borderRadius:8,display:"block"}})}),(0,ne.jsx)("div",{title:e,"data-testid":"product-title",style:{width:200,marginTop:16,maxHeight:66,textAlign:"left",fontSize:16,fontFamily:"Inter, sans-serif",fontWeight:400,lineHeight:"22px",overflow:"hidden",color:"#666",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical",textOverflow:"ellipsis"},children:e}),(0,ne.jsx)("div",{style:{width:200,textAlign:"left",marginBottom:12},children:a}),(0,ne.jsx)(X,{children:l}),(r===null||r===void 0?void 0:r.showButton)&&(0,ne.jsxs)("button",{tabIndex:0,"data-testid":"add-to-cart-button",onClick:function(n){var e;n.stopPropagation(),(e=r.onClick)===null||e===void 0?void 0:e.call(r)},onMouseEnter:function(){x||p(!0)},onMouseLeave:function(){x||p(!1)},style:{width:200,height:40,borderRadius:4,display:"flex",alignItems:"center",gap:16,fontFamily:"Inter, sans-serif",fontSize:14,fontWeight:600,lineHeight:"20px",letterSpacing:"0.14px",textTransform:"none",justifyContent:"flex-start",paddingLeft:31,overflow:"hidden",whiteSpace:"normal",wordBreak:"break-word",overflowWrap:"break-word",textOverflow:"ellipsis",color:"#fff",backgroundColor:!x&&u?"#888":"#000",border:"none",marginTop:8,marginBottom:10,cursor:"pointer",transition:x?"none":"background-color 0.3s ease",WebkitAppearance:"none",WebkitTapHighlightColor:"transparent"},children:[(0,ne.jsx)("span",{className:"cart-icon",style:{width:24,height:24,flexShrink:0,display:"inline-block",background:"none",transition:"all 0.3s ease"},children:(0,ne.jsx)("svg",{width:"24",height:"22",viewBox:"0 0 24 22",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,ne.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 1.86358C0 1.26109 0.488416 0.772675 1.09091 0.772675H3.48173C4.51054 0.772675 5.39955 1.49136 5.61511 2.49733L5.71309 2.95456H22.9091C23.245 2.95456 23.5622 3.10933 23.7689 3.37411C23.9757 3.63889 24.0489 3.98415 23.9674 4.31005L22.4053 10.5583C21.9197 12.5009 20.1743 13.8636 18.172 13.8636H8.05068L8.28444 14.9546H20.7273C21.3298 14.9546 21.8182 15.443 21.8182 16.0455C21.8182 16.648 21.3298 17.1364 20.7273 17.1364H19.6364H8.18182H7.40252C6.88811 17.1364 6.4436 16.777 6.33582 16.274L3.76449 4.27405L3.48173 2.95449H1.09091C0.488416 2.95449 0 2.46608 0 1.86358ZM8.18182 17.1364C6.97683 17.1364 6 18.1132 6 19.3182C6 20.5232 6.97683 21.5 8.18182 21.5C9.3868 21.5 10.3636 20.5232 10.3636 19.3182C10.3636 18.1132 9.3868 17.1364 8.18182 17.1364ZM19.6364 17.1364C18.4314 17.1364 17.4545 18.1132 17.4545 19.3182C17.4545 20.5232 18.4314 21.5 19.6364 21.5C20.8413 21.5 21.8182 20.5232 21.8182 19.3182C21.8182 18.1132 20.8413 17.1364 19.6364 17.1364ZM7.58317 11.6818H18.172C19.1732 11.6818 20.0459 11.0005 20.2887 10.0292L21.5119 5.13638H6.18062L7.58317 11.6818Z",fill:"#ffffff"})})}),r.buttonText||"ADD TO CART"]})]})},ni=nt;var nr=require("react"),no=V(require("react-slick")),na=V(require("@mui/material/useMediaQuery"));var nl=require("@nuskin/foundation-theme"),ns=V(require("@mui/material/Box")),nd=require("@nuskin/foundation-ui-components"),nc=(0,nl.styled)(ns.default)(m()),nu=(0,nl.styled)("div")(h()),np=(0,nl.styled)("div")(g()),nx=(0,nl.styled)(ns.default)(b()),nf=(0,nl.styled)(ns.default)(v()),nm=(0,nl.styled)(ns.default)(y()),nh=(0,nl.styled)(ns.default)(w()),ng=(0,nl.styled)("div")(C()),nb=(0,nl.styled)(nd.NsTypography)(j()),nv=(0,nl.styled)("a")(k()),ny=(0,nl.styled)("div")(S());var nw=require("@nuskin/foundation-theme"),nC=require("@nuskin/foundation-ui-components"),nj=require("react/jsx-runtime"),nk=nw.styled.div(F()),nS=nw.styled.div(O()),nF=function(n){var e=n.next,t=n.prev,i=n.viewAllUrl,r=n.viewAllLabel;return(0,nj.jsx)(nk,{children:(0,nj.jsxs)(nS,{children:[i?(0,nj.jsx)(nC.NsLink,{href:i,underlineOnHover:!1,children:(0,nj.jsx)(nC.NsTypography,{decoration:"underline",variant:"body-l",children:r})}):null,(0,nj.jsx)(nC.IconWrapper,{onClick:t,className:"carousel-prev-button",size:"medium",cursor:"pointer",children:(0,nj.jsx)(nC.NsIcon,{name:"arrowLeft",colorOverride:"#000000"})}),(0,nj.jsx)(nC.IconWrapper,{onClick:e,className:"carousel-next-button",size:"medium",cursor:"pointer",children:(0,nj.jsx)(nC.NsIcon,{name:"arrowRight",colorOverride:"#000000"})})]})})},nO=nF;var nT=require("react/jsx-runtime");function nz(n){var e=n.entries,t=n.renderEntry,i=n.settings,r=i===void 0?{}:i,a=n.showControlButtons,s=a===void 0?!0:a,d=n.allEntryLabel,c=d===void 0?"View All":d,u=n.allEntryLink,p=u===void 0?"":u,x=n.categoryName,f=n.emptyProductMessage,m=f===void 0?"No Products Available For The Selected Category":f,h=n.productsCountLabel,g=h===void 0?"Products":h;var b,v,y;var w=(0,nr.useRef)(null),C=(0,na.default)("(max-width: 560px)"),j=(0,nr.useCallback)(function(){var n;(n=w.current)===null||n===void 0?void 0:n.slickPrev()},[]),k=(0,nr.useCallback)(function(){var n;(n=w.current)===null||n===void 0?void 0:n.slickNext()},[]),S=t!==null&&t!==void 0?t:function(n,e){return(0,nT.jsx)(ni,{productTitle:n.productTitle,imageDetails:n.imageDetails,button:n.button,onCardClick:n.onCardClick,productStatusBadge:n.productStatusBadge,mySitePriceComponent:n.mySitePriceComponent},"".concat(n.productTitle,"-").concat(e))},F=o({dots:!0,infinite:!0,speed:500,slidesToShow:Math.min((b=e===null||e===void 0?void 0:e.length)!==null&&b!==void 0?b:0,4),slidesToScroll:4,swipe:!0,draggable:!0,arrows:!0,responsive:[{breakpoint:1320,settings:{slidesToShow:Math.min((v=e===null||e===void 0?void 0:e.length)!==null&&v!==void 0?v:0,3),slidesToScroll:3}},{breakpoint:900,settings:{slidesToShow:Math.min((y=e===null||e===void 0?void 0:e.length)!==null&&y!==void 0?y:0,2),slidesToScroll:2}},{breakpoint:600,settings:{slidesToShow:1,slidesToScroll:1,arrows:!1}}]},r),O=function(){return(e===null||e===void 0?void 0:e.length)===0?(0,nT.jsx)(ny,{children:m}):C?(0,nT.jsx)(nu,{children:(0,nT.jsx)(np,{children:e.map(function(n,e){return n&&S(n,e)})})}):(0,nT.jsx)(no.default,l(o({},F),{ref:w,children:e.map(function(n,e){return n&&S(n,e)})}))};var T;return(0,nT.jsxs)(nc,{children:[s&&(0,nT.jsxs)(nx,{children:[(0,nT.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[(0,nT.jsxs)("div",{style:{display:"flex",alignItems:"center",flex:1,minWidth:0},children:[(0,nT.jsx)(nm,{children:(0,nT.jsxs)(nb,{variant:"body-m",children:[(T=e===null||e===void 0?void 0:e.length)!==null&&T!==void 0?T:0," ",g]})}),!C&&x&&(0,nT.jsx)("div",{style:{fontFamily:"Lora",fontWeight:400,fontSize:22,marginLeft:16,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"300px",textTransform:"capitalize"},children:x})]}),(0,nT.jsx)(nf,{style:{marginLeft:"auto",marginRight:C?0:24},children:(0,nT.jsx)(nv,{href:p,children:c})})]}),!C&&(0,nT.jsx)(nh,{children:(0,nT.jsx)(nO,{prev:j,next:k})})]}),O()]})}var nB=require("react"),nI=require("@mui/material");var nN=V(require("react")),nL=V(require("@mui/material/Tabs")),nP=V(require("@mui/material/Tab")),nq=V(require("@mui/material/Box")),nM=V(U());var nH=require("@nuskin/foundation-theme"),nE=nH.styled.div(T());var nD=require("@mui/material"),nW=require("react/jsx-runtime");function nA(n){var e=n.children,t=n.value,i=n.index,r=s(n,["children","value","index"]);return(0,nW.jsx)("div",l(o({role:"tabpanel",hidden:t!==i,id:"vertical-tabpanel-".concat(i),"aria-labelledby":"vertical-tab-".concat(i)},r),{children:t===i&&(0,nW.jsx)(nq.default,{className:"tabPanel",children:e})}))}nA.propTypes={children:nM.default.node,index:nM.default.number.isRequired,value:nM.default.number.isRequired};var nR=function(n){var e=n.itemArray,t=n.value,i=n.onChange;var r=c(nN.useState(0),2),o=r[0],a=r[1],l=(0,nD.useMediaQuery)("(max-width:768px)"),s=t!==null&&t!==void 0?t:o;return(0,nW.jsx)(nE,{children:(0,nW.jsxs)(nq.default,{className:"tabContainer",children:[(0,nW.jsx)(nL.default,{orientation:l?"horizontal":"vertical",variant:"scrollable",value:s,onChange:function(n,e){i?i(n,e):a(e)},"aria-label":"Vertical tabs example",className:"tabsStyle",children:e.map(function(n){return(0,nW.jsx)(nP.default,{label:n.label,className:"tabStyle",sx:{textTransform:"capitalize"}},n.categoryId)})}),e.map(function(n){return(0,nW.jsx)(nA,{value:s,index:e.findIndex(function(e){return e.categoryId===n.categoryId}),children:n.content},n.categoryId)})]})})};var n_=require("@nuskin/foundation-ui-components");var nV=require("@nuskin/foundation-theme"),nY=(0,nV.styled)("div")(z(),function(n){var e=n.isMobile;return e?"column":"row"},function(n){var e=n.isMobile;return e?"stretch":"flex-start"},function(n){var e=n.isMobile;return e?"auto":"500px"},function(n){var e=n.isMobile;return e?"10px 16px 0px 16px":"50px 60px 0px 60px"}),nZ=(0,nV.styled)("div")(B(),function(n){var e=n.isMobile;return e?"100%":"auto"},function(n){var e=n.isMobile;return e?"auto":"100%"}),nQ=(0,nV.styled)("div")(I(),function(n){var e=n.isMobile;return e?"auto":"100%"}),nU=(0,nV.styled)("div")(N()),n$=(0,nV.styled)("div")(L()),nG=(0,nV.styled)("div")(P());var nJ=require("react/jsx-runtime"),nK=function(n){var e=n.allEntryLabel,t=n.allEntryLink,i=n.renderEntry,r=n.settings,a=n.showControlButtons,s=a===void 0?!0:a,d=n.fetchCategories,u=n.fetchProducts,p=n.showCustomCategory,x=p===void 0?!1:p,f=n.emptyProductTabs,m=f===void 0?"No tabs available":f,h=n.emptyProductMessage,g=n.productsCountLabel;var b;var v=(0,nI.useMediaQuery)("(max-width:768px)"),y=c((0,nB.useState)([]),2),w=y[0],C=y[1],j=c((0,nB.useState)(0),2),k=j[0],S=j[1],F=c((0,nB.useState)([]),2),O=F[0],T=F[1],z=c((0,nB.useState)(!1),2),B=z[0],I=z[1],N=c((0,nB.useState)(!0),2),L=N[0],P=N[1],q=(0,nB.useCallback)(function(){var n=document.querySelectorAll('[data-testid*="spinner"], .ns-spinner, [class*="spinner"]');P(n.length===0)},[]);(0,nB.useEffect)(function(){B&&q()},[B,q]),(0,nB.useEffect)(function(){d().then(C)},[d]),(0,nB.useEffect)(function(){w.length>0&&(I(!0),u(w[k].categoryId).then(T).finally(function(){return I(!1)}))},[w,k,u]);var M=w.map(function(n){return{label:n.label,content:"",categoryId:n.categoryId}});return(0,nJ.jsxs)(nY,{isMobile:v,children:[x&&(M.length>0?(0,nJ.jsx)(nZ,{isMobile:v,children:(0,nJ.jsx)(nR,{itemArray:M,value:k,onChange:function(n,e){return S(e)}})}):(0,nJ.jsx)(n$,{children:m})),(0,nJ.jsx)(nQ,{isMobile:v,children:B?(0,nJ.jsx)(nG,{children:L&&(0,nJ.jsx)(n_.NsSpinner,{})}):(0,nJ.jsx)(nz,{entries:O,allEntryLabel:e,allEntryLink:t,renderEntry:i?function(n){return i(l(o({},n),{productStatusBadge:n.productStatusBadge}))}:void 0,settings:r,showControlButtons:s,categoryName:(b=w[k])===null||b===void 0?void 0:b.label,emptyProductMessage:h,productsCountLabel:g})})]})},nX=nK;var n0=require("react"),n1=require("@mui/material"),n2=require("@nuskin/foundation-ui-components");var n6=require("@nuskin/foundation-theme"),n5=require("@mui/material"),n8=require("react/jsx-runtime"),n4=(0,n6.styled)(function(n){return(0,n8.jsx)(n5.Box,o({},n))})(function(n){var e=n.backgroundColor,t=n.headlineFont,i=n.paragraphFont;return{backgroundClip:"border-box",display:"flex",background:e!==null&&e!==void 0?e:"#383838",position:"relative",overflow:"hidden",width:"100%",height:"auto",flexDirection:"row",alignItems:"center",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"transform, opacity",transform:"translateZ(0)",backfaceVisibility:"hidden","&.scrolled":{top:0,left:0,right:0,boxShadow:"0 2px 8px rgba(0,0,0,0.2)",".content":{paddingTop:"0",justifyContent:"center"},".body-title":{fontSize:"26px",lineHeight:"34px",marginBottom:"0",fontStyle:"normal",fontWeight:"400",fontFamily:t!==null&&t!==void 0?t:"Lora"},".bg-image":{width:"90px !important",height:"90px !important"},".placeholder-image":{"& > div":{width:"90px !important",height:"90px !important"}}},".content":{width:"70%",height:"100%",marginLeft:"2%",marginRight:"auto",paddingTop:"32px",display:"flex",flexDirection:"column",position:"relative",boxSizing:"border-box",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"},".bg-image":{width:"246px",height:"246px",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform"},".placeholder-image":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform","& > div":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"}},".body-title":{fontSize:"32px",lineHeight:"38px",marginBottom:"15px",fontWeight:"400",color:"#FFFFFF",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontFamily:t!==null&&t!==void 0?t:"Lora",paddingLeft:"5px",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"},".body-text":{fontSize:"16px",marginBottom:"15px",fontStyle:"normal",fontWeight:"400",lineHeight:"22px",color:"#FFFFFF",fontFamily:i!==null&&i!==void 0?i:"inherit",display:"-webkit-box",WebkitBoxOrient:"vertical",overflow:"hidden",WebkitLineClamp:3,textOverflow:"ellipsis",paddingLeft:"5px",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)"},".social-media":{display:"flex",flexDirection:"column",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)"},".email-text":{fontSize:"12px",fontStyle:"normal",fontWeight:"600",lineHeight:"16px",letterSpacing:"0.12px",color:"#FFFFFF","& a":{color:"inherit",textDecoration:"none","&:hover":{textDecoration:"underline"}}},".social-title-text":{fontSize:"12px",marginBottom:"16px",fontStyle:"normal",fontWeight:"700",lineHeight:"16px",letterSpacing:"0.48px",color:"#FFFFFF",textTransform:"uppercase",paddingLeft:"5px"},".social-icons":{display:"flex",flexDirection:"row",gap:"10px",paddingBottom:"15px",alignItems:"center"}}}),n3=(0,n6.styled)(function(n){return(0,n8.jsx)(n5.Box,o({},n))})(function(n){var e=n.backgroundColor,t=n.headlineFont,i=n.paragraphFont;return{backgroundClip:"border-box",display:"flex",background:e!==null&&e!==void 0?e:"#383838",position:"relative",overflow:"hidden",width:"100%",flexDirection:"column",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"transform, opacity",transform:"translateZ(0)",backfaceVisibility:"hidden","&.scrolled":{top:0,left:0,right:0,boxShadow:"0 2px 8px rgba(0,0,0,0.2)",".content-mobile":{paddingTop:"5px",width:"60%"},".body-title-mobile":{fontSize:"26px",lineHeight:"34px",marginBottom:"0",fontStyle:"normal",fontWeight:"400",fontFamily:t!==null&&t!==void 0?t:"Lora"},".bg-image-mobile":{width:"90px !important",height:"90px !important"},".placeholder-image-mobile":{"& > div":{width:"90px !important",height:"90px !important"}}},".image-content-mobile":{display:"flex",flexDirection:"row",width:"100%",justifyContent:"center",alignItems:"center"},".content-mobile":{width:"55%",height:"100%",paddingTop:"10px",paddingLeft:"5px",paddingRight:"10px",marginLeft:"15px",marginRight:"auto",display:"flex",flexDirection:"column",justifyContent:"center",position:"relative",boxSizing:"border-box",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)","@media (max-width: 420px)":{paddingTop:"8px",width:"100%"},"@media (max-width: 400px)":{paddingTop:"6px",width:"100%",height:"100%"},"@media (max-width: 375px)":{paddingTop:"4px",width:"100%",height:"100%"}},".bg-image-mobile":{width:"144px",height:"144px",display:"flex",justifyContent:"center",alignItems:"center",objectFit:"cover",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform","@media (max-width: 420px)":{width:"120px",height:"120px"},"@media (max-width: 400px)":{width:"110px",height:"110px"},"@media (max-width: 375px)":{width:"90px",height:"90px"}},".placeholder-image-mobile":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",willChange:"width, height, transform","& > div":{transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",width:"144px !important",height:"144px !important","@media (max-width: 420px)":{width:"120px !important",height:"120px !important"},"@media (max-width: 400px)":{width:"110px !important",height:"110px !important"},"@media (max-width: 375px)":{width:"90px !important",height:"90px !important"}}},".body-title-mobile":{fontSize:"22px",lineHeight:"28px",marginBottom:"13px",fontWeight:"400",color:"#FFFFFF",fontStyle:"normal",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis",fontFamily:t!==null&&t!==void 0?t:"Lora",paddingLeft:"5px",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)","@media (max-width: 420px)":{fontSize:"20px",lineHeight:"26px",marginBottom:"8px"},"@media (max-width: 400px)":{fontSize:"18px",lineHeight:"24px",marginBottom:"6px"},"@media (max-width: 375px)":{fontSize:"16px",lineHeight:"22px",marginBottom:"4px"}},".body-text-mobile":{fontSize:"14px",padding:"20px 25px 20px 25px",fontStyle:"normal",fontWeight:"400",lineHeight:"20px",color:"#252525",backgroundColor:"#E0E0E0",fontFamily:i!==null&&i!==void 0?i:"inherit",transition:"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",opacity:1,transform:"translateY(0)"},".email-text-mobile":{fontSize:"12px",paddingBottom:"11px",fontStyle:"normal",fontWeight:"600",lineHeight:"16px",letterSpacing:"0.12px",color:"#FFFFFF",wordBreak:"break-all",overflowWrap:"break-word",paddingLeft:"5px","@media (max-width: 420px)":{fontSize:"11px",lineHeight:"15px",paddingBottom:"8px"},"@media (max-width: 400px)":{fontSize:"10px",lineHeight:"14px",paddingBottom:"6px"},"@media (max-width: 375px)":{fontSize:"8px",lineHeight:"12px",paddingBottom:"4px"}},".social-title-text-mobile":{fontSize:"12px",marginBottom:"11px",fontStyle:"normal",fontWeight:"700",lineHeight:"16px",letterSpacing:"0.48px",color:"#FFFFFF",textTransform:"uppercase",paddingLeft:"5px",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)","@media (max-width: 420px)":{fontSize:"11px",lineHeight:"14px",marginBottom:"8px"},"@media (max-width: 400px)":{fontSize:"10px",lineHeight:"12px",marginBottom:"5px"},"@media (max-width: 375px)":{fontSize:"8px",lineHeight:"11px",marginBottom:"4px"}},".social-icons-mobile":{display:"flex",flexDirection:"row",gap:"10px",paddingBottom:"10px",alignItems:"center",transition:"opacity 0.3s ease-out, transform 0.3s ease-out",opacity:1,transform:"translateY(0)","@media (max-width: 420px)":{paddingBottom:"8px"},"@media (max-width: 400px)":{paddingBottom:"6px"},"@media (max-width: 375px)":{paddingBottom:"4px"}}}});var n7=require("@mui/material"),n9=require("react/jsx-runtime"),en=function(n){var e=n.width,t=n.height,i=n.backgroundColor;return(0,n9.jsx)(n7.Box,{sx:{width:e,height:t,display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:i},"data-testid":"placeholder-image",children:(0,n9.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"128",height:"129",viewBox:"0 0 128 129",fill:"none",children:(0,n9.jsxs)("g",{id:"ns_logomark",children:[(0,n9.jsx)("path",{id:"Vector",d:"M127.495 52.1946C125.663 47.9538 122.999 44.1171 119.661 40.9073C112.565 34.2835 102.562 31.7037 93.1175 34.0622C83.6733 36.4206 76.0882 43.3926 72.991 52.5619C71.4142 56.8414 70.6063 61.3627 70.6039 65.9196C70.6039 85.8227 70.6039 105.737 70.6039 125.662C70.6039 129.001 70.6039 129.001 66.9051 128.834C66.9051 128.2 66.9051 127.499 66.9051 126.831C66.9051 104.323 66.9051 81.8263 66.9051 59.3409C66.3415 45.3064 74.9302 32.5039 88.1888 27.6164C89.79 27.0612 91.4307 26.6259 93.0981 26.314C94.7114 25.98 96.4605 25.8465 98.0738 25.6461C96.0231 16.3291 78.9419 5.60953 65.0889 4.97504C50.3084 4.62252 36.6074 12.6365 29.7509 25.6461C31.331 25.8465 32.8779 25.9466 34.3569 26.2138C48.0999 28.544 58.7086 39.4998 60.5168 53.2298C60.8904 55.7285 61.0812 58.2508 61.0877 60.7769C61.0877 82.7507 61.0877 104.724 61.0877 126.697C61.0877 128.434 60.6842 129.169 58.8016 128.968C56.9183 128.768 57.1204 128.2 57.1204 126.965C57.1204 119.985 57.1204 113.006 57.1204 105.993C57.1204 92.1674 57.1204 78.3423 57.1204 64.5171C57.2385 56.3928 54.2457 48.5271 48.7477 42.5103C42.2429 35.5282 32.6539 32.2371 23.1959 33.7401C13.7379 35.243 5.66194 41.3411 1.67448 49.9906C1.23781 50.8254 0.867444 51.6937 0.262573 52.9293C5.79294 22.3996 32.4752 0.139867 63.7085 0.000656323C94.9411 -0.138555 121.824 21.8824 127.629 52.3616",fill:"#252525"}),(0,n9.jsx)("path",{id:"Vector_2",d:"M86.0995 124.927C86.0995 124.293 86.0995 123.858 86.0995 123.425C86.0995 111.669 86.0995 100.049 86.0995 88.1269C85.8836 82.4231 88.0775 76.89 92.1523 72.8653C97.3131 67.9567 104.984 66.7091 111.452 69.7263C117.892 72.1185 122.166 78.225 122.178 85.0541C122.372 92.1747 119.781 99.0921 114.949 104.356C107.882 113.237 98.6134 120.141 88.05 124.392C87.4217 124.616 86.782 124.805 86.1335 124.96",fill:"#252525"}),(0,n9.jsx)("path",{id:"Vector_3",d:"M41.8183 125.395C37.6149 123.224 33.6477 121.487 29.9828 119.25C21.5405 114.299 14.4778 107.331 9.43828 98.9796C6.53442 94.3985 5.34408 88.9493 6.07591 83.5852C7.056 75.2882 13.8859 68.8841 22.2829 68.3905C31.1231 67.2473 39.3527 73.0751 41.1455 81.7484C41.76 84.263 42.0762 86.8411 42.0868 89.4287C42.0868 100.516 42.0868 111.636 42.0868 122.823C42.0868 123.457 42.0867 124.059 41.8854 125.294",fill:"#252525"}),(0,n9.jsx)("path",{id:"Vector_4",d:"M51.3337 127.431C47.9713 127.431 47.6681 127.198 47.6681 124.326V76.6386C48.1096 67.937 42.9747 59.906 34.8574 56.602C25.8992 52.8557 15.5485 54.8615 8.66523 61.6779C4.28638 66.6086 1.89197 72.9696 1.94049 79.5438C1.95423 80.2444 1.78037 80.9357 1.43588 81.5476C1.06552 79.9446 0.62885 78.2081 0.426687 76.7387C-0.724024 70.4463 0.471163 63.9529 3.78906 58.472C6.09291 54.6111 9.65016 51.6434 13.8762 50.0567C22.8587 46.555 32.9393 47.1785 41.4148 51.7598C47.6592 54.8694 51.5262 61.2882 51.3337 68.2232C51.5019 87.6249 51.3337 107.027 51.3337 126.396C51.3337 126.797 51.3337 127.164 51.3337 127.532",fill:"#252525"}),(0,n9.jsx)("path",{id:"Vector_5",d:"M76.287 127.499V125.094C76.287 107.196 76.4883 89.2963 76.287 71.3966C76.0848 56.9034 84.2554 50.6588 95.7553 48.3545C101.535 47.2005 107.524 47.6393 113.071 49.6235C122.914 53.3319 128.994 63.1725 127.866 73.5672C127.631 76.2831 127.17 78.975 126.487 81.6151C125.916 78.2758 125.68 74.9364 124.772 71.597C122.808 64.3002 117.377 58.4174 110.228 55.8421C103.078 53.2668 95.1132 54.3239 88.8955 58.6734C83.0441 62.6207 79.7011 69.3237 80.086 76.3389C80.086 92.2349 80.086 108.131 80.086 124.026C80.086 127.366 80.086 127.366 76.2198 127.366",fill:"#252525"})]})})})};var ee=require("react/jsx-runtime"),et=(0,n1.styled)(n1.Box)({background:"none",border:"2px solid transparent",cursor:"pointer",padding:"2px",display:"flex",alignItems:"center",borderRadius:"8px",transition:"all 0.3s ease","&:hover":{transform:"scale(1.1)",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)"},"&:focus, &:focus-within":{outline:"none",borderColor:"#007bff",boxShadow:"0 0 0 2px rgba(0, 123, 255, 0.25)"},"&:hover svg":{fill:"#ffffff !important"}});function ei(n){var e=n.className,t=n.shopTitle,i=n.shopDescription,r=n.socialTitleText,o=n.imageDetails,a=n.email,l=n.backgroundColor,s=n.headlineFont,d=n.paragraphFont,u=n.socialIcons;var p=(0,n1.useMediaQuery)("(max-width: 560px)"),x=c((0,n0.useState)(!1),2),f=x[0],m=x[1];(0,n0.useEffect)(function(){var n,e=window.scrollY,t=!1,i="",r=function(){return document.querySelector(".nu-header-container")},o=function(){var n=r();if(!n)return{top:35,isCompact:!1};var e=n.classList.contains("compact")||n.classList.contains("compact-view"),t=n.classList.contains("full-view");return e?{top:85,isCompact:!0}:t?{top:110,isCompact:!1}:{top:35,isCompact:!1}},a=function(){var n=r();return n?n.classList.contains("compact")||n.classList.contains("compact-view")?"compact":n.classList.contains("full-view")?"full-view":"default":"none"},l=function(e){t!==e&&(t=e,clearTimeout(n),n=setTimeout(function(){m(e)},e?100:50))},s=function(){var n=window.scrollY,r=Math.abs(n-e),s=n<100?1:3;if(r<s){e=n;return}var d=n>e,c=n<e,u=a(),x=o(),f=x.top,m=x.isCompact;if(i!==u){i=u,m&&!t?l(!0):!m&&t&&n<80&&l(!1),e=n;return}var h=p?120:150,g=p?50:80,b=h+f,v=g;d&&n>b&&!t?l(!0):c&&n<v&&t&&l(!1),e=n},d=function(){var n=window.scrollY,r=o(),l=r.top;i=a();var s=(p?120:150)+l,d=n>s;t=d,m(d),e=n},c=!1,u=function(){c||(requestAnimationFrame(function(){s(),c=!1}),c=!0)};return d(),window.addEventListener("scroll",u,{passive:!0}),function(){window.removeEventListener("scroll",u),clearTimeout(n)}},[p]);var h=(0,n0.useMemo)(function(){return u===null||u===void 0?void 0:u.map(function(n,e){return(0,ee.jsx)(et,{children:(0,ee.jsx)(n2.NsLink,{href:n.url,target:"_blank",children:(0,ee.jsx)(n2.NsImage,{src:"https://www.google.com/s2/favicons?domain=".concat(n===null||n===void 0?void 0:n.url,"&sz=24"),alt:"".concat(n.type," icon"),width:"24",height:"24"},(n===null||n===void 0?void 0:n.type)+e)})},(n===null||n===void 0?void 0:n.type)+e)})},[u]);return p?(0,ee.jsxs)(n3,{className:"".concat(e," ").concat(f?"scrolled":""),"data-testid":"my-site-shop-header",backgroundColor:l,headlineFont:s,paragraphFont:d,children:[(0,ee.jsxs)(n1.Box,{className:"image-content-mobile",children:[(o===null||o===void 0?void 0:o.imageSrc)?(0,ee.jsx)(n2.NsImage,{className:"bg-image-mobile",src:o===null||o===void 0?void 0:o.imageSrc,alt:o===null||o===void 0?void 0:o.imageAlt}):(0,ee.jsx)(n1.Box,{className:"placeholder-image-mobile",children:(0,ee.jsx)(en,{width:"144px",height:"144px",backgroundColor:l!==null&&l!==void 0?l:"#5F5F5F"})}),(0,ee.jsxs)(n1.Box,{className:"content-mobile",children:[(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"body-title-mobile",children:t}),!f&&(0,ee.jsxs)(ee.Fragment,{children:[(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"social-title-text-mobile",children:r}),(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"email-text-mobile",children:a}),(0,ee.jsx)(n1.Box,{className:"social-icons-mobile",children:h})]})]})]}),!f&&(0,ee.jsx)(n1.Typography,{className:"body-text-mobile",children:i})]}):(0,ee.jsxs)(n4,{className:"".concat(e," ").concat(f?"scrolled":""),"data-testid":"my-site-shop-header",backgroundColor:l,headlineFont:s,paragraphFont:d,children:[(o===null||o===void 0?void 0:o.imageSrc)?(0,ee.jsx)(n2.NsImage,{className:"bg-image",src:o===null||o===void 0?void 0:o.imageSrc,alt:o===null||o===void 0?void 0:o.imageAlt}):(0,ee.jsx)(n1.Box,{className:"placeholder-image",children:(0,ee.jsx)(en,{width:"246px",height:"246px",backgroundColor:l!==null&&l!==void 0?l:"#5F5F5F"})}),(0,ee.jsxs)(n1.Box,{className:"content",children:[(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"body-title",children:t}),!f&&(0,ee.jsxs)(ee.Fragment,{children:[(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"body-text",children:i}),(0,ee.jsxs)(n1.Box,{className:"social-media",children:[(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"social-title-text",children:r}),(0,ee.jsxs)(n1.Box,{className:"social-icons",children:[h,(0,ee.jsx)(n1.Typography,{tabIndex:0,className:"email-text",children:(0,ee.jsx)("a",{href:"mailto:".concat(a),children:a})})]})]})]})]})]})}//# sourceMappingURL=index.js.map