@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-6

package/raw/misc/theme.ts

@@ -0,0 +1,186 @@
+export const theme = {
+  colors: {
+    primaryBase: '#2d87f3',
+    primaryHover: '#2c74df',
+    primaryActive: '#2b62cd',
+    primaryVisited: '#5e38ba',
+
+    secondaryBase: '#284a75',
+    secondaryDark: '#1b3250',
+
+    accentLight: '#b1ebf8',
+    accentMain: '#00AECD',
+
+    success: '#00b16a',
+    error: '#f71210',
+
+    gray100: '#f2f2f2',
+    gray200: '#d9d9d9',
+    gray300: '#bfbfbf',
+    gray400: '#8c8c8c',
+    gray500: '#737373',
+    gray600: '#595959',
+    gray800: '#262626',
+
+    blue50: '#e3f2ff',
+    blue100: '#bcdeff',
+    blue200: '#91caff',
+    blue300: '#65b5ff',
+    blue400: '#45a4ff',
+    blue500: '#2b94ff',
+    blue600: '#2d87f3',
+    blue700: '#2c74df',
+    blue800: '#2b62cd',
+    blue900: '#2743ad',
+
+    alertWarning: '#fe921d',
+
+    green50: '#e0f8ee',
+    green100: '#b3eed5',
+    green200: '#7ce2b9',
+    green300: '#2ed69e',
+    green400: '#00CB8A',
+    green500: '#00C076',
+    green600: '#00B16A',
+    green700: '#009E5C',
+    green800: '#008C50',
+    green900: '#006C39',
+
+    yellow50: '#fff8e2',
+    yellow100: '#ffecb6',
+    yellow200: '#ffe187',
+    yellow300: '#ffd658',
+    yellow400: '#ffc326',
+    yellow500: '#fe921d',
+    yellow600: '#ffb521',
+    yellow700: '#fea21e',
+    yellow800: '#fe921d',
+    yellow900: '#fc7419',
+
+    red50: '#fae9e8',
+    red100: '#feccbf',
+    red200: '#ff5331',
+    red300: '#f44d2c',
+    red400: '#ff6f4d',
+    red500: '#ff5331',
+    red600: '#f44d2c',
+    red700: '#e64728',
+    red800: '#d84023',
+    red900: '#bf331b',
+
+    neutral50: '#f8f9fc',
+    neutral100: '#e4e8ec',
+    neutral150: '#fafafa',
+    neutral200: '#d2d6dc',
+    neutral300: '#bfc5cc',
+    neutral400: '#adb3bc',
+    neutral500: '#9aa2ac',
+    neutral600: '#87909c',
+    neutral700: '#757f8c',
+    neutral800: '#626d7c',
+
+    teal50: '#e0f7fc',
+    teal100: '#b1ebf8',
+    teal200: '#7ddff3',
+    teal300: '#44d1ec',
+    teal400: '#00c7e6',
+    teal500: '#00bee0',
+    teal600: '#00aecd',
+    teal700: '#0099b2',
+    teal800: '#008599',
+    teal900: '#00626c',
+
+    pink50: '#fff1f6',
+    pink100: '#fec7dc',
+    pink200: '#fec7dc',
+    pink300: '#fec2cf',
+    pink400: '#fe9dc2',
+    pink500: '#fd87b4',
+    pink600: '#fd72a7',
+    pink700: '#fc5d9a',
+    pink800: '#fc488d',
+
+    violet50: '#f5edff',
+    violet100: '#e7d2f7',
+    violet200: '#d8b7f0',
+    violet300: '#ca9ce8',
+    violet400: '#bb82e1',
+    violet500: '#ad67d9',
+    violet600: '#9e4cd1',
+    violet700: '#9031ca',
+    violet800: '#8116c2',
+
+    indigo700: '#35639c',
+    indigo800: '#284a75',
+    indigo900: '#1b3250',
+
+    brown50: '#faecde',
+    brown100: '#ecd8c5',
+    brown200: '#dec5ab',
+    brown300: '#d0b192',
+    brown400: '#c39d79',
+    brown500: '#b5895f',
+    brown600: '#a77646',
+    brown700: '#99622c',
+    brown800: '#8b4e13',
+
+    white: '#fff',
+  },
+
+  mbColors: {
+    pink: '#e85388',
+    cobalt: '#2661ad',
+
+    dark: '#202135',
+    gray: '#3e3f58',
+    midGray: '#9495a0',
+    lightGray: '#f3f3f3',
+
+    lightMint: '#f2fcf8',
+    lightPink: '#ffeaf1',
+    lightOrange: '#fffaeb',
+    lightBlue: '#e0e9fc',
+    mint: '#5ec08f',
+    peach: '#ffaaa9',
+    orange: '#fb8c00',
+    ceruleanBlue: '#b6ceff',
+
+    red: '#eb5757',
+    lightRed: '#fdeeee',
+    yellow: '#ff8a2b',
+    green: '#f2fcf7',
+    blue: '#4096fe',
+
+    toneYellow: '#fff9eb',
+    toneGreen: '#f2fcf7',
+    toneBlue: '#e0e9fb',
+    tonePink: '#ffeaf1',
+  },
+
+  sizes: {
+    fwBold: '700',
+    fwSemiBold: '600',
+    fsCaption2: '13px',
+    fsHeading1: '40px',
+    fsHeading2: '28px',
+    fsHeading4: '24px',
+    fsHeading5: '18px',
+    fsHeading6: '16px',
+    fsParagraph3: '16px',
+    fsParagraph4: '14px',
+    fwRegular: '400',
+  },
+  zIndexes: {
+    belowHeader: '1',
+    zIndex100: '100',
+    onTop: '1000',
+  },
+
+  defaultColor: '',
+}
+
+export type ThemeType = typeof theme
+
+export type ThemeProps = {
+  theme: ThemeType
+}

