From 59a140cf8dc4c0938d7078a8352283a27ecc8543 Mon Sep 17 00:00:00 2001
From: Michio <mohsen@regentmarkets.com>
Date: Mon, 13 Nov 2023 19:41:27 +0800
Subject: [PATCH 1/3] chore: updated quill buttons and the package itself

---
 apps/deriv-hk/pages/_app.tsx                  | 10 ++-
 libs/blocks/src/lib/search/index.tsx          | 17 ++---
 libs/components/src/index.ts                  |  1 -
 .../lib/card/live-market/buy-sell.buttons.tsx | 18 +++--
 libs/components/src/lib/search-chip/index.tsx | 73 -------------------
 .../lib/search-chip/search-chip.stories.tsx   | 21 ------
 .../src/lib/search-chip/search.module.css     |  3 -
 .../main/main-navigation.buttons.tsx          | 13 ++--
 .../sections/search/search-results.tsx        |  4 +-
 .../home/sections/account-section/data.tsx    |  2 +-
 .../src/lib/home/sections/cta/data.tsx        |  2 +-
 .../src/lib/home/sections/hero/data.tsx       | 67 +++++++----------
 .../lib/trade/table/trading-spec-table.tsx    | 51 +++++--------
 .../sections/our-principles/index.tsx         |  2 +-
 package-lock.json                             | 37 +++++++---
 package.json                                  |  4 +-
 16 files changed, 114 insertions(+), 211 deletions(-)
 delete mode 100644 libs/components/src/lib/search-chip/index.tsx
 delete mode 100644 libs/components/src/lib/search-chip/search-chip.stories.tsx
 delete mode 100644 libs/components/src/lib/search-chip/search.module.css

diff --git a/apps/deriv-hk/pages/_app.tsx b/apps/deriv-hk/pages/_app.tsx
index 319c5c82b..eae71c486 100644
--- a/apps/deriv-hk/pages/_app.tsx
+++ b/apps/deriv-hk/pages/_app.tsx
@@ -1,14 +1,16 @@
 import { AppProps } from 'next/app';
 import '../styles.css';
-import { ThemeProvider } from '@deriv/quill-design';
+import { ScreenProvider, ThemeProvider } from '@deriv/quill-design';
 import { BuildVariantProvider } from '@deriv-com/providers';
 
 function CustomApp({ Component, pageProps }: AppProps) {
   return (
     <BuildVariantProvider buildVariant="hk">
-      <ThemeProvider theme="light">
-        <Component {...pageProps} />
-      </ThemeProvider>
+      <ScreenProvider>
+        <ThemeProvider theme="light">
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </ScreenProvider>
     </BuildVariantProvider>
   );
 }
