@amityco/ui-kit-open-source 4.0.0-beta.1 → 4.0.0-beta.2

package/README.md

@@ -1,26 +1,88 @@
-# Amity Ui-Kit for Web (open-source)
+# Amity UI-Kit for Web (Open-Source)
 
-## Getting started
+## Prerequisites
 
-### Installation
+Before getting started, ensure that you have the following prerequisites installed on your system:
 
-Here are the steps to install ui-kit together with another project.
+- [Node.js](https://nodejs.org/) LTS version (currently version 20)
+- [pnpm](https://pnpm.io/) version 8
 
-1. git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
-2. cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
-3. npm ci
-4. npm link
-5. npm link ./`<path-to-your-app>`/node_modules/react ./`<path-to-your-app>`/node_modules/react-dom
-6. npm run build
-7. cd ./`<path-to-your-app>`
-8. npm link @amityco/ui-kit-open-source --save
+## (Optional) How to install PNPM
 
-** We need to link react module to react module in destination project so that react is the same instance otherwise we will encounter [issues with react hook](https://medium.com/bbc-product-technology/solving-the-problem-with-npm-link-and-react-hooks-266c832dd019).
+```
+corepack enable pnpm
+```
 
-### Documentation
+Ref: https://pnpm.io/installation#using-corepack
 
-Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at **developers@amity.co** for support.
+## Installation
+
+To install the Amity UI-Kit together with another project, follow these steps:
+
+1. Clone the repository using the following command:
+
+   ```
+   git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
+   ```
+
+2. Navigate to the cloned repository's directory:
+
+   ```
+   cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
+   ```
+
+3. Install the dependencies using pnpm:
+
+   ```
+   pnpm install
+   ```
+
+4. Build the project:
+
+   ```
+   pnpm run build
+   ```
+
+5. Navigate to your application's directory:
+
+   ```
+   cd <path-to-your-app>
+   ```
+
+6. Link the Amity UI-Kit repository to your application using one of the following package managers:
+   - NPM:
+     ```
+     npm link file:<path-to-amity-ui-kit-repository> --save
+     ```
+   - Yarn (Classic):
+     ```
+     yarn add file:<path-to-amity-ui-kit-repository>
+     ```
+   - PNPM:
+     ```
+     pnpm i file:<path-to-amity-ui-kit-repository>
+     ```
+
+## Documentation
+
+For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co).
+
+If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are here to help you make the most of the Amity UI-Kit.
 
 ## Contributing
 
-See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md)   
+We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices.
+
+Thank you for choosing the Amity UI-Kit for your web development needs!
+
+### FAQ
+
+Q: I tried to run `pnpm build` and it throws a types error.
+A: Try to structure your project to be like this:
+
+```
+- your_app
+  - src
+- Amity-Social-Cloud-UIKit-Web-OpenSource
+  - src
+```

package/dist/esm/index.css

@@ -1 +1 @@
-@font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:swap;src:url("./Inter-Thin-3L5KITMZ.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:100;font-display:swap;src:url("./Inter-ThinItalic-J7DGFM6P.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:swap;src:url("./Inter-ExtraLight-NASBO7I6.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:200;font-display:swap;src:url("./Inter-ExtraLightItalic-AUJY3XPT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url("./Inter-Light-E4ED7JRX.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:300;font-display:swap;src:url("./Inter-LightItalic-BJ4DXCNT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("./Inter-Regular-6HYMGWZS.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url("./Inter-Italic-2WJ2RX3Z.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("./Inter-Medium-3R4SWUEO.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;src:url("./Inter-MediumItalic-QTJUSOU7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("./Inter-SemiBold-7SYQBR3A.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;src:url("./Inter-SemiBoldItalic-3EHSSXIM.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("./Inter-Bold-K6PA7FOK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url("./Inter-BoldItalic-QKFESTQE.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("./Inter-ExtraBold-2ZPQFALF.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url("./Inter-ExtraBoldItalic-RR7KYXHD.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url("./Inter-Black-PFV6RWF7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:900;font-display:swap;src:url("./Inter-BlackItalic-OUXR4CVK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var;font-style:normal;font-weight:100 900;font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2");font-named-instance:"Regular"}@font-face{font-family:Inter var;font-style:italic;font-weight:100 900;font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2");font-named-instance:"Italic"}@font-face{font-family:Inter var experimental;font-style:oblique 0deg 10deg;font-weight:100 900;font-display:swap;src:url("./Inter.var-OMHIC2JW.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:normal;font-named-instance:"Regular";font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:italic;font-named-instance:"Italic";font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2")}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;z-index:1}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}
+@font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:swap;src:url("./Inter-Thin-3L5KITMZ.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:100;font-display:swap;src:url("./Inter-ThinItalic-J7DGFM6P.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:swap;src:url("./Inter-ExtraLight-NASBO7I6.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:200;font-display:swap;src:url("./Inter-ExtraLightItalic-AUJY3XPT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url("./Inter-Light-E4ED7JRX.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:300;font-display:swap;src:url("./Inter-LightItalic-BJ4DXCNT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("./Inter-Regular-6HYMGWZS.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url("./Inter-Italic-2WJ2RX3Z.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("./Inter-Medium-3R4SWUEO.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;src:url("./Inter-MediumItalic-QTJUSOU7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("./Inter-SemiBold-7SYQBR3A.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;src:url("./Inter-SemiBoldItalic-3EHSSXIM.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("./Inter-Bold-K6PA7FOK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url("./Inter-BoldItalic-QKFESTQE.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("./Inter-ExtraBold-2ZPQFALF.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url("./Inter-ExtraBoldItalic-RR7KYXHD.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url("./Inter-Black-PFV6RWF7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:900;font-display:swap;src:url("./Inter-BlackItalic-OUXR4CVK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var;font-style:normal;font-weight:100 900;font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2");font-named-instance:"Regular"}@font-face{font-family:Inter var;font-style:italic;font-weight:100 900;font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2");font-named-instance:"Italic"}@font-face{font-family:Inter var experimental;font-style:oblique 0deg 10deg;font-weight:100 900;font-display:swap;src:url("./Inter.var-OMHIC2JW.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:normal;font-named-instance:"Regular";font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:italic;font-named-instance:"Italic";font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2")}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;z-index:1}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.closeIcon{width:1.125rem;height:1.125rem;padding:0 .375rem;cursor:pointer;margin-left:auto;&.svg-inline--fa{width:auto}}.overlay{z-index:9999;position:fixed;inset:0;overflow-y:auto;display:flex;padding:var(--asc-spacing-m2) 0;background:#17181ccc;animation-duration:.3s;animation-name:appear;margin-top:0!important}.modalWindow{margin:auto;background-color:var(--asc-color-base-background);border-radius:var(--asc-border-radius-lg);max-width:32.5rem;min-width:20rem}.modalWindow:focus{outline:none}.smallModalWindow{width:27.5rem!important}.header{padding:var(--asc-spacing-m1) var(--asc-spacing-m1) var(--asc-spacing-s2) var(--asc-spacing-m1);border-bottom:1px solid var(--asc-color-base-shade4);display:flex;align-items:center;color:var(--asc-color-white);border-bottom:1px solid var(--theme-palette-base-shade4)}.content{color:var(--asc-color-base-default);padding:var(--asc-spacing-m2) var(--asc-spacing-m1)}.footer{padding:var(--asc-spacing-m2) var(--asc-spacing-s2);padding-top:var(--asc-spacing-xxs2)}.button{display:inline-flex;align-items:center;justify-content:center;padding:var(--asc-spacing-s1) var(--asc-spacing-m1);font-size:var(--asc-text-font-size-md);font-weight:var(--asc-text-font-weight-bold);border-radius:var(--asc-border-radius-sm);cursor:pointer;transition:background-color .3s ease}.disabled{opacity:.6;cursor:not-allowed}.primary{background-color:var(--asc-color-primary);color:var(--asc-color-white);border:none}.primary:hover:not(.disabled){background-color:var(--asc-color-primary-50)}.secondary{background-color:var(--asc-color-white);color:var(--asc-color-primary);border:1px solid var(--asc-color-primary)}.secondary:hover:not(.disabled){background-color:var(--asc-color-base-shade4)}.small{font-size:var(--asc-text-font-size-sm);padding:var(--asc-spacing-xxs2) var(--asc-spacing-s1)}.medium{font-size:var(--asc-text-font-size-md);padding:var(--asc-spacing-s1) var(--asc-spacing-m1)}.large{font-size:var(--asc-text-font-size-xl);padding:var(--asc-spacing-s2) var(--asc-spacing-m2)}.icon{margin-right:var(--asc-spacing-s1)}.modal{max-width:22.5rem!important}.confirmModalContent{padding:var(--asc-spacing-m1) var(--asc-spacing-m1) var(--asc-spacing-s2) var(--asc-spacing-m1)}.footer{display:flex;justify-content:flex-end}.okButton{color:var(--asc-color-secondary-default);background:var(--asc-color-alert)!important;border:none}.cancelButton{margin-right:var(--asc-spacing-s1);background-color:var(--asc-color-base-background)!important;color:var(--asc-color-secondary-default);border:1px solid var(--asc-color-secondary-default)!important}.cancelButton:hover{color:var(--asc-color-secondary-default)}.icon{width:1.125rem;height:1.125rem;margin-right:8px}.notifications{position:fixed;padding-top:50px;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;z-index:99999;pointer-events:none}.notificationContainer{width:480px;padding:8px 30px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:4px;margin-bottom:10px;animation-duration:.3s;animation-name:appear;pointer-events:auto;background-color:var(--asc-color-base-shade4)}@keyframes appear{0%{opacity:0}to{opacity:1}}@supports (font-variation-settings: normal){:root{font-family:Inter var,sans-serif}}:root{color-scheme:light dark;font-family:Inter,sans-serif;--asc-color-alert: #fa4d30;--asc-color-black: #000000;--asc-color-white: #ffffff;--asc-color-primary: #1054de;--asc-color-primary-shade1: #4a82f2;--asc-color-primary-shade2: #a0bdf8;--asc-color-primary-shade3: #d9e5fc;--asc-color-primary-shade4: #ffffff;--asc-color-base-inverse: #000000;--asc-color-base-default: #292b32;--asc-color-base-shade1: #636878;--asc-color-base-shade2: #898e9e;--asc-color-base-shade3: #a5a9b5;--asc-color-base-shade4: #ebecef;--asc-color-base-shade5: #f9f9fa;--asc-color-secondary-default: #292b32;--asc-color-secondary-shade1: #636878;--asc-color-secondary-shade2: #898e9e;--asc-color-secondary-shade3: #a5a9b5;--asc-color-secondary-shade4: #ebecef;--asc-color-secondary-shade5: #f9f9fa;--asc-text-global-font-family: Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;--asc-text-global-font-style: normal;--asc-text-font-size-xs: .75rem;--asc-text-font-size-sm: .875rem;--asc-text-font-size-md: 1rem;--asc-text-font-size-lg: 1.125rem;--asc-text-font-size-xl: 1.25rem;--asc-text-font-size-xxl: 1.5rem;--asc-text-font-size-3xl: 1.875rem;--asc-text-font-size-4xl: 2.25rem;--asc-text-font-size-5xl: 3rem;--asc-text-font-size-6xl: 3.75rem;--asc-text-font-size-7xl: 4.5rem;--asc-text-font-weight-light: 300;--asc-text-font-weight-normal: 400;--asc-text-font-weight-medium: 500;--asc-text-font-weight-bold: 600;--asc-text-font-weight-black: 900;--asc-line-height-xs: 1rem;--asc-line-height-sm: 1.125rem;--asc-line-height-md: 1.25rem;--asc-line-height-lg: 1.5rem;--asc-line-height-xl: 1.75rem;--asc-line-height-xxl: 2rem;--asc-border-radius-none: 0;--asc-border-radius-sm: .25rem;--asc-border-radius-md: .5rem;--asc-border-radius-lg: .75rem;--asc-border-radius-xl: 1rem;--asc-border-radius-xxl: 1.5rem;--asc-border-radius-full: 9999px;--asc-spacing-none: 0;--asc-spacing-xxs1: .125rem;--asc-spacing-xxs2: .25rem;--asc-spacing-s1: .5rem;--asc-spacing-s2: .75rem;--asc-spacing-m1: 1rem;--asc-spacing-m2: 1.25rem;--asc-spacing-m3: 1.5rem;--asc-spacing-l1: 2rem;--asc-spacing-l2: 2.5rem;--asc-spacing-l3: 3rem;--asc-spacing-l4: 3.5rem;--asc-spacing-xl1: 4rem;--asc-spacing-xl2: 4.5em;--asc-spacing-xl3: 6rem;--asc-box-shadow-01: 0px .5px 2px 0px rgba(96, 97, 112, .16), 0px 0px 1px 0px rgba(40, 41, 61, .08);--asc-box-shadow-02: 0px .5px 2px 0px rgba(96, 97, 112, .16), 0px 0px 1px 0px rgba(40, 41, 61, .08);--asc-box-shadow-03: 0px 2px 4px 0px rgba(96, 97, 112, .16), 0px 0px 1px 0px rgba(40, 41, 61, .04);--asc-box-shadow-04: 0px 4px 8px 0px rgba(96, 97, 112, .2), 0px 0px 2px 0px rgba(40, 41, 61, .1);--asc-box-shadow-05: 0px 8px 16px 0px rgba(96, 97, 112, .16), 0px 2px 4px 0px rgba(40, 41, 61, .04)}[data-theme=light]{--asc-color-base-default: #292b32;--asc-color-base-shade1: #636878;--asc-color-base-shade2: #898e9e;--asc-color-base-shade3: #a5a9b5;--asc-color-base-shade4: #ebecef;--asc-color-base-shade5: #f9f9fa;--asc-color-base-inverse: #ffffff;--asc-color-secondary-default: #292b32;--asc-color-secondary-shade1: #636878;--asc-color-secondary-shade2: #898e9e;--asc-color-secondary-shade3: #a5a9b5;--asc-color-secondary-shade4: #ebecef;--asc-color-secondary-shade5: #f9f9fa}[data-theme=dark]{--asc-color-base-background: #191919;--asc-color-base-inverse: #ffffff;--asc-color-base-default: #ebecef;--asc-color-base-shade1: #a5a9b5;--asc-color-base-shade2: #6e7487;--asc-color-base-shade3: #40434e;--asc-color-base-shade4: #292b32;--asc-color-base-shade5: #191919;--asc-color-secondary-default: #ebecef;--asc-color-secondary-shade1: #a5a9b5;--asc-color-secondary-shade2: #6e7487;--asc-color-secondary-shade3: #40434e;--asc-color-secondary-shade4: #292b32;--asc-color-secondary-shade5: #191919}.typography{padding:0;margin:0}.typography-headings{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-lg);line-height:var(--asc-line-height-lg)}.typography-titles{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-md);line-height:var(--asc-line-height-md)}.typography-sub-title{font-weight:var(--asc-text-font-weight-normal);font-size:.8125rem;line-height:var(--asc-line-height-xs)}.typography-body{font-weight:var(--asc-text-font-weight-normal);font-size:var(--asc-text-font-size-sm);line-height:var(--asc-line-height-md)}.typography-body-bold{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-sm);line-height:var(--asc-line-height-md)}.typography-caption{font-weight:var(--asc-text-font-weight-normal);font-size:var(--asc-text-font-size-xs);line-height:var(--asc-line-height-xs)}.typography-caption-bold{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-xs);line-height:var(--asc-line-height-xs)}.uiCommentButton{font-weight:var(--asc-text-font-weight-bold);color:var(--asc-color-base-inverse);display:flex;align-items:center;justify-content:space-between;gap:var(--asc-spacing-xxs2);border-radius:var(--asc-border-radius-full);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);background-color:var(--asc-color-base-default);cursor:pointer;border:none}.uiRemoteImageButton{width:var(--asc-spacing-m3);height:var(--asc-spacing-m3);cursor:pointer;border:none;outline:none;padding:var(--asc-spacing-none);margin:var(--asc-spacing-none);display:flex;align-items:center;justify-content:center}.uiShareStoryButton{display:inline-flex;height:2.5rem;padding:.375rem .5rem .375rem .25rem;align-items:center;gap:var(--asc-spacing-s1);flex-shrink:0;border-radius:var(--asc-border-radius-full);border:none;cursor:pointer;background-color:var(--asc-color-white);color:var(--asc-color-black)}.uiShareStoryButton>span{font-weight:var(--asc-text-font-weight-bold);font-family:var(--asc-text-global-font-family);font-size:var(--asc-text-font-size-md);line-height:var(--asc-line-height-md)}.shareStoryIcon{margin-left:var(--asc-spacing-s1)}.remoteImageIcon{width:1.5rem;height:1.5rem;background-color:transparent;border:none;outline:none;padding:0;margin:0}.iconButton{position:absolute;width:2rem;height:2rem;background-color:#00000080;border-radius:50%;border:none;top:6rem;left:1.25rem;z-index:9999;cursor:pointer}.loadingOverlay{position:absolute;left:0;top:0;background:#000000e6;z-index:9;display:flex;justify-content:center;align-items:center;color:#ccc}.playStoryButton,.pauseStoryButton{color:#fff;cursor:pointer}.closeButton{color:#fff;width:1.25rem;height:1.25rem;cursor:pointer}.verifiedBadge{color:#fff}.dotsButton{width:1.5rem;height:1.5rem;cursor:pointer;color:#fff}.viewStoryCompostBarContainer{width:100%;display:flex;position:absolute;justify-content:space-between;align-items:center;height:3.5rem;padding:.75rem;background-color:#000;bottom:0}.viewStoryCompostBarViewIconContainer{display:flex;align-items:center;justify-content:space-between;color:#fff;gap:.25rem}.viewStoryCompostBarEngagementContainer{display:flex;align-items:center;justify-content:space-between;color:#fff;gap:.75rem}.viewStoryCompostBarEngagementIconContainer{display:flex;align-items:center;justify-content:space-between;color:#fff;gap:.25rem;border-radius:50%;padding:.5rem .625rem;background-color:#292b32}.viewStoryContainer{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background-color:#000}.viewStoryHeaderContainer{z-index:9999;position:absolute;width:100%;display:flex;justify-content:space-between;align-items:center;flex-direction:column;padding:1.5rem 1rem .625rem;gap:.5rem}.viewStoryHeadingInfoContainer{display:flex;justify-content:space-between;width:100%;gap:.75rem;align-items:center}.viewStoryHeading{cursor:pointer;display:flex;gap:.25rem;color:#fff;font-size:.938rem;font-style:normal;font-weight:600;line-height:1.25rem;letter-spacing:-.24px;margin-right:.25rem;align-items:center}.viewStorySubHeading{display:inline-flex;gap:.25rem;margin-bottom:.25rem;color:#fff;font-size:.813rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:-.1px}.story{display:flex;position:relative;overflow:hidden}.storyContent{width:auto;max-width:100%;max-height:100%;margin:auto}.reactionListContainer{display:flex;flex-direction:column;gap:var(--asc-spacing-m)}.tabList{display:flex;gap:var(--asc-spacing-s1);border-bottom:1px solid var(--asc-color-base-shade3);padding-bottom:var(--asc-spacing-s1)}.tabItem{cursor:pointer;padding:var(--asc-spacing-xxs2) var(--asc-spacing-s1);border-radius:var(--asc-border-radius-sm);background-color:var(--asc-color-base-inverse);color:var(--asc-color-base-shade6)}.tabItem.active{background-color:var(--asc-color-base-shade4);color:var(--asc-color-base-inverse)}.reactionEmoji{display:flex;align-items:center;gap:var(--asc-spacing-xxs)}.tabCount{font-size:.8rem;background-color:var(--asc-color-base-shade4);color:var(--asc-color-base-inverse);padding:.1rem .3rem;border-radius:var(--asc-border-radius-sm)}.userList{display:flex;flex-wrap:wrap;gap:var(--asc-spacing-s1)}.userItem{display:flex;align-items:center;gap:var(--asc-spacing-s1);background-color:var(--asc-color-base-inverse);padding:var(--asc-spacing-s1);border-radius:var(--asc-border-radius-sm);width:100%}.userDetailsContainer{display:flex;align-items:center;gap:var(--asc-spacing-s1)}.hyperlinkFormContainer{padding:var(--asc-spacing-m1);border-radius:var(--asc-border-radius-md)}.form{display:flex;flex-direction:column;gap:var(--asc-spacing-l1)}.inputContainer{display:flex;flex-direction:column;gap:var(--asc-spacing-xxs2)}.input{width:100%;padding:var(--asc-spacing-s1);border:none;border-bottom:1px solid var(--asc-color-base-shade4);outline:none;color:inherit}.input.hasError{border-bottom-color:var(--asc-color-alert-default);color:var(--asc-color-alert-default)}.label{display:block}.label:after{content:none;color:var(--asc-color-alert-default)}.label.required:after{content:"*"}.description{color:var(--asc-color-base-shade2)}.errorText{color:var(--asc-color-alert-default)}.characterCount{color:var(--asc-color-base-shade1);text-align:right;margin-top:.3rem}.headerContainer{display:flex;align-items:center;justify-content:space-between;padding:0 var(--asc-spacing-m1)}.labelContainer{display:flex;justify-content:space-between;align-items:center}.headerTitle,.styledSecondaryButton{color:var(--asc-color-base-default)}.removeIcon{width:1.5rem;height:1.5rem;fill:var(--asc-color-alert-default)}.removeLinkButton{display:flex;justify-content:flex-start;align-items:center;gap:var(--asc-spacing-s1);color:var(--asc-color-alert-default);border-radius:0}.divider{width:100%;height:.0625rem;align-self:stretch;background-color:var(--asc-color-base-shade4)}.viewStoryCompostBarContainer{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--asc-spacing-s2);background-color:var(--asc-color-black);color:var(--asc-color-white);position:absolute;bottom:0;z-index:99999}.viewStoryFailedCompostBarContainer{position:absolute;bottom:0;display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--asc-spacing-l4);padding:var(--asc-spacing-s2);background-color:var(--asc-color-alert);color:var(--asc-color-white);z-index:0}.viewStoryFailedCompostBarWrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--asc-spacing-s1);width:100%}.viewStoryUploadingWrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--asc-spacing-s1)}.viewStoryCompostBarViewIconContainer{font-weight:var(--asc-text-font-weight-bold);color:var(--asc-color-white);display:flex;align-items:center;justify-content:space-between;gap:var(--asc-spacing-xxs2)}.viewStoryCompostBarEngagementContainer{font-weight:var(--asc-text-font-weight-bold);display:flex;align-items:center;justify-content:space-between;gap:var(--asc-spacing-s2)}.iconButton{position:absolute;width:2rem;height:2rem;background-color:rgba(var(--asc-color-black),.5);border-radius:50%;border:none;top:6rem;left:1.25rem;z-index:9999;cursor:pointer}.rendererContainer{position:relative;width:100%;height:100%}.storyVideo{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.muteCircleIcon,.unmuteCircleIcon{width:100%;height:100%}.loadingOverlay{position:absolute;left:0;top:0;background:rgba(var(--asc-color-black),.9);z-index:9;display:flex;justify-content:center;align-items:center;color:var(--asc-color-base-shade3)}.storyImage{width:auto;max-width:100%;max-height:100%;margin:auto}.playStoryButton,.pauseStoryButton{color:var(--asc-color-white);cursor:pointer}.closeButton{color:var(--asc-color-white);width:1.25rem;height:1.25rem;cursor:pointer}.verifiedBadge{color:var(--asc-color-white)}.dotsButton{width:1.5rem;height:1.5rem;cursor:pointer;color:var(--asc-color-white)}.viewStoryInfoContainer{display:flex;flex-direction:column;justify-content:flex-start;width:100%}.viewStoryCompostBarContainer{width:100%;display:flex;position:absolute;justify-content:space-between;align-items:center;height:3.5rem;padding:.75rem;background-color:var(--asc-color-black);bottom:0}.viewStoryCompostBarViewIconContainer{display:flex;align-items:center;justify-content:space-between;color:var(--asc-color-white);gap:.25rem}.viewStoryCompostBarEngagementContainer{display:flex;align-items:center;justify-content:space-between;color:var(--asc-color-white);gap:.75rem}.viewStoryCompostBarEngagementIconContainer{display:flex;align-items:center;justify-content:space-between;color:var(--asc-color-white);gap:.25rem;border-radius:50%;padding:.5rem .625rem;background-color:var(--asc-color-secondary-default)}.storyContent{flex:1}.header{height:5rem;padding:.75rem 1rem .625rem}.viewStoryContainer{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background-color:var(--asc-color-black)}.viewStoryHeaderContainer{z-index:99999;position:absolute;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1rem .625rem;gap:.5rem}.avatarContainer{position:relative;width:2.5rem;height:2.5rem;border-radius:50%;flex-shrink:0}.addStoryButton{position:absolute;bottom:0;right:0}.addStoryButton:hover{cursor:pointer}.viewStoryHeaderListActionsContainer{display:flex;gap:1.25rem;justify-content:flex-end;align-items:center}.viewStoryHeadingInfoContainer{display:inline-flex;justify-content:space-between;gap:.75rem;align-items:center}.viewStoryHeading{cursor:pointer;display:flex;gap:.25rem;color:var(--asc-color-white);font-size:var(--asc-text-font-size-sm);font-style:normal;font-weight:var(--asc-text-font-weight-bold);line-height:var(--asc-line-height-md);letter-spacing:-.24px;margin-right:.25rem;align-items:center}.viewStoryHeadingTitle{width:auto;max-width:11.688rem}.viewStorySubHeading{display:inline-flex;gap:.25rem;margin-bottom:.25rem;color:var(--asc-color-white);font-size:var(--asc-text-font-size-xs);font-style:normal;font-weight:var(--asc-text-font-weight-normal);line-height:var(--asc-line-height-md);letter-spacing:-.1px}.draftPage{display:flex;flex-direction:column;width:23.438rem;height:40.875rem;position:relative}.header{display:flex;width:100%;justify-content:space-between;align-items:center;position:absolute;top:0;padding:1rem}.topRightButtons{display:flex;width:100%;justify-content:flex-end;gap:8px}.mainContainer{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;border-top-left-radius:.75rem;border-top-right-radius:.75rem;background:linear-gradient(180deg,var(--draft-image-container-color-0, #000) 0%,var(--draft-image-container-color-last, #000) 100%)}.previewImage{max-width:100%;max-height:100%}.footer{display:flex;justify-content:flex-end;padding:16px;background-color:#000;width:100%}.messageListHeader{display:flex;padding:var(--asc-spacing-m1);padding-top:0;gap:var(--asc-spacing-s1);align-items:center}.displayName{color:var(--asc-color-base-inverse)}.memberCount{color:var(--asc-color-base-default);display:flex;align-items:center}.memberIcon{width:.75rem;height:.75rem;margin-right:var(--asc-spacing-xxs2);fill:var(--asc-color-base-default)}.messageBubbleWrap{display:flex;align-items:flex-end;gap:var(--asc-spacing-xxs2)}.messageDeletedBubble{display:flex;align-items:center;justify-content:center;padding:var(--asc-spacing-xxs2) var(--asc-spacing-s1);background-color:var(--asc-color-base-shade4);gap:var(--asc-spacing-xxs2);border-radius:var(--asc-border-radius-lg);color:var(--asc-color-base-inverse)}.messageOptionsWrap{display:flex;align-items:flex-start;padding-bottom:var(--asc-spacing-xxs2)}.binIcon{height:1rem;width:1rem;fill:var(--asc-color-base-inverse)}.optionIcon{width:auto;height:1.25rem}.timestamp{font-family:var(--asc-text-global-font-family);color:var(--asc-color-base-shade2);margin-bottom:var(--asc-spacing-s1);font-size:.5rem;line-height:.75rem}.optionIcon{width:auto;height:1.25rem;:hover{cursor:pointer;background-color:var(--asc-color-secondary-shade4);border-radius:var(--asc-border-radius-sm)}}.reactionIcon{width:1.25rem;height:1.25rem}.timestamp{font-family:var(--asc-text-global-font-family);color:var(--asc-color-base-shade2);font-size:.5rem;line-height:.75rem;margin-bottom:var(--asc-spacing-s1)}.messageActionButton{cursor:pointer;display:flex;padding:var(--asc-spacing-s2) var(--asc-spacing-m1);justify-content:space-between}.messageActionButtonText{color:var(--asc-color-base-inverse)}.messageDangerActionButtonText{color:var(--asc-color-alert)}.copyIcon,.replyIcon{fill:var(--asc-color-base-inverse)}.binIcon{width:1.25rem;height:1.25rem;fill:var(--asc-color-alert)}.mentionIcon{width:1.25rem;height:1.25rem}.flagIcon{width:1rem}.popover{width:12.5rem;background-color:var(--asc-color-secondary-shade4);z-index:10000;padding:var(--asc-spacing-s2) 0;border-radius:var(--asc-border-radius-lg);&.fixed{position:fixed!important}}.messageItemContainer{padding:var(--asc-spacing-s1) var(--asc-spacing-m1);display:flex;gap:var(--asc-spacing-s1)}.userDisplayName{display:flex;gap:var(--asc-spacing-xxs2);align-items:center;color:var(--asc-color-secondary-shade1);margin-bottom:var(--asc-spacing-xxs2)}.avatar{width:2rem;height:2rem}.moderatorBadge{width:1rem;height:1rem}.messageBubble{padding:var(--asc-spacing-s1) .625rem;border-radius:var(--asc-border-radius-lg);border-top-left-radius:var(--asc-border-radius-none);color:var(--asc-color-base-inverse);background-color:var(--asc-color-base-shade4);max-width:7.5rem;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap}.messageRepliedBubble{width:12.5rem}.messageParentContainer{padding:var(--asc-spacing-s2);border-radius:var(--asc-border-radius-lg) var(--asc-border-radius-lg) 0 0;background-color:var(--asc-color-base-shade3)}.messageParentDisplayName{color:var(--asc-color-base-inverse)}.messageParentText{color:var(--asc-color-base-default);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.messageChildContainer{border-radius:0 0 var(--asc-border-radius-lg) var(--asc-border-radius-lg);background-color:var(--asc-color-base-shade4);color:var(--asc-color-base-inverse);padding:var(--asc-spacing-s1) var(--asc-spacing-s2)}.messageChildText{-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.mentionText{color:var(--asc-color-primary-dark, var(--asc-color-primary))}.infiniteScrollContainer{display:flex;flex-direction:column-reverse;flex-grow:1;overflow-y:hidden}.loadingIndicatorWrap{margin:auto;padding-top:var(--asc-spacing-m1);padding-bottom:var(--asc-spacing-m1)}.loadingIndicator{width:1.25rem;height:1.25rem}.infiniteScrollInner{display:flex;flex-direction:column-reverse;overflow:auto}.customStatusContainer{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;align-items:center;color:var(--asc-color-secondary-shade2);font-weight:var(--asc-text-font-weight-light);font-size:var(--asc-text-font-size-md)}.iconContainer{margin-bottom:var(--asc-spacing-m1)}.homeIndicatorContainer{padding-top:1.3125rem;padding-bottom:.5rem}.homeIndicator{margin:auto;width:8.375rem;height:.3125rem;border-radius:var(--asc-border-radius-full);background-color:var(--asc-color-base-shade1)}.sendButton{border-radius:var(--asc-border-radius-xxl);width:1rem;height:1rem;background-color:var(--asc-color-primary);cursor:pointer;padding:var(--asc-spacing-xxs2);fill:#fff}.reactionButton{width:2rem;height:2rem;cursor:pointer}.sendButtonContainer{display:flex;align-items:center;gap:var(--asc-spacing-s2);width:2rem;height:2rem}.textInputContainer{display:flex;width:calc(100% - 2.8rem);>div{width:100%;border-radius:var(--asc-border-radius-xxl);border:1px solid var(--asc-color-base-background);background:var(--asc-color-secondary-shade4);textarea{padding:.563rem 1rem;background-color:transparent}}}.mentionItem{display:flex;align-items:center;padding:.313rem .938rem;font-weight:600;background-color:var(--asc-color-base-shade4)}.mentionItem.isBanned{pointer-events:none;cursor:not-allowed}.mentionItem:hover{background-color:var(--asc-color-base-background)}.userDisplayName{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--asc-color-white)}.mentionAllDescription{display:flex;align-items:center;color:var(--asc-color-base-shade2)}.mentionAll{justify-content:space-between;div{display:flex;align-items:center}}.inputTextContainer{position:relative;display:flex;flex-wrap:wrap;min-width:1em;background:var(--asc-color-base-shade4);border:1px solid var(--asc-color-base-shade4);border-radius:var(--asc-border-radius-sm);transition:background .2s,border-color .2s;&:focus-within{border-color:var(--asc-color-primary)}&.invalid{border-color:var(--asc-color-alert)}&.disabled{background:var(--asc-color-base-shade4);border-color:var(--asc-color-base-shade3)}}.baseInputStyle{flex:1 1 auto;display:block;width:1%;min-width:0;margin:0;padding:.563rem;background:none;border:none;box-sizing:border-box;outline:none;font:inherit;resize:vertical;&::-moz-placeholder{font-weight:400}&::placeholder{font-weight:400}&[disabled]{background:none}}.mentionContainer{position:relative;width:100%;>div:first-child{position:absolute!important;width:100%;top:revert!important;left:revert!important;right:revert!important;bottom:revert!important}}.live-chat-mention-input{padding:var(--asc-spacing-s1);width:calc(100% - 1rem);textarea{flex:1 1 auto;display:block;width:1%;min-width:0;margin:0;padding:.563rem;background:none;border:none;box-sizing:border-box;outline:none;font:inherit;resize:vertical;color:var(--asc-color-white);&::-moz-placeholder{font-weight:400}&::placeholder{font-weight:400}&[disabled]{background:none}}}.live-chat-mention-input__suggestions__list{z-index:999;width:100%;position:absolute;transform:translateY(1.25rem);background-color:var(--asc-color-base-shade4);max-height:8rem;overflow:auto;bottom:2rem!important;left:0!important}.composeBarContainer{min-height:3.5rem;z-index:99;background-color:inherit}.composeBar{display:flex;align-items:center;gap:var(--asc-spacing-s2);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);background-color:inherit;border-top:1px solid var(--asc-color-base-shade2)}.textInputContainer{display:flex;flex-grow:1;>div{width:100%;border-radius:var(--asc-border-radius-xxl);border:1px solid var(--asc-color-base-background);background:var(--asc-color-secondary-shade4);textarea{padding:.563rem 1rem;background-color:transparent}}}.composeBarLoading{width:100%;height:var(--asc-spacing-l1);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);border-radius:var(--asc-border-radius-sm);border:var(--asc-border-radius-none);background-color:var(--asc-color-secondary-default);color:var(--asc-color-base-inverse);display:flex;align-items:center;span{padding-left:var(--asc-spacing-s1);font-weight:var(--asc-text-font-weight-light)}}.replyPlaceholderContainer{display:flex;font-family:var(--asc-text-global-font-family);background-color:var(--asc-color-base-shade4);color:var(--asc-color-white);max-width:100%;padding:var(--asc-spacing-s2);padding-left:var(--asc-spacing-m1);gap:var(--asc-spacing-s2);justify-content:space-between;align-items:center;.replyAvatar{flex:0 0 auto}.replyProfile{display:flex;flex-direction:column;color:var(--asc-color-white);font-size:var(--asc-text-font-size-sm);line-height:var(--asc-line-height-sm);flex:1;overflow:hidden;gap:.125rem;.replyProfileName{font-weight:var(--asc-text-font-weight-bold)}.replyProfileMessage{font-weight:var(--asc-text-font-weight-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.replyDismiss{flex:0 0 auto;cursor:pointer}}.messageListSheet{z-index:1000!important;@media (min-width: 768px){width:375px!important}.messageListSheetContainer{height:100%!important;background-color:var(--asc-color-base-background)!important}}.messageListHeaderWrap{box-shadow:var(--asc-box-shadow-01)}.chatIcon{width:2rem;height:2rem;fill:var(--asc-color-white)}.amtiyLivechatPage{display:flex;flex-direction:column;background-color:var(--asc-color-base-background);height:100%;overflow-y:hidden}