package/raw/misc/utils.ts

@@ -0,0 +1,214 @@
+import { css } from 'styled-components'
+const BREAK_POINT = 768
+const BREAK_POINT_TABLET = 1024
+
+const logDeprecate = {
+  spLayout: false,
+  pcLayout: false,
+  tdLayout: false,
+  mbLayout: false,
+}
+
+/**
+ * The breakpoint for smartphone devices less than 768.
+ * @example
+ *  ${(props: ThemeProps) => spLayout()`
+ *    color: ${props.theme.colors.neutral100};
+ *  `}
+ * @example
+ *  ${spLayout()`
+ *    color: ${(props) => props.theme.colors.neutral100};
+ *  `}
+ */
+
+export const spLayout = () => {
+  if (!logDeprecate.spLayout) {
+    console.error('spLayout is deprecated. Use `MediaQueries.mbDown` instead.')
+    logDeprecate.spLayout = true
+  }
+  return (style: TemplateStringsArray, ...exps) => css`
+    @media (max-width: ${BREAK_POINT - 1}px) {
+      ${css(style, ...exps)};
+    }
+  `
+}
+
+/**
+ * The breakpoint for mobile and tablet devices less than 1024
+ * @example
+ *  ${(props: ThemeProps) => mbLayout()`
+ *    color: ${props.theme.colors.neutral100};
+ *  `}
+ * @example
+ *  ${mbLayout()`
+ *    color: ${(props) => props.theme.colors.neutral100};
+ *  `}
+ */
+export const mbLayout = () => {
+  if (!logDeprecate.mbLayout) {
+    console.error('mbLayout is deprecated. Use `MediaQueries.tdDown` instead.')
+    logDeprecate.mbLayout = true
+  }
+  return (style: TemplateStringsArray, ...exps) => css`
+    @media (max-width: ${BREAK_POINT_TABLET - 1}px) {
+      ${css(style, ...exps)};
+    }
+  `
+}
+
+/**
+ * The breakpoint for tablet devices only between 768 and 1024
+ * @example
+ *  ${(props: ThemeProps) => tdLayout()`
+ *    color: ${props.theme.colors.neutral100};
+ *  `}
+ * @example
+ *  ${tdLayout()`
+ *    color: ${(props) => props.theme.colors.neutral100};
+ *  `}
+ */
+export const tdLayout = () => {
+  if (!logDeprecate.tdLayout) {
+    console.error('tdLayout is deprecated. Use `MediaQueries.tdOnly` instead.')
+    logDeprecate.tdLayout = true
+  }
+  return (style: TemplateStringsArray, ...exps) => css`
+    @media (min-width: ${BREAK_POINT}px) and (max-width: ${BREAK_POINT_TABLET - 1}px) {
+      ${css(style, ...exps)};
+    }
+  `
+}
+
+/**
+ * The breakpoint for pc/laptop devices greater than or equal 1024.
+ * @example
+ *  ${(props: ThemeProps) => pcLayout()`
+ *    color: ${props.theme.colors.neutral100};
+ *  `}
+ * @example
+ *  ${pcLayout()`
+ *    color: ${(props) => props.theme.colors.neutral100};
+ *  `}
+ */
+export const pcLayout = (useBreakpointMobile?: boolean) => {
+  if (!logDeprecate.pcLayout) {
+    console.error('pcLayout is deprecated. if pcLayout(true) use `MediaQueries.mbUp`. If pcLayout() use `MediaQueries.tdUp`.')
+    logDeprecate.pcLayout = true
+  }
+  return (style: TemplateStringsArray, ...exps) => css`
+    @media (min-width: ${useBreakpointMobile ? BREAK_POINT : BREAK_POINT_TABLET}px) {
+      ${css(style, ...exps)};
+    }
+  `
+}
+
+export const makeParams = (params: Record<string, string>): string => {
+  const paramKeys = Object.keys(params)
+  if (!paramKeys.length) {
+    return ''
+  }
+  return '?' + paramKeys.map((k: string) => `${k}=${params[k]}`).join('&')
+}
+
+export const formatUrlWithPageParam = (
+  path: string,
+  page = 1,
+  queryPageName = 'page',
+) => {
+  const [urlPart, queryPart] = path.split('?')
+  const urlObj = new URLSearchParams(queryPart || '')
+  const params: Record<string, string> = {}
+
+  urlObj.forEach((val, key) => {
+    if (val) {
+      params[key] = val
+    }
+  })
+
+  if (Number(page) > 1) {
+    params[queryPageName] = String(page) // Default is params.page
+  } else {
+    // Do not display "page=1" on the URL
+    delete params[queryPageName] // Default is params.page
+  }
+
+  return urlPart + makeParams(params)
+}
+
+export const toggleNoScroll = (isNoScroll?: boolean) => {
+  if (typeof window !== 'undefined') {
+    document.documentElement.classList.toggle('noscroll', isNoScroll)
+    document.body.classList.toggle('noscroll', isNoScroll)
+  }
+}
+
+export const Breakpoints = {
+  BREAK_POINT_SMALL_MOBILE: 481,
+  BREAK_POINT_MOBILE: 768,
+  BREAK_POINT_TABLET: 1024,
+  BREAK_POINT_PC: 1200,
+}
+
+/**
+ * List of mediaQueries to use in StyledComponents
+ * New naming convention base around breakpoints
+*
+ * Note: smb = small mobile; mb = mobile; td = tablet device; pc = pc/laptop device
+ *
+ * smbDown: BREAK_POINT_SMALL_MOBILE go down.
+ * smbUp: BREAK_POINT_SMALL_MOBILE go up
+ *
+ * mbDown: REPLACE spLayout. BREAK_POINT_MOBILE go down.
+ * mbOnly: from BREAK_POINT_SMALL_MOBILE to BREAK_POINT_MOBILE
+ * mbUp: REPLACE pcLayout(true). BREAK_POINT_MOBILE go up
+ *
+ * tdDown: REPLACE mbLayout. BREAK_POINT_TABLET go down
+ * tdOnly: REPLACE tdLayout. from BREAK_POINT_MOBILE to BREAK_POINT_TABLET
+ * tdUp: REPLACE pcLayout(). BREAK_POINT_TABLET go up
+ *
+ * pcDown: BREAK_POINT_PC go down
+ * pcOnly: from BREAK_POINT_TABLET to BREAK_POINT_PC
+ * pcUp: BREAK_POINT_PC go up
+ *
+ * @example
+ *  ${MediaQueries.mbDown} {
+ *    color: ${(props) => props.theme.colors.neutral100 }};
+ *  }
+ */
+export const MediaQueries = {
+  smbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE - 1}px)`,
+  smbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px)`,
+
+  mbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
+  mbOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
+  mbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px)`,
+  
+  tdDown: `@media (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
+  tdOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE
+    }px) and (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
+  tdUp: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px)`,
+  
+  pcUp: `@media (min-width: ${Breakpoints.BREAK_POINT_PC}px)`,
+  pcOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px) and (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
+  pcDown: `@media (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
+}
+
+export const getBoundariesFromMediaQueryKey = (key?: keyof typeof MediaQueries) => {
+  // zero mean not set
+  switch(key) {
+    case 'smbDown': return [0, Breakpoints.BREAK_POINT_SMALL_MOBILE - 1]
+    case 'smbUp': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, 0]
+
+    case 'mbDown': return [0, Breakpoints.BREAK_POINT_MOBILE - 1]
+    case 'mbOnly': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, Breakpoints.BREAK_POINT_MOBILE - 1]
+    case 'mbUp': return [Breakpoints.BREAK_POINT_MOBILE, 0]
+
+    case 'tdDown': return [0, Breakpoints.BREAK_POINT_TABLET - 1]
+    case 'tdOnly': return [Breakpoints.BREAK_POINT_MOBILE, Breakpoints.BREAK_POINT_TABLET - 1]
+    case 'tdUp': return [Breakpoints.BREAK_POINT_TABLET, 0]
+
+    case 'pcUp': return [Breakpoints.BREAK_POINT_PC, 0]
+    case 'pcOnly': return [Breakpoints.BREAK_POINT_TABLET, Breakpoints.BREAK_POINT_PC - 1]
+    case 'pcDown': return [0, Breakpoints.BREAK_POINT_PC - 1]
+  }
+}

