@croquiscom/pds 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @croquiscom/pds
+
+## 0.0.1
+
+### Patch Changes
+
+- a1985ae: PDS 라이브러리 이관

package/LEGACY_CHANGELOG.md

@@ -0,0 +1,358 @@
+# @croquiscom/pastel-ui
+
+## 5.0.1
+
+### Patch Changes
+
+- d061b5c: React 18 peerDependency 업그레이드
+
+## 5.0.0
+
+### Major Changes
+
+- 78476ea: 지그재그 3.0 대응으로 이미지 변경 및 추가
+
+  - IconZigzag16 이미지 변경
+  - IconZigzagBi130 이미지 추가
+
+  ## BreakPoint
+
+  Zigzag BI 변경으로 인해 IconZigzag89 삭제
+
+## 4.0.0
+
+### Major Changes
+
+- b7bb472: PDS 1.0.0 Color 반영
+
+  - Color, Semantice Color, Text Style(typography)의 디렉토리/스토리북 카테고리 변경
+    - theme/shared => foundation
+  - Color 추가: purple, kakao_yellow, light_blue 컬러 팔레트 추가
+  - Semantic Color가 추가
+    - Button 컴포넌트를 시작으로 color를 쓴 기존 컴포넌트는 디자인과 싱크를 맞춰 semantic_color로 변경할 예정
+  - Button 변경사항
+    - hover, pressed 스타일 추가
+    - 일부 디자인 변경 예정인 스타일 제외하고 시멘틱 컬러로 교체
+    - outline_black, outline_white variant 추가
+
+  ## BreakPoint
+
+  일부 컬러 변경
+
+  - harmony_softblue => light_blue300
+  - yellow500, yellow600 => kakao_yellow400, kakao_yellow600
+  - pink => zigzag_pink
+
+## 4.0.0-next.3
+
+### Patch Changes
+
+- Fill Button hover, pressed 시 컬러 수정, transition 추가
+
+## 4.0.0-next.2
+
+### Patch Changes
+
+- build 누락된 버전 배포되어 재배포
+
+## 4.0.0-next.1
+
+### Patch Changes
+
+- brand 시멘틱 컬러 primary_light => light 변경
+
+## 4.0.0-next.0
+
+### Major Changes
+
+- 4ec222b: PDS 1.0.0 Color 반영
+
+  - Color, Semantice Color, Text Style(typography)의 디렉토리/스토리북 카테고리 변경
+    - theme/shared => foundation
+  - Color 추가: purple, kakao_yellow, light_blue 컬러 팔레트 추가
+  - Semantic Color가 추가
+    - Button 컴포넌트를 시작으로 color를 쓴 기존 컴포넌트는 디자인과 싱크를 맞춰 semantic_color로 변경할 예정
+  - Button 변경사항
+    - hover, pressed 스타일 추가
+    - 일부 디자인 변경 예정인 스타일 제외하고 시멘틱 컬러로 교체
+    - outline_black, outline_white variant 추가
+
+  ## BreakPoint
+
+  일부 컬러 변경
+
+  - harmony_softblue => light_blue300
+  - yellow500, yellow600 => kakao_yellow400, kakao_yellow600
+  - pink => zigzag_pink
+
+## 3.2.1
+
+### Patch Changes
+
+- 6a89384: text_styles 내 세미콜론 누락 수정
+
+## 3.2.0
+
+### Minor Changes
+
+- 13f3996: PartnerCenter, ParnterLounge 아이콘 추가
+
+## 3.1.0
+
+### Minor Changes
+
+- 4a409de: 신규 직진배송 아이콘 추가
+
+## 3.0.0
+
+### Major Changes
+
+- a255d2d: [SELFE-1609: PDS 1.0.0 Text Style 최종 반영](https://croquis.atlassian.net/browse/SELFE-1609) 건에 따라
+  2에서 변경되었던 variant 네임 형태는 유지하되 사이즈 -1 씩 적용하면서 font-size, line-height을 수정함
+
+## 2.0.1
+
+### Patch Changes
+
+- e80808c: 스토리북 빌드에러 대응
+
+## 2.0.0
+
+### Major Changes
+
+- 52413b5: https://croquis.atlassian.net/browse/SELFE-1470 요청에 따른 Typography 일괄 수정
+  https://www.notion.so/croquis/Text-Style-d3f36f93c6774f0ebba9efb918158fdf 문서 참고
+
+  ## Breakpoint
+
+  Type 이 아래와 같이 변경
+  text*{ size }*{ weight } -> { useage }_{ size }_{ weight }
+
+## 1.8.0
+
+### Minor Changes
+
+- 6913d8f: Input, NumericInput에 width, Textarea에 width, height props 추가
+
+## 1.7.0
+
+### Minor Changes
+
+- ac476df: RadioGroup에 Align Type 추가(Horizontal, Vertical 타입 대응)
+
+## 1.6.0
+
+### Minor Changes
+
+- 35c97c2: RadioGroup에disabled 옵션 추가
+
+## 1.5.0
+
+### Minor Changes
+
+- 23cdeba: 버튼 기본 type 변경
+
+## 1.4.2
+
+### Patch Changes
+
+- f4bb5c6: storybook 버전 업데이트(6.5.9)
+
+## 1.4.1
+
+### Patch Changes
+
+- 3ebe3d2: Button focus시 outline 추가
+
+## 1.4.0
+
+### Minor Changes
+
+- 6bafe9d: RadioGroup이 string, number 외 제네릭 받을 수 있게 수정
+
+## 1.3.2
+
+### Patch Changes
+
+- 72b4c5f: 버튼 small, medium font-weight 수정
+
+## 1.3.1
+
+### Patch Changes
+
+- 67a03a4: ZigzagGlobal16 아이콘 디자인 변경
+
+## 1.3.0
+
+### Minor Changes
+
+- 758c4a2: CirclePlus14 아이콘 추가
+
+## 1.2.0
+
+### Minor Changes
+
+- bd92d6b: 캐나다 아이콘 추가
+
+## 1.1.5
+
+### Patch Changes
+
+- 3edd1a6: Dashboard 아이콘 추가
+
+## 1.1.4
+
+### Patch Changes
+
+- 89f0957: 자사몰 icon border-radius 있는 버전으로 변경
+
+## 1.1.3
+
+### Patch Changes
+
+- 8eae2fd: @emotion/css 디펜던시 제거
+
+## 1.1.2
+
+### Patch Changes
+
+- 9aec47f: 판매채널 icon 추가(자사몰)
+
+## 1.1.1
+
+### Patch Changes
+
+- 1d065d5: 트위모지 아이콘 추가
+
+## 1.1.0
+
+### Minor Changes
+
+- 185c9f7: 버튼 dotted variant 추가
+
+## 1.0.0
+
+### Major Changes
+
+- aba2a32: 기준 글꼴을 Pretendard 글꼴로 변경함에 따른 굵기 변경
+
+  ## Breaking Changes
+
+  Typography 변경
+
+  - extrabold -> bold
+  - bold -> semibold
+
+## 0.6.12
+
+### Patch Changes
+
+- 3c4163a: 아이콘 수정
+
+## 0.6.11
+
+### Patch Changes
+
+- 0ceb96c: svgr 설정 변경 및 아이콘 추가
+
+## 0.6.10
+
+### Patch Changes
+
+- 370f978: Pin 아이콘 추가 및 Ordering 아이콘 하나로 통일
+
+## 0.6.9
+
+### Patch Changes
+
+- c96bd03: 취약 패키지 업그레이드
+
+## 0.6.8
+
+### Patch Changes
+
+- fa5fea8: svgo 설정 변경
+
+## 0.6.7
+
+### Patch Changes
+
+- 9cc2712: 컬러 토큰 추가
+
+## 0.6.6
+
+### Patch Changes
+
+- 0c3b3bf: 에러상태일 때 인풋 보더 컬러 수정
+
+## 0.6.5
+
+### Patch Changes
+
+- db16da4: BaseText 타이핑 개선
+
+## 0.6.4
+
+### Patch Changes
+
+- 8d14724: feat(c): IconStar10 추가
+
+## 0.6.3
+
+### Patch Changes
+
+- f18b897: icon typo: MagaPhone -> MegaPhone
+
+## 0.6.2
+
+### Patch Changes
+
+- 7c99d43: fix: svgo 설정에서 prefixIds 추가
+
+## 0.6.1
+
+### Patch Changes
+
+- 765c557: fix(c): NumericInput 음수값 허용 여부, 소수점 자리 props 추가
+
+## 0.6.0
+
+### Minor Changes
+
+- 1eda8c8: feat: 아이콘 컴포넌트 추가
+
+## 0.5.3
+
+### Patch Changes
+
+- 96b00ec: fix: radio disabled text color
+
+## 0.5.2
+
+### Patch Changes
+
+- 7b392ac: feat: RadioGroup 외부에서 상태 제어할 수 있도록 변경
+
+## 0.5.1
+
+### Patch Changes
+
+- 40be0d4: fix: add ToggleSwitch in Index
+
+## 0.5.0
+
+### Minor Changes
+
+- 515a86d: feat: ToggleSwitch
+
+## 0.4.1
+
+### Patch Changes
+
+- d1fb645: chore: package.json publish 스크립트 제거
+
+## 0.4.0
+
+### Minor Changes
+
+- d796f58: feat: 컬러 토큰 추가

package/README.md

@@ -0,0 +1,133 @@
+[![npm version](https://badge.fury.io/js/@croquiscom%2Fpastel-ui.svg)](https://badge.fury.io/js/@croquiscom%2Fpastel-ui)
+
+# PDS
+
+- 🎨 [Storybook](https://main--60e81bd48516cb003c582436.chromatic.com/)
+
+PDS(파트너 디자인 시스템)은 [카카오스타일 파트너센터](https://shop.zigzag.kr/) 디자인 시스템을 위한 리액트 기반의 라이브러리입니다.
+
+## 사용
+
+프로젝트에 `@croquiscom/pds`와 peer dependencies를 추가해줍니다.
+
+```bash
+npm install --save @croquiscom/pds @emotion/react @emotion/styled react react-dom
+```
+
+```tsx
+import React from 'react'
+import { value color, value text_styles, value HStack } from '@croquiscom/pds';
+import styled from '@emotion/styled';
+
+export default function Test() {
+  return (
+    <HStack spacing={10}>
+      <BaseText variant='Heading_24_Bold' color={colors.gray900}>Hello</BaseText>
+      <StyledText>PDS UI</StyledText>
+    </HStack>
+  );
+}
+
+const StyledText = styled.p`
+  ${text_styles.Body_14_SemiBold};
+  color: ${colors.gray600};
+`;
+```
+
+## 개발
+
+### 요구되는 개발 환경
+
+Node.js v14+, Yarn v1.22+
+
+로컬에 클론된 레포지토리로 이동하여, node_modules를 설치합니다.
+
+```
+yarn
+```
+
+스토리북을 통해 확인하기 위해선 다음 명령어를 실행합니다. (브라우저에서 http://localhost:6006/ 로 이동하세요.)
+
+```
+yarn storybook
+```
+
+### 구조
+
+```bash
+├── assets
+│   └── icons
+├── src
+│   ├── [COMPONENT]
+│   │   ├── index.ts
+│   │   ├── [COMPONENT].tsx
+│   │   ├── [COMPONENT].stories.mdx
+│   │   ├── types.ts
+│   │   └── styles.ts
+│   ├── icons
+│   │   ├── generated
+│   │   ├── Icon.stories.tsx
+│   │   └── Icon.stories.mdx
+│   ├── global_styles
+│   ├── themes
+│   ├── styles
+│   ├── hooks
+│   ├── stories
+│   ├── types
+│   └── index.ts
+└── tools
+    ├── svgr-component-template.js
+    └── svgr-index-template.js
+```
+
+- **[COMPONENT]**: 컴포넌트 디렉토리 이름은 소문자, 구분자는 -로 (eg. toggle-switch) 작성합니다. 하위에는 관련 컴포넌트 파일과 해당 컴포넌트의 스토리북(`*.stories.tsx`) 파일을 포함합니다.
+  - `styles.ts`, `types.ts`과 같은 파일을 포함할 수 있습니다.
+  - 컴포넌트는 Named Exports 합니다.
+  - 각 컴포넌트 디렉토리와 src 하위의 `index.ts`를 통해 export 합니다.
+- **global_styles**: 리셋 스타일을 포함한 글로벌 스타일을 포함합니다.
+  - 리셋 스타일을 위한 class 네임은 prefix로 `pds-`를 붙여줍니다.
+- **themes**: color, typography와 같은 theme과 관련된 스타일, 스타일 토큰을 포함합니다.
+- **styles**: 컴포넌트에 공용으로 사용할 스타일, 스타일 함수를 포함합니다.
+- **hooks**: 커스텀 훅을 포함합니다.
+- **stories**: 스토리북용 컴포넌트나 스타일, 컴포넌트 외의 스토리북 문서
+- **assets**: svg 등의 에셋을 포함합니다.
+- **tools**: svgr template 등의 라이브러리 제작을 위한 스크립트를 포함합니다.
+
+### 아이콘 추가
+
+⚠️ SVGR을 통해 svg파일을 리액트 컴포넌트로 제네레이트합니다. `src/icons/generated` 하위에서 직접 수정하지 말아주세요!
+
+- `assets/icons`에 svg를 추가합니다.
+- `yarn svgr`을 실행합니다.
+- `src/icons/generated` 하위에 제네레이트된 아이콘 리액트 컴포넌트와 `src/icons/generated/index.ts`에 해당 컴포넌트의 export가 추가된 것을 확인합니다.
+- `yarn storybook`을 실행하여 스토리북 내에서 Icon/Icons 메뉴로 이동하여 목록에서 해당 아이콘이 잘 추가되었는지 확입니다.
+
+### PR
+
+- main을 base 브랜치로 한 작업 브랜치를 생성합니다.
+- 배포 및 버전관리를 changeset을 통해 관리하고 있습니다. PR 생성시 [changeset README.md](./.changeset/README.md) 문서를 참고하여 파일을 생성해주세요.
+- PR 및 마스터 머지 시에 chromatic으로 자동 배포됩니다.
+
+### 배포
+
+Github Action을 통해 자동으로 배포하고 있습니다.
+
+changeset 파일을 포함한 PR이 main에 머지되면, Github Action 워크플로우가 동작되며, 버전 배포를 위한 Version Packages PR이 생성됩니다.
+해당 PR을 머지하게 되면 Github Action의 워크플로우가 동작되며 패키지가 배포됩니다.
+
+#### Github Action을 통한 배포가 불가능할 경우
+
+npm 권한이 필요합니다. npm에 가입 후 권한을 요청해주세요.
+
+- Version Packages PR이 생성되지 않았을 경우, 다음을 수행해 changelog와 package.json을 version bump를 포함한 작업 PR을 생성합니다.
+
+```bash
+yarn changeset version
+git commit -m "chore: version bump"
+```
+
+- Version Packages PR이 생성되었을 경우 해당 PR을 머지하고 main을 최신 상태로 PULL 받아주세요.
+
+```bash
+yarn release
+```

package/assets/icons/Account_24.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2852 10.7122L17.9627 7H16.1994L15.1042 12.689L13.3409 7H11.5591L9.76791 12.7725L8.70065 7H6.93734L7.61482 10.7122H6V12.4755H7.93036L8.77489 17.1158H10.5568L12.45 10.2018L14.3432 17.1158H16.1251L16.9696 12.4755H18.9V10.7122H17.2852Z" fill="#363644"/>
+</svg>

package/assets/icons/AlertFill_20.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="10" fill="#363644"/>
+<rect x="9" y="5" width="2" height="6" fill="white"/>
+<rect x="9" y="13" width="2" height="2" fill="white"/>
+</svg>

package/assets/icons/Alert_20.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.25" stroke="#363644" stroke-width="1.5"/>
+<rect x="9" y="5" width="2" height="6" fill="#363644"/>
+<rect x="9" y="13" width="2" height="2" fill="#363644"/>
+</svg>

package/assets/icons/Alert_24.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="M12 2L0 22H24L12 2ZM12 5.78456L20.5882 20.0934H3.41176L12 5.78456Z" fill="#363644"/>
+<path d="M13.0099 10.4746H11.0491V15.1648H13.0099V10.4746Z" fill="#363644"/>
+<path d="M13.0099 16.0703H11.0491V17.7862H13.0099V16.0703Z" fill="#363644"/>
+</svg>

package/assets/icons/Alert_50.svg

@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="24" stroke="#363644" stroke-width="2"/>
+<rect x="23" y="11" width="4" height="18" fill="#363644"/>
+<rect x="23" y="34" width="4" height="5" fill="#363644"/>
+</svg>

package/assets/icons/ArrowBottom_16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8" y="11" width="6" height="1" transform="rotate(-135 8 11)" fill="#363644"/>
+<rect x="8" y="11" width="1" height="6" transform="rotate(-135 8 11)" fill="#363644"/>
+</svg>

package/assets/icons/ArrowBottom_18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.25 5.75L8.75 13.25L16.25 5.75" stroke="#363644"/>
+</svg>

package/assets/icons/ArrowDecrease_10.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10L9 3.75L6.33333 3.75L6.33333 -2.33127e-07L3.66667 -4.66255e-07L3.66667 3.75L1 3.75L5 10Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowIncrease_10.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0L1 6.25H3.66667V10H6.33333V6.25H9L5 0Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowLeft_16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="8" width="6" height="1" transform="rotate(-45 5 8)" fill="#363644"/>
+<rect x="5" y="8" width="1" height="6" transform="rotate(-45 5 8)" fill="#363644"/>
+</svg>

package/assets/icons/ArrowLeft_18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 2L5 9.5L12.5 17" stroke="#363644"/>
+</svg>

package/assets/icons/ArrowLineRight_20.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.69 2L10.28 3.41L15.87 9.01H0V11.01H15.41L10.28 16.14L11.69 17.56L19.47 9.78L11.69 2Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowRight_16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="11" y="8" width="6" height="1" transform="rotate(135 11 8)" fill="#363644"/>
+<rect x="11" y="8" width="1" height="6" transform="rotate(135 11 8)" fill="#363644"/>
+</svg>

package/assets/icons/ArrowRight_18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2L12.5 9.5L5 17" stroke="#363644"/>
+</svg>

package/assets/icons/ArrowStick_10.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="4" width="8" height="2" fill="#363644"/>
+</svg>

package/assets/icons/ArrowTop_16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8" y="5" width="6" height="1" transform="rotate(45 8 5)" fill="#363644"/>
+<rect x="8" y="5" width="1" height="6" transform="rotate(45 8 5)" fill="#363644"/>
+</svg>

package/assets/icons/ArrowTop_18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 12.25L8.75 4.75L1.25 12.25" stroke="#363644"/>
+</svg>

package/assets/icons/AutoCharge_20.svg

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4879 7C17.2524 3.50442 13.9186 1 9.99999 1C6.08134 1 2.74762 3.50442 1.51211 7H0.457794C1.73206 2.94289 5.52235 0 9.99999 0C14.4776 0 18.2679 2.94289 19.5422 7H18.4879ZM1.51211 13C2.74762 16.4956 6.08134 19 9.99999 19C13.9186 19 17.2524 16.4956 18.4879 13H19.5422C18.2679 17.0571 14.4776 20 9.99999 20C5.52235 20 1.73206 17.0571 0.457794 13H1.51211Z" fill="#363644"/>
+<rect x="5.5" y="9.5" width="9" height="1" fill="#363644"/>
+<rect x="9.5" y="5.5" width="1" height="9" fill="#363644"/>
+<rect x="16" y="13" width="4" height="1" fill="#363644"/>
+<rect x="19" y="13" width="1" height="4" fill="#363644"/>
+<rect x="1" y="6" width="3" height="1" fill="#363644"/>
+<rect y="3" width="1" height="4" fill="#363644"/>
+</svg>

package/assets/icons/BarChart_18.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="6" width="4" height="10" rx="1" fill="#5AC27C"/>
+  <rect x="7" y="9" width="4" height="7" rx="1" fill="#F4847D"/>
+  <rect x="13" y="3" width="4" height="13" rx="1" fill="#7E96F9"/>
+</svg>

package/assets/icons/Beauty_72.svg

@@ -0,0 +1,8 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M59 33.5508H45.2857V59.9998H59V33.5508Z" stroke="#363644" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M45.2857 60H13.9388C12.2735 60 11 58.7265 11 57.0612V55.1021H45.2857V60Z" stroke="#363644" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M57.5306 27.6733H46.7551V33.5509H57.5306V27.6733Z" stroke="#363644" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M56.0612 27.6735H48.2245V12L56.0612 16.898V27.6735Z" stroke="#363644" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.6979 14.9389C41.9551 13.7634 38.9183 13.0776 35.6857 13.0776C23.049 13.0776 12.7632 23.3634 12.7632 36.0001C12.7632 42.3674 15.4081 48.245 19.6204 52.3593" stroke="#363644" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.698 21.5018C42.151 19.8365 39.0163 18.8569 35.6857 18.8569C26.2816 18.8569 18.6408 26.5957 18.6408 35.9998C18.6408 45.4039 26.2816 53.1426 35.6857 53.1426C37.9388 53.1426 40.0939 52.6529 42.151 51.8692" stroke="#363644" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/icons/Below_10.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V7V8H1H8V7L1 7L1 0H0Z" fill="#363644"/>
+</svg>

package/assets/icons/Below_16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="3" width="1" height="8" fill="#363644"/>
+<rect y="10" width="8" height="1" fill="#363644"/>
+</svg>

package/assets/icons/Best_16.svg

@@ -0,0 +1,18 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="2" fill="#4769F7"/>
+<g filter="url(#filter0_d_5078_6355)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.41617 6.67484L8.37296 4.07175C8.40236 4.04382 8.44789 4.01414 8.50222 4.00415C8.55462 3.99451 8.70486 3.98585 8.96247 4.2043C9.02653 4.25862 9.08976 4.35694 9.12918 4.53287C9.1688 4.70969 9.17649 4.93257 9.15405 5.18543C9.10908 5.69204 8.95177 6.22908 8.82051 6.56301C8.76001 6.71693 8.77953 6.89081 8.87266 7.02748C8.96579 7.16415 9.12047 7.24593 9.28585 7.24593H12.101C12.0764 7.99153 11.996 8.92461 11.825 9.7363C11.7183 10.2424 11.5826 10.6706 11.4211 10.9719C11.2514 11.2886 11.1136 11.3575 11.0511 11.3678C10.5374 11.4525 9.53716 11.4015 8.43364 11.2847C7.60608 11.1972 6.7617 11.0777 6.10225 10.9725V7.07808L6.99041 7.00044C7.18343 6.98357 7.34932 6.8567 7.41617 6.67484ZM6.06266 6.07772L6.58708 6.03188L7.4624 3.65046C7.47626 3.61275 7.49461 3.57686 7.51706 3.54354C7.65938 3.33235 7.93324 3.092 8.3214 3.02063C8.73269 2.94501 9.17746 3.07547 9.60923 3.44161C9.88987 3.67958 10.0349 4.00144 10.105 4.3142C10.1749 4.62607 10.178 4.96038 10.1501 5.27384C10.1204 5.60841 10.0531 5.94473 9.97301 6.24593H12.6097C12.8858 6.24593 13.1097 6.46979 13.1097 6.74593C13.1097 7.5789 13.0346 8.84602 12.8035 9.94251C12.6885 10.4879 12.5289 11.0218 12.3025 11.4442C12.0845 11.8511 11.7421 12.2673 11.2138 12.3545C10.5456 12.4646 9.41206 12.3938 8.32843 12.2792C7.53492 12.1952 6.72871 12.0829 6.07559 11.9807C6.00844 12.1776 5.82188 12.3192 5.60225 12.3192H3.5C3.22386 12.3192 3 12.0953 3 11.8192V6.27304C3 5.9969 3.22386 5.77304 3.5 5.77304H5.60225C5.80908 5.77304 5.98659 5.89864 6.06266 6.07772ZM4 11.3192V6.77304H5.10225V11.3192H4Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_5078_6355" x="2" y="3" width="12.1097" height="11.4097" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5078_6355"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5078_6355" result="shape"/>
+</filter>
+</defs>
+</svg>

package/assets/icons/Bookmark_18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53807 1.23457C9.43698 1.02979 9.22841 0.900146 9.00004 0.900146C8.77167 0.900146 8.5631 1.02979 8.46202 1.23457L6.28398 5.64703L1.41326 6.35895C1.18733 6.39198 0.999721 6.55038 0.929294 6.76759C0.858868 6.98479 0.917831 7.22314 1.0814 7.38246L4.60533 10.8148L3.77368 15.6637C3.73507 15.8888 3.82761 16.1163 4.0124 16.2506C4.19719 16.3848 4.44216 16.4025 4.64431 16.2962L9.00004 14.0056L13.3558 16.2962C13.5579 16.4025 13.8029 16.3848 13.9877 16.2506C14.1725 16.1163 14.265 15.8888 14.2264 15.6637L13.3948 10.8148L16.9187 7.38246C17.0823 7.22314 17.1412 6.98479 17.0708 6.76759C17.0004 6.55038 16.8128 6.39198 16.5868 6.35895L11.7161 5.64703L9.53807 1.23457Z" fill="#FFC700"/>
+</svg>