diff --git a/libs/blocks/src/lib/search/index.tsx b/libs/blocks/src/lib/search/index.tsx
index 850564f84..2e4996ce9 100644
--- a/libs/blocks/src/lib/search/index.tsx
+++ b/libs/blocks/src/lib/search/index.tsx
@@ -1,32 +1,31 @@
-import { SearchChip } from '@deriv-com/components';
+import { SearchField } from '@deriv/quill-design';
 import { ReactNode } from 'react';
 
 export type SearchBlockProps = {
-  showSearchresults: (e: string) => void;
+  showSearchResults: (e: string) => void;
   content?: ReactNode;
   placeholder: string;
   onChange: (e: string) => void;
 };
 
 export const SearchBlock = ({
-  showSearchresults,
+  showSearchResults,
   content,
   placeholder,
   onChange,
 }: SearchBlockProps) => {
   return (
     <section className="flex w-full max-w-[1024px] flex-col gap-general-xl py-general-xl">
-      <SearchChip
+      <SearchField
         placeholder={placeholder}
-        onChange={(value) => {
-          showSearchresults(value);
+        onChange={(e) => {
+          showSearchResults(e.target.value);
 
           if (onChange) {
-            onChange(value);
+            onChange(e.target.value);
           }
         }}
-        className="w-full "
-        inputClassName="!bg-gradient-slate-110"
+        className="w-full"
       />
       {content && content}
     </section>
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index f38502bf9..d38bd43f8 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -7,6 +7,5 @@ export * from './lib/optimized-image';
 export * from './lib/page-layout';
 export * from './lib/link';
 export * from './lib/table/account-table';
-export * from './lib/search-chip';
 export * from './lib/action-sheet/bottom-sheet';
 export * from './lib/table-cell';
diff --git a/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx b/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx
index 066abb69f..3b79ad3eb 100644
--- a/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx
+++ b/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx
@@ -1,4 +1,4 @@
-import { Text, Button } from '@deriv/quill-design';
+import { Text, TradeButton } from '@deriv/quill-design';
 import { MarketStatus } from '../types';
 
 export const BuySellButtons = ({
@@ -19,16 +19,22 @@ export const BuySellButtons = ({
         </Text>
       </div>
       <div className="flex flex-row gap-gap-md">
-        <Button disabled={status === 'closed'} className="flex-1">
+        <TradeButton
+          tradeType="buy"
+          variant="secondary"
+          disabled={status === 'closed'}
+          className="flex-1"
+        >
           Buy
-        </Button>
-        <Button
+        </TradeButton>
+        <TradeButton
+          tradeType="sell"
+          variant="secondary"
           disabled={status === 'closed'}
           className="flex-1"
-          colorStyle="black"
         >
           Sell
-        </Button>
+        </TradeButton>
       </div>
     </div>
   );
diff --git a/libs/components/src/lib/search-chip/index.tsx b/libs/components/src/lib/search-chip/index.tsx
deleted file mode 100644
index c1632335b..000000000
--- a/libs/components/src/lib/search-chip/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import styles from './search.module.css';
-import { qtMerge } from '@deriv/quill-design';
-import { StandaloneSearchRegularIcon } from '@deriv/quill-icons/Standalone';
-import { useEffect, useRef, useState } from 'react';
-
-export type sizeVariant = 'sm' | 'md';
-
-export type InputProps = {
-  placeholder?: string;
-  value?: string;
-  onChange: (e: string, i?: React.FormEvent<HTMLInputElement>) => void;
-  className?: string;
-  inputClassName?: string;
-  size?: sizeVariant;
-};
-
-const sizeVariantClass: { [key in sizeVariant]: string } = {
-  sm: 'px-general-sm py-general-xs',
-  md: 'p-general-md',
-};
-
-export const SearchChip = ({
-  placeholder,
-  value = '',
-  size = 'md',
-  onChange,
-  className,
-  inputClassName,
-}: InputProps) => {
-  const [currentValue, setValue] = useState(value);
-  const searchInputRef = useRef<HTMLInputElement | null>(null);
-  useEffect(() => {
-    if (searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, []);
-  useEffect(() => {
-    setValue(value);
-  }, [value]);
-
-  return (
-    <div
-      className={qtMerge(
-        'relative flex justify-start gap-general-sm rounded-lg border-75',
-        'border-solid-slate-100 bg-background-primary-container',
-        sizeVariantClass[size],
-        className,
-      )}
-    >
-      <StandaloneSearchRegularIcon fill="black" iconSize="sm" />
-
-      <input
-        className={qtMerge(
-          'w-full outline-none',
-          'text-solid-slate-1400',
-          inputClassName,
-
-          styles['bg-transparent'],
-        )}
-        ref={searchInputRef}
-        placeholder={placeholder}
-        value={currentValue}
-        onChange={(e) => {
-          const inputValue = e.target.value;
-          setValue(inputValue);
-          onChange(inputValue, e);
-        }}
-      />
-    </div>
-  );
-};
-
-export default SearchChip;
diff --git a/libs/components/src/lib/search-chip/search-chip.stories.tsx b/libs/components/src/lib/search-chip/search-chip.stories.tsx
deleted file mode 100644
index 3df442049..000000000
--- a/libs/components/src/lib/search-chip/search-chip.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import SearchChip from './index';
-
-const meta = {
-  title: 'Components/SearchChip',
-  component: SearchChip,
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof SearchChip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const SearchInput: Story = {
-  args: {
-    placeholder: 'Search',
-    size: 'sm',
-  },
-};
diff --git a/libs/components/src/lib/search-chip/search.module.css b/libs/components/src/lib/search-chip/search.module.css
deleted file mode 100644
index c9deb079d..000000000
--- a/libs/components/src/lib/search-chip/search.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.bg-transparent {
- background: transparent;
-}
\ No newline at end of file
diff --git a/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx b/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx
index 0a12afe6f..44bb136d9 100644
--- a/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx
+++ b/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx
@@ -25,11 +25,10 @@ export const MainNavigationButtons = () => {
         <Button
           variant="secondary"
           colorStyle="coral"
-          size="md"
+          size="lg"
           onClick={onTradersHubClick}
-          renderLeftIcon={() => (
-            <StandalonePlaceholderRegularIcon width={12} height={12} />
-          )}
+          icon={StandalonePlaceholderRegularIcon}
+          iconPosition="start"
         >
           Traders Hub
         </Button>
@@ -37,13 +36,13 @@ export const MainNavigationButtons = () => {
         <>
           <Button
             variant="secondary"
-            colorStyle="coral"
-            size="md"
+            colorStyle="black"
+            size="lg"
             onClick={onLoginClick}
           >
             Log in
           </Button>
-          <Button size="md" className="hidden lg:block" onClick={onSignupClick}>
+          <Button size="lg" className="hidden lg:block" onClick={onSignupClick}>
             Create free demo account
           </Button>
         </>
diff --git a/libs/templates/src/lib/help-center/sections/search/search-results.tsx b/libs/templates/src/lib/help-center/sections/search/search-results.tsx
index 844edbd59..86c4ed6e8 100644
--- a/libs/templates/src/lib/help-center/sections/search/search-results.tsx
+++ b/libs/templates/src/lib/help-center/sections/search/search-results.tsx
@@ -15,7 +15,7 @@ export const SearchResults = ({ onSearchKeyChange }: SearchResultsProps) => {
   const [results, setResults] = useState<FAQSearchResults[]>([]);
   const [searchKey, setSearchKey] = useState('');
 
-  const showSearchresults = (query: string) => {
+  const showSearchResults = (query: string) => {
     const finalMatches: FAQSearchResults[] = [];
 
     FAQData.forEach(({ header, questions }) => {
@@ -37,7 +37,7 @@ export const SearchResults = ({ onSearchKeyChange }: SearchResultsProps) => {
     <FluidContainer className="flex w-full flex-col items-center">
       <SearchBlock
         placeholder='Try "Trade"'
-        showSearchresults={showSearchresults}
+        showSearchResults={showSearchResults}
         onChange={(e) => setSearchKey(e)}
         content={
           (results.length || searchKey) && (
diff --git a/libs/templates/src/lib/home/sections/account-section/data.tsx b/libs/templates/src/lib/home/sections/account-section/data.tsx
index b1771ffe1..d9c91e3ae 100644
--- a/libs/templates/src/lib/home/sections/account-section/data.tsx
+++ b/libs/templates/src/lib/home/sections/account-section/data.tsx
@@ -8,7 +8,7 @@ export const TableData: TableContent = {
   description:
     'Direct market access with fast order execution and no dealing desk intervention.',
   cta: (
-    <Button variant="secondary" className="w-1/2">
+    <Button variant="secondary" colorStyle="black" size="lg" className="w-1/2">
       Get this account
     </Button>
   ),
diff --git a/libs/templates/src/lib/home/sections/cta/data.tsx b/libs/templates/src/lib/home/sections/cta/data.tsx
index 97148e609..e9b0542fc 100644
--- a/libs/templates/src/lib/home/sections/cta/data.tsx
+++ b/libs/templates/src/lib/home/sections/cta/data.tsx
@@ -23,7 +23,7 @@ export const CTABlockContent = () => {
       }
     >
       <Button
-        colorStyle="black"
+        colorStyle="coral"
         className="lg:mt-general-xl"
         size="lg"
         onClick={() => scrollTop()}
diff --git a/libs/templates/src/lib/home/sections/hero/data.tsx b/libs/templates/src/lib/home/sections/hero/data.tsx
index abafb5249..0abc56320 100644
--- a/libs/templates/src/lib/home/sections/hero/data.tsx
+++ b/libs/templates/src/lib/home/sections/hero/data.tsx
@@ -5,12 +5,16 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 // @ts-ignore
 import { Autoplay, EffectFade } from 'swiper';
 import { ReactNode } from 'react';
-import { Button, FluidContainer, Text } from '@deriv/quill-design';
 import {
-  SocialAppleIcon,
-  SocialFacebookIcon,
-  SocialGoogleIcon,
-} from '@deriv/quill-icons/Social';
+  Button,
+  FacebookSocialButton,
+  FluidContainer,
+  SocialAppleButton,
+  SocialGoogleButton,
+  Text,
+  TextField,
+  useScreen,
+} from '@deriv/quill-design';
 
 export const heroItems: { key: string; image: ReactNode }[] = [
   {
@@ -69,46 +73,29 @@ export const renderHomeHeroSliderContent = () => (
 
 export const HomeHeroForm = () => {
   return (
-    <FluidContainer className={`flex flex-col gap-general-lg pr-general-3xl`}>
-      <div className="flex flex-col justify-between gap-gap-lg md:flex-row">
-        <input
-          placeholder="This component is not styled yet"
-          className="rounded-2xl border-300 border-solid-red-600"
-        />
+    <div className={`flex flex-col gap-general-lg`}>
+      <div className="flex flex-col items-center justify-between gap-gap-lg md:flex-row">
+        <TextField placeholder="Email Address" type="email" />
         <Button size="lg" fullWidth>
-          Create a demo account
+          Open demo account
         </Button>
       </div>
       <Text>or sign up with</Text>
-      <div className="flex flex-row items-center justify-between gap-general-sm">
-        <Button
-          renderLeftIcon={() => <SocialGoogleIcon iconSize="sm" />}
-          variant="tertiary"
-          colorStyle="black"
-          fullWidth
-          className="rounded-800 border-75 border-solid-slate-300"
-        >
-          Google
-        </Button>
-        <Button
-          renderLeftIcon={() => <SocialFacebookIcon iconSize="sm" />}
-          variant="tertiary"
-          colorStyle="black"
-          fullWidth
-          className="rounded-800 border-75 border-solid-slate-300"
-        >
-          Facebook
-        </Button>
-        <Button
-          renderLeftIcon={() => <SocialAppleIcon iconSize="sm" />}
-          variant="tertiary"
-          colorStyle="black"
+      <div className="flex flex-row items-center justify-between gap-general-sm sm:hidden">
+        <SocialGoogleButton variant="secondary" fullWidth size="lg" hideLabel />
+        <FacebookSocialButton
+          variant="secondary"
           fullWidth
-          className="rounded-800 border-75 border-solid-slate-300"
-        >
-          Apple
-        </Button>
+          size="lg"
+          hideLabel
+        />
+        <SocialAppleButton variant="secondary" fullWidth size="lg" hideLabel />
+      </div>
+      <div className="hidden flex-row items-center justify-between gap-general-sm sm:flex">
+        <SocialGoogleButton variant="secondary" fullWidth size="lg" />
+        <FacebookSocialButton variant="secondary" fullWidth size="lg" />
+        <SocialAppleButton variant="secondary" fullWidth size="lg" />
       </div>
-    </FluidContainer>
+    </div>
   );
 };
diff --git a/libs/templates/src/lib/trade/table/trading-spec-table.tsx b/libs/templates/src/lib/trade/table/trading-spec-table.tsx
index 3a55a66ee..aec072972 100644
--- a/libs/templates/src/lib/trade/table/trading-spec-table.tsx
+++ b/libs/templates/src/lib/trade/table/trading-spec-table.tsx
@@ -9,7 +9,14 @@ import {
   getPaginationRowModel,
 } from '@tanstack/react-table';
 import UseColumns from '../hooks/use-columns';
-import { Button, qtMerge, Section, Text } from '@deriv/quill-design';
+import {
+  Button,
+  Chip,
+  qtMerge,
+  SearchField,
+  Section,
+  Text,
+} from '@deriv/quill-design';
 import {
   StandaloneChevronLeftRegularIcon,
   StandaloneChevronRightRegularIcon,
@@ -18,7 +25,6 @@ import {
   StandaloneXmarkBoldIcon,
 } from '@deriv/quill-icons/Standalone';
 import { LabelPairedEllipsisVerticalBoldIcon } from '@deriv/quill-icons/LabelPaired';
-import { SearchChip } from '@deriv-com/components';
 import { BottomSheet } from '@deriv-com/components';
 import clsx from 'clsx';
 
@@ -73,11 +79,12 @@ const TradingSpecTable = () => {
           className="w-[323px] md:w-[340px] lg:w-[360px]"
           onSubmit={() => handleSubmit}
         >
-          <SearchChip
-            onChange={(i) => setSearchValue(i)}
+          <SearchField
+            inputSize="sm"
+            onChange={(i) => setSearchValue(i.target.value)}
+            type="text"
             value={searchValue}
             placeholder="Search"
-            size="sm"
           />
         </form>
 
@@ -91,48 +98,30 @@ const TradingSpecTable = () => {
             }}
           />
 
-          <Button
-            className={qtMerge(
-              'hidden md:block lg:block',
-              selectedInfo === 'mainInfo'
-                ? 'bg-solid-slate-1400'
-                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
-            )}
+          <Chip.Selectable
             onClick={() => {
               setSelectedFilter(mainInfo.data);
               setSelectedInfo('mainInfo');
             }}
           >
-            Main info
-          </Button>
-          <Button
-            className={qtMerge(
-              'hidden md:block lg:block',
-              selectedInfo === 'tradingCondition'
-                ? 'bg-solid-slate-1400'
-                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
-            )}
+            Main Info
+          </Chip.Selectable>
+          <Chip.Selectable
             onClick={() => {
               setSelectedFilter(tradingCondition.data);
               setSelectedInfo('tradingCondition');
             }}
           >
             Trading conditions
-          </Button>
-          <Button
-            className={qtMerge(
-              'hidden md:block lg:block',
-              selectedInfo === 'additionalInfo'
-                ? 'bg-solid-slate-1400'
-                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
-            )}
+          </Chip.Selectable>
+          <Chip.Selectable
             onClick={() => {
               setSelectedFilter(additionalInfo.data);
               setSelectedInfo('additionalInfo');
             }}
           >
             Additional info
-          </Button>
+          </Chip.Selectable>
         </div>
       </div>
       <table
@@ -219,7 +208,7 @@ const TradingSpecTable = () => {
       )}
       <div className="flex justify-center pt-general-xl md:pt-general-2xl lg:pt-general-2xl">
         <Button
-          colorStyle="black"
+          colorStyle="coral"
           size="lg"
           className={qtMerge('px-general-md py-600 font-sans')}
         >
diff --git a/libs/templates/src/lib/who-we-are/sections/our-principles/index.tsx b/libs/templates/src/lib/who-we-are/sections/our-principles/index.tsx
index 3c2dcfbb4..19aa9e50a 100644
--- a/libs/templates/src/lib/who-we-are/sections/our-principles/index.tsx
+++ b/libs/templates/src/lib/who-we-are/sections/our-principles/index.tsx
@@ -45,7 +45,7 @@ export const WhoWeArePrinciples = () => {
       variant="ContentBottom"
       cards={ourPrinciplesCards}
       cta={
-        <Button size="lg" colorStyle="black">
+        <Button size="lg" colorStyle="coral">
           Learn more about our principles
         </Button>
       }
diff --git a/package-lock.json b/package-lock.json
index 493042624..49d4f9842 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
-        "@deriv/quill-design": "^1.0.31",
-        "@deriv/quill-icons": "^1.0.9",
+        "@deriv/quill-design": "^1.1.7",
+        "@deriv/quill-icons": "^1.0.10",
         "@nx/next": "16.8.1",
         "@react-hook/window-size": "^3.1.1",
         "@swc/helpers": "~0.5.0",
@@ -2542,13 +2542,14 @@
       }
     },
     "node_modules/@deriv/quill-design": {
-      "version": "1.0.31",
-      "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.0.31.tgz",
-      "integrity": "sha512-nwCbpPQge8D6kXrC6Gw8V/RV4uFV0GQ70y8oqJk6I40ZeUunpsYOX7poVZVboYsm4FjYxAh7Ft9DJjGaYlVTSw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.1.7.tgz",
+      "integrity": "sha512-Hp1QL+N0lmJxhwm0f+ZLU+ds5nhAyISA7iL00mMdek/a/SwDlrigRtP1GAVUIxXmbWRvtuTYI9DA9GVVIK1RVQ==",
       "peerDependencies": {
-        "@deriv/quill-icons": "^1.0.9",
+        "@deriv/quill-icons": "^1.0.10",
         "@headlessui/react": "^1.7.17",
         "@types/react": "^17.x || ^18.x",
+        "@use-gesture/react": "^10.3.0",
         "class-variance-authority": "^0.7.0",
         "react": "^17.x || ^18.x",
         "react-dom": "^17.x || ^18.x",
@@ -2557,9 +2558,9 @@
       }
     },
     "node_modules/@deriv/quill-icons": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.0.9.tgz",
-      "integrity": "sha512-BqC5/u1kwVSscRmboiKNHadeNmNaMT6etBqeLADJ9881vlmirzLhEhY5igSrPUaflyyEPpUNTamDBMUm9DKxww==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.0.10.tgz",
+      "integrity": "sha512-1/YCK2iqw9YQzpoFjHGhFfDFmJaJRu7xS+J+Kg90JIuZIfAVNXjFDzEExaG+/g3Yf1lQAVIzRfCso5ra8VOuag==",
       "peerDependencies": {
         "react": ">= 16",
         "react-dom": ">= 16"
@@ -12860,6 +12861,24 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.0.tgz",
+      "integrity": "sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A==",
+      "peer": true
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.0.tgz",
+      "integrity": "sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==",
+      "peer": true,
+      "dependencies": {
+        "@use-gesture/core": "10.3.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.0.4.tgz",
diff --git a/package.json b/package.json
index de378fd5b..877973b10 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
   },
   "private": true,
   "dependencies": {
-    "@deriv/quill-design": "^1.0.31",
-    "@deriv/quill-icons": "^1.0.9",
+    "@deriv/quill-design": "^1.1.7",
+    "@deriv/quill-icons": "^1.0.10",
     "@nx/next": "16.8.1",
     "@react-hook/window-size": "^3.1.1",
     "@swc/helpers": "~0.5.0",

From b05a7fe8e27a90cdcb73808e5b7d6aef2643e54e Mon Sep 17 00:00:00 2001
From: Michio <mohsen@regentmarkets.com>
Date: Mon, 13 Nov 2023 20:21:16 +0800
Subject: [PATCH 2/3] chore: renamed useScreen to useBreakpoints

---
 apps/deriv-hk/pages/_app.tsx                              | 6 +++---
 libs/components/src/lib/card/base/index.tsx               | 4 ++--
 .../src/lib/help-center/sections/search/components.tsx    | 2 +-
 libs/templates/src/lib/home/sections/hero/data.tsx        | 2 --
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 6 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/deriv-hk/pages/_app.tsx b/apps/deriv-hk/pages/_app.tsx
index eae71c486..971d7e30c 100644
--- a/apps/deriv-hk/pages/_app.tsx
+++ b/apps/deriv-hk/pages/_app.tsx
@@ -1,16 +1,16 @@
 import { AppProps } from 'next/app';
 import '../styles.css';
-import { ScreenProvider, ThemeProvider } from '@deriv/quill-design';
+import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design';
 import { BuildVariantProvider } from '@deriv-com/providers';
 
 function CustomApp({ Component, pageProps }: AppProps) {
   return (
     <BuildVariantProvider buildVariant="hk">
-      <ScreenProvider>
+      <BreakpointProvider>
         <ThemeProvider theme="light">
           <Component {...pageProps} />
         </ThemeProvider>
-      </ScreenProvider>
+      </BreakpointProvider>
     </BuildVariantProvider>
   );
 }
diff --git a/libs/components/src/lib/card/base/index.tsx b/libs/components/src/lib/card/base/index.tsx
index e66c587b0..ab6c34d4f 100644
--- a/libs/components/src/lib/card/base/index.tsx
+++ b/libs/components/src/lib/card/base/index.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text, TextSize, qtMerge } from '@deriv/quill-design';
+import { Heading, Text, qtMerge } from '@deriv/quill-design';
 import clsx from 'clsx';
 import { CardContent } from '../types';
 import CustomLink, { textSize } from '../../link';
@@ -42,7 +42,7 @@ const sizeVariantTextGap = {
   lg: 'gap-gap-xl',
 };
 
-const textSizeVariant: { [key: string]: TextSize } = {
+const textSizeVariant: { [key: string]: 'sm' | 'md' | 'lg' } = {
   sm: 'md',
   md: 'lg',
   lg: 'lg',
diff --git a/libs/templates/src/lib/help-center/sections/search/components.tsx b/libs/templates/src/lib/help-center/sections/search/components.tsx
index a0d71d7ee..40d30c03e 100644
--- a/libs/templates/src/lib/help-center/sections/search/components.tsx
+++ b/libs/templates/src/lib/help-center/sections/search/components.tsx
@@ -1,5 +1,5 @@
 import { CustomLink, CustomLinkProps } from '@deriv-com/components';
-import { BodyTypographyProps, Text, qtMerge } from '@deriv/quill-design';
+import { Text, qtMerge, BodyTypographyProps } from '@deriv/quill-design';
 import { PropsWithChildren, ReactNode } from 'react';
 
 //todo: removed [slugify] from utils/../utils and added here. we need to update this because we are using this on multiple places
diff --git a/libs/templates/src/lib/home/sections/hero/data.tsx b/libs/templates/src/lib/home/sections/hero/data.tsx
index 0abc56320..4ed4d432b 100644
--- a/libs/templates/src/lib/home/sections/hero/data.tsx
+++ b/libs/templates/src/lib/home/sections/hero/data.tsx
@@ -8,12 +8,10 @@ import { ReactNode } from 'react';
 import {
   Button,
   FacebookSocialButton,
-  FluidContainer,
   SocialAppleButton,
   SocialGoogleButton,
   Text,
   TextField,
-  useScreen,
 } from '@deriv/quill-design';
 
 export const heroItems: { key: string; image: ReactNode }[] = [
diff --git a/package-lock.json b/package-lock.json
index 49d4f9842..f9f1fc44b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
-        "@deriv/quill-design": "^1.1.7",
+        "@deriv/quill-design": "^1.1.8",
         "@deriv/quill-icons": "^1.0.10",
         "@nx/next": "16.8.1",
         "@react-hook/window-size": "^3.1.1",
@@ -2542,9 +2542,9 @@
       }
     },
     "node_modules/@deriv/quill-design": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.1.7.tgz",
-      "integrity": "sha512-Hp1QL+N0lmJxhwm0f+ZLU+ds5nhAyISA7iL00mMdek/a/SwDlrigRtP1GAVUIxXmbWRvtuTYI9DA9GVVIK1RVQ==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.1.8.tgz",
+      "integrity": "sha512-Kne5vghPcFxvMnKisINSJ7mWbdJwlfi/Xk7fVr81Vmw0Y3uTPQEi1T0hdQ3o6fBv9lQRKRYjmPCdaxT8fCP21A==",
       "peerDependencies": {
         "@deriv/quill-icons": "^1.0.10",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index 877973b10..c78a75647 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   },
   "private": true,
   "dependencies": {
-    "@deriv/quill-design": "^1.1.7",
+    "@deriv/quill-design": "^1.1.8",
     "@deriv/quill-icons": "^1.0.10",
     "@nx/next": "16.8.1",
     "@react-hook/window-size": "^3.1.1",

From a53610bc5dd134629947f1efa87bcf717a4a79ab Mon Sep 17 00:00:00 2001
From: Michio <mohsen@regentmarkets.com>
Date: Mon, 13 Nov 2023 20:37:33 +0800
Subject: [PATCH 3/3] chore: fixed qoute usage

---
 libs/templates/src/lib/home/sections/hero/data.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/templates/src/lib/home/sections/hero/data.tsx b/libs/templates/src/lib/home/sections/hero/data.tsx
index 4ed4d432b..7e28c6b10 100644
--- a/libs/templates/src/lib/home/sections/hero/data.tsx
+++ b/libs/templates/src/lib/home/sections/hero/data.tsx
@@ -71,7 +71,7 @@ export const renderHomeHeroSliderContent = () => (
 
 export const HomeHeroForm = () => {
   return (
-    <div className={`flex flex-col gap-general-lg`}>
+    <div className={'flex flex-col gap-general-lg'}>
       <div className="flex flex-col items-center justify-between gap-gap-lg md:flex-row">
         <TextField placeholder="Email Address" type="email" />
         <Button size="lg" fullWidth>