package/raw/src/assets/svg/Spotlight.svg

@@ -0,0 +1,12 @@
+<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="19.2" width="44.8" height="44.8" rx="22.4" fill="#FFF8E2"/>
+<path d="M39.975 28.11h9.626v28.07a3.11 3.11 0 01-3.115 3.115c-1.72 0-6.51-1.394-6.51-3.115" fill="#45A4FF"/>
+<path d="M46.486 59.295H14.058a3.114 3.114 0 01-3.113-3.115v-3.336l23.66-35.635L40.256 16a3.11 3.11 0 013.115 3.115V56.18a3.114 3.114 0 003.114 3.115z" fill="#BCDEFF"/>
+<path d="M37.142 52.388V19.115A3.115 3.115 0 0140.257 16H4.715A3.114 3.114 0 001.6 19.115v33.73h35.542" fill="#E3F2FF"/>
+<path d="M5.698 21.357h11.077v8.767H5.698v-8.767z" fill="#FFF8E2"/>
+<path d="M16.776 30.848H5.698a.724.724 0 01-.724-.724v-8.768c0-.4.324-.724.724-.724h11.078c.4 0 .724.324.724.724v8.767c0 .4-.325.725-.724.725zM6.423 29.399h9.628v-7.318H6.423v7.318z" fill="#FE921D"/>
+<path d="M21.777 34.507h11.077v8.767H21.777v-8.767z" fill="#E0F8EE"/>
+<path d="M16.776 35.231H5.698a.724.724 0 010-1.449h11.078a.724.724 0 010 1.45zM16.776 39.615H5.698a.724.724 0 010-1.448h11.078a.724.724 0 010 1.448zM16.776 43.999H5.698a.724.724 0 010-1.449h11.078a.724.724 0 010 1.449zM16.776 48.382H5.698a.724.724 0 010-1.448h11.078a.724.724 0 010 1.448zM32.854 22.08H21.777a.724.724 0 010-1.448h11.077a.724.724 0 110 1.449zM32.854 26.465H21.777a.724.724 0 010-1.449h11.077a.724.724 0 110 1.449zM32.854 30.848H21.777a.724.724 0 010-1.449h11.077a.724.724 0 110 1.449z" fill="#1B3250"/>
+<path d="M32.854 43.999H21.777a.724.724 0 01-.724-.724v-8.767c0-.4.324-.725.724-.725h11.077c.4 0 .725.325.725.724v8.768c0 .4-.325.724-.725.724zM22.501 42.55h9.629v-7.318h-9.629v7.318z" fill="#008C50"/>
+<path d="M32.854 48.382H21.777a.724.724 0 010-1.448h11.077a.724.724 0 110 1.448z" fill="#1B3250"/>
+</svg>

package/raw/src/assets/svg/StarEmptyIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const StarEmptyIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.0002 23.0266L22.8935 27.1866C23.4002 27.4933 24.0268 27.04 23.8935 26.4666L22.0668 18.6266L28.1468 13.36C28.5868 12.9733 28.3602 12.24 27.7602 12.1866L19.7468 11.5066L16.6135 4.11996C16.3868 3.57329 15.6135 3.57329 15.3868 4.11996L12.2535 11.5066L4.24016 12.1866C3.65349 12.24 3.41349 12.9733 3.86682 13.36L9.94682 18.6266L8.12016 26.4666C7.98682 27.04 8.61349 27.4933 9.12016 27.1866L16.0002 23.0266Z"
+        fill="#D2D6DC"
+      />
+    </svg>
+  )
+}
+
+export default StarEmptyIcon

package/raw/src/assets/svg/StarFullIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const StarEmptyIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.0002 23.0266L22.8935 27.1866C23.4002 27.4933 24.0268 27.04 23.8935 26.4666L22.0668 18.6266L28.1468 13.36C28.5868 12.9733 28.3602 12.24 27.7602 12.1866L19.7468 11.5066L16.6135 4.11996C16.3868 3.57329 15.6135 3.57329 15.3868 4.11996L12.2535 11.5066L4.24016 12.1866C3.65349 12.24 3.41349 12.9733 3.86682 13.36L9.94682 18.6266L8.12016 26.4666C7.98682 27.04 8.61349 27.4933 9.12016 27.1866L16.0002 23.0266Z"
+        fill="#FFC326"
+      />
+    </svg>
+  )
+}
+
+export default StarEmptyIcon

package/raw/src/assets/svg/StarHalfIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+const StarEmptyIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.0001 17.2697L17.1701 20.3897C17.5501 20.6197 18.0201 20.2797 17.9201 19.8497L16.5501 13.9697L21.1101 10.0197C21.4401 9.72973 21.2701 9.17973 20.8201 9.13973L14.8101 8.62973L12.4601 3.08973C12.2901 2.67973 11.7101 2.67973 11.5401 3.08973L9.19006 8.62973L3.18006 9.13973C2.74006 9.17973 2.56006 9.72973 2.90006 10.0197L7.46006 13.9697L6.09006 19.8497C5.99006 20.2797 6.46006 20.6197 6.84006 20.3897L12.0001 17.2697Z"
+        fill="#E4E8EC"
+      />
+      <mask
+        id="mask0_3555_5815"
+        maskUnits="userSpaceOnUse"
+        x="2"
+        y="0"
+        width="10"
+        height="24"
+      >
+        <rect x="2" width="10" height="24" fill="#C4C4C4" />
+      </mask>
+      <g mask="url(#mask0_3555_5815)">
+        <path
+          d="M11.9998 17.2697L17.1698 20.3897C17.5498 20.6197 18.0198 20.2797 17.9198 19.8497L16.5498 13.9697L21.1098 10.0197C21.4398 9.72973 21.2698 9.17973 20.8198 9.13973L14.8098 8.62973L12.4598 3.08973C12.2898 2.67973 11.7098 2.67973 11.5398 3.08973L9.18981 8.62973L3.17981 9.13973C2.73981 9.17973 2.55981 9.72973 2.89981 10.0197L7.45981 13.9697L6.08981 19.8497C5.98981 20.2797 6.45981 20.6197 6.83981 20.3897L11.9998 17.2697Z"
+          fill="#FFC326"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default StarEmptyIcon

package/raw/src/assets/svg/arrowDoor.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 101 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.3281 2.93067V85.3526C69.3281 86.9929 68.0395 88.2823 66.3985 88.2823H42.9609C41.3199 88.2823 40.0313 86.9929 40.0313 85.3526L4.875 2.93067C4.875 1.28958 6.1636 0.000976562 7.80469 0.000976562H66.3985C68.0395 0.000976562 69.3281 1.28958 69.3281 2.93067Z" fill="#284A75"/>
+<path d="M69.3281 2.93067V85.3526C69.3281 86.9929 68.0395 88.2823 66.3984 88.2823H42.9609C41.3199 88.2823 40.0312 86.9929 40.0312 85.3526L31.2422 64.8447V0.000976562H66.3984C68.0395 0.000976562 69.3281 1.28958 69.3281 2.93067Z" fill="#1B3250"/>
+<path d="M44.2496 17.8727L9.09329 0.294542C8.21515 -0.115919 7.10126 -0.115919 6.2811 0.412035C5.40219 0.99721 4.875 1.93486 4.875 2.93126V85.3531C4.875 86.6418 5.69516 87.7556 6.86704 88.1066L31.2422 96.2517L42.0233 99.8253C42.8862 100.171 43.9917 99.9756 44.66 99.4744C45.4222 98.8885 45.8906 98.0096 45.8906 97.0719V20.5094C45.8906 19.3963 45.246 18.3999 44.2496 17.8727Z" fill="#2B94FF"/>
+<path d="M45.8906 20.5089V97.0714C45.8906 98.0091 45.4214 98.888 44.66 99.4739C43.9978 99.9706 42.8946 100.174 42.0233 99.8249L31.2422 96.2513V11.3682L44.2495 17.8722C45.2459 18.3994 45.8906 19.3958 45.8906 20.5089Z" fill="#2D87F3"/>
+<path d="M76.7355 64.4988C75.7826 63.9899 75.1875 62.9974 75.1875 61.9155V58.9858H54.6797C53.06 58.9858 51.75 57.6751 51.75 56.0561V44.3374C51.75 42.7177 53.06 41.4077 54.6797 41.4077H75.1875V38.478C75.1875 37.3961 75.7826 36.4036 76.7355 35.8939C77.6854 35.3881 78.8443 35.4453 79.7423 36.0404L97.3204 47.7592C98.136 48.3024 98.625 49.2179 98.625 50.1968C98.625 51.1748 98.136 52.0904 97.3204 52.6336L79.7423 64.3523C78.8336 64.9589 77.6747 65.0031 76.7355 64.4988Z" fill="#F44D2C"/>
+<path d="M34.1719 44.3379V56.0567C34.1719 57.697 32.8833 58.9864 31.2422 58.9864C29.6011 58.9864 28.3125 57.697 28.3125 56.0567V44.3379C28.3125 42.6968 29.6011 41.4082 31.2422 41.4082C32.8833 41.4082 34.1719 42.6968 34.1719 44.3379Z" fill="#F7F9FC"/>
+<path d="M34.1719 44.3379V56.0567C34.1719 57.697 32.8833 58.9864 31.2422 58.9864V41.4082C32.8833 41.4082 34.1719 42.6968 34.1719 44.3379Z" fill="#E4E8EC"/>
+</svg>

package/raw/src/assets/svg/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9168 1.99984H13.5835C14.3168 1.99984 14.9168 2.59984 14.9168 3.33317V13.9998C14.9168 14.7332 14.3168 15.3332 13.5835 15.3332H2.91683C2.1835 15.3332 1.5835 14.7332 1.5835 13.9998V3.33317C1.5835 2.59984 2.1835 1.99984 2.91683 1.99984H3.5835V1.33317C3.5835 0.966504 3.8835 0.666504 4.25016 0.666504C4.61683 0.666504 4.91683 0.966504 4.91683 1.33317V1.99984H11.5835V1.33317C11.5835 0.966504 11.8835 0.666504 12.2502 0.666504C12.6168 0.666504 12.9168 0.966504 12.9168 1.33317V1.99984ZM3.5835 13.9998H12.9168C13.2835 13.9998 13.5835 13.6998 13.5835 13.3332V5.33317H2.91683V13.3332C2.91683 13.6998 3.21683 13.9998 3.5835 13.9998Z" fill="#595959"/>
+</svg>

package/raw/src/assets/svg/calendarArrowLeft.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.66875 11.814L1.46875 6.657L5.66875 1.5" stroke="#262626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/calendarArrowRight.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.46875 11.814L5.66875 6.657L1.46875 1.5" stroke="#262626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3346 4L6.0013 11.3333L2.66797 8" stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/chevronDown.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6L8 10L4 6" stroke="#1B3250" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/chevronRight.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L10 8L6 4" stroke="#595959" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/chevronRightActive.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L10 8L6 4" stroke="#2D87F3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/chevronRightWhite.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 12L10.5 8L6.5 4" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/chevronUpBlue.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 10L8 6L12 10" stroke="#2D87F3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/closeLight.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="#262626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="#262626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/closeWhite.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/community.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="19.2" width="44.8" height="44.8" rx="22.4" fill="#FFF8E2"/><path d="M23.886 52.996l.312 2.129a.87.87 0 01-1.428.786L18.47 52.21a.868.868 0 00-.566-.21l-2.35-.006a4.442 4.442 0 01-4.443-4.443V37.338a4.442 4.442 0 014.443-4.442h18.748a4.443 4.443 0 014.443 4.442V47.55a4.442 4.442 0 01-4.443 4.443L24.746 52a.87.87 0 00-.86.996z" fill="#2D87F3"/><path d="M40.115 27.976l-.313 2.129a.87.87 0 001.43.785l4.298-3.7a.869.869 0 01.565-.211l2.351-.006a4.442 4.442 0 004.443-4.443V12.32a4.444 4.444 0 00-4.443-4.444H29.697a4.443 4.443 0 00-4.442 4.444v10.212a4.442 4.442 0 004.442 4.44l9.558.007a.87.87 0 01.86.997z" fill="#FE921D"/><path d="M42.686 21.036a5.172 5.172 0 10-.925.769l.605.65a.6.6 0 00.878-.818l-.558-.601zm-3.742.41a3.991 3.991 0 112.922-1.29l-1.181-1.27a.6.6 0 00-.88.818l1.122 1.205a3.942 3.942 0 01-1.983.537zM29.733 46.453L28.39 42.9a.595.595 0 00-.142-.377l-1.556-4.12a1.94 1.94 0 00-3.746 0l-3.04 8.046a.599.599 0 101.122.424l1.273-3.367h5.036l1.272 3.367a.6.6 0 101.123-.424v.002zm-6.977-4.145l1.314-3.48a.87.87 0 01.75-.658.871.871 0 01.75.658l1.314 3.48h-4.128z" fill="#fff"/></svg>

package/raw/src/assets/svg/facebook.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 0H5C2.23858 0 0 2.23858 0 5V27C0 29.7614 2.23858 32 5 32H27C29.7614 32 32 29.7614 32 27V5C32 2.23858 29.7614 0 27 0Z" fill="#1778F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.314 32V19.499H23.569L24 15.19H20.314L20.32 13.034C20.32 11.911 20.42 11.309 21.943 11.309H23.977V7H20.722C16.812 7 15.437 9.09 15.437 12.604V15.191H13V19.499H15.437V32H20.314Z" fill="white"/>
+</svg>

package/raw/src/assets/svg/hamburgerMenu.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12H20" stroke="#262626" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6H20" stroke="#262626" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 18H20" stroke="#262626" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/raw/src/assets/svg/hamburgerMenuNew.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5a1 1 0 100 2h18a1 1 0 100-2H3zm0 6a1 1 0 100 2h18a1 1 0 100-2H3zm0 6a1 1 0 100 2h18a1 1 0 100-2H3z" fill="#595959"/></svg>

package/raw/src/assets/svg/hamburgerMenuNewWithSearch.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1a1 1 0 011-1h18a1 1 0 110 2H1a1 1 0 01-1-1zM0 7a1 1 0 011-1h5a1 1 0 010 2H1a1 1 0 01-1-1zM0 13a1 1 0 011-1h6a1 1 0 110 2H1a1 1 0 01-1-1z" fill="#595959"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 14c1.02 0 1.967-.305 2.757-.829l2.536 2.536a1 1 0 001.414-1.415l-2.535-2.535A5 5 0 1013 14zm0-2a3 3 0 100-6 3 3 0 000 6z" fill="#595959"/></svg>

package/raw/src/assets/svg/index.ts

@@ -0,0 +1,63 @@
+import ArrowDoorIcon from './arrowDoor.svg'
+import Check from './check.svg'
+import ChevronDown from './chevronDown.svg'
+import chevronRight from './chevronRight.svg'
+import chevronRightActive from './chevronRightActive.svg'
+import ChevronRightWhiteIcon from './chevronRightWhite.svg'
+import ChevronUpBlue from './chevronUpBlue.svg'
+import CloseLightIcon from './closeLight.svg'
+import CloseWhiteIcon from './closeWhite.svg'
+import CommunityIcon from './community.svg'
+import DiscoverIcon from './discover.png'
+import FacebookIcon from './facebook.svg'
+import HamburgerMenuIcon from './hamburgerMenu.svg'
+import HamburgerMenuIconNew from './hamburgerMenuNew.svg'
+import HamburgerMenuIconNewWithSearch from './hamburgerMenuNewWithSearch.svg'
+import HealthToolsIcon from './healthTools.png'
+import HelloCareIcon from './helloCare-thumbnail.png'
+import InfoLightIcon from './info-light.svg'
+import InstagramIcon from './instagram.svg'
+import LinkedInIcon from './linkedin.svg'
+import LockIcon from './lock.png'
+import LoginIcon from './login.svg'
+import SehatBadge from './sehat-badge.png'
+import SpotlightIcon from './Spotlight.svg'
+import StarEmptyIcon from './StarEmptyIcon'
+import StarFullIcon from './StarFullIcon'
+import StarHalfIcon from './StarHalfIcon'
+import TogetherIcon from './together.png'
+import YoutubeIcon from './youtube.svg'
+import ZaloIcon from './zalo.png'
+
+export {
+  StarEmptyIcon,
+  StarFullIcon,
+  StarHalfIcon,
+  FacebookIcon,
+  InstagramIcon,
+  LinkedInIcon,
+  ZaloIcon,
+  YoutubeIcon,
+  CloseLightIcon,
+  DiscoverIcon,
+  HealthToolsIcon,
+  HelloCareIcon,
+  HamburgerMenuIcon,
+  HamburgerMenuIconNew,
+  SehatBadge,
+  CloseWhiteIcon,
+  InfoLightIcon,
+  ChevronDown,
+  ChevronUpBlue,
+  Check,
+  TogetherIcon,
+  LockIcon,
+  ChevronRightWhiteIcon,
+  chevronRightActive,
+  chevronRight,
+  ArrowDoorIcon,
+  LoginIcon,
+  HamburgerMenuIconNewWithSearch,
+  CommunityIcon,
+  SpotlightIcon,
+}