├── .babelrc.js
├── .editorconfig
├── .gitignore
├── .storybook
    ├── kickstandUiTheme.js
    ├── main.js
    ├── manager.js
    └── preview.js
├── LICENSE
├── PROJECT_BUILD.md
├── icon_loader.js
├── kickstand-ui_icons.xd
├── kickstand-ui_icons_rounded.xd
├── package-lock.json
├── package.json
├── readme.md
├── src
    ├── components.d.ts
    ├── index.html
    ├── index.ts
    ├── scripts
    │   ├── components
    │   │   ├── accordion
    │   │   │   ├── accordion-slide.tsx
    │   │   │   ├── accordion.scss
    │   │   │   ├── accordion.stories.ts
    │   │   │   ├── accordion.tsx
    │   │   │   └── readme.md
    │   │   ├── alert
    │   │   │   ├── alert.scss
    │   │   │   ├── alert.stories.ts
    │   │   │   ├── alert.tsx
    │   │   │   └── readme.md
    │   │   ├── badge
    │   │   │   ├── badge.scss
    │   │   │   ├── badge.stories.ts
    │   │   │   ├── badge.tsx
    │   │   │   └── readme.md
    │   │   ├── breadcrumbs
    │   │   │   ├── breadcrumbs.scss
    │   │   │   ├── breadcrumbs.stories.ts
    │   │   │   ├── breadcrumbs.tsx
    │   │   │   └── readme.md
    │   │   ├── button
    │   │   │   ├── button-bar
    │   │   │   │   ├── button-bar.scss
    │   │   │   │   ├── button-bar.tsx
    │   │   │   │   └── readme.md
    │   │   │   ├── button.scss
    │   │   │   ├── button.stories.ts
    │   │   │   ├── button.tsx
    │   │   │   └── readme.md
    │   │   ├── card
    │   │   │   ├── card-body.tsx
    │   │   │   ├── card-footer.tsx
    │   │   │   ├── card.scss
    │   │   │   ├── card.stories.ts
    │   │   │   ├── card.tsx
    │   │   │   └── readme.md
    │   │   ├── carousel
    │   │   │   ├── carousel-slide.tsx
    │   │   │   ├── carousel.scss
    │   │   │   ├── carousel.stories.ts
    │   │   │   ├── carousel.tsx
    │   │   │   └── readme.md
    │   │   ├── dropdown
    │   │   │   ├── dropdown-item.tsx
    │   │   │   ├── dropdown.scss
    │   │   │   ├── dropdown.stories.ts
    │   │   │   ├── dropdown.tsx
    │   │   │   └── readme.md
    │   │   ├── form-field
    │   │   │   ├── autocomplete
    │   │   │   │   ├── autocomplete.scss
    │   │   │   │   ├── autocomplete.tsx
    │   │   │   │   └── readme.md
    │   │   │   ├── checkbox
    │   │   │   │   ├── checkbox.scss
    │   │   │   │   ├── checkbox.tsx
    │   │   │   │   └── readme.md
    │   │   │   ├── checklist
    │   │   │   │   ├── checklist.scss
    │   │   │   │   ├── checklist.tsx
    │   │   │   │   └── readme.md
    │   │   │   ├── form-field.scss
    │   │   │   ├── form-field.stories.ts
    │   │   │   ├── form-field.tsx
    │   │   │   ├── radio
    │   │   │   │   ├── radio.scss
    │   │   │   │   ├── radio.tsx
    │   │   │   │   └── readme.md
    │   │   │   ├── readme.md
    │   │   │   └── spin-box
    │   │   │   │   ├── readme.md
    │   │   │   │   ├── spin-box.scss
    │   │   │   │   └── spin-box.tsx
    │   │   ├── form
    │   │   │   ├── form.scss
    │   │   │   ├── form.stories.ts
    │   │   │   ├── form.tsx
    │   │   │   └── readme.md
    │   │   ├── gallery
    │   │   │   ├── gallery.scss
    │   │   │   ├── gallery.stories.ts
    │   │   │   ├── gallery.tsx
    │   │   │   └── readme.md
    │   │   ├── grid
    │   │   │   ├── column.tsx
    │   │   │   ├── grid.scss
    │   │   │   ├── grid.stories.ts
    │   │   │   ├── readme.md
    │   │   │   └── row.tsx
    │   │   ├── icon
    │   │   │   ├── icon-list.ts
    │   │   │   ├── icon.scss
    │   │   │   ├── icon.stories.ts
    │   │   │   ├── icon.tsx
    │   │   │   ├── icons
    │   │   │   │   ├── 500px.svg
    │   │   │   │   ├── accessible.svg
    │   │   │   │   ├── activity.svg
    │   │   │   │   ├── alarm.svg
    │   │   │   │   ├── alarm_fill.svg
    │   │   │   │   ├── align_center.svg
    │   │   │   │   ├── align_justified.svg
    │   │   │   │   ├── align_left.svg
    │   │   │   │   ├── align_right.svg
    │   │   │   │   ├── arrow_down.svg
    │   │   │   │   ├── arrow_left.svg
    │   │   │   │   ├── arrow_right.svg
    │   │   │   │   ├── arrow_up.svg
    │   │   │   │   ├── attachment.svg
    │   │   │   │   ├── bar_chart.svg
    │   │   │   │   ├── behance.svg
    │   │   │   │   ├── bell.svg
    │   │   │   │   ├── bell_fil.svg
    │   │   │   │   ├── blocks.svg
    │   │   │   │   ├── blocks_fill.svg
    │   │   │   │   ├── bolt.svg
    │   │   │   │   ├── bolt_fill.svg
    │   │   │   │   ├── bookmark.svg
    │   │   │   │   ├── bookmark_fill.svg
    │   │   │   │   ├── briefcase.svg
    │   │   │   │   ├── briefcase_fill.svg
    │   │   │   │   ├── calendar.svg
    │   │   │   │   ├── camera.svg
    │   │   │   │   ├── camera_fill.svg
    │   │   │   │   ├── cart.svg
    │   │   │   │   ├── cart_fill.svg
    │   │   │   │   ├── chat.svg
    │   │   │   │   ├── chat_box.svg
    │   │   │   │   ├── chat_box_fill.svg
    │   │   │   │   ├── chat_bubble.svg
    │   │   │   │   ├── chat_bubble_fill.svg
    │   │   │   │   ├── chat_fill.svg
    │   │   │   │   ├── check.svg
    │   │   │   │   ├── check_circle.svg
    │   │   │   │   ├── check_circle_fill.svg
    │   │   │   │   ├── check_octagon.svg
    │   │   │   │   ├── check_shield.svg
    │   │   │   │   ├── check_square.svg
    │   │   │   │   ├── chevron_down.svg
    │   │   │   │   ├── chevron_down_circle.svg
    │   │   │   │   ├── chevron_down_circle_fill.svg
    │   │   │   │   ├── chevron_left.svg
    │   │   │   │   ├── chevron_left_circle.svg
    │   │   │   │   ├── chevron_left_circle_fill.svg
    │   │   │   │   ├── chevron_right.svg
    │   │   │   │   ├── chevron_right_circle.svg
    │   │   │   │   ├── chevron_right_circle_fill.svg
    │   │   │   │   ├── chevron_up.svg
    │   │   │   │   ├── chevron_up_circle.svg
    │   │   │   │   ├── chevron_up_circle_fill.svg
    │   │   │   │   ├── circle.svg
    │   │   │   │   ├── circle_fill.svg
    │   │   │   │   ├── clipboard.svg
    │   │   │   │   ├── clipboard_fill.svg
    │   │   │   │   ├── code.svg
    │   │   │   │   ├── codepen.svg
    │   │   │   │   ├── collapse.svg
    │   │   │   │   ├── compass.svg
    │   │   │   │   ├── compass_fill.svg
    │   │   │   │   ├── copy.svg
    │   │   │   │   ├── copy_fill.svg
    │   │   │   │   ├── css3.svg
    │   │   │   │   ├── cube.svg
    │   │   │   │   ├── double_chevron_left.svg
    │   │   │   │   ├── double_chevron_right.svg
    │   │   │   │   ├── download.svg
    │   │   │   │   ├── dribbble.svg
    │   │   │   │   ├── drop.svg
    │   │   │   │   ├── drop_fill.svg
    │   │   │   │   ├── edit.svg
    │   │   │   │   ├── edit_fill.svg
    │   │   │   │   ├── ellipsis.svg
    │   │   │   │   ├── email.svg
    │   │   │   │   ├── email_fill.svg
    │   │   │   │   ├── email_read.svg
    │   │   │   │   ├── email_read_fill.svg
    │   │   │   │   ├── etsy.svg
    │   │   │   │   ├── expand.svg
    │   │   │   │   ├── external_link.svg
    │   │   │   │   ├── facebook.svg
    │   │   │   │   ├── facebook_fill.svg
    │   │   │   │   ├── facebook_like.svg
    │   │   │   │   ├── file.svg
    │   │   │   │   ├── file_fill.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── filter_fill.svg
    │   │   │   │   ├── flag.svg
    │   │   │   │   ├── flag_fill.svg
    │   │   │   │   ├── flag_triangle.svg
    │   │   │   │   ├── flag_triangle_fill.svg
    │   │   │   │   ├── flickr.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── folder_fill.svg
    │   │   │   │   ├── foursquare.svg
    │   │   │   │   ├── gear.svg
    │   │   │   │   ├── gear_fill.svg
    │   │   │   │   ├── gift.svg
    │   │   │   │   ├── github.svg
    │   │   │   │   ├── globe.svg
    │   │   │   │   ├── grid.svg
    │   │   │   │   ├── grid_fill.svg
    │   │   │   │   ├── heart.svg
    │   │   │   │   ├── heart_fill.svg
    │   │   │   │   ├── hexagon.svg
    │   │   │   │   ├── hexagon_fill.svg
    │   │   │   │   ├── hide.svg
    │   │   │   │   ├── hierarchy.svg
    │   │   │   │   ├── hierarchy_fill.svg
    │   │   │   │   ├── history.svg
    │   │   │   │   ├── home.svg
    │   │   │   │   ├── home_fill.svg
    │   │   │   │   ├── html5.svg
    │   │   │   │   ├── image.svg
    │   │   │   │   ├── info.svg
    │   │   │   │   ├── info_fill.svg
    │   │   │   │   ├── instagram.svg
    │   │   │   │   ├── jsfiddle.svg
    │   │   │   │   ├── kebab.svg
    │   │   │   │   ├── laptop.svg
    │   │   │   │   ├── laptop_fill.svg
    │   │   │   │   ├── lastfm.svg
    │   │   │   │   ├── line_chart.svg
    │   │   │   │   ├── link.svg
    │   │   │   │   ├── linkedin.svg
    │   │   │   │   ├── list.svg
    │   │   │   │   ├── list_large.svg
    │   │   │   │   ├── list_large_fill.svg
    │   │   │   │   ├── loading_circle_spinner.svg
    │   │   │   │   ├── loading_ellipsis_pulse.svg
    │   │   │   │   ├── loading_ellipsis_typing.svg
    │   │   │   │   ├── loading_ring_spinner.svg
    │   │   │   │   ├── location.svg
    │   │   │   │   ├── location_arrow.svg
    │   │   │   │   ├── location_arrow_fill.svg
    │   │   │   │   ├── location_fill.svg
    │   │   │   │   ├── lock.svg
    │   │   │   │   ├── lock_fill.svg
    │   │   │   │   ├── long_arrow_down.svg
    │   │   │   │   ├── long_arrow_left.svg
    │   │   │   │   ├── long_arrow_right.svg
    │   │   │   │   ├── long_arrow_up.svg
    │   │   │   │   ├── map.svg
    │   │   │   │   ├── map_fill.svg
    │   │   │   │   ├── menu.svg
    │   │   │   │   ├── mic.svg
    │   │   │   │   ├── mic_fill.svg
    │   │   │   │   ├── minus.svg
    │   │   │   │   ├── minus_circle.svg
    │   │   │   │   ├── minus_circle_fill.svg
    │   │   │   │   ├── minus_octagon.svg
    │   │   │   │   ├── minus_shield.svg
    │   │   │   │   ├── minus_square.svg
    │   │   │   │   ├── mobile.svg
    │   │   │   │   ├── mobile_fill.svg
    │   │   │   │   ├── monitor.svg
    │   │   │   │   ├── monitor_fill.svg
    │   │   │   │   ├── music.svg
    │   │   │   │   ├── music_fill.svg
    │   │   │   │   ├── next.svg
    │   │   │   │   ├── next_fill.svg
    │   │   │   │   ├── not_allowed.svg
    │   │   │   │   ├── octagon.svg
    │   │   │   │   ├── octagon_fill.svg
    │   │   │   │   ├── octagon_warning_fill.svg
    │   │   │   │   ├── package.svg
    │   │   │   │   ├── pause.svg
    │   │   │   │   ├── pause_fill.svg
    │   │   │   │   ├── paypal.svg
    │   │   │   │   ├── pencil.svg
    │   │   │   │   ├── pencil_fill.svg
    │   │   │   │   ├── phone.svg
    │   │   │   │   ├── phone_fill.svg
    │   │   │   │   ├── pie_chart.svg
    │   │   │   │   ├── pie_chart_fill.svg
    │   │   │   │   ├── pinterest.svg
    │   │   │   │   ├── play.svg
    │   │   │   │   ├── play_fill.svg
    │   │   │   │   ├── plus.svg
    │   │   │   │   ├── plus_circle.svg
    │   │   │   │   ├── plus_circle_fill.svg
    │   │   │   │   ├── plus_octagon.svg
    │   │   │   │   ├── plus_shield.svg
    │   │   │   │   ├── plus_square.svg
    │   │   │   │   ├── power.svg
    │   │   │   │   ├── previous.svg
    │   │   │   │   ├── previous_fill.svg
    │   │   │   │   ├── print.svg
    │   │   │   │   ├── print_fill.svg
    │   │   │   │   ├── question.svg
    │   │   │   │   ├── reddit.svg
    │   │   │   │   ├── redo.svg
    │   │   │   │   ├── refresh.svg
    │   │   │   │   ├── rss.svg
    │   │   │   │   ├── save.svg
    │   │   │   │   ├── save_fill.svg
    │   │   │   │   ├── search.svg
    │   │   │   │   ├── send.svg
    │   │   │   │   ├── send_fill.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── share_fill.svg
    │   │   │   │   ├── shield.svg
    │   │   │   │   ├── shield_fill.svg
    │   │   │   │   ├── sign_in.svg
    │   │   │   │   ├── sign_out.svg
    │   │   │   │   ├── sliders.svg
    │   │   │   │   ├── sliders_fill.svg
    │   │   │   │   ├── snapchat.svg
    │   │   │   │   ├── spotify.svg
    │   │   │   │   ├── square.svg
    │   │   │   │   ├── square_fill.svg
    │   │   │   │   ├── star.svg
    │   │   │   │   ├── star_fill.svg
    │   │   │   │   ├── table.svg
    │   │   │   │   ├── tablet.svg
    │   │   │   │   ├── tablet_fill.svg
    │   │   │   │   ├── tag.svg
    │   │   │   │   ├── tag_fill.svg
    │   │   │   │   ├── tiktok.svg
    │   │   │   │   ├── time.svg
    │   │   │   │   ├── time_fill.svg
    │   │   │   │   ├── times.svg
    │   │   │   │   ├── times_circle.svg
    │   │   │   │   ├── times_circle_fill.svg
    │   │   │   │   ├── times_octagon.svg
    │   │   │   │   ├── times_shield.svg
    │   │   │   │   ├── times_square.svg
    │   │   │   │   ├── trash.svg
    │   │   │   │   ├── trash_fill.svg
    │   │   │   │   ├── triangle.svg
    │   │   │   │   ├── triangle_fill.svg
    │   │   │   │   ├── tripadvisor.svg
    │   │   │   │   ├── tumblr.svg
    │   │   │   │   ├── twitch.svg
    │   │   │   │   ├── twitter.svg
    │   │   │   │   ├── undo.svg
    │   │   │   │   ├── unlock.svg
    │   │   │   │   ├── unlock_fill.svg
    │   │   │   │   ├── up_down.svg
    │   │   │   │   ├── upload.svg
    │   │   │   │   ├── user.svg
    │   │   │   │   ├── user_fill.svg
    │   │   │   │   ├── user_group.svg
    │   │   │   │   ├── user_group_fill.svg
    │   │   │   │   ├── video.svg
    │   │   │   │   ├── video_fill.svg
    │   │   │   │   ├── view.svg
    │   │   │   │   ├── vimeo.svg
    │   │   │   │   ├── warning.svg
    │   │   │   │   ├── warning_circle.svg
    │   │   │   │   ├── warning_circle_fill.svg
    │   │   │   │   ├── warning_fill.svg
    │   │   │   │   ├── warning_octagon.svg
    │   │   │   │   ├── warning_octagon_fill.svg
    │   │   │   │   ├── warning_shield.svg
    │   │   │   │   ├── warning_square.svg
    │   │   │   │   ├── whatsapp.svg
    │   │   │   │   ├── wikipedia.svg
    │   │   │   │   ├── yelp.svg
    │   │   │   │   ├── youtube.svg
    │   │   │   │   ├── zoom_in.svg
    │   │   │   │   └── zoom_out.svg
    │   │   │   └── readme.md
    │   │   ├── image
    │   │   │   ├── image.scss
    │   │   │   ├── image.stories.ts
    │   │   │   ├── image.tsx
    │   │   │   └── readme.md
    │   │   ├── loading
    │   │   │   ├── loading-overlay.tsx
    │   │   │   ├── loading.scss
    │   │   │   ├── loading.stories.ts
    │   │   │   ├── loading.tsx
    │   │   │   └── readme.md
    │   │   ├── menu-bar
    │   │   │   ├── menu-bar.scss
    │   │   │   ├── menu-bar.stories.ts
    │   │   │   ├── menu-bar.tsx
    │   │   │   ├── menu-group.tsx
    │   │   │   ├── menu-item.tsx
    │   │   │   ├── menu-row.tsx
    │   │   │   └── readme.md
    │   │   ├── modal
    │   │   │   ├── modal-footer.tsx
    │   │   │   ├── modal.scss
    │   │   │   ├── modal.stories.ts
    │   │   │   ├── modal.tsx
    │   │   │   └── readme.md
    │   │   ├── overlay
    │   │   │   ├── overlay.scss
    │   │   │   ├── overlay.stories.ts
    │   │   │   ├── overlay.tsx
    │   │   │   └── readme.md
    │   │   ├── progress-bar
    │   │   │   ├── progress-bar.scss
    │   │   │   ├── progress-bar.stories.ts
    │   │   │   ├── progress-bar.tsx
    │   │   │   └── readme.md
    │   │   ├── responsive-embed
    │   │   │   ├── readme.md
    │   │   │   ├── responsive-embed.scss
    │   │   │   ├── responsive-embed.stories.ts
    │   │   │   └── responsive-embed.tsx
    │   │   ├── scroll-to-top
    │   │   │   ├── readme.md
    │   │   │   ├── scroll-to-top.scss
    │   │   │   ├── scroll-to-top.stories.ts
    │   │   │   └── scroll-to-top.tsx
    │   │   ├── side-drawer
    │   │   │   ├── readme.md
    │   │   │   ├── side-drawer.scss
    │   │   │   ├── side-drawer.stories.ts
    │   │   │   └── side-drawer.tsx
    │   │   ├── switch
    │   │   │   ├── readme.md
    │   │   │   ├── switch.scss
    │   │   │   ├── switch.stories.ts
    │   │   │   └── switch.tsx
    │   │   ├── tabs
    │   │   │   ├── readme.md
    │   │   │   ├── tab.tsx
    │   │   │   ├── tabs.scss
    │   │   │   ├── tabs.stories.ts
    │   │   │   └── tabs.tsx
    │   │   ├── tooltip
    │   │   │   ├── readme.md
    │   │   │   ├── tooltip.scss
    │   │   │   ├── tooltip.stories.ts
    │   │   │   └── tooltip.tsx
    │   │   └── utilities
    │   │   │   ├── border.stories.ts
    │   │   │   ├── color.stories.ts
    │   │   │   ├── display.stories.ts
    │   │   │   ├── layout.stories.ts
    │   │   │   ├── position.stories.ts
    │   │   │   ├── shadows.stories.ts
    │   │   │   ├── spacing.stories.ts
    │   │   │   ├── table.stories.ts
    │   │   │   └── text.stories.ts
    │   └── utils
    │   │   ├── componentUtils.ts
    │   │   ├── domUtils.ts
    │   │   └── htmlSanitizer.ts
    └── scss
    │   ├── 00_Abstracts
    │       ├── README.md
    │       ├── _variables.scss
    │       ├── functions
    │       │   ├── _borders.scss
    │       │   ├── _color-contrast.scss
    │       │   ├── _colors.scss
    │       │   ├── _custom-math.scss
    │       │   ├── _outline.scss
    │       │   ├── _spacing.scss
    │       │   ├── _strings.scss
    │       │   ├── _transitions.scss
    │       │   └── _z-index.scss
    │       ├── index.scss
    │       └── mixins
    │       │   ├── _border-radius.scss
    │       │   ├── _borders.scss
    │       │   ├── _colors.scss
    │       │   ├── _create-css-variables.scss
    │       │   ├── _display.scss
    │       │   ├── _font-sizes.scss
    │       │   ├── _font.scss
    │       │   ├── _hover.scss
    │       │   ├── _media-queries.scss
    │       │   ├── _outline.scss
    │       │   ├── _shadows.scss
    │       │   ├── _spacing.scss
    │       │   ├── _transitions.scss
    │       │   └── _z-index.scss
    │   ├── 01_Base
    │       ├── README.md
    │       ├── _base.scss
    │       └── index.scss
    │   ├── 02_Vendors
    │       ├── README.md
    │       └── index.scss
    │   ├── 03_Elements
    │       ├── README.md
    │       ├── _block.scss
    │       ├── _code.scss
    │       ├── _forms.scss
    │       ├── _headings.scss
    │       ├── _images.scss
    │       ├── _inline.scss
    │       ├── _lists.scss
    │       ├── _tables.scss
    │       └── index.scss
    │   ├── 04_Components
    │       ├── README.md
    │       └── index.scss
    │   ├── 05_Layouts
    │       ├── README.md
    │       └── index.scss
    │   ├── 06_Pages
    │       ├── README.md
    │       └── index.scss
    │   ├── 07_Utilities
    │       ├── README.md
    │       ├── _animation.scss
    │       ├── _border.scss
    │       ├── _colors.scss
    │       ├── _display.scss
    │       ├── _layout.scss
    │       ├── _lists.scss
    │       ├── _mouse.scss
    │       ├── _position.scss
    │       ├── _rotation.scss
    │       ├── _shadows.scss
    │       ├── _spacing.scss
    │       ├── _text.scss
    │       └── index.scss
    │   └── styles.scss
├── stencil.config.ts
└── tsconfig.json


/.babelrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: ["@babel/plugin-syntax-import-meta"],
3 | };
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = space
 8 | indent_size = 4
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | www/
 3 | loader/
 4 | 
 5 | *~
 6 | *.sw[mnpcod]
 7 | *.log
 8 | *.lock
 9 | *.tmp
10 | *.tmp.*
11 | log.txt
12 | *.sublime-project
13 | *.sublime-workspace
14 | 
15 | .stencil/
16 | .idea/
17 | .vscode/
18 | .sass-cache/
19 | .versions/
20 | node_modules/
21 | $RECYCLE.BIN/
22 | 
23 | .DS_Store
24 | Thumbs.db
25 | UserInterfaceState.xcuserstate
26 | .env
27 | 


--------------------------------------------------------------------------------
/.storybook/kickstandUiTheme.js:
--------------------------------------------------------------------------------
1 | import { create } from '@storybook/theming/create';
2 | 
3 | export default create({
4 |     base: 'light',
5 |     brandTitle: "Kickstand UI",
6 |     colorSecondary: '#517999'
7 | });
8 | 


--------------------------------------------------------------------------------
/.storybook/manager.js:
--------------------------------------------------------------------------------
1 | import { addons } from '@storybook/addons';
2 | import kickstandUiTheme from './kickstandUiTheme';
3 | 
4 | addons.setConfig({
5 |   theme: kickstandUiTheme
6 | });


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | import "../src/scss/styles.scss";
2 | import { defineCustomElements } from "../dist/esm/loader";
3 | 
4 | defineCustomElements();


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/PROJECT_BUILD.md:
--------------------------------------------------------------------------------
 1 | # Kickstand UI
 2 | 
 3 | Kickstand UI is a design system for building web applications. It is built using native web components to ensure its cross-platform compatibility.
 4 | 
 5 | ## Running the Project
 6 | 
 7 | Install dependencies:
 8 | 
 9 | ```bash
10 | npm install
11 | ```
12 | 
13 | Run Storybook:
14 | 
15 | ```bash
16 | npm run dev
17 | ```
18 | 
19 | Build project for production:
20 | 
21 | ```bash
22 | npm run build
23 | ```
24 | 
25 | To run the unit tests for the components:
26 | 
27 | ```bash
28 | npm test
29 | ```
30 | 
31 | Run basic dev mode (should rarely be used):
32 | 
33 | ```bash
34 | npm run serve
35 | ```
36 | 
37 | ## Solution Architecture
38 | 
39 | This design system is built using [Stencil](https://stenciljs.com/) (a compiler for building native web components) and [Clarion](https://projectclarion.com) (a CSS framework for building design systems).
40 | 
41 | Components are built and tested using [Storybook](https://storybook.js.org/).
42 | 


--------------------------------------------------------------------------------
/kickstand-ui_icons.xd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/break-stuff/kickstand-ui/1d9beffa6fcaea9a84e58762606e24cbe905aff0/kickstand-ui_icons.xd


--------------------------------------------------------------------------------
/kickstand-ui_icons_rounded.xd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/break-stuff/kickstand-ui/1d9beffa6fcaea9a84e58762606e24cbe905aff0/kickstand-ui_icons_rounded.xd


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components';
2 | export { $, $$ } from './scripts/utils/domUtils';


--------------------------------------------------------------------------------
/src/scripts/components/accordion/accordion.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Host, Prop, ComponentInterface } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-accordion',
 5 |     styleUrl: 'accordion.scss'
 6 | })
 7 | export class Accordion implements ComponentInterface {
 8 |     @Prop() size: 'sm' | 'md' | 'lg' = 'md';
 9 | 
10 |     render() {
11 |         return (
12 |             <Host class={`ks-accordion ${this.size}`}>
13 |                 <slot />
14 |             </Host>
15 |         );
16 |     }
17 | }


--------------------------------------------------------------------------------
/src/scripts/components/accordion/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-alert
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property   | Attribute  | Description | Type      | Default     |
11 | | ---------- | ---------- | ----------- | --------- | ----------- |
12 | | `expanded` | `expanded` |             | `boolean` | `false`     |
13 | | `heading`  | `heading`  |             | `string`  | `undefined` |
14 | 
15 | 
16 | ## Methods
17 | 
18 | ### `toggleSlide() => Promise<void>`
19 | 
20 | 
21 | 
22 | #### Returns
23 | 
24 | Type: `Promise<void>`
25 | 
26 | 
27 | 
28 | 
29 | ## Dependencies
30 | 
31 | ### Depends on
32 | 
33 | - [ks-icon](../icon)
34 | 
35 | ### Graph
36 | ```mermaid
37 | graph TD;
38 |   ks-accordion-slide --> ks-icon
39 |   style ks-accordion-slide fill:#f9f,stroke:#333,stroke-width:4px
40 | ```
41 | 
42 | ----------------------------------------------
43 | 
44 | *Built with [StencilJS](https://stenciljs.com/)*
45 | 


--------------------------------------------------------------------------------
/src/scripts/components/badge/badge.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../scss/00_Abstracts/index";
 2 | 
 3 | .ks-badge {
 4 |     display: inline-block;
 5 |     text-decoration: none;
 6 |     line-height: 1;
 7 |     text-align: center;
 8 |     white-space: nowrap;
 9 |     vertical-align: baseline;
10 |     padding: 0.25em 0.4em;
11 |     font-size: 0.75em;
12 |     @include br(pill);
13 |     @include shadow(xs);
14 | 
15 |     @each $color, $value in get-colors() {
16 |         &.#{$color} {
17 |             @include bg-color($color);
18 |             @include b($color: $color);
19 | 
20 |             &.hollow {
21 |                 background-color: transparent;
22 |                 @include color($color);
23 |             }
24 |         }
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/scripts/components/badge/badge.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Prop, ComponentInterface, Host } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-badge',
 5 |     styleUrl: 'badge.scss'
 6 | })
 7 | export class Badge implements ComponentInterface {
 8 |     @Prop() color: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' = 'primary';
 9 |     @Prop() hollow: boolean = false;
10 | 
11 |     render() {
12 |         let classes= {
13 |             'ks-badge': true,
14 |             [`${this.color}`]: true,
15 |             'hollow': this.hollow
16 |         };
17 |         return (
18 |             <Host class={classes}>
19 |                 <slot />
20 |             </Host>
21 |         );
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/scripts/components/badge/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-badge
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property | Attribute | Description | Type                                                                                            | Default     |
11 | | -------- | --------- | ----------- | ----------------------------------------------------------------------------------------------- | ----------- |
12 | | `color`  | `color`   |             | `"danger" \| "dark" \| "info" \| "light" \| "primary" \| "secondary" \| "success" \| "warning"` | `'primary'` |
13 | | `hollow` | `hollow`  |             | `boolean`                                                                                       | `false`     |
14 | 
15 | 
16 | ----------------------------------------------
17 | 
18 | *Built with [StencilJS](https://stenciljs.com/)*
19 | 


--------------------------------------------------------------------------------
/src/scripts/components/breadcrumbs/breadcrumbs.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../scss/00_Abstracts/index";
 2 | 
 3 | .ks-breadcrumbs {
 4 |     display: block;
 5 | 
 6 |     .slot {
 7 |         display: none;
 8 |     }
 9 | 
10 |     .links {
11 |         display: flex;
12 |         flex-wrap: wrap;
13 |         list-style: none;
14 |         @include p(none);
15 | 
16 |         .breadcrumb {
17 |             .link {
18 |                 font-weight: bold;
19 |                 text-decoration: none;
20 |                 @include font-size(sm);
21 | 
22 |                 &:hover {
23 |                     text-decoration: underline;
24 |                 }
25 | 
26 |                 &[aria-current="page"] {
27 |                     @include color(dark);
28 |                     @include font-size(sm);
29 |                 }
30 |             }
31 |         }
32 | 
33 |         .breadcrumb+.breadcrumb {
34 |             @include pl(sm);
35 | 
36 |             &::before {
37 |                 display: inline-block;
38 |                 content: "/";
39 |                 @include pr(sm);
40 |             }
41 |         }
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/scripts/components/breadcrumbs/breadcrumbs.stories.ts:
--------------------------------------------------------------------------------
 1 | import { text} from '@storybook/addon-knobs';
 2 | 
 3 | export default { title: "Components/Breadcrumbs" };
 4 | 
 5 | const breadcrumbs = [
 6 |     { url: 'test.com', text: '<ks-icon icon="home"></ks-icon> Home' },
 7 |     { url: 'test.com', text: 'Products' },
 8 |     { url: 'test.com', text: 'Bacon Flavored <em>Toothpaste</em>' },
 9 |     { url: 'test.com', text: 'Details' },
10 | ];
11 | 
12 | export const breadcrumb = () => {
13 |     const linkTag = text('link-tag', 'a');
14 |     const hrefProp = text('href-prop', 'href');
15 | 
16 |     return (`<ks-breadcrumbs link-tag="${linkTag}" href-prop="${hrefProp}">
17 |         ${breadcrumbs.map(x => `<a href="${x.url}">${x.text}</a>`).join('')}
18 |     </ks-breadcrumbs>`);
19 | };
20 | 


--------------------------------------------------------------------------------
/src/scripts/components/breadcrumbs/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-crumb
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property   | Attribute   | Description | Type     | Default  |
11 | | ---------- | ----------- | ----------- | -------- | -------- |
12 | | `hrefProp` | `href-prop` |             | `string` | `'href'` |
13 | | `linkTag`  | `link-tag`  |             | `string` | `'a'`    |
14 | 
15 | 
16 | ----------------------------------------------
17 | 
18 | *Built with [StencilJS](https://stenciljs.com/)*
19 | 


--------------------------------------------------------------------------------
/src/scripts/components/button/button-bar/button-bar.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, ComponentInterface, Host, Prop } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-button-bar',
 5 |     styleUrl: 'button-bar.scss'
 6 | })
 7 | export class ButtonBar implements ComponentInterface {
 8 |     @Prop() stacked: boolean = false;
 9 | 
10 |     render() {
11 |         return (
12 |             <Host class={`ks-button-bar ${this.stacked ? 'stacked' : 'inline'}`}>
13 |                 <slot />
14 |             </Host>
15 |         );
16 |     }
17 | }


--------------------------------------------------------------------------------
/src/scripts/components/button/button-bar/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-button-bar
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property  | Attribute | Description | Type      | Default |
11 | | --------- | --------- | ----------- | --------- | ------- |
12 | | `stacked` | `stacked` |             | `boolean` | `false` |
13 | 
14 | 
15 | ----------------------------------------------
16 | 
17 | *Built with [StencilJS](https://stenciljs.com/)*
18 | 


--------------------------------------------------------------------------------
/src/scripts/components/card/card-body.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, ComponentInterface, Prop, Host } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-card-body'
 5 | })
 6 | export class CardBody implements ComponentInterface {
 7 |     @Prop() cardTitle: string;
 8 |     @Prop() cardSubtitle: string;
 9 | 
10 |     render() {
11 |         return (
12 |             <Host class="card-body">
13 |                 {(this.cardTitle || this.cardSubtitle) && <header class="body-header">
14 |                     {this.cardTitle && <h3 class="heading">{this.cardTitle}</h3>}
15 |                     {this.cardSubtitle && <h4 class="subheading">{this.cardSubtitle}</h4>}
16 |                 </header>}
17 |                 <div class="body-text">
18 |                     <slot />
19 |                 </div>
20 |             </Host>
21 |         );
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/scripts/components/card/card-footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, ComponentInterface, Host } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-card-footer'
 5 | })
 6 | export class CardFooter implements ComponentInterface {
 7 |     render() {
 8 |         return (
 9 |             <Host class="card-footer">
10 |                 <slot />
11 |             </Host>
12 |         );
13 |     }
14 | }


--------------------------------------------------------------------------------
/src/scripts/components/card/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-card
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ----------------------------------------------
 9 | 
10 | *Built with [StencilJS](https://stenciljs.com/)*
11 | 


--------------------------------------------------------------------------------
/src/scripts/components/dropdown/dropdown-item.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Prop, Host, Element, Event, EventEmitter } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-dropdown-item'
 5 | })
 6 | export class DropdownItem {
 7 |     @Element() $el: HTMLElement;
 8 | 
 9 |     @Prop() preventClose: boolean = false;
10 | 
11 |     @Event() closeDropdown: EventEmitter;
12 | 
13 |     clickHandler() {
14 |         if(!this.preventClose)
15 |             this.closeDropdown.emit();
16 |     }
17 | 
18 |     render() {
19 |         return (
20 |             <Host role="listitem" onClick={() => this.clickHandler()} class="dropdown-item">
21 |                 <slot />
22 |             </Host>
23 |         );
24 |     }
25 | }


--------------------------------------------------------------------------------
/src/scripts/components/dropdown/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-dropdown
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property       | Attribute       | Description | Type      | Default |
11 | | -------------- | --------------- | ----------- | --------- | ------- |
12 | | `preventClose` | `prevent-close` |             | `boolean` | `false` |
13 | 
14 | 
15 | ## Events
16 | 
17 | | Event           | Description | Type               |
18 | | --------------- | ----------- | ------------------ |
19 | | `closeDropdown` |             | `CustomEvent<any>` |
20 | 
21 | 
22 | ----------------------------------------------
23 | 
24 | *Built with [StencilJS](https://stenciljs.com/)*
25 | 


--------------------------------------------------------------------------------
/src/scripts/components/form-field/checklist/checklist.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../../scss/00_Abstracts/index";
 2 | 
 3 | .ks-checklist {
 4 |     display: inline-block;
 5 | 
 6 |     fieldset {
 7 |         display: inline-flex;
 8 |         flex-direction: column;
 9 | 
10 |         legend {
11 |             display: inline-flex;
12 |             flex-direction: column;    
13 |             font-weight: bold;
14 |             @include mb(none);
15 | 
16 |             .ks-tooltip {
17 |                 @include ml(xs);
18 |             }
19 | 
20 |             .help-text {
21 |                 font-weight: normal;
22 |                 @include color(dark, light);
23 |                 @include font-size(xs);
24 |             }    
25 |         }
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/scripts/components/grid/column.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, Prop, h, Host } from '@stencil/core';
 2 | 
 3 | 
 4 | @Component({
 5 |     tag: 'ks-column'
 6 | })
 7 | export class Column {
 8 |     @Prop() position: 'start' | 'center' | 'end' | 'stretch';
 9 | 
10 |     render() {
11 |         return (
12 |             <Host class={{
13 |                 'col': true,
14 |                 [`align-items-${this.position}`]: this.position !== undefined
15 |             }}>
16 |                 <slot />
17 |             </Host>
18 |         );
19 |     }
20 | }


--------------------------------------------------------------------------------
/src/scripts/components/grid/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-img
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property   | Attribute  | Description | Type                                                                                   | Default   |
11 | | ---------- | ---------- | ----------- | -------------------------------------------------------------------------------------- | --------- |
12 | | `gutter`   | `gutter`   |             | `"lg" \| "md" \| "none" \| "sm" \| "xl" \| "xs" \| "xxl" \| "xxs" \| "xxxl" \| "xxxs"` | `'sm'`    |
13 | | `position` | `position` |             | `"center" \| "end" \| "start" \| "stretch"`                                            | `'start'` |
14 | 
15 | 
16 | ----------------------------------------------
17 | 
18 | *Built with [StencilJS](https://stenciljs.com/)*
19 | 


--------------------------------------------------------------------------------
/src/scripts/components/grid/row.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, Prop, h, Host } from '@stencil/core';
 2 | 
 3 | 
 4 | @Component({
 5 |     tag: 'ks-row',
 6 |     styleUrl: 'grid.scss'
 7 | })
 8 | export class Row {
 9 |     @Prop() position: 'start' | 'center' | 'end' | 'stretch' = 'start';
10 |     @Prop() gutter: 'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' = 'sm';
11 | 
12 |     render() {
13 |         return (
14 |             <Host class={{
15 |                 'ks-row': true,
16 |                 [`gutter-${this.gutter}`]: true,
17 |                 [`align-content-${this.position}`]: this.position !== undefined
18 |             }}>
19 |                 <slot />
20 |             </Host>
21 |         );
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/scripts/components/icon/icon.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../scss/00_Abstracts/index";
 2 | 
 3 | .ks-icon {
 4 |     line-height: 1;
 5 |     position: relative;
 6 |     display: inline-block;
 7 |     height: 1em;
 8 |     width: 1em;
 9 | 
10 |     .icon {
11 |         margin: -0.25em;
12 |         display: inline-block;
13 |         font-size: inherit;
14 |         height: 1.5em;
15 |         width: 1.5em;
16 |         overflow: visible;
17 |         vertical-align: -0.125em;
18 |     }
19 | 
20 |     &[icon^="loading"] {
21 |         .icon {
22 |             margin: 0;
23 |             height: 1em;
24 |             width: 1em;
25 |         }
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/scripts/components/icon/icon.stories.ts:
--------------------------------------------------------------------------------
 1 | import { text, select } from "@storybook/addon-knobs";
 2 | import { iconList } from './icon-list';
 3 | 
 4 | export default { title: 'Components/Icons' };
 5 | 
 6 | export const icons = () => {
 7 |     const icon = text('icon', 'activity');
 8 |     const rotate = select('rotate', [0, 45, 90, 135, 180, 225, 270, 360, -45, -90, -135, -180, -225, -270, -360], 0);
 9 |     const label = text('label', '');
10 |     const labelledBy = text('labelled-by', '');
11 |     const cssClass = text('class', '');
12 |     return (`<p>This is some text! <ks-icon icon="${icon}" rotate="${rotate}" label="${label}" labelled-by="${labelledBy}" class="${cssClass}" label="test" /></p>`);
13 | };
14 | 
15 | export const listOfIcons = () => {
16 |     const icons = Object.keys(iconList);
17 |     return (`<div class="display-flex flex-wrap">
18 |         ${icons.map(x => `<ks-icon class="m-md text-lg text-info" icon="${x}" title="${x}"></ks-icon>`).join('')}
19 |     </div>`);
20 | }
21 | 


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/accessible.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(6 10.796)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="4.5" cy="4.5" r="4.5" stroke="none"/><circle cx="4.5" cy="4.5" r="3.75"/></g><g fill="#707070"><path d="m10.775 10.464 1.361-2.726 2.13 1.002-1.11 2.455-2.381-.731z"/><path d="m13.278 9.104-.798-.375-.639 1.278.904.277.533-1.18m1.975-.728-1.685 3.73-3.86-1.185 2.085-4.174 3.46 1.63z"/></g><path d="m11.534 7.46-2.4-1.258-2.34 3.133m6.917 3.578h2.84l-.127 5.515" fill="none" stroke="#707070" stroke-width="1.5"/><g transform="translate(13.476 4.204)" fill="#707070" stroke="#707070"><circle cx="1.709" cy="1.709" r="1.709" stroke="none"/><circle cx="1.709" cy="1.709" r="1.209" fill="none"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/activity.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4 12h4l2.392-8 3.392 16L16 12h4" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/alarm.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><g transform="translate(1 1.853)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="6.574" cy="6.574" r="6.574" transform="translate(4.5 4.5)" stroke-linejoin="round"/><path d="M10.416 6.909v4.556l3.159 1.711" stroke-linejoin="round"/><path d="m15.5 3.147 3 2.5m-12-2.5-3 2.5"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/alarm_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a7.083 7.083 0 0 1-7.075-7.076A7.083 7.083 0 0 1 12 5.849a7.083 7.083 0 0 1 7.076 7.075A7.084 7.084 0 0 1 12 20zm-.436-11.633a.664.664 0 0 0-.663.663v4.211a.664.664 0 0 0 .3.555.71.71 0 0 0 .054.034l1.915 1.105a.663.663 0 0 0 .331.089.667.667 0 0 0 .575-.331.661.661 0 0 0 .066-.5.657.657 0 0 0-.309-.4l-1.606-.927v-3.83a.664.664 0 0 0-.663-.67z" fill="#707070"/><path fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" d="m7.5 4.5-3 3m12-3 3 3"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/align_center.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M17.441 6H6.561m12.682 4H4.758m14.485 8H4.758m12.763-4H6.481"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/align_justified.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4.75 6h14.486M4.75 10h14.486M4.75 18h14.486M4.75 14h14.486"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/align_left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4.758 6h10.88m-10.88 4h14.485M4.758 18h14.485M4.758 14h11.04"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/align_right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M19.243 6H8.363m10.88 4H4.758m14.485 8H4.758m14.485-4H8.203"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/arrow_down.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M6.585 12.085 12 17.5l5.416-5.415" stroke-linejoin="round"/><path d="M12 16.662V6.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/arrow_left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12.415 6.585 7 12l5.415 5.416" stroke-linejoin="round"/><path d="M7.838 12H18"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/arrow_right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M12.085 17.415 17.5 12l-5.415-5.416" stroke-linejoin="round"/><path d="M16.662 12H6.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/arrow_up.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M17.415 11.915 12 6.5l-5.416 5.415" stroke-linejoin="round"/><path d="M12 7.338V17.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/attachment.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m13.937 16.599 3.933-3.933s2.654-3.003-.177-5.834-5.657 0-5.657 0L6.38 12.489s-3.022 2.644-.707 4.95 4.95-.708 4.95-.708l5.43-5.43a1.88 1.88 0 1 0-2.651-2.652l-4.936 4.936" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/bar_chart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4.656V20h15.343" fill="none"/><g fill="#fff"><path d="M6.5 12h2v6h-2z" stroke="none"/><path fill="none" d="M7.25 12.75h.5v4.5h-.5z"/></g><g fill="#fff"><path d="M11 9h2v9h-2z" stroke="none"/><path fill="none" d="M11.75 9.75h.5v7.5h-.5z"/></g><g fill="#fff"><path d="M15.5 6h2v12h-2z" stroke="none"/><path fill="none" d="M16.25 6.75h.5v10.5h-.5z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/behance.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" clip-path="url(#a)"><path d="M10.621 11.663a2.1 2.1 0 0 0 1.224-2.074c0-1.848-1.374-2.548-3.245-2.548H4v9.919h4.622c1.774 0 3.523-.874 3.523-2.873a2.286 2.286 0 0 0-1.524-2.424zM6.3 8.741h2.022c.775 0 1.524.2 1.524 1.149 0 .775-.575 1.074-1.324 1.074H6.3zm2.2 6.52H6.3v-2.648h2.247c.924 0 1.524.35 1.524 1.374 0 .949-.724 1.274-1.571 1.274zm8.067-5.896c-2.473 0-3.648 1.649-3.648 3.8a3.422 3.422 0 0 0 3.648 3.773 3.157 3.157 0 0 0 3.352-2.326h-1.928a1.431 1.431 0 0 1-1.349.824 1.673 1.673 0 0 1-1.824-1.8h5.172c.129-2.222-.9-4.271-3.423-4.271zm-1.724 3.048a1.5 1.5 0 0 1 1.6-1.5c.949 0 1.424.5 1.624 1.5z"/><path d="M14.418 8.441h4.022v-1h-4.022z" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/bell.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12.002 5.032a5.161 5.161 0 0 1 5.161 5.161v2.065c0 2.851 4.81 5.161-5.161 5.161s-5.164-2.311-5.164-5.161v-2.065a5.161 5.161 0 0 1 5.164-5.161z"/><path d="M12 6.532a3.665 3.665 0 0 0-3.662 3.661v2.065c0 1.113-.453 2.054-.816 2.81-.068.141-.154.32-.224.48.512.153 1.757.371 4.702.371 2.944 0 4.189-.218 4.7-.372a13.902 13.902 0 0 0-.223-.479c-.363-.756-.816-1.697-.816-2.81v-2.065A3.665 3.665 0 0 0 12 6.532m0-1.5a5.16 5.16 0 0 1 5.16 5.161v2.065c0 2.85 4.81 5.161-5.16 5.161-9.972 0-5.162-2.31-5.162-5.161v-2.065A5.162 5.162 0 0 1 12 5.032z" fill="#707070"/><g transform="translate(11 4)" stroke="#707070" stroke-width="1.5"><circle cx="1" cy="1" r="1" stroke="none"/><circle cx="1" cy="1" r=".25"/></g><path d="M13.552 18.452a1.55 1.55 0 0 1-3.1 0z"/><path d="M10.452 18.452h3.097a1.548 1.548 0 0 1-3.097 0z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/blocks.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h7.25v7.25H4z" stroke="none"/><path d="M4.75 4.75h5.75v5.75H4.75z"/><path d="M12.75 4H20v7.25h-7.25z" stroke="none"/><path d="M13.5 4.75h5.75v5.75H13.5z"/><path d="M12.75 12.75H20V20h-7.25z" stroke="none"/><path d="M13.5 13.5h5.75v5.75H13.5z"/><path d="M4 12.75h7.25V20H4z" stroke="none"/><path d="M4.75 13.5h5.75v5.75H4.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/blocks_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h7.25v7.25H4z" stroke="none"/><path fill="none" d="M4.75 4.75h5.75v5.75H4.75z"/><path d="M12.75 4H20v7.25h-7.25z" stroke="none"/><path fill="none" d="M13.5 4.75h5.75v5.75H13.5z"/><path d="M12.75 12.75H20V20h-7.25z" stroke="none"/><path fill="none" d="M13.5 13.5h5.75v5.75H13.5z"/><path d="M4 12.75h7.25V20H4z" stroke="none"/><path fill="none" d="M4.75 13.5h5.75v5.75H4.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/bolt.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m13.13 4.775-6.249 8.989h4.65v5.461l5.588-9.463H13.13z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/bolt_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m13.13 4.775-6.249 8.989h4.65v5.461l5.588-9.463H13.13z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/bookmark.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M6.826 4.75v14.529l5.167-3.632 5.18 3.632V4.75z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/bookmark_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M6.826 4.75v14l5.167-3.5 5.18 3.5v-14z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/briefcase.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 8.5h16v10H4z" stroke="none"/><path d="M4.75 9.25h14.5v8.5H4.75z"/><path d="M9 6h6v12.5H9z" stroke="none"/><path d="M9.75 6.75h4.5v11h-4.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/briefcase_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="#707070"><path d="M4 8.5h16v10H4z" stroke="none"/><path fill="none" d="M4.75 9.25h14.5v8.5H4.75z"/></g><g fill="none"><path d="M9 6h6v12.5H9z" stroke="none"/><path d="M9.75 6.75h4.5v11h-4.5z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/calendar.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><g fill="none" stroke-linejoin="round"><path d="M4 7h16v13H4z" stroke="none"/><path d="M4.75 7.75h14.5v11.5H4.75z"/></g><g fill="#707070" stroke-linejoin="round"><path d="M4 8h16v2H4z" stroke="none"/><path fill="none" d="M4.75 8.75h14.5v.5H4.75z"/></g><path fill="none" d="M8 13h8m-8 3h6M8 8V5m8 3V5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/camera.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 6.537 9.813 6.5 8.501 8.773H5v9.093h14V8.773h-3.5L14.188 6.5z"/><g transform="translate(8.5 9)"><circle cx="3.5" cy="3.5" r="3.5" stroke="none"/><circle cx="3.5" cy="3.5" r="2.75"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/camera_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M19 17.866H5V8.773h3.5L9.812 6.5 12 6.537l2.187-.037L15.5 8.773H19v9.092zM12 9a3.5 3.5 0 0 0-3.5 3.5A3.5 3.5 0 0 0 12 16a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 12 9z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/cart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4 5h1.912l1.747 11.306h10.25"/><path d="M6.257 6.306h12.7l-.685 6.641H7.5"/><g transform="translate(7 17.5)"><circle cx="1.25" cy="1.25" r="1.25" stroke="none"/><circle cx="1.25" cy="1.25" r=".5"/></g><g transform="translate(16.25 17.5)"><circle cx="1.25" cy="1.25" r="1.25" stroke="none"/><circle cx="1.25" cy="1.25" r=".5"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/cart_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4.6 5h1.314l1.745 11.306h10.257" fill="none"/><path d="M6.257 6.306h12.7l-.685 6.641H7.5" fill="#707070"/><g transform="translate(7 17.5)" fill="none"><circle cx="1.25" cy="1.25" r="1.25" stroke="none"/><circle cx="1.25" cy="1.25" r=".5"/></g><g transform="translate(16.25 17.5)" fill="none"><circle cx="1.25" cy="1.25" r="1.25" stroke="none"/><circle cx="1.25" cy="1.25" r=".5"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chat.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M6.611 17.61H3.5v-6.579h5.227V5.089H20v8.08h-3.734v2.029l-3.025-2.029h-.348v4.441H9.132l-2.521 1.651z"/><path d="M8.729 9.957v3.023h4.465"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chat_box.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.469 16.5H4.5v-11h15v11h-6.005L9.47 19.261z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chat_box_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.469 16.5H4.5v-11h15v11h-6.005L9.47 19.261z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chat_bubble.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M7.448 16.3c-2.229-1.029-3.7-2.793-3.7-4.8 0-3.175 3.694-5.75 8.25-5.75s8.249 2.575 8.249 5.75-3.69 5.75-8.247 5.75a11.867 11.867 0 0 1-1.264-.067l-3.288 1.762z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chat_bubble_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M7.448 16.3c-2.229-1.029-3.7-2.793-3.7-4.8 0-3.175 3.694-5.75 8.25-5.75s8.249 2.575 8.249 5.75-3.69 5.75-8.247 5.75a11.867 11.867 0 0 1-1.264-.067l-3.288 1.762z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chat_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M7.612 19.26v-1.65H4.5v-6.579H6v5.72h6.893v.859h-2.762l-2.518 1.65z"/><path d="M16.266 14.17H20V6.09H8.728v8.08h4.513l3.025 2.028z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/check.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m18 7-8 8-4-4" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/check_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="m15 10-4 4-2-2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/check_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm-2.513-8.626a.867.867 0 0 0-.618.257.867.867 0 0 0-.256.617.869.869 0 0 0 .256.619l1.59 1.591a.877.877 0 0 0 .563.255h.065a.874.874 0 0 0 .62-.256l3.712-3.712a.876.876 0 0 0 0-1.238.869.869 0 0 0-.619-.256.869.869 0 0 0-.619.256l-3.1 3.1-.977-.976a.868.868 0 0 0-.617-.256z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/check_octagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m15 10-4 4-2-2"/><path d="M15.114 4.742H8.885L4.742 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/check_shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M14.489 10.007 11.5 13 10 11.507"/><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/check_square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m15 10-4 4-2-2"/><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_down.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m6 9 6 6 6-6" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_down_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="M8.506 10.253 12 13.747l3.493-3.494" stroke-linecap="round" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_down_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm.029-5.07h.034a.743.743 0 0 0 .529-.219l3.181-3.181a.751.751 0 0 0 0-1.061.746.746 0 0 0-.53-.219.744.744 0 0 0-.53.219l-2.681 2.68-2.68-2.68a.745.745 0 0 0-.53-.219.745.745 0 0 0-.53.219.745.745 0 0 0-.219.53.745.745 0 0 0 .219.53l3.181 3.181a.745.745 0 0 0 .53.219z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m15 6-6 6 6 6" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_left_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="M13.747 8.506 10.253 12l3.494 3.493" stroke-linecap="round" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_left_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4 12a8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8 8.009 8.009 0 0 1-8-8zm5.07.029v.034a.743.743 0 0 0 .219.529l3.181 3.181a.751.751 0 0 0 1.061 0 .746.746 0 0 0 .219-.53.744.744 0 0 0-.219-.53l-2.68-2.681 2.68-2.68a.745.745 0 0 0 .219-.53.745.745 0 0 0-.219-.53.745.745 0 0 0-.53-.219.745.745 0 0 0-.53.219L9.29 11.473a.745.745 0 0 0-.219.53z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m9 18 6-6-6-6" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_right_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="M10.253 8.506 13.747 12l-3.494 3.493" stroke-linecap="round" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_right_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M20 12a8.009 8.009 0 0 1-8 8 8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8zm-5.07-.029v-.034a.743.743 0 0 0-.219-.529L11.53 8.227a.751.751 0 0 0-1.061 0 .746.746 0 0 0-.219.53.744.744 0 0 0 .219.53l2.68 2.681-2.68 2.68a.745.745 0 0 0-.219.53.745.745 0 0 0 .219.53.745.745 0 0 0 .53.219.745.745 0 0 0 .53-.219l3.181-3.181a.745.745 0 0 0 .219-.53z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_up.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m18 15-6-6-6 6" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_up_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="M8.506 13.747 12 10.253l3.494 3.494" stroke-linecap="round" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/chevron_up_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4a8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8 8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8zm-.029 5.07h-.034a.743.743 0 0 0-.529.219L8.227 12.47a.751.751 0 0 0 0 1.061.746.746 0 0 0 .53.219.744.744 0 0 0 .53-.219l2.681-2.68 2.68 2.68a.745.745 0 0 0 .53.219.745.745 0 0 0 .53-.219.745.745 0 0 0 .219-.53.745.745 0 0 0-.219-.53L12.527 9.29a.745.745 0 0 0-.53-.219z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><g transform="translate(4 4)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="8" cy="8" r="8" stroke="none"/><circle cx="8" cy="8" r="7.25"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><g transform="translate(4 4)" fill="#707070" stroke="#707070" stroke-width="1.5"><circle cx="8" cy="8" r="8" stroke="none"/><circle cx="8" cy="8" r="7.25" fill="none"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/clipboard.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M8 4h8v4H8z" stroke="none"/><path d="M8.75 4.75h6.5v2.5h-6.5z"/><path d="M8.462 6H6v13.25h12V6h-2.507"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/clipboard_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round"><path d="M18.339 20H5.66V6h1.339v2.751h10V6h1.339v14z" stroke-width="1.5"/><path d="M8.875 4h6.25v3h-6.25z" stroke="none"/><path fill="none" d="M9.375 4.5h5.25v2h-5.25z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/code.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="m15.25 16 4-4-4-4m-6.5 0-4 4 4 4" stroke-linejoin="round"/><path d="m13 7-2 10"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/codepen.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.514 4.166a1.291 1.291 0 0 0-1.431.025L4.707 8.635a1.232 1.232 0 0 0-.552 1.029v4.795a1.266 1.266 0 0 0 .577 1.054l6.5 4.318a1.3 1.3 0 0 0 1.406 0l6.627-4.368a1.266 1.266 0 0 0 .577-1.054V9.69a1.266 1.266 0 0 0-.577-1.054zm4.945 5.2-2.434 1.628-2.31-1.656V6.049zm-6.404-3.292v3.213l-2.36 1.632-2.331-1.581zm-5.344 4.845 1.506 1.029L5.711 13zm5.372 6.853-4.719-3.163 2.36-1.657 2.36 1.582zm-.9-5.849 1.531-1.079 1.782 1.18-1.584 1.054zm2.586 5.849v-3.238l2.259-1.506 2.427 1.606zm5.372-4.719L16.531 12l1.607-1.079z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/collapse.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M6.795 13.25h4v4" stroke-linejoin="round"/><path d="M10.795 13.25 4.75 19.295"/><path d="M17.25 10.795h-4v-4" stroke-linejoin="round"/><path d="m13.25 10.795 6.045-6.045"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/compass.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g transform="translate(4 4)"><circle cx="8" cy="8" r="8" stroke="none"/><circle cx="8" cy="8" r="7.25"/></g><path d="m14.828 9.171-4.242 1.414-1.414 4.243 4.242-1.414z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/compass_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm2.828-10.829-4.243 1.415-1.414 4.243 4.243-1.415 1.414-4.243z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/copy.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M7.901 4.75h9V16h-9z"/><path d="M4.752 8.25v11h9"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/copy_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="#707070" d="M7.901 4.75h9V16h-9z"/><path d="M4.752 8.25v11h9" fill="none"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/css3.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m6.375 4.75-.525 2.7h10.925l-.35 1.725H5.5l-.525 2.7H15.9l-.6 3.075-4.4 1.45-3.825-1.45.25-1.325H4.65l-.65 3.2 6.325 2.425 7.275-2.425L20 4.75z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/cube.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M4.831 8.448 12.001 12l7.213-3.552" stroke-linejoin="round"/><path d="M12 12v7.15"/><path d="M12.008 4.428 4.725 8.446V16l7.283 4 7.283-4V8z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/double_chevron_left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m19 6-6 6 6 6M11 6l-6 6 6 6"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/double_chevron_right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m13 18 6-6-6-6M5 18l6-6-6-6"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/download.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="m8 11 4 4 4-4" stroke-linejoin="round"/><path d="M12 14.723V6"/><path d="M6 15v3.5h12V15" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/dribbble.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4a7.991 7.991 0 0 0-8 8 7.991 7.991 0 0 0 8 8 7.991 7.991 0 0 0 8-8 7.991 7.991 0 0 0-8-8zm5.25 3.875a6.781 6.781 0 0 1 1.425 3.95A14.245 14.245 0 0 0 14 11.7q-.263-.6-.525-1.125a9.753 9.753 0 0 0 3.775-2.7zM12 5.325a6.584 6.584 0 0 1 4.325 1.6A8.553 8.553 0 0 1 12.85 9.4a34.387 34.387 0 0 0-2.425-3.9A6.474 6.474 0 0 1 12 5.325zm-2.875.65A35.7 35.7 0 0 1 11.6 9.8a22.958 22.958 0 0 1-6.1.65 6.688 6.688 0 0 1 3.625-4.475zM5.325 12v-.225h.025A24.7 24.7 0 0 0 12.225 11c.15.325.325.65.475 1a10.441 10.441 0 0 0-5.725 4.4 6.7 6.7 0 0 1-1.65-4.4zM12 18.675A6.705 6.705 0 0 1 7.95 17.3a9.134 9.134 0 0 1 5.25-4.075 23.6 23.6 0 0 1 1.35 4.95 6.719 6.719 0 0 1-2.55.5zm3.775-1.175a25.868 25.868 0 0 0-1.25-4.55 12.807 12.807 0 0 1 4.075.175 6.752 6.752 0 0 1-2.825 4.375z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/drop.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#a)"><path d="M12 4s6 4 6 9.6a6.21 6.21 0 0 1-6 6.4 6.21 6.21 0 0 1-6-6.4C6 8 12 4 12 4z"/><path d="M12 5.885c-1.5 1.239-4.5 4.16-4.5 7.715 0 2.702 2.019 4.9 4.5 4.9s4.5-2.198 4.5-4.9c0-3.556-3-6.476-4.5-7.715M12 4s6 3.996 6 9.6c0 3.535-2.686 6.4-6 6.4s-6-2.865-6-6.4C6 7.995 12 4 12 4z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/drop_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#a)"><path d="M12 19.25c-2.895 0-5.25-2.535-5.25-5.65 0-2.649 1.516-4.93 2.788-6.378A17.41 17.41 0 0 1 12 4.927a17.415 17.415 0 0 1 2.462 2.295c1.272 1.448 2.788 3.73 2.788 6.378 0 3.115-2.355 5.65-5.25 5.65z"/><path d="M12 5.885c-1.5 1.239-4.5 4.16-4.5 7.715 0 2.702 2.019 4.9 4.5 4.9s4.5-2.198 4.5-4.9c0-3.556-3-6.476-4.5-7.715M12 4s6 3.996 6 9.6c0 3.535-2.686 6.4-6 6.4s-6-2.865-6-6.4C6 7.995 12 4 12 4z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/edit.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m17.174 4.9 1.976 1.98-8.32 8.37H8.8v-1.987z"/><path d="M13.191 5.707h-7.21v12.587H18.02v-7.531"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/edit_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m17.174 4.9 1.976 1.98-8.32 8.37H8.8v-1.987z" fill="#707070"/><path d="M12.75 5.707H5.981v12.587H18.02V11.5" fill="none"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/ellipsis.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-width="1.5"><g transform="translate(4 10)"><circle cx="2" cy="2" r="2" stroke="none"/><circle cx="2" cy="2" r="1.25" fill="none"/></g><g transform="translate(10 10)"><circle cx="2" cy="2" r="2" stroke="none"/><circle cx="2" cy="2" r="1.25" fill="none"/></g><g transform="translate(16 10)"><circle cx="2" cy="2" r="2" stroke="none"/><circle cx="2" cy="2" r="1.25" fill="none"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/email.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 6h16v12H4z" stroke="none"/><path d="M4.75 6.75h14.5v10.5H4.75z"/><path d="M4.793 7.418 12 13.5l7.039-6.083"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/email_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#a)"><path d="M19 17.25H5a.25.25 0 0 1-.25-.25V9.023c.088.195.218.37.384.515l5.849 5.084a1.493 1.493 0 0 0 1.065.368c.363 0 .712-.131.985-.369l5.848-5.083c.157-.137.281-.301.369-.483V17a.25.25 0 0 1-.25.25zm-6.992-5.712L7.102 7.274a1.498 1.498 0 0 0-2.352.515V7A.25.25 0 0 1 5 6.75h14a.25.25 0 0 1 .25.25v.757a1.505 1.505 0 0 0-1.353-.851c-.36 0-.71.13-.983.366l-4.906 4.266z"/><path d="M18.5 16.5v-5.637l-4.974 4.323a2.247 2.247 0 0 1-1.478.554h-.083a2.243 2.243 0 0 1-1.474-.552L5.5 10.849v5.65h13m-6.492-5.955 3.5-3.044H8.506l3.503 3.044M19 18H5c-.552 0-1-.449-1-1V7c0-.551.448-1 1-1h14c.551 0 1 .449 1 1v10c0 .551-.449 1-1 1zm-6.992-3.761h.04a.747.747 0 0 0 .492-.183l5.849-5.084a.745.745 0 0 0 .256-.514.75.75 0 0 0-1.24-.618l-5.397 4.691L6.61 7.84a.749.749 0 0 0-1.24.618c.014.2.105.383.256.514l5.849 5.084c.136.118.31.184.49.184l.043-.001z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/email_read.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="m4.869 10.444 7.182 3.222 7.014-3.222"/><path d="M12.045 4.974 4.787 9.837v9.5H19.25v-9.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/email_read_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M19.781 19.731h-15.5V9.601l7.779-5.188 7.722 5.188V19.73zM12 14.507h0a.363.363 0 0 0 .044 0 .66.66 0 0 0 .319-.082l6.457-3.519a.777.777 0 0 0 .307-1.009.7.7 0 0 0-.625-.41.657.657 0 0 0-.318.082l-6.183 3.37L5.818 9.57a.657.657 0 0 0-.318-.082.7.7 0 0 0-.625.41.777.777 0 0 0 .306 1.009l6.458 3.518a.666.666 0 0 0 .316.082z" fill="#6b6b6b" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/expand.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M8.75 19.295h-4v-4" stroke-linejoin="round"/><path d="m4.75 19.295 6.045-6.045"/><path d="M15.295 4.75h4v4" stroke-linejoin="round"/><path d="m19.295 4.75-6.045 6.045"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/external_link.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M13 7H5v12h12v-8m-2-6h4v4" stroke-linejoin="round"/><path d="m19 5-8 8"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/facebook.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M13.95 7.05H16V4h-2.425C10.65 4.125 10.05 5.775 10 7.5v1.525H8V12h2v8h3v-8h2.475l.475-2.975H13V8.1a.99.99 0 0 1 .95-1.05z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/facebook_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M20 4.893A.932.932 0 0 0 19.107 4H4.857A.9.9 0 0 0 4 4.893v14.25a.869.869 0 0 0 .857.857h7.679v-6.175h-2.107v-2.432h2.107V9.607a2.909 2.909 0 0 1 3.107-3.182 14.828 14.828 0 0 1 1.857.107v2.143h-1.286c-1 0-1.179.5-1.179 1.179v1.536h2.393l-.321 2.435h-2.071V20h4.071a.9.9 0 0 0 .893-.857z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/facebook_like.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" clip-path="url(#a)"><path d="M20 11.618c0-.65-.725-.95-.95-.95h-4.9a25.3 25.3 0 0 0 .5-2.8 5.855 5.855 0 0 0-.85-2.4 1.162 1.162 0 0 0-1.275.125l.1 2.25s-1.15 2.05-1.8 3.075a5.34 5.34 0 0 1-1.5 1.525v5.175h.45c.15 0 .725.525 1.15.525h6.1c.525 0 1.4-.05 1.4-.9a.822.822 0 0 0-.35-.7v-.1s.85-.275.85-1.025a.751.751 0 0 0-.35-.625l.05-.2a1.237 1.237 0 0 0 .8-1.05c0-.475-.325-.55-.325-.55l.05-.225c.05-.05.85-.375.85-1.15zm-12.275.125H4.8a.79.79 0 0 0-.8.8l.525 5.325a.79.79 0 0 0 .8.8h2.4a.79.79 0 0 0 .8-.8v-5.325a.806.806 0 0 0-.8-.8z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/file.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M14 4.75H6v14.5h12V8.375z"/><path d="M14 5.138V8.75h4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/file_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M18.21 20H5.852V4h7.149v5h5.209v11z"/><path d="m15.563 4.196 2.5 2.5h-2.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/filter.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M13.75 13v5.844L10.25 17v-4L5 6h14z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/filter_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M13.75 13v5.844L10.25 17v-4L5 6h14z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/flag.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M8 5v15"/><g stroke-linejoin="round"><path d="M7.25 5h13v8h-13z" stroke="none"/><path d="M8 5.75h11.5v6.5H8z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/flag_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path fill="none" d="M8 5v15"/><g fill="#707070" stroke-linejoin="round"><path d="M7.25 5.645h13v8h-13z" stroke="none"/><path fill="none" d="M8 6.395h11.5v6.5H8z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/flag_triangle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M8 5v15"/><path d="M8 5.853V16l11.249-5.239z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/flag_triangle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path fill="none" d="M8 5v15"/><path d="M8 5.853V16l11.249-5.239z" fill="#707070" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/flickr.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M7.525 8.5A3.516 3.516 0 0 0 4 12a3.516 3.516 0 0 0 3.525 3.5A3.516 3.516 0 0 0 11.05 12a3.548 3.548 0 0 0-3.525-3.5zm8.975 0A3.51 3.51 0 0 0 13 12a3.51 3.51 0 0 0 3.5 3.5A3.51 3.51 0 0 0 20 12a3.51 3.51 0 0 0-3.5-3.5z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/folder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4 6v12h16V7.959h-8L10.041 6z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/folder_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4 6v12h16V7.959h-8L10.041 6z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/foursquare.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M16.322 4H7.803a1.411 1.411 0 0 0-1.524 1.445v13.54a.986.986 0 0 0 .525.949.942.942 0 0 0 1.024-.225s4.022-4.664 4.097-4.742c.1-.1.1-.1.2-.1h2.6a1.292 1.292 0 0 0 1.374-1.249c.1-.375 1.174-5.846 1.524-7.595C17.921 4.725 17.571 4 16.322 4zm-.2 9.618c.1-.375 1.174-5.846 1.524-7.595m-1.824.275-.35 1.874a.622.622 0 0 1-.525.425h-3.322a.61.61 0 0 0-.65.625v.4a.63.63 0 0 0 .65.65h2.823a.515.515 0 0 1 .475.575c-.05.275-.325 1.674-.35 1.824a.546.546 0 0 1-.525.425h-2.3a.807.807 0 0 0-.824.4c-.275.35-2.8 3.373-2.8 3.373-.025.025-.05.025-.05 0V6.274a.527.527 0 0 1 .525-.525h6.849a.473.473 0 0 1 .374.549z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/gear.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g transform="rotate(90 2.333 12)"><circle cx="2.333" cy="2.333" r="2.333" stroke="none"/><circle cx="2.333" cy="2.333" r="1.583"/></g><path d="M10.821 5.556 9.386 8h-2.54L5.695 9.89 6.846 12l-1.151 2.132 1.151 2.166h2.54l1.436 2.364h2.461l1.261-2.364h2.474l1.345-2.166L17.248 12l1.114-2.11L17.248 8h-2.7l-1.261-2.444z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/gear_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M13.283 18.656h-2.461l-1.435-2.363H6.848l-1.152-2.162L6.847 12 5.696 9.889l1.151-1.89h2.539l1.435-2.443h2.461L14.543 8h2.7l1.114 1.89-1.114 2.111 1.114 2.131-1.345 2.165h-2.473l-1.261 2.363zm-1.282-9.16a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 11.996 9.5z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/github.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4.192a7.991 7.991 0 0 0-8 8 8.047 8.047 0 0 0 5.475 7.6c.4.075.55-.175.55-.375v-1.5c-2.225.475-2.7-.95-2.7-.95a2.182 2.182 0 0 0-.9-1.175c-.725-.5.05-.475.05-.475a1.669 1.669 0 0 1 1.225.825 1.709 1.709 0 0 0 2.325.675 1.732 1.732 0 0 1 .5-1.075c-1.775-.2-3.65-.9-3.65-3.95a3.067 3.067 0 0 1 .825-2.15 2.991 2.991 0 0 1 .075-2.125s.675-.225 2.2.825a7.719 7.719 0 0 1 2-.275 7.573 7.573 0 0 1 2 .275c1.525-1.025 2.2-.825 2.2-.825a2.991 2.991 0 0 1 .075 2.125 3.024 3.024 0 0 1 .825 2.15c0 3.075-1.875 3.75-3.65 3.95a1.937 1.937 0 0 1 .55 1.475v2.2c0 .225.15.45.55.375a8.047 8.047 0 0 0 5.475-7.6 7.991 7.991 0 0 0-8-8z" fill="#707070" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/globe.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><g transform="translate(4 4)"><circle cx="8" cy="8" r="8" stroke="none"/><circle cx="8" cy="8" r="7.25"/></g><path d="M19 9.75H5m14 4.5H5m7.5-9.558c3.385 3.385 3.427 11.189 0 14.616m-.91.073c-3.45-3.45-3.3-11.369 0-14.672"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/grid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h4v4H4z" stroke="none"/><path d="M4.75 4.75h2.5v2.5h-2.5z"/><path d="M4 10h4v4H4z" stroke="none"/><path d="M4.75 10.75h2.5v2.5h-2.5z"/><path d="M4 16h4v4H4z" stroke="none"/><path d="M4.75 16.75h2.5v2.5h-2.5z"/><path d="M10 4h4v4h-4z" stroke="none"/><path d="M10.75 4.75h2.5v2.5h-2.5z"/><path d="M10 10h4v4h-4z" stroke="none"/><path d="M10.75 10.75h2.5v2.5h-2.5z"/><path d="M10 16h4v4h-4z" stroke="none"/><path d="M10.75 16.75h2.5v2.5h-2.5z"/><path d="M16 4h4v4h-4z" stroke="none"/><path d="M16.75 4.75h2.5v2.5h-2.5z"/><path d="M16 10h4v4h-4z" stroke="none"/><path d="M16.75 10.75h2.5v2.5h-2.5z"/><path d="M16 16h4v4h-4z" stroke="none"/><path d="M16.75 16.75h2.5v2.5h-2.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/grid_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h4v4H4z" stroke="none"/><path fill="none" d="M4.75 4.75h2.5v2.5h-2.5z"/><path d="M4 10h4v4H4z" stroke="none"/><path fill="none" d="M4.75 10.75h2.5v2.5h-2.5z"/><path d="M4 16h4v4H4z" stroke="none"/><path fill="none" d="M4.75 16.75h2.5v2.5h-2.5z"/><path d="M10 4h4v4h-4z" stroke="none"/><path fill="none" d="M10.75 4.75h2.5v2.5h-2.5z"/><path d="M10 10h4v4h-4z" stroke="none"/><path fill="none" d="M10.75 10.75h2.5v2.5h-2.5z"/><path d="M10 16h4v4h-4z" stroke="none"/><path fill="none" d="M10.75 16.75h2.5v2.5h-2.5z"/><path d="M16 4h4v4h-4z" stroke="none"/><path fill="none" d="M16.75 4.75h2.5v2.5h-2.5z"/><path d="M16 10h4v4h-4z" stroke="none"/><path fill="none" d="M16.75 10.75h2.5v2.5h-2.5z"/><path d="M16 16h4v4h-4z" stroke="none"/><path fill="none" d="M16.75 16.75h2.5v2.5h-2.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/heart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 7.231c2.236-4.045 7.5-2.15 7.5 2.176S15.82 15.238 12 19c-3.9-3.84-7.5-5.267-7.5-9.593S9.894 3.42 12 7.231z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/heart_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 7.231c2.236-4.045 7.5-2.15 7.5 2.176S15.82 15.238 12 19c-3.9-3.84-7.5-5.267-7.5-9.593S9.894 3.42 12 7.231z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/hexagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m8 4.756-4 7.168 4 7.342h8l4-7.342-4-7.168z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/hexagon_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m8 4.756-4 7.168 4 7.342h8l4-7.342-4-7.168z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/hide.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M4 12s4-4 8-4 8 4 8 4-4 4-8 4-8-4-8-4z" stroke-linejoin="round"/><path d="m6.5 6.5 11 11"/><circle cx="2.5" cy="2.5" r="2.5" transform="translate(9.5 9.5)" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/hierarchy.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><g stroke-linejoin="round"><path d="M10 4h4v4h-4z" stroke="none"/><path d="M10.75 4.75h2.5v2.5h-2.5z"/></g><g stroke-linejoin="round"><path d="M4 16h4v4H4z" stroke="none"/><path d="M4.75 16.75h2.5v2.5h-2.5z"/></g><g stroke-linejoin="round"><path d="M10 16h4v4h-4z" stroke="none"/><path d="M10.75 16.75h2.5v2.5h-2.5z"/></g><g stroke-linejoin="round"><path d="M16 16h4v4h-4z" stroke="none"/><path d="M16.75 16.75h2.5v2.5h-2.5z"/></g><path d="M12 8.976v5.729"/><path d="M6 14.7V12h12.4v2.7" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/hierarchy_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><g fill="#707070" stroke-linejoin="round"><path d="M10 4h4v4h-4z" stroke="none"/><path fill="none" d="M10.75 4.75h2.5v2.5h-2.5z"/></g><g fill="#707070" stroke-linejoin="round"><path d="M4 16h4v4H4z" stroke="none"/><path fill="none" d="M4.75 16.75h2.5v2.5h-2.5z"/></g><g fill="#707070" stroke-linejoin="round"><path d="M10 16h4v4h-4z" stroke="none"/><path fill="none" d="M10.75 16.75h2.5v2.5h-2.5z"/></g><g fill="#707070" stroke-linejoin="round"><path d="M16 16h4v4h-4z" stroke="none"/><path fill="none" d="M16.75 16.75h2.5v2.5h-2.5z"/></g><path d="M12 9.5v5" fill="none"/><path d="M6 14.5V12h12.4v2.5" fill="none" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/history.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M6.44 16.922A7.5 7.5 0 0 0 17.048 6.315c-2.927-2.927-7.325-2.574-10.606 0"/><path d="M5.75 4.544v2.634h2.634m2.866.071v5.2l3.6 1.952"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/home.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M10 14.5h4v5h-4z" stroke="none"/><path d="M10.75 15.25h2.5v3.5h-2.5zm-6.362-5.5 7.612-4 7.612 4"/><path d="M6 9.14v9.647h12V9.14"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/home_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="m4 9.175 8-4 8 4"/><path d="M18 18.825H6v-9.65h12v9.649zM10.5 15v3.75h3V15z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/html5.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m4.95 4 1.3 14.375L12 20l5.75-1.625L19.05 4zm11.3 4.7H9.5l.15 1.8h6.45l-.5 5.45-3.6 1h-.05l-3.625-1-.225-2.775h1.75l.125 1.4 1.95.525 1.975-.525.225-2.275H8.05l-.475-5.35h8.85z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/image.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="none"><path d="M3 4.5h18v15H3z" stroke="none"/><path d="M3.75 5.25h16.5v13.5H3.75z"/></g><path d="M6.421 12.083v4.007H17.75v-2.25l-2.1-2.134-2.206 1.715L9.388 8.89z" fill="#707070"/><g transform="translate(14 6.75)" fill="none"><circle cx="1.5" cy="1.5" r="1.5" stroke="none"/><circle cx="1.5" cy="1.5" r=".75"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/info.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)" stroke-linejoin="round"/><path d="M12 8.5h0m-1.084 2.49h1M10.5 15.25h3M12 11v4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/info_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm-1.5-5.5a.751.751 0 0 0-.75.75.751.751 0 0 0 .75.75h3a.751.751 0 0 0 .75-.75.751.751 0 0 0-.75-.75h-.751v-3a.751.751 0 0 0-.75-.75h-1a.751.751 0 0 0-.75.75.751.751 0 0 0 .75.751h.25v2.25zM12 8a.751.751 0 0 0-.751.751.751.751 0 0 0 .751.75.751.751 0 0 0 .75-.75A.751.751 0 0 0 12 8z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/instagram.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M15.005 4.048H8.994a4.948 4.948 0 0 0-4.937 4.955v6.011a4.947 4.947 0 0 0 4.937 4.938h6.011a4.947 4.947 0 0 0 4.938-4.937V9.004a4.948 4.948 0 0 0-4.937-4.955zm1.807 3.757a.608.608 0 1 0-1.216 0 .608.608 0 1 0 1.216 0zM12 8.074a3.936 3.936 0 0 0 0 7.871 3.86 3.86 0 0 0 2.773-1.163 3.909 3.909 0 0 0 0-5.563 3.845 3.845 0 0 0-2.774-1.146zm0 6.511a2.595 2.595 0 1 1 1.825-.769 2.583 2.583 0 0 1-1.826.769zm6.583.429a3.5 3.5 0 0 1-1.056 2.522 3.57 3.57 0 0 1-2.522 1.056H8.994a3.645 3.645 0 0 1-2.54-1.056 3.554 3.554 0 0 1-1.038-2.522V9.003a3.565 3.565 0 0 1 1.038-2.54 3.643 3.643 0 0 1 2.54-1.056h6.011a3.568 3.568 0 0 1 2.522 1.056 3.507 3.507 0 0 1 1.056 2.54z" fill="#707070" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/kebab.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke="#707070" stroke-width="1.5" clip-path="url(#a)"><g transform="rotate(90 5 9)"><circle cx="2" cy="2" r="2" stroke="none"/><circle cx="2" cy="2" r="1.25" fill="none"/></g><g transform="rotate(90 2 12)"><circle cx="2" cy="2" r="2" stroke="none"/><circle cx="2" cy="2" r="1.25" fill="none"/></g><g transform="rotate(90 -1 15)"><circle cx="2" cy="2" r="2" stroke="none"/><circle cx="2" cy="2" r="1.25" fill="none"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/laptop.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g data-name="Group 87" fill="none" stroke="#707070" stroke-width="1.5" clip-path="url(#a)"><path d="M4 17h16"/><path d="M5 7.5h14V16H5z" stroke="none"/><path d="M5.75 8.25h12.5v7H5.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/laptop_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g data-name="Group 87" stroke="#707070" stroke-width="1.5" clip-path="url(#a)"><path fill="none" d="M4 17h16"/><g fill="#707070"><path d="M5 7.5h14V16H5z" stroke="none"/><path fill="none" d="M5.75 8.25h12.5v7H5.75z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/lastfm.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M16.945 11.161c-1.252-.376-1.7-.576-1.7-1 0-.7 1-.851 1.1-.876a1.73 1.73 0 0 1 1.953.926l1.7-.526a3.459 3.459 0 0 0-3.931-2.128 2.758 2.758 0 0 0-2.629 2.6c0 1.778 1.728 2.3 2.98 2.654 1.327.4 1.778.626 1.778 1.1 0 .4-.326.6-.977.776-1.277.326-3 0-3.455-.776a11.742 11.742 0 0 1-.776-1.753c-.751-2-1.8-4.732-4.808-4.732C6.629 7.455 4 8.081 4 12.363a4.125 4.125 0 0 0 4.131 4.207c2.4 0 2.8-.977 2.9-1.152l-.771-1.528a2.832 2.832 0 0 1-2.128.926c-2.254 0-2.354-2.429-2.354-2.454 0-2.228.726-3.155 2.4-3.155 1.653 0 2.3 1.427 3.13 3.581a11.747 11.747 0 0 0 .9 2.028c.751 1.227 2.454 1.753 4.081 1.753a5 5 0 0 0 1.4-.175c1.427-.376 2.3-1.252 2.3-2.454.011-1.853-1.742-2.379-3.044-2.779z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/line_chart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4v16h16"/><path d="m6 16 4-4 4 2.109 4-4.131"/><path d="M18.634 12V9.366H16"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/link.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M13.11 11.196a2.21 2.21 0 0 1 0 3.185l-3.732 3.732a2.252 2.252 0 0 1-3.182-3.182l1.725-1.725"/><path d="M10.889 12.804a2.21 2.21 0 0 1 0-3.186l3.733-3.732a2.252 2.252 0 0 1 3.182 3.182l-1.725 1.725"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/linkedin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" fill-rule="evenodd" clip-path="url(#a)"><path d="M5.924 4.044A1.913 1.913 0 1 1 4 5.944a1.929 1.929 0 0 1 1.924-1.9zM7.049 20H4.8a.531.531 0 0 1-.541-.519v-9.6a.535.535 0 0 1 .541-.54h2.249a.53.53 0 0 1 .519.54v9.6a.526.526 0 0 1-.519.519zM20 12.714a3.631 3.631 0 0 0-3.655-3.632h-.562a3.217 3.217 0 0 0-2.66 1.384 1.214 1.214 0 0 0-.173.281h-.043V9.558a.216.216 0 0 0-.216-.216H9.88a.232.232 0 0 0-.216.216v10.224a.232.232 0 0 0 .216.216h2.876a.216.216 0 0 0 .216-.216v-5.9a1.865 1.865 0 0 1 3.179-1.341 1.923 1.923 0 0 1 .54 1.319v5.924a.217.217 0 0 0 .216.216h2.875a.217.217 0 0 0 .217-.216v-7.07z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/list.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M8.25 6h11m-11 4h11m-11 8h11m-11-4h11M4.75 6h.023m-.023 4h.023m-.023 8h.023m-.023-4h.023"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/list_large.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h4v4H4z" stroke="none"/><path d="M4.75 4.75h2.5v2.5h-2.5z"/><path d="M4 10h4v4H4z" stroke="none"/><path d="M4.75 10.75h2.5v2.5h-2.5z"/><path d="M4 16h4v4H4z" stroke="none"/><path d="M4.75 16.75h2.5v2.5h-2.5z"/><path d="M10 4h10v4H10z" stroke="none"/><path d="M10.75 4.75h8.5v2.5h-8.5z"/><path d="M10 10h10v4H10z" stroke="none"/><path d="M10.75 10.75h8.5v2.5h-8.5z"/><path d="M10 16h10v4H10z" stroke="none"/><path d="M10.75 16.75h8.5v2.5h-8.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/list_large_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h4v4H4z" stroke="none"/><path fill="none" d="M4.75 4.75h2.5v2.5h-2.5z"/><path d="M4 10h4v4H4z" stroke="none"/><path fill="none" d="M4.75 10.75h2.5v2.5h-2.5z"/><path d="M4 16h4v4H4z" stroke="none"/><path fill="none" d="M4.75 16.75h2.5v2.5h-2.5z"/><path d="M10 4h10v4H10z" stroke="none"/><path fill="none" d="M10.75 4.75h8.5v2.5h-8.5z"/><path d="M10 10h10v4H10z" stroke="none"/><path fill="none" d="M10.75 10.75h8.5v2.5h-8.5z"/><path d="M10 16h10v4H10z" stroke="none"/><path fill="none" d="M10.75 16.75h8.5v2.5h-8.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/loading_circle_spinner.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColors"><path d="M12 2.398a9.673 9.673 0 0 1 9.602 8.582 1.198 1.198 0 0 0 1.195 1.086A1.208 1.208 0 0 0 24 10.72C23.348 4.582 18.172-.078 12-.078S.652 4.582 0 10.719a1.212 1.212 0 0 0 1.2 1.348c.62 0 1.14-.47 1.198-1.087A9.673 9.673 0 0 1 12 2.398zm0 0" fill="currentFill"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/loading_ellipsis_pulse.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g fill="currentFill"><circle cx="5" cy="12" r="3"><animate attributeName="r" from="3" to="3" begin="0s" dur="1s" values="2;4;2;2;2" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="12" cy="12" r="3"><animate attributeName="r" from="3" to="3" begin="0.25s" dur="1s" values="2;4;2;2;2" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="19" cy="12" r="3"><animate attributeName="r" from="3" to="3" begin="0.5s" dur="1s" values="2;4;2;2;2" calcMode="linear" repeatCount="indefinite"/></circle></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/loading_ellipsis_typing.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><g fill="currentFill"><circle cx="3" cy="12" r="3"><animateTransform attributeName="transform" dur="1s" type="translate" values="0 7; 0; 0 7; 0 7" repeatCount="indefinite" begin="0"/></circle><circle cx="12" cy="12" r="3"><animateTransform attributeName="transform" dur="1s" type="translate" values="0 7 ; 0; 0 7; 0 7" repeatCount="indefinite" begin=".2"/></circle><circle cx="21" cy="12" r="3"><animateTransform attributeName="transform" dur="1s" type="translate" values="0 7 ; 0; 0 7; 0 7" repeatCount="indefinite" begin=".4"/></circle></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/loading_ring_spinner.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"><circle stroke-opacity=".25" cx="11" cy="11" r="11"/><path d="M22 12c0-9.94-8.06-12-12-12"><animateTransform attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="1s" repeatCount="indefinite"/></path></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/location.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke-linecap="round" stroke-linejoin="round"><g fill="none"><path d="M12 19.28s5.462-4.781 5.46-8.737A5.651 5.651 0 0 0 12 4.719a5.651 5.651 0 0 0-5.46 5.824C6.54 14.5 12 19.28 12 19.28z"/><path d="M12.003 17.203c1.596-1.633 3.959-4.512 3.958-6.66 0-2.384-1.777-4.324-3.96-4.324-2.184 0-3.961 1.94-3.961 4.324 0 1.245.842 2.976 2.37 4.876.563.7 1.133 1.316 1.593 1.784M12 19.28s-5.46-4.78-5.46-8.737C6.54 7.327 8.985 4.72 12 4.72c3.016 0 5.46 2.608 5.46 5.824C17.463 14.5 12 19.28 12 19.28z" fill="#707070"/></g><g transform="translate(10.5 8.5)" fill="#fff" stroke="#707070" stroke-width="1.5"><circle cx="1.5" cy="1.5" r="1.5" stroke="none"/><circle cx="1.5" cy="1.5" r=".75" fill="none"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/location_arrow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M18.466 6.112 4.7 12.042l5.696 2.141 2.141 5.697z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/location_arrow_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M18.466 6.112 4.7 12.042l5.696 2.141 2.141 5.697z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/location_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" clip-path="url(#a)"><path d="M12 18.257a25.843 25.843 0 0 1-2.147-2.333C8.2 13.878 7.29 11.967 7.29 10.544c0-2.798 2.113-5.075 4.71-5.075 2.598 0 4.711 2.277 4.711 5.075 0 1.423-.91 3.334-2.563 5.38A25.846 25.846 0 0 1 12 18.257zM12 7.75A2.253 2.253 0 0 0 9.75 10c0 1.24 1.01 2.25 2.25 2.25s2.25-1.01 2.25-2.25c0-1.241-1.01-2.25-2.25-2.25z"/><path d="M12.001 17.202a24.64 24.64 0 0 0 1.563-1.75c1.546-1.913 2.398-3.656 2.397-4.908 0-2.385-1.777-4.325-3.96-4.325-2.185 0-3.961 1.94-3.961 4.325 0 1.252.851 2.995 2.397 4.909A24.672 24.672 0 0 0 12 17.202M12 7c1.653 0 3 1.345 3 3 0 1.654-1.347 3-3 3-1.655 0-3-1.346-3-3 0-1.655 1.345-3 3-3m0 12.28h-.002a25.886 25.886 0 0 1-2.73-2.885c-1.245-1.541-2.73-3.808-2.73-5.851 0-3.212 2.45-5.825 5.461-5.825s5.461 2.613 5.461 5.825c0 2.043-1.484 4.31-2.73 5.851A25.91 25.91 0 0 1 12 19.28zM12 8.5a1.501 1.501 0 0 0 0 3c.826 0 1.5-.673 1.5-1.5s-.674-1.5-1.5-1.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/lock.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><g transform="translate(0 -.438)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M6 10.022h11.931V20H6zm9.5 0V7.351s-.062-2.912-3.5-2.912-3.6 2.912-3.6 2.912v2.671z" fill="none"/><circle cx="1" cy="1" r="1" transform="translate(11 13.5)" fill="#707070"/><path fill="none" d="M11.5 15.5h1v1h-1z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/lock_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M18.125 19.793H5.875v-10h12.25v10zm-6.112-7.966A2.1 2.1 0 0 0 9.9 13.913a2.069 2.069 0 0 0 .544 1.4v.863a1 1 0 0 0 1 1h1.113a1 1 0 0 0 1-1v-.837a2.062 2.062 0 0 0 .57-1.426 2.1 2.1 0 0 0-2.114-2.086z" fill="#707070"/><path d="M15.5 9.584V6.913s-.062-2.912-3.5-2.912-3.6 2.912-3.6 2.912v2.671z" fill="none"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/long_arrow_down.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="m8 15 4 4 4-4" stroke-linejoin="round"/><path d="M12 18.723V4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/long_arrow_left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m9 8-4 4 4 4" stroke-linejoin="round"/><path d="M5.838 12H20"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/long_arrow_right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m15 16 4-4-4-4" stroke-linejoin="round"/><path d="M4 12h14.723"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/long_arrow_up.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m16 9-4-4-4 4" stroke-linejoin="round"/><path d="M12 5.277V20"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/map.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M4 20V8l5-4 6 4 5-4v12l-5 4-6-4z" stroke-linejoin="round"/><path d="M9 4v12m6-8v12"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/map_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4 20V8l3.75-3v12L4 20zm9.751-.833h0l-3.5-2.332v-12l3.5 2.334v12zm2.5-.167V7L20 4v12l-3.748 3z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M5 6h15M5 12h15M5 18h15"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/mic.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M9 19.25h6M12 17v2"/><path d="M6.761 12S6.673 16.8 12 16.8a4.988 4.988 0 0 0 5.413-4.8" stroke-linejoin="round"/><g transform="translate(8.5 4)" stroke-linejoin="round"><rect width="7" height="11" rx="3.5" stroke="none"/><rect x=".75" y=".75" width="5.5" height="9.5" rx="2.75"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/mic_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path fill="none" d="M9 19.25h6M12 17v2"/><path d="M6.761 12S6.673 16.8 12 16.8a4.988 4.988 0 0 0 5.413-4.8" fill="none" stroke-linejoin="round"/><g transform="translate(8.5 4)" fill="#707070" stroke-linejoin="round"><rect width="7" height="11" rx="3.5" stroke="none"/><rect x=".75" y=".75" width="5.5" height="9.5" rx="2.75" fill="none"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/minus.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" d="M6 12h12"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/minus_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path stroke-linecap="round" d="M8.5 12h7"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/minus_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm-3.5-8.75a.751.751 0 0 0-.75.75.751.751 0 0 0 .75.75h7a.751.751 0 0 0 .75-.75.751.751 0 0 0-.75-.75z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/minus_octagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M8.5 12h7"/><path d="M15.114 4.742H8.885L4.742 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/minus_shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M9.759 10.983h4.483"/><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/minus_square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M8.5 12h7"/><g stroke-linejoin="round"><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/mobile.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-width="1.5" clip-path="url(#a)"><g transform="translate(11 15)" fill="#fff"><circle cx="1" cy="1" r="1" stroke="none"/><circle cx="1" cy="1" r=".25" fill="none"/></g><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M6.667 4h10.667v16H6.667z" stroke="none"/><path d="M7.417 4.75h9.167v14.5H7.417z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/mobile_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#a)"><path d="M16 18.75H8a.25.25 0 0 1-.25-.25v-13A.25.25 0 0 1 8 5.25h8a.25.25 0 0 1 .25.25v13a.25.25 0 0 1-.25.25zm-4-4.5c-.965 0-1.75.785-1.75 1.75s.785 1.75 1.75 1.75 1.75-.785 1.75-1.75-.785-1.75-1.75-1.75z"/><path d="M15.5 18V6h-7v12h2.002A2.498 2.498 0 0 1 12 13.5a2.498 2.498 0 0 1 1.498 4.5H15.5m.5 1.5H8c-.551 0-1-.448-1-1v-13c0-.551.449-1 1-1h8c.552 0 1 .449 1 1v13a1 1 0 0 1-1 1zM12 15a1.001 1.001 0 0 0 0 2 1.001 1.001 0 0 0 0-2z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/monitor.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M8 19h8m-4-2v2"/><g stroke-linejoin="round"><path d="M4 5h16v12H4z" stroke="none"/><path d="M4.75 5.75h14.5v10.5H4.75z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/monitor_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path fill="none" d="M8 19h8m-4-2v2"/><g fill="#707070" stroke-linejoin="round"><path d="M4 5h16v12H4z" stroke="none"/><path fill="none" d="M4.75 5.75h14.5v10.5H4.75z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/music.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><g transform="translate(4 15)" stroke-linecap="round" stroke-linejoin="round"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75"/></g><g transform="translate(13 13)" stroke-linecap="round" stroke-linejoin="round"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75"/></g><path d="M8.255 17.34V7.154l9-2.313V15.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m8.256 10.369 9.125-2.368"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/music_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke-linecap="round"><g transform="translate(4 15)" fill="#707070" stroke="#707070" stroke-linejoin="round" stroke-width="1.5"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75" fill="none"/></g><g transform="translate(13 13)" fill="#707070" stroke="#707070" stroke-linejoin="round" stroke-width="1.5"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75" fill="none"/></g><path fill="none" stroke="#707070" stroke-width="1.5" d="M8.25 17.25v-10m9 8v-10"/><g fill="#707070" stroke-linejoin="round"><path d="M8.25 10.08V7.197l9-2.238v3.116l-9 2.005z"/><path d="M16.5 5.919 9 7.783v1.361l7.5-1.67V5.92M18 4v4.677L7.5 11.015V6.61L18 4z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M19.216 5v14"/><path d="M4.75 5.408v13.629L16.216 12z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/next_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path fill="none" d="M19.216 5v14"/><path d="M4.75 5.408v13.629L16.216 12z" fill="#707070" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/not_allowed.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><g transform="translate(4 4)"><circle cx="8" cy="8" r="8" stroke="none"/><circle cx="8" cy="8" r="7.25"/></g><path d="m7 7 10 10"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/octagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M15.114 4.742H8.885L4.742 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/octagon_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M15.115 4.742H8.886L4.743 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/octagon_warning_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g data-name="Subtraction 22" fill="#707070" clip-path="url(#a)"><path d="M15.003 19.25H8.997L4.75 15.003V8.997L8.997 4.75h6.006l4.247 4.247v6.006l-4.247 4.247zM10.501 14v3H13.5V7h-3v7z"/><path d="m14.693 18.5 3.807-3.807V9.308L14.693 5.5H9.308L5.5 9.308v5.385L9.308 18.5h5.385M9.75 13.25v-7h4.5v11.5h-4.5v-4.5M15.315 20H8.686L4 15.314V8.686L8.686 4h6.628L20 8.686v6.628L15.314 20zm-4.063-5.25v1.5h1.499v-1.5h-1.5zm0-7v6h1.499v-6h-1.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/package.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><path d="M4.831 8.448 12.001 12l7.213-3.552" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 12v7.15" stroke-linecap="round"/><path d="M12.008 4.428 4.725 8.446V16l7.283 4 7.283-4V8z" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.936 6.465 16 9.905"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pause.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M5.5 4h5v16h-5z" stroke="none"/><path d="M6.25 4.75h3.5v14.5h-3.5z"/><path d="M13.5 4h5v16h-5z" stroke="none"/><path d="M14.25 4.75h3.5v14.5h-3.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pause_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M5.5 4h5v16h-5z" stroke="none"/><path fill="none" d="M6.25 4.75h3.5v14.5h-3.5z"/><path d="M13.5 4h5v16h-5z" stroke="none"/><path fill="none" d="M14.25 4.75h3.5v14.5h-3.5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/paypal.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" clip-path="url(#a)"><path d="m9.431 13.214-.025.15a.7.7 0 0 1 .7-.6h1.454c2.829 0 5.058-1.152 5.709-4.482.025-.1.025-.2.05-.275a3.1 3.1 0 0 0-.676-2.829A5.007 5.007 0 0 0 12.862 4H7.954a.7.7 0 0 0-.7.6L5.2 17.571a.408.408 0 0 0 .426.476h3.03l.776-4.833"/><path d="M18.195 8.757c-.05-.05-.075-.1-.125-.125-.626 3.255-2.829 4.983-6.31 4.983h-1.452c-.025 0-.05.025-.075.05l-.776 4.983a.237.237 0 0 1-.275.225h-.1a.371.371 0 0 0-.351.3l-.075.4a.382.382 0 0 0 .376.426h2.554a.617.617 0 0 0 .6-.526l.025-.125.476-3.055.025-.175a.617.617 0 0 1 .6-.526h.376c2.479 0 4.407-1 4.983-3.906a3.217 3.217 0 0 0-.476-2.929z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pencil.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M16.279 5 19 7.726 7.545 19.25H4.75v-2.736z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pencil_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M16.279 5 19 7.726 7.545 19.25H4.75v-2.736z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/phone.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.63 14.789a15.758 15.758 0 0 1-2.682-8.692l.165-.059.002-.007.771-.289c.116-.045.078-.03.176-.066l1.984-.743 1.09 3.13L9.84 9.3a15.623 15.623 0 0 0 3.746 5.974l1.203-.69 2.637 2.203-1.408 1.806h0l-.577.746c-2.22-1.295-4.233-2.37-5.813-4.55z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/phone_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.63 14.789a15.758 15.758 0 0 1-2.682-8.692l.165-.059.002-.007.771-.289c.116-.045.078-.03.176-.066l1.984-.743 1.09 3.13L9.84 9.3a15.623 15.623 0 0 0 3.746 5.974l1.203-.69 2.637 2.203-1.408 1.806h0l-.577.746c-2.22-1.295-4.233-2.37-5.813-4.55z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pie_chart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g transform="translate(4 4)"><circle cx="8" cy="8" r="8" stroke="none"/><circle cx="8" cy="8" r="7.25"/></g><path d="M18.184 8.6 12 12V4.83"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pie_chart_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#a)"><path d="M12 19.25c-3.998 0-7.25-3.252-7.25-7.25a7.23 7.23 0 0 1 1.903-4.896A7.235 7.235 0 0 1 10.5 4.906v9.756l1.099-.579 7.42-3.906c.154.592.231 1.202.231 1.823 0 3.998-3.252 7.25-7.25 7.25zm1.5-9.621V4.906a7.254 7.254 0 0 1 4.172 2.58L13.5 9.628z"/><path d="M12 18.5a6.507 6.507 0 0 0 6.465-7.184l-6.517 3.43A1.499 1.499 0 0 1 9.75 13.42V5.9a6.5 6.5 0 0 0-2.544 1.71A6.481 6.481 0 0 0 5.5 12c0 3.584 2.916 6.5 6.5 6.5m2.25-10.1 2.205-1.133A6.462 6.462 0 0 0 14.25 5.9v2.5M12 20c-4.411 0-8-3.589-8-8 0-2.006.746-3.924 2.1-5.402a7.977 7.977 0 0 1 5.15-2.563v9.385l8.208-4.321A7.97 7.97 0 0 1 20 12c0 4.411-3.589 8-8 8zm.75-9.143V4.035a8.005 8.005 0 0 1 3.488 1.178 8.08 8.08 0 0 1 2.546 2.544l-6.033 3.1h-.001z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/pinterest.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M8.903 19.316a8.041 8.041 0 1 1 .992.349c.257-.624.551-1.248.752-1.891.221-.643.349-1.322.515-1.946.128.11.275.239.422.349a2.711 2.711 0 0 0 2.5.441 3.715 3.715 0 0 0 2.24-1.542 6.086 6.086 0 0 0 1.047-4.443A4.188 4.188 0 0 0 14.635 7.2a5.868 5.868 0 0 0-6.371 1.065 4.611 4.611 0 0 0-1.229 5.1 2.436 2.436 0 0 0 1.194 1.3c.293.147.421.092.513-.22a.135.135 0 0 1 .019-.073 1.148 1.148 0 0 0-.166-1.193 2.7 2.7 0 0 1-.183-2.46 3.74 3.74 0 0 1 3.561-2.662 5.557 5.557 0 0 1 1.34.147 2.761 2.761 0 0 1 2.185 2.625 5.952 5.952 0 0 1-.551 3.029 3.133 3.133 0 0 1-.973 1.212 1.669 1.669 0 0 1-1.376.257 1.212 1.212 0 0 1-.9-1.487c.184-.716.4-1.414.588-2.111a3.363 3.363 0 0 0 .092-.936 1.045 1.045 0 0 0-1.616-.826 1.844 1.844 0 0 0-.881 1.322 3.228 3.228 0 0 0 .128 1.671.828.828 0 0 1 .018.367c-.349 1.469-.7 2.919-1.009 4.369a10.869 10.869 0 0 0-.111 1.322z" fill="#707070" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/play.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.781 4.816v14.46l14.466-7.468z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/play_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.905 4.864v14.364l14.348-7.417z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/plus.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12 6v12m-6-6h12"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/plus_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path stroke-linecap="round" d="M12 8.5v7M8.5 12h7"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/plus_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm-3.339-8.911A.912.912 0 0 0 7.75 12a.912.912 0 0 0 .911.911h2.429v2.428a.911.911 0 0 0 .91.911.912.912 0 0 0 .911-.911v-2.428h2.429a.911.911 0 0 0 .91-.911.911.911 0 0 0-.91-.911h-2.429V8.661A.912.912 0 0 0 12 7.75a.911.911 0 0 0-.91.911v2.428z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/plus_octagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12 8.5v7M8.5 12h7"/><path d="M15.114 4.742H8.885L4.742 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/plus_shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12 8.972v4.385m-2.193-2.193h4.385"/><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/plus_square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12 8.5v7M8.5 12h7"/><g stroke-linejoin="round"><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/power.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M12 4.5v8"/><path d="M6.803 6.697A7.5 7.5 0 0 0 17.41 17.303c2.927-2.927 2.574-7.325 0-10.606" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/previous.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M4.75 5v14"/><path d="M19.216 5.408v13.629L7.75 12z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/previous_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path fill="none" d="M4.75 5v14"/><path d="M19.216 5.408v13.629L7.75 12z" fill="#707070" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/print.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M7 4h10v4.5H7z" stroke="none"/><path d="M7.75 4.75h8.5v3h-8.5z"/><path d="M7 12h10v7H7z" stroke="none"/><path d="M7.75 12.75h8.5v5.5h-8.5z"/><path d="M7.552 16H4V8h16v8h-3.736"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/print_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="none"><path d="M7 4h10v4.5H7z" stroke="none"/><path d="M7.75 4.75h8.5v3h-8.5z"/></g><g fill="none"><path d="M7 11.5h10V19H7z" stroke="none"/><path d="M7.75 12.25h8.5v6h-8.5z"/></g><path d="M7 16H4V8h16v8h-3v-4H7v4z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/question.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)" stroke-linejoin="round"/><path d="M12 16h0"/><path d="M10.142 10.188a1.859 1.859 0 1 1 3.717 0c0 1.175-1.825 1.578-1.858 2.965h0" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/redo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="m14.988 8.04 3.97-.488-.488-3.97"/><path d="M18.047 17.303A7.5 7.5 0 0 1 7.44 6.697c2.928-2.928 7.326-2.574 10.607 0"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/refresh.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m8.83 14.825-3.927-.763-.763 3.926"/><path d="M19.328 14.038a7.3 7.3 0 0 1-3.736 4.396c-3.689 1.879-7.762.184-10.087-3.278m9.642-6.09 3.926.763.763-3.926"/><path d="M4.648 9.853a7.3 7.3 0 0 1 3.736-4.396c3.689-1.879 7.762-.184 10.087 3.278"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/rss.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M6.15 15.625A2.15 2.15 0 0 0 4 17.775a2.166 2.166 0 0 0 2.15 2.15 2.134 2.134 0 0 0 2.15-2.15 2.166 2.166 0 0 0-2.15-2.15zM4.175 9.35H4.05v2.975h.125a7.447 7.447 0 0 1 7.45 7.425v.175H14.6v-.175A10.413 10.413 0 0 0 4.175 9.35zm0-5.375H4.05V6.95h.125A12.83 12.83 0 0 1 17 19.75v.175h3v-.175A15.818 15.818 0 0 0 4.175 3.975z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/save.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M16.8 4.75H4.75l.044 14.452h14.408V7.194z"/><path d="M8.75 4.794v4.8h7v-4.8"/><g transform="translate(8.996 11.398)"><circle cx="3.002" cy="3.002" r="3.002" stroke="none"/><circle cx="3.002" cy="3.002" r="2.252"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/save_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M20 20H4V4l13.333.105L20 6.666V20zm-8-8a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3zM8 4.178V10h8V4.181H8z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/search.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="5.25" cy="5.25" r="5.25" transform="translate(5.75 5.75)" stroke-linejoin="round"/><path d="m15 15 4 4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/send.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4.75 6.5v11l14.5-5.5z"/><path d="M4.75 11.25v1.5l5.367-.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/send_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M4.75 17.5h0v-3.757L12 12.017 4.75 10.29V6.5l14.5 5.5-14.5 5.5z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/share.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><g transform="translate(14 5)"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75"/></g><g transform="translate(5 9.5)"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75"/></g><g transform="translate(14 14)"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75"/></g><path d="m8.375 11.381 7.25-3.38M8.5 12.5l6.75 3.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/share_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><g transform="translate(14 5)" fill="#707070" stroke="#707070" stroke-width="1.5"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75" fill="none"/></g><g fill="#707070"><path d="M7.5 13.75c-.965 0-1.75-.785-1.75-1.75s.785-1.75 1.75-1.75 1.75.785 1.75 1.75-.785 1.75-1.75 1.75z"/><path d="M7.5 11a1.001 1.001 0 0 0 0 2 1.001 1.001 0 0 0 0-2m0-1.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/></g><g transform="translate(14 14)" fill="#707070" stroke="#707070" stroke-width="1.5"><circle cx="2.5" cy="2.5" r="2.5" stroke="none"/><circle cx="2.5" cy="2.5" r="1.75" fill="none"/></g><path fill="none" stroke="#707070" stroke-width="1.5" d="m8.375 11.381 7.25-3.38M8.5 12.5l6.75 3.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/shield_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/sign_in.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="m10.751 16.249 4-4-4-4" stroke-linejoin="round"/><path d="M14.474 12.249H5.751"/><path d="M14.751 18.249h3.5v-12h-3.5" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/sign_out.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="m14.249 8.249 4 4-4 4" stroke-linejoin="round"/><path d="M17.972 12.249H9.249"/><path d="M9.249 6.249h-3.5v12h3.5" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/sliders.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><g transform="translate(14 4.75)" stroke-linejoin="round"><circle cx="2.25" cy="2.25" r="2.25" stroke="none"/><circle cx="2.25" cy="2.25" r="1.5"/></g><g transform="translate(7 9.75)" stroke-linejoin="round"><circle cx="2.25" cy="2.25" r="2.25" stroke="none"/><circle cx="2.25" cy="2.25" r="1.5"/></g><g transform="translate(14 14.75)" stroke-linejoin="round"><circle cx="2.25" cy="2.25" r="2.25" stroke="none"/><circle cx="2.25" cy="2.25" r="1.5"/></g><path d="M20 7h-2m2 5h-9m9 5h-2M14 7H4m3 5H4m10 5H4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/sliders_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke-linecap="round"><g fill="#707070"><path d="M16.25 8.5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5z"/><path d="M16.25 6.25a.75.75 0 1 0 .002 1.502.75.75 0 0 0-.002-1.502m0-1.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5z"/></g><g transform="translate(7 9.75)" fill="#707070" stroke="#707070" stroke-width="1.5"><circle cx="2.25" cy="2.25" r="2.25" stroke="none"/><circle cx="2.25" cy="2.25" r="1.5" fill="none"/></g><g transform="translate(14 14.75)" fill="#707070" stroke="#707070" stroke-width="1.5"><circle cx="2.25" cy="2.25" r="2.25" stroke="none"/><circle cx="2.25" cy="2.25" r="1.5" fill="none"/></g><path fill="none" stroke="#707070" stroke-width="1.5" d="M20 7h-3m3 5H10m10 5h-3M15 7H4m4 5H4m11 5H4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/spotify.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4a7.991 7.991 0 0 0-8 8 7.991 7.991 0 0 0 8 8 7.991 7.991 0 0 0 8-8 7.991 7.991 0 0 0-8-8zm3.075 11.8a.664.664 0 0 1-.35-.125 8.01 8.01 0 0 0-4.15-1.075 12.02 12.02 0 0 0-2.525.275 2.761 2.761 0 0 1-.4.075.5.5 0 0 1-.5-.5.527.527 0 0 1 .425-.55 13.475 13.475 0 0 1 3-.35 8.947 8.947 0 0 1 4.65 1.2.533.533 0 0 1 .325.525.461.461 0 0 1-.475.525zm.875-2.125a.709.709 0 0 1-.4-.15 10.356 10.356 0 0 0-5.075-1.275 10.826 10.826 0 0 0-2.6.325 1.177 1.177 0 0 1-.4.1.619.619 0 0 1-.625-.625.651.651 0 0 1 .5-.675 10.94 10.94 0 0 1 3.15-.45 11.177 11.177 0 0 1 5.7 1.475.646.646 0 0 1 .375.625.625.625 0 0 1-.625.65zm1-2.45a.755.755 0 0 1-.4-.125 12.215 12.215 0 0 0-5.875-1.35 12.456 12.456 0 0 0-3.2.375 2.251 2.251 0 0 1-.4.075.758.758 0 0 1-.75-.775.8.8 0 0 1 .55-.775 13.976 13.976 0 0 1 3.8-.5A13.373 13.373 0 0 1 17.3 9.7a.756.756 0 0 1 .4.725.764.764 0 0 1-.75.8z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/square_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4 4h16v16H4z" stroke="none"/><path fill="none" d="M4.75 4.75h14.5v14.5H4.75z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/star.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m11.964 4.608-1.735 5.521H4.776l4.538 3.508L7.378 19.3l4.586-3.818 4.605 3.818-1.927-5.663 4.58-3.508h-5.615z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/star_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="m11.964 4.608-1.735 5.521H4.776l4.538 3.508L7.378 19.3l4.586-3.818 4.605 3.818-1.927-5.663 4.58-3.508h-5.615z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/table.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" stroke="#707070" stroke-linecap="round"><g fill="none" stroke-linejoin="round" stroke-width="1.5"><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g><g fill="#707070" stroke-linejoin="round"><path d="M4 4h16v3H4z" stroke="none"/><path fill="none" d="M4.5 4.5h15v2h-15z"/></g><path fill="none" stroke-width="1.5" d="M12 6.5v12m-6.5-5.75h13"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/tablet.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-width="1.5" clip-path="url(#a)"><g transform="translate(11 15)" fill="#fff"><circle cx="1" cy="1" r="1" stroke="none"/><circle cx="1" cy="1" r=".25" fill="none"/></g><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5.25 4h13.5v16H5.25z" stroke="none"/><path d="M6 4.75h12v14.5H6z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/tablet_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#a)"><path d="M17.5 18.75h-11a.25.25 0 0 1-.25-.25v-13a.25.25 0 0 1 .25-.25h11a.25.25 0 0 1 .25.25v13a.25.25 0 0 1-.25.25zm-5.5-4.5c-.965 0-1.75.785-1.75 1.75s.785 1.75 1.75 1.75 1.75-.785 1.75-1.75-.785-1.75-1.75-1.75z"/><path d="M17 18V6H7v12h3.502A2.498 2.498 0 0 1 12 13.5a2.498 2.498 0 0 1 1.498 4.5H17m.5 1.5h-11c-.551 0-1-.448-1-1v-13c0-.551.449-1 1-1h11c.551 0 1 .449 1 1v13c0 .552-.449 1-1 1zM12 15a1.001 1.001 0 0 0 0 2 1.001 1.001 0 0 0 0-2z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/tag.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M4.815 4.839h6.399l7.757 7.785-6.4 6.422-7.756-7.785z"/><g transform="translate(6.582 6.505)"><circle cx="1.5" cy="1.5" r="1.5" stroke="none"/><circle cx="1.5" cy="1.5" r=".75"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/tag_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.672 19h0L5 11.328V5h6.329L19 12.672 12.672 19zM7.235 5.553a1.573 1.573 0 1 0 1.573 1.573 1.575 1.575 0 0 0-1.573-1.573z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/tiktok.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M19.021 8.01a4.031 4.031 0 0 1-2.436-.814 4.041 4.041 0 0 1-1.533-2.436 4.062 4.062 0 0 1-.081-.76h-2.609v11.049a2.365 2.365 0 0 1-1.624 2.243 2.374 2.374 0 0 1-.878.116 2.353 2.353 0 0 1-1.082-.332 2.364 2.364 0 0 1-1.156-1.992 2.367 2.367 0 0 1 2.37-2.4 2.377 2.377 0 0 1 .746.12v-2.653a5.141 5.141 0 0 0-.753-.056 5.01 5.01 0 0 0-3.764 1.684 4.9 4.9 0 0 0-1.24 2.958 4.894 4.894 0 0 0 1.458 3.813 5.094 5.094 0 0 0 .472.412A5.01 5.01 0 0 0 9.981 20a5.132 5.132 0 0 0 .753-.055 4.992 4.992 0 0 0 2.789-1.395 4.891 4.891 0 0 0 1.467-3.481l-.013-5.839a6.6 6.6 0 0 0 1.467.856 6.6 6.6 0 0 0 2.583.521v-2.6z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/time.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="M11.25 7.249v5.2l3.6 1.952" stroke-linecap="round" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/time_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm-.249-13.051A.751.751 0 0 0 11 7.7v5a.748.748 0 0 0 .109.391.747.747 0 0 0 .291.3l2.165 1.25a.747.747 0 0 0 .374.1.751.751 0 0 0 .65-.375.745.745 0 0 0 .075-.569.744.744 0 0 0-.349-.455L12.5 12.3V7.7a.751.751 0 0 0-.75-.751z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/times.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m6 6 12 12m0-12L6 18"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/times_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)"/><path d="m9 9 6 6m0-6-6 6" stroke-linecap="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/times_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zM9.425 8.567a.851.851 0 0 0-.607.252.858.858 0 0 0 0 1.211L10.787 12l-1.969 1.969a.859.859 0 0 0 0 1.213.848.848 0 0 0 .6.251.851.851 0 0 0 .607-.252l1.97-1.969 1.97 1.969a.85.85 0 0 0 .606.251.852.852 0 0 0 .606-.25.853.853 0 0 0 .252-.607.851.851 0 0 0-.251-.607l-1.97-1.969 1.969-1.97a.858.858 0 0 0 0-1.211.853.853 0 0 0-.607-.252.849.849 0 0 0-.6.251L12 10.787l-1.969-1.97a.851.851 0 0 0-.606-.25z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/times_octagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m9 9 6 6m0-6-6 6"/><path d="M15.114 4.742H8.885L4.742 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/times_shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M10.34 9.681 13.659 13m0-3.319L10.34 13"/><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/times_square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m9 9 6 6m0-6-6 6"/><g stroke-linejoin="round"><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/trash.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path stroke-linejoin="round" d="M7.5 7.5h9v11h-9z"/><path d="M6.5 7.5h11m-7.75 2v7m2.25-7v7m2.25-7v7"/><path stroke-linejoin="round" d="M9.5 5.5h5v2h-5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/trash_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-linecap="round" stroke-width="1.5" clip-path="url(#a)"><path d="M16.5 17.75h-9v-11h9v11zm-1.786-9.9a1 1 0 0 0-1 1v7.577a1 1 0 0 0 1 1h.143a1 1 0 0 0 1-1V8.85a1 1 0 0 0-1-1zm-2.786 0a1 1 0 0 0-1 1v7.577a1 1 0 0 0 1 1h.143a1 1 0 0 0 1-1V8.85a1 1 0 0 0-1-1zm-2.571 0a1 1 0 0 0-1 1v7.577a1 1 0 0 0 1 1H9.5a1 1 0 0 0 1-1V8.85a1 1 0 0 0-1-1z" fill="#707070" stroke-linejoin="round"/><path fill="none" d="M6.5 6.75h11"/><path fill="none" stroke-linejoin="round" d="M9.5 4.75h5v2h-5z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/triangle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4.747 4 19.233h16z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/triangle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 4.747 4 19.233h16z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/tumblr.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M14.725 17.375a1.893 1.893 0 0 1-1.975-1.9v-5h3.5v-2.5h-3.5V4h-2.525A3.989 3.989 0 0 1 7.25 8.1v2.375h2v5.9A3.881 3.881 0 0 0 13.3 20a6.28 6.28 0 0 0 3.45-.875V16.5a2.633 2.633 0 0 1-2.025.875z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/twitch.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" clip-path="url(#a)"><path d="M15.475 17.9H12.35l-2.1 2.1h-2.1v-2.1h-3.8V6.775L5.4 4h14.25v9.75zm2.775-4.85V5.4H6.775v10.075H9.9v2.075l2.075-2.075H15.8z" fill-rule="evenodd"/><path d="M14.425 12.35h1.4V8.175h-1.4zm-3.825 0H12V8.175h-1.4z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/twitter.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M3.291 17.502a10.207 10.207 0 0 0 15.655-8.624v-.413a7.931 7.931 0 0 0 1.762-1.837 7.825 7.825 0 0 1-2.025.524 3.715 3.715 0 0 0 1.556-1.987 11.37 11.37 0 0 1-1.725.731c-.169.056-.356.112-.525.169a3.553 3.553 0 0 0-2.625-1.144 3.593 3.593 0 0 0-3.581 3.581 3.79 3.79 0 0 0 .094.806 10.713 10.713 0 0 1-7.349-3.712S2.822 7.94 5.559 10.339a3.7 3.7 0 0 1-1.556-.469 3.414 3.414 0 0 0 2.831 3.563 3.269 3.269 0 0 1-1.575.056 3.544 3.544 0 0 0 3.281 2.512 6.882 6.882 0 0 1-5.25 1.5z" fill="#707070" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/undo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="m9.5 8.039-3.97-.487.487-3.97"/><path d="M6.44 17.303A7.5 7.5 0 0 0 17.048 6.696c-2.927-2.927-7.325-2.574-10.606 0"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/unlock.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><g transform="translate(0 -.438)" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M6 10.022h11.931V20H6z" fill="none"/><circle cx="1" cy="1" r="1" transform="translate(11 13.5)" fill="#707070"/><path fill="none" d="M11.5 15.5h1v1h-1zm4.009-5.478V7.041s-.277-2.6-3.6-2.6-3.509 2.6-3.509 2.6"/></g></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/unlock_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M15.509 9.584V6.603s-.277-2.6-3.6-2.6-3.509 2.6-3.509 2.6" fill="none"/><path d="M18.125 19.793H5.875v-10h12.25v10zm-6.112-7.966A2.1 2.1 0 0 0 9.9 13.913a2.069 2.069 0 0 0 .544 1.4v.863a1 1 0 0 0 1 1h1.113a1 1 0 0 0 1-1v-.837a2.062 2.062 0 0 0 .57-1.426 2.1 2.1 0 0 0-2.114-2.086z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/up_down.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="m8 14 4 4 4-4m0-4-4-4-4 4"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/upload.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="m8 10 4-4 4 4" stroke-linejoin="round"/><path d="M12 6.277V15"/><path d="M6 15v3.5h12V15" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/user.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g transform="translate(8 4)"><circle cx="4" cy="4" r="4" stroke="none"/><circle cx="4" cy="4" r="3.25"/></g><path d="M4.8 19.332s-.543-5.639 7.2-5.639 7.3 5.639 7.3 5.639z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/user_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g transform="translate(8 4)"><circle cx="4" cy="4" r="4" stroke="none"/><circle cx="4" cy="4" r="3.25" fill="none"/></g><path d="M4.8 19.332s-.543-5.639 7.2-5.639 7.3 5.639 7.3 5.639z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/user_group.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M7.001 16.791s-.364-3.781 4.828-3.781 4.895 3.781 4.895 3.781z"/><path d="M6.997 16.791a3.433 3.433 0 0 1 .428-1.822H1.997s-.3-3.114 3.976-3.114c2.063 0 3.074.725 3.568 1.475a7.353 7.353 0 0 1 2.285-.319 7.047 7.047 0 0 1 2.55.411c.457-.782 1.45-1.567 3.6-1.567 4.277 0 4.032 3.114 4.032 3.114h-5.745a3.468 3.468 0 0 1 .46 1.822zm3.11-7.833a1.749 1.749 0 0 1 1.75-1.75 1.75 1.75 0 0 1 1.751 1.75 1.751 1.751 0 0 1-1.751 1.751 1.75 1.75 0 0 1-1.749-1.751zm6.583-.441a1.309 1.309 0 0 1 1.309-1.309 1.309 1.309 0 0 1 1.309 1.309 1.309 1.309 0 0 1-1.309 1.309 1.309 1.309 0 0 1-1.307-1.309zm-12 0A1.309 1.309 0 0 1 6 7.208a1.309 1.309 0 0 1 1.309 1.309A1.309 1.309 0 0 1 6 9.826a1.309 1.309 0 0 1-1.308-1.309z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/user_group_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M6.997 16.791a3.433 3.433 0 0 1 .428-1.822H1.997s-.3-3.114 3.976-3.114c2.063 0 3.074.725 3.568 1.475a7.353 7.353 0 0 1 2.285-.319 7.047 7.047 0 0 1 2.55.411c.457-.782 1.45-1.567 3.6-1.567 4.277 0 4.032 3.114 4.032 3.114h-5.745a3.468 3.468 0 0 1 .46 1.822zm3.11-7.833a1.749 1.749 0 0 1 1.75-1.75 1.75 1.75 0 0 1 1.751 1.75 1.751 1.751 0 0 1-1.751 1.751 1.75 1.75 0 0 1-1.749-1.751zm6.583-.441a1.309 1.309 0 0 1 1.309-1.309 1.309 1.309 0 0 1 1.309 1.309 1.309 1.309 0 0 1-1.309 1.309 1.309 1.309 0 0 1-1.307-1.309zm-12 0A1.309 1.309 0 0 1 6 7.208a1.309 1.309 0 0 1 1.309 1.309A1.309 1.309 0 0 1 6 9.826a1.309 1.309 0 0 1-1.308-1.309z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/video.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M15.93 10.269v-2.6H4.751v8.663h11.178v-2.4l3.319 1.74V8.838z" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/video_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M15.93 10.269v-2.6H4.751v8.663h11.178v-2.4l3.319 1.74V8.838z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/view.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 12s4-4 8-4 8 4 8 4-4 4-8 4-8-4-8-4z"/><circle cx="2.5" cy="2.5" r="2.5" transform="translate(9.5 9.5)"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/vimeo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M17.475 5C15.45 5 13.85 6.325 13.15 8.8c.75-.35 2.1-.55 2.225.7.1 1.25-1.775 4.45-2.6 4.45s-1.425-3.625-1.65-5.275c-.2-1.675-.6-3.5-2.15-3.5C7.4 5.175 5.4 7.625 4 8.725l.725 1s1.05-.825 1.4-.75c.95.25 1.75 4.1 2.175 5.575S9.225 19 11.275 19C14.55 19 20 10.85 20 8.175 20 6.425 19.5 5 17.475 5z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12 17h0m0-7v4.5"/><path d="M12 4.747 4 19.233h16z" stroke-linejoin="round"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_circle.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="7.5" cy="7.5" r="7.5" transform="translate(4.5 4.5)" stroke-linejoin="round"/><path d="M12 15.5h0M12 8v5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_circle_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M12 20a8.009 8.009 0 0 1-8-8 8.009 8.009 0 0 1 8-8 8.009 8.009 0 0 1 8 8 8.009 8.009 0 0 1-8 8zm0-5a.751.751 0 0 0-.751.751.751.751 0 0 0 .751.75.751.751 0 0 0 .75-.75A.751.751 0 0 0 12 15zm0-7.5a.751.751 0 0 0-.751.75v4.5a.751.751 0 0 0 .751.751.751.751 0 0 0 .75-.751v-4.5A.751.751 0 0 0 12 7.5z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M20 19.232H4l8-14.485 8 14.484zM12 8.5a1.406 1.406 0 0 0-1.457 1.312v4.183a1.431 1.431 0 0 0 .384 1.07 1.558 1.558 0 0 0 1.07.433h0a1.5 1.5 0 0 0-1.5 1.5 1.5 1.5 0 0 0 1.5 1.5 1.5 1.5 0 0 0 1.5-1.5 1.5 1.5 0 0 0-1.491-1.5 1.691 1.691 0 0 0 .857-.234 1.394 1.394 0 0 0 .592-1.27V9.811A1.377 1.377 0 0 0 12 8.501z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_octagon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M15.114 4.742H8.885L4.742 8.914v6.151l4.143 4.172h6.229l4.143-4.172V8.914z" stroke-linejoin="round"/><path d="M12 15.5h0M12 8v5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_octagon_fill.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M15.115 19.242H8.886l-4.143-4.177V8.914l4.143-4.172h6.229l4.143 4.172v6.151l-4.142 4.172zM12 7.005a1.406 1.406 0 0 0-1.457 1.312V12.5a1.431 1.431 0 0 0 .384 1.07 1.558 1.558 0 0 0 1.07.433h0a1.5 1.5 0 0 0-1.5 1.5 1.5 1.5 0 0 0 1.5 1.5 1.5 1.5 0 0 0 1.5-1.5 1.5 1.5 0 0 0-1.491-1.5 1.691 1.691 0 0 0 .857-.234 1.394 1.394 0 0 0 .592-1.27V8.316A1.377 1.377 0 0 0 12 7z" fill="#707070" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_shield.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><path d="M12 4.932 5.75 9A14.09 14.09 0 0 0 12 19.158 14.09 14.09 0 0 0 18.25 9z" stroke-linejoin="round"/><path d="M12 15.5h0M12 8v5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/warning_square.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><g stroke-linejoin="round"><path d="M4 4h16v16H4z" stroke="none"/><path d="M4.75 4.75h14.5v14.5H4.75z"/></g><path d="M12 15.5h0M12 8v5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/whatsapp.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g fill="#707070" fill-rule="evenodd" clip-path="url(#a)"><path d="m4.457 19.549 1.057-3.759a7.513 7.513 0 1 1 2.815 2.767zm4.063-2.368.24.144a6.263 6.263 0 1 0-2.016-1.968l.16.24-.608 2.16z"/><path d="m9.897 8.48-.5-.032a.661.661 0 0 0-.416.144 2.326 2.326 0 0 0-.736 1.12 3.369 3.369 0 0 0 .8 2.672 7.872 7.872 0 0 0 4.271 3.1 2.069 2.069 0 0 0 1.76-.224 1.579 1.579 0 0 0 .688-.992l.08-.368a.307.307 0 0 0-.144-.288l-1.648-.752a.275.275 0 0 0-.32.08l-.64.832a.174.174 0 0 1-.208.064 5.108 5.108 0 0 1-2.752-2.352.2.2 0 0 1 .032-.208l.607-.72a.25.25 0 0 0 .048-.256l-.72-1.664a.221.221 0 0 0-.202-.156z"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/yelp.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M11.228 11.065a.742.742 0 0 0 .8-.825c0-.55.2-5.7-.225-6.073s-2.1-.025-2.574.125c-.975.325-2.074.825-2.1 1.25s3.645 5.473 4.099 5.523zm5.1-3.124c-.375 0-3.3 3.5-2.8 4.148.3.4.65.35 1.474.2s3.474-.65 3.524-1.325-1.552-3.022-2.2-3.022zm-5.725 5.149c0-.45-1.4-1.075-1.4-1.075a16.7 16.7 0 0 0-3.024-1.05c-.475.05-.65 1.25-.7 2.149-.1 2.474 1.1 1.824 1.1 1.824s2.524-.8 3.024-1c.5-.174 1-.399 1-.848zm1.271 1.749c-.575-.05-1.25 1-1.6 1.4s-1.745 1.824-1.77 2.224c0 .375.75.8 1.774 1.175s2.2.65 2.249-.175 0-3.124 0-3.4c0-.249.025-1.149-.653-1.224zm5.8.25c-.55-.2-3.5-1.524-4.024-.95-.325.35-.125.95.225 1.5s1.599 2.474 1.599 2.474.225.5.625.5 1.175-.725 1.574-1.275a3.726 3.726 0 0 0 .801-1.574c0-.375-.249-.5-.8-.675z" fill="#707070"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/youtube.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M19.662 8.152a2 2 0 0 0-1.417-1.417 58.038 58.038 0 0 0-12.507 0 2.028 2.028 0 0 0-1.416 1.417 23.146 23.146 0 0 0 0 7.694 2.028 2.028 0 0 0 1.416 1.416A47.486 47.486 0 0 0 12 17.6a49.518 49.518 0 0 0 6.246-.322 2 2 0 0 0 1.417-1.417 22.154 22.154 0 0 0 0-7.71zm-9.256 6.246 4.153-2.4-4.153-2.4z" fill="#707070" fill-rule="evenodd"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/zoom_in.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="5.25" cy="5.25" r="5.25" transform="translate(5.75 5.75)" stroke-linejoin="round"/><path d="m15 15 4 4M11 8.5v5M8.5 11h5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/icon/icons/zoom_out.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs><g clip-path="url(#a)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.5"><circle cx="5.25" cy="5.25" r="5.25" transform="translate(5.75 5.75)" stroke-linejoin="round"/><path d="m15 15 4 4M8.5 11h5"/></g></svg>


--------------------------------------------------------------------------------
/src/scripts/components/image/image.scss:
--------------------------------------------------------------------------------
 1 | .ks-img {
 2 |     display: block;
 3 | 
 4 |     img {
 5 |         width: 100%;
 6 |         height: auto;
 7 |         vertical-align: middle;
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/scripts/components/loading/loading.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../scss/00_Abstracts/index";
 2 | 
 3 | .ks-loading {
 4 |     display: inline-flex;
 5 |     align-items: center;
 6 | 
 7 |     .ks-icon {
 8 |         width: 1.5em;
 9 |         height: 1.5em;
10 | 
11 |         .icon {
12 |             margin: 0;
13 |         }
14 |     }
15 | 
16 |     .message {
17 |         line-height: 1;
18 |         @include ml(sm);
19 |     }
20 | 
21 |     &.show-message {
22 |         .spinner {
23 |             display: inline-flex;
24 |             align-items: center;
25 |         }
26 |     }
27 | }
28 | 
29 | .ks-loading-overlay {
30 |     cursor: wait;
31 | 
32 |     .content {
33 |         line-height: 1;
34 |         @include shadow(none, true);
35 | 
36 |         .ks-icon {
37 |             width: 1.5em;
38 |             height: 1.5em;
39 |         }
40 | 
41 |         .show-message {
42 |             flex-direction: column;
43 |             align-items: center;
44 | 
45 |             .message {
46 |                 margin-top: 0.25em;
47 |                 @include ml(none);
48 |             }
49 |         }
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/scripts/components/loading/loading.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Prop, Element, ComponentInterface, Host } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-loading',
 5 |     styleUrl: 'loading.scss'
 6 | })
 7 | export class Loading implements ComponentInterface {
 8 |     @Element() $el: HTMLElement;
 9 | 
10 |     @Prop() icon: string = 'loading_circle_spinner';
11 |     @Prop() message: string = 'Loading...';
12 |     @Prop() showMessage: boolean = false;
13 | 
14 |     render() {
15 |         let supportsSvgAnimations = !!document.createElementNS && /SVGAnimate/.test((({}).toString).call(document.createElementNS('http://www.w3.org/2000/svg', 'animate')));
16 | 
17 |         return (
18 |             <Host class={{ 'ks-loading': true, 'show-message': this.showMessage }}>
19 |                 <ks-icon class={`${!supportsSvgAnimations ? 'spin-slow' : ''}`} icon={this.icon}></ks-icon>
20 |                 <span aria-live="assertive" role="alert" aria-busy="true" class={{ 'message': true, 'sr-only': !this.showMessage}}>{this.message}</span>
21 |             </Host>);
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/scripts/components/menu-bar/menu-group.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Host, Prop, ComponentInterface } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-menu-group'
 5 | })
 6 | export class MenuGroup implements ComponentInterface {
 7 |     @Prop() position: 'left' | 'right' = 'right';
 8 | 
 9 |     render() {
10 |         return (
11 |             <Host class={`menu-group align-${this.position}`}>
12 |                 <slot />
13 |             </Host>
14 |         );
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/scripts/components/menu-bar/menu-item.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, Element, h, Host, State, ComponentInterface } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-menu-item'
 5 | })
 6 | export class MenuItem implements ComponentInterface {
 7 |     @Element() $el: HTMLElement;
 8 | 
 9 |     @State() isActive: boolean;
10 | 
11 |     getActiveStatus() {
12 |         let $link = this.$el.querySelector('a');
13 | 
14 |         let isActive = $link 
15 |             ? $link.getAttribute('href') === window.location.pathname
16 |             : false;
17 | 
18 |         if(isActive)
19 |             $link.setAttribute('aria-current', 'page');
20 | 
21 |         return isActive;
22 |     }
23 | 
24 |     render() {
25 |         let classes = {
26 |             'menu-item': true,
27 |             'active': this.getActiveStatus()
28 |         };
29 | 
30 |         return (
31 |             <Host class={classes}>
32 |                 <slot />
33 |             </Host>
34 |         );
35 |     }
36 | }


--------------------------------------------------------------------------------
/src/scripts/components/menu-bar/menu-row.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Host, ComponentInterface } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-menu-row'
 5 | })
 6 | export class MenuRow implements ComponentInterface {
 7 |     render() {
 8 |         return (
 9 |             <Host class="menu-row">
10 |                 <slot />
11 |             </Host>
12 |         );
13 |     }
14 | }


--------------------------------------------------------------------------------
/src/scripts/components/menu-bar/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-menu
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ----------------------------------------------
 9 | 
10 | *Built with [StencilJS](https://stenciljs.com/)*
11 | 


--------------------------------------------------------------------------------
/src/scripts/components/modal/modal-footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Host, ComponentInterface } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-modal-footer'
 5 | })
 6 | export class Modal implements ComponentInterface {
 7 |     render() {
 8 |         return (
 9 |             <Host class="modal-footer">
10 |                 <slot />
11 |             </Host>
12 |         );
13 |     }
14 | }


--------------------------------------------------------------------------------
/src/scripts/components/modal/modal.stories.ts:
--------------------------------------------------------------------------------
 1 | import { select, boolean } from '@storybook/addon-knobs';
 2 | 
 3 | export default { title: 'Components/Modal' };
 4 | 
 5 | export const playground = () => {
 6 |     const size = select('size', ['sm', 'md', 'lg'], 'md');
 7 |     const preventClose = boolean('prevent-close', false);
 8 | 
 9 |     return (`
10 |     <div style="width:300px; height:300px;">
11 |         <ks-button class="m-xxl" shows="modal" id="open">Guess What???</ks-button>
12 |         <ks-modal modal-title="Toby's back!!!" size="${size}" prevent-close="${preventClose}" id="modal">
13 |             <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" alt="michael scott" />
14 |             <ks-modal-footer>
15 |                 <ks-button class="close" hides="modal" display="clear">Cancel</ks-button>
16 |                 <ks-button class="close" hides="modal">Close Modal!</ks-button>
17 |             </ks-modal-footer>
18 |         </ks-modal>
19 |     </div>
20 |     `);
21 | };
22 | 


--------------------------------------------------------------------------------
/src/scripts/components/modal/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-modal
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ----------------------------------------------
 9 | 
10 | *Built with [StencilJS](https://stenciljs.com/)*
11 | 


--------------------------------------------------------------------------------
/src/scripts/components/progress-bar/progress-bar.stories.ts:
--------------------------------------------------------------------------------
 1 | import { text, select, boolean, number } from '@storybook/addon-knobs';
 2 | 
 3 | export default { title: 'Components/Progress Bar' };
 4 | 
 5 | const types = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'];
 6 | const sizes = ['xs', 'sm', 'md', 'lg'];
 7 | 
 8 | export const playground = () => {
 9 |     const color = select('color', types, 'primary');
10 |     const value = number('value', 25);
11 |     const size = select('size', sizes, 'md');
12 |     const description = text('description', 'Loading...');
13 |     const hideDescription = boolean('hide-description', false);
14 |     const progressLabel = text('progress-label', 'Progress');
15 |     const hideProgressLabel = boolean('hide-progress-label', false);
16 |     return (`<ks-progress-bar class="m-xxl" color="${color}" description="${description}" progress-label="${progressLabel}" hide-progress-label="${hideProgressLabel}" hide-description="${hideDescription}" size="${size}" value="${value}" />`);
17 | };
18 | 


--------------------------------------------------------------------------------
/src/scripts/components/responsive-embed/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-alert
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property      | Attribute      | Description | Type     | Default  |
11 | | ------------- | -------------- | ----------- | -------- | -------- |
12 | | `aspectRatio` | `aspect-ratio` |             | `string` | `'16x9'` |
13 | 
14 | 
15 | ----------------------------------------------
16 | 
17 | *Built with [StencilJS](https://stenciljs.com/)*
18 | 


--------------------------------------------------------------------------------
/src/scripts/components/responsive-embed/responsive-embed.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:math";
 2 | @use "../../../scss/00_Abstracts/variables" as *;
 3 | 
 4 | .ks-responsive-embed {
 5 |     position: relative;
 6 |     display: block;
 7 |     width: 100%;
 8 |     padding: 0;
 9 |     overflow: hidden;
10 | 
11 |     @each $x, $y in $responsive-embed-aspect-ratios {
12 |         &.ratio-#{$x}x#{$y} {
13 |             padding-top: #{(math.div($y, $x) * 100) + "%"};
14 |         }
15 |     }
16 | 
17 |     embed,
18 |     iframe,
19 |     object,
20 |     video {
21 |         position: absolute;
22 |         top: 0;
23 |         bottom: 0;
24 |         left: 0;
25 |         width: 100%;
26 |         height: 100%;
27 |         border: 0;
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/scripts/components/responsive-embed/responsive-embed.stories.ts:
--------------------------------------------------------------------------------
 1 | import { text } from "@storybook/addon-knobs";
 2 | 
 3 | export default { title: 'Components/Responsive Embed' };
 4 | 
 5 | export const defaultHeading = () => {
 6 |     const aspectRatio = text('aspect-ratio', '16x9');
 7 |     return (`
 8 |         <div class="m-xxl">
 9 |             <p>This is a test</p>
10 |             <ks-responsive-embed aspect-ratio="${aspectRatio}">
11 |                 <iframe src="https://www.youtube.com/embed/M8KmqaJvgpE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
12 |             </ks-responsive-embed>
13 |         </div>
14 |     `);
15 | };
16 | 


--------------------------------------------------------------------------------
/src/scripts/components/responsive-embed/responsive-embed.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Prop, Host } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-responsive-embed',
 5 |     styleUrl: 'responsive-embed.scss'
 6 | })
 7 | export class ResponsiveEmbed {
 8 |     @Prop() aspectRatio: string = '16x9';
 9 | 
10 |     render() {
11 |         return (
12 |             <Host class={`ks-responsive-embed ratio-${this.aspectRatio}`}>
13 |                 <slot />
14 |             </Host>
15 |         );
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/scripts/components/scroll-to-top/scroll-to-top.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../scss/00_Abstracts/index";
 2 | 
 3 | .ks-scroll-to-top {
 4 |     position: fixed;
 5 |     bottom: 0;
 6 |     right: 0;
 7 |     @include m(xl);
 8 |     @include z-index(xl);
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/scripts/components/side-drawer/side-drawer.stories.ts:
--------------------------------------------------------------------------------
 1 | import { select } from '@storybook/addon-knobs';
 2 | 
 3 | export default { title: 'Components/Side Drawer' };
 4 | 
 5 | export const playground = () => {
 6 |     const size = select('size', ['sm', 'md', 'lg', 'xl'], 'sm');
 7 |     const position = select('position', ['left', 'right'], 'left');
 8 |     return (`
 9 |         <div>
10 |             <ks-button class="m-xxl" shows="drawer">Open Drawer</ks-button>
11 |             <ks-side-drawer size="${size}" position="${position}" header-text="Test Drawer" id="drawer">
12 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nihil ipsum voluptates consectetur sint voluptatum dolores molestias aut possimus, ipsa veritatis qui placeat ea ducimus sapiente atque soluta explicabo! Repellat.
13 |             </ks-side-drawer>
14 |         </div>
15 |     `);
16 | };


--------------------------------------------------------------------------------
/src/scripts/components/switch/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-switch
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property  | Attribute | Description | Type      | Default     |
11 | | --------- | --------- | ----------- | --------- | ----------- |
12 | | `checked` | `checked` |             | `boolean` | `false`     |
13 | | `disable` | `disable` |             | `boolean` | `false`     |
14 | | `label`   | `label`   |             | `string`  | `undefined` |
15 | | `name`    | `name`    |             | `string`  | `undefined` |
16 | 
17 | 
18 | ## Events
19 | 
20 | | Event     | Description | Type               |
21 | | --------- | ----------- | ------------------ |
22 | | `updated` |             | `CustomEvent<any>` |
23 | 
24 | 
25 | ----------------------------------------------
26 | 
27 | *Built with [StencilJS](https://stenciljs.com/)*
28 | 


--------------------------------------------------------------------------------
/src/scripts/components/switch/switch.stories.ts:
--------------------------------------------------------------------------------
 1 | import { text, boolean } from "@storybook/addon-knobs";
 2 | 
 3 | export default { title: 'Components/Switch' };
 4 | 
 5 | export const playground = () => {
 6 |     const label = text('label', 'Show Pricing');
 7 |     const checked = boolean('checked', false);
 8 |     const disable = boolean('disable', false);
 9 |     return (`<div class="m-xxl">
10 |         <ks-switch label="${label}" checked="${checked}" disable="${disable}" />
11 |     </div>`);
12 | };


--------------------------------------------------------------------------------
/src/scripts/components/tabs/readme.md:
--------------------------------------------------------------------------------
 1 | # ks-alert
 2 | 
 3 | 
 4 | 
 5 | <!-- Auto Generated Below -->
 6 | 
 7 | 
 8 | ## Properties
 9 | 
10 | | Property   | Attribute  | Description | Type                                          | Default     |
11 | | ---------- | ---------- | ----------- | --------------------------------------------- | ----------- |
12 | | `align`    | `align`    |             | `"center" \| "end" \| "justified" \| "start"` | `'start'`   |
13 | | `label`    | `label`    |             | `string`                                      | `undefined` |
14 | | `position` | `position` |             | `"bottom" \| "left" \| "right" \| "top"`      | `'top'`     |
15 | 
16 | 
17 | ----------------------------------------------
18 | 
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 | 


--------------------------------------------------------------------------------
/src/scripts/components/tabs/tab.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, h, Prop, Host } from '@stencil/core';
 2 | 
 3 | @Component({
 4 |     tag: 'ks-tab'
 5 | })
 6 | export class Tab {
 7 |     @Prop() tabText: string;
 8 | 
 9 |     render() {
10 |         return (
11 |             <Host class="tab-panel" role="tabpanel" tabIndex="0">
12 |                 <slot />
13 |             </Host>
14 |         );
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/scripts/components/utilities/color.stories.ts:
--------------------------------------------------------------------------------
 1 | export default { title: 'Utilities/Colors' };
 2 | 
 3 | const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'];
 4 | const variations = ['-lighter', '-light', '', '-dark', '-darker'];
 5 | 
 6 | export const textColor = () => {
 7 |     return (`<div class="m-xxl">
 8 |         ${colors.map(c => variations.map(v => `<div class="text-${c}${v}">text-${c}${v}</div>`).join('')).join('')}
 9 |         <div class="text-black">text-black</div>
10 |         <div class="text-white bg-dark">text-white</div>
11 |     </div>`);
12 | };
13 | 
14 | export const backgroundColor = () => {
15 |     return (`<div class="m-xxl">
16 |         ${colors.map(c => variations.map(v => `<div class="my-md p-sm bg-${c}${v} text-${c}">bg-${c}${v}</div>`).join('')).join('')}
17 |         <div class="my-md p-sm bg-black">bg-black</div>
18 |         <div class="my-md p-sm bg-white">bg-white</div>
19 |     </div>`);
20 | };
21 | 


--------------------------------------------------------------------------------
/src/scripts/components/utilities/shadows.stories.ts:
--------------------------------------------------------------------------------
 1 | export default { title: 'Utilities/Shadows' };
 2 | 
 3 | const shadows = ['none', 'outline', 'inner', 'xs', 'sm', 'md', 'lg', 'xl'];
 4 | 
 5 | export const shadowDisplay = () => {
 6 |     return (`<div>
 7 |         <div class="m-xxl display-flex space-between">
 8 |             ${shadows.map(s => `<div class="p-sm shadow-${s}">shadow-${s}</div>`).join('')}
 9 |         </div>
10 |         <div class="m-xxl display-flex space-between">
11 |             ${shadows.map(s => `<div class="p-sm hover:shadow-${s}">hover:shadow-${s}</div>`).join('')}
12 |         </div>
13 |         <div class="m-xxl display-flex space-between">
14 |             ${shadows.map(s => `<div class="p-sm focus:shadow-${s}" tabindex="0">focus:shadow-${s}</div>`).join('')}
15 |         </div>
16 |     </div>`);
17 | };
18 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/README.md:
--------------------------------------------------------------------------------
1 | # Abstracts
2 | 
3 | This folder is for your style tools and helpers used across the project. Your reusable code such as global variables, functions, mixins and placeholders should be put in here.
4 | 
5 | The code contained in this folder should not be code that outputs CSS directly.
6 | 
7 | With larger projects you may want to break this into subdirectories like variables, functions, and mixins. Subdirectories are supported in the Clarion CLI.


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/functions/_borders.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | @import 'colors';
 3 | 
 4 | @function default-border($setting) {
 5 |     @if map-has-key($default-border, $setting) {
 6 |         @return map-get($default-border, $setting);
 7 |     }
 8 | 
 9 |     @else {
10 |         @error "Invalid default b-xs value: '#{$setting}'.";
11 |     }
12 | }
13 | 
14 | @function border($style, $size, $color, $variant: base, $opacity: 1, $important: false) {
15 |     @if($important==true) {
16 |         @return $style spacing($size) split-color-list($color, $variant, $opacity) !important;
17 |     }
18 | 
19 |     @else {
20 |         @return $style spacing($size) split-color-list($color, $variant, $opacity);
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/functions/_outline.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | @import 'colors';
 3 | 
 4 | @function default-outline($setting) {
 5 |     @if map-has-key($default-outline, $setting) {
 6 |         @return map-get($default-outline, $setting);
 7 |     }
 8 | 
 9 |     @else {
10 |         @error "Invalid default outline value: '#{$setting}'.";
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/functions/_spacing.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | @import 'strings';
 3 | 
 4 | @function spacing($name, $important: false) {
 5 |     $value: var(--ks-spacing-size-#{$name});
 6 | 
 7 |     // This enables negative values to be used.
 8 |     @if(str-contains($name, "-")) {
 9 |         $name: str-replace($name, "-", "");
10 |         $value: calc(-1 * var(--ks-spacing-size-#{$name}));
11 |     }
12 | 
13 |     @if($important == true) {
14 |         @return $value !important;
15 |     }
16 |     
17 |     @return $value;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/functions/_strings.scss:
--------------------------------------------------------------------------------
 1 | @function str-replace($string, $search, $replace: '') {
 2 |     $index: str-index($string, $search);
 3 | 
 4 |     @if $index {
 5 |         @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
 6 |     }
 7 | 
 8 |     @return $string;
 9 | }
10 | 
11 | @function str-ends-with($string, $search) {
12 |     @return str-slice(quote($string), (str-length($string) - str-length($search) + 1))==$search;
13 | }
14 | 
15 | @function str-contains($string, $search) {
16 |     @return str-index(quote($string), $search) !=null;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/functions/_transitions.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | @function transition($name) {
 4 |     @if map-has-key($transitions, $name) {
 5 |         @return map-get($transitions, $name);
 6 |     }
 7 | 
 8 |     @else {
 9 |         @error "Invalid 'transition' value: '#{$name}'.";
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/functions/_z-index.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | @function z($name) {
 4 |     @if map-has-key($z-indexes, $name) {
 5 |         @return map-get($z-indexes, $name);
 6 |     }
 7 | 
 8 |     @else {
 9 |         @error "Invalid 'z' value: '#{$name}'.";
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/index.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | @import "functions/colors";
 3 | @import "functions/outline";
 4 | @import "functions/strings";
 5 | @import "functions/z-index";
 6 | @import "functions/transitions";
 7 | @import "mixins/borders";
 8 | @import "mixins/border-radius";
 9 | @import "mixins/display";
10 | @import "mixins/font-sizes";
11 | @import "mixins/hover";
12 | @import "mixins/media-queries";
13 | @import "mixins/outline";
14 | @import "mixins/shadows";
15 | @import "mixins/spacing";
16 | @import "mixins/transitions";
17 | @import "mixins/colors";
18 | @import 'mixins/font';
19 | @import 'mixins/z-index';
20 | @import 'mixins/create-css-variables';
21 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_display.scss:
--------------------------------------------------------------------------------
 1 | @mixin full-width($important: false) {
 2 |     @if ($important == true) {
 3 |         position: relative !important;
 4 |         left: 50% !important;
 5 |         right: 50% !important;
 6 |         width: 100vw !important;
 7 |         margin-left: -50vw !important;
 8 |         margin-right: -50vw !important;
 9 |         max-width: 100vw !important;
10 |     } @else {
11 |         position: relative;
12 |         left: 50%;
13 |         right: 50%;
14 |         width: 100vw;
15 |         margin-left: -50vw;
16 |         margin-right: -50vw;
17 |         max-width: 100vw;
18 |     }
19 | }
20 | 
21 | @mixin screen-reader-only {
22 |     position: absolute !important;
23 |     width: 1px !important;
24 |     height: 1px !important;
25 |     padding: 0 !important;
26 |     margin: -1px !important;
27 |     overflow: hidden !important;
28 |     clip: rect(0, 0, 0, 0) !important;
29 |     white-space: nowrap !important;
30 |     border: 0 !important;
31 | }  
32 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_font-sizes.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | @mixin font-size($size, $important: false) {
 4 |     @if($important==true) {
 5 |         font-size: var(--ks-font-size-#{$size}) !important;
 6 |     }
 7 | 
 8 |     @else {
 9 |         font-size: var(--ks-font-size-#{$size});
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_font.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | @mixin font($font: base, $important: false) {
 4 |     @if ($important == true) {
 5 |         font-family: var(--ks-font-#{$font}) !important;
 6 |     } @else {
 7 |         font-family: var(--ks-font-#{$font});
 8 |     }
 9 | } 
10 |                     


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_hover.scss:
--------------------------------------------------------------------------------
 1 | @mixin hover {
 2 |     &:hover {
 3 |         @content;
 4 |     }
 5 | }
 6 | 
 7 | @mixin hover-focus {
 8 | 
 9 |     &:hover,
10 |     &:focus {
11 |         @content;
12 |     }
13 | }
14 | 
15 | @mixin hover-focus-active {
16 | 
17 |     &:hover,
18 |     &:focus,
19 |     &:active {
20 |         @content;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_media-queries.scss:
--------------------------------------------------------------------------------
 1 | @import "../variables";
 2 | 
 3 | /*
 4 |     MEDIA QUERY
 5 | 
 6 |     Usage: @include mq(sm) {}
 7 | */
 8 | @mixin mq($mq) {
 9 |     @if map-has-key($media-queries, $mq) {
10 |         $mq-value: map-get($media-queries, $mq);
11 | 
12 |         @if ($mq-value == light or $mq-value == dark) {
13 |             @media screen and (prefers-color-scheme: $mq-value) {
14 |                 @content;
15 |             }
16 |         } @else if ($mq-value == print) {
17 |             @media print {
18 |                 @content;
19 |             }
20 |         } @else {
21 |             @media screen and (max-width: ($mq-value - 1)) {
22 |                 @content;
23 |             }
24 |         }
25 |     } @else {
26 |         @error "Invalid media query: '#{$mq}'.";
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_outline.scss:
--------------------------------------------------------------------------------
 1 | @import '../functions/borders';
 2 | 
 3 | @mixin default-outline($important: false) {
 4 |     @if($important == true) {
 5 |         outline: var(--ks-default-outline) !important;
 6 |         outline-offset: var(--ks-default-outline-offset) !important;
 7 |     } @else {
 8 |         outline: var(--ks-default-outline);
 9 |         outline-offset: var(--ks-default-outline-offset);
10 |     }
11 | }
12 | 
13 | @mixin outline($style: default-outline(style), $size: default-outline(size), $offset: default-outline(offset), $color: default-outline(color), $variant: base, $opacity: 1, $important: false) {
14 |     @if($important == true) {
15 |         outline: $style spacing($size) split-color-list($color, $variant, $opacity) !important;
16 |         outline-offset: spacing($size) !important;
17 |     } @else {
18 |         outline: $style spacing($size) split-color-list($color, $variant, $opacity);
19 |         outline-offset: spacing($size);
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_shadows.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | @mixin shadow($size: sm, $important: false) {
 4 |     @if($important==true) {
 5 |         box-shadow: var(--ks-shadow-#{$size}) !important;
 6 |     }
 7 | 
 8 |     @else {
 9 |         box-shadow: var(--ks-shadow-#{$size});
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_transitions.scss:
--------------------------------------------------------------------------------
1 | @import "../variables";
2 | 
3 | @mixin transition($property: all, $speed: fast, $timing-function: ease-in-out, $important: false) {
4 |     @if ($important == true) {
5 |         transition: $property var(--ks-transition-#{$speed}) $timing-function !important;
6 |     } @else {
7 |         transition: $property var(--ks-transition-#{$speed}) $timing-function;
8 |     }
9 | }


--------------------------------------------------------------------------------
/src/scss/00_Abstracts/mixins/_z-index.scss:
--------------------------------------------------------------------------------
 1 | @import '../variables';
 2 | 
 3 | @mixin z-index($size, $important: false) {
 4 |     @if ($important == true) {
 5 |         z-index: var(--ks-z-index-#{$size}) !important;
 6 |     }
 7 |     @else {
 8 |         z-index: var(--ks-z-index-#{$size});
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/scss/01_Base/README.md:
--------------------------------------------------------------------------------
1 | # Base
2 | 
3 | This folder holds the boilerplate code for the project. You would add your reset files and typographic rules. Keep in mind that most front-end frameworks like Bootstrap and Foundation already have their own CSS resets built into their styles, so additional resets may not be necessary.


--------------------------------------------------------------------------------
/src/scss/01_Base/_base.scss:
--------------------------------------------------------------------------------
 1 | @import "../00_Abstracts/index";
 2 | 
 3 | @include create-css-variables();
 4 | 
 5 | * {
 6 |     box-sizing: border-box;
 7 | 
 8 |     &:focus {
 9 |         @include default-outline();
10 |     }
11 | }
12 | 
13 | html,
14 | body {
15 |     scroll-behavior: smooth;
16 |     font-size: var(--ks-font-size-base);
17 |     line-height: var(--ks-line-height-base);
18 |     background-color: white;
19 |     -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
20 |     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Change the default tap highlight to be completely transparent in iOS.
21 |     @include color(dark);
22 |     @include font(base);
23 |     @include m(none);
24 | }
25 | 


--------------------------------------------------------------------------------
/src/scss/01_Base/index.scss:
--------------------------------------------------------------------------------
1 | @import 'base';
2 | 


--------------------------------------------------------------------------------
/src/scss/02_Vendors/README.md:
--------------------------------------------------------------------------------
1 | # Vendors
2 | 
3 | The Themes folder contains third-party themes for your website and for things like styles for plugins. This folder has been added higher in the architecture so that if you would like to create customizations, you can do so in the subsequent folders like Components, Layouts, and Pages. This will allow you to override the theme's rules without modifying the theme directly and ruining the integrity of the code.


--------------------------------------------------------------------------------
/src/scss/02_Vendors/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/break-stuff/kickstand-ui/1d9beffa6fcaea9a84e58762606e24cbe905aff0/src/scss/02_Vendors/index.scss


--------------------------------------------------------------------------------
/src/scss/03_Elements/README.md:
--------------------------------------------------------------------------------
1 | # Elements
2 | 
3 | The Elements folder is for styling specific elements such as links, buttons, form inputs, and header tags. These are the smallest building blocks in the web and cannot be broken up into smaller parts. Browsers, by default, have their own styling in place for these elements, but tend to be inconsistent. Because of this, adding a reset to the 01_Base directory or adding one to the build pipeline is recommended.


--------------------------------------------------------------------------------
/src/scss/03_Elements/_block.scss:
--------------------------------------------------------------------------------
 1 | @import '../00_Abstracts/index';
 2 | 
 3 | main {
 4 |     max-width: var(--ks-content-width);
 5 | }
 6 | 
 7 | // Reset to align with b-xs style
 8 | hr {
 9 |     background-color: currentColor;
10 |     border: 0;
11 |     @include b-b();
12 | }
13 | 
14 | p {
15 |     @include mt(none);
16 |     @include mb(md);
17 | }    
18 | 
19 | summary {
20 |     display: list-item; // Add the correct display in all browsers
21 |     cursor: pointer;
22 | }
23 | 
24 | template {
25 |     display: none; // IE 11 Fix
26 | }
27 | 
28 | main {
29 |     display: block; // IE 11 Fix
30 | }
31 | 
32 | address {
33 |     font-style: normal;
34 |     line-height: inherit;
35 |     @include mb(md);
36 | }
37 | 
38 | blockquote {
39 |     margin: 0 0 1rem;
40 | }


--------------------------------------------------------------------------------
/src/scss/03_Elements/_headings.scss:
--------------------------------------------------------------------------------
 1 | @import '../00_Abstracts/index';
 2 | 
 3 | %heading {
 4 |     line-height: 1.2;
 5 |     font-weight: bold;
 6 |     @include mt(none);
 7 |     @include mb(sm);
 8 |     @include font(accent);
 9 | }
10 | 
11 | h1 {
12 |     @extend %heading;
13 |     @include font-size(xxl);
14 | }
15 | 
16 | h2 {
17 |     @extend %heading;
18 |     @include font-size(xl);
19 | }
20 | 
21 | h3 {
22 |     @extend %heading;
23 |     @include font-size(lg);
24 | }
25 | 
26 | h4 {
27 |     @extend %heading;
28 |     @include font-size(md);
29 | }
30 | 
31 | h5 {
32 |     @extend %heading;
33 |     @include font-size(sm);
34 | }
35 | 
36 | h6 {
37 |     @extend %heading;
38 |     @include font-size(xs);
39 | }
40 | 


--------------------------------------------------------------------------------
/src/scss/03_Elements/_images.scss:
--------------------------------------------------------------------------------
 1 | @import '../00_Abstracts/index';
 2 | 
 3 | figure {
 4 |     margin: 0 0 1rem;
 5 | }
 6 | 
 7 | 
 8 | // Images and content
 9 | 
10 | img {
11 |     width: 100%;
12 |     vertical-align: middle;
13 | }
14 | 
15 | ks-img {
16 |     display: inline-block;
17 | }
18 | 
19 | // 1. Workaround for the SVG overflow bug in IE 11 is still required.
20 | //    See https://github.com/twbs/bootstrap/issues/26878
21 | 
22 | svg {
23 |     overflow: hidden; // 1
24 |     vertical-align: middle;
25 | }
26 | 


--------------------------------------------------------------------------------
/src/scss/03_Elements/_lists.scss:
--------------------------------------------------------------------------------
 1 | @import '../00_Abstracts/index';
 2 | 
 3 | ol,
 4 | ul {
 5 |     @include pl(xxl);
 6 | }
 7 | 
 8 | ol,
 9 | ul,
10 | dl {
11 |     @include mt(none);
12 |     @include mb(lg);
13 | }
14 | 
15 | ol ol,
16 | ul ul,
17 | ol ul,
18 | ul ol {
19 |     @include mb(none);
20 | }
21 | 
22 | dt {
23 | }
24 | 
25 | dd {
26 |     @include mb(sm);
27 |     @include ml(none);
28 | }
29 | 


--------------------------------------------------------------------------------
/src/scss/03_Elements/index.scss:
--------------------------------------------------------------------------------
1 | @import 'headings';
2 | @import 'code';
3 | @import 'forms';
4 | @import 'images';
5 | @import 'tables';
6 | @import 'lists';
7 | @import 'inline';
8 | @import 'block';
9 | 


--------------------------------------------------------------------------------
/src/scss/04_Components/README.md:
--------------------------------------------------------------------------------
1 | # Components
2 | 
3 | Components are groups of elements. This can be things like a search box, navbar, or carousel. These groups of elements together have a specific purpose.


--------------------------------------------------------------------------------
/src/scss/04_Components/index.scss:
--------------------------------------------------------------------------------
 1 | // @import 'alert';
 2 | // @import 'buttons';
 3 | // @import 'badges';
 4 | // @import 'breadcrumbs';
 5 | // @import 'card';
 6 | // @import 'carousel';
 7 | // @import 'overlay';
 8 | // @import 'dropdown';
 9 | // @import 'menu-bar';
10 | // @import 'side-drawer';
11 | // @import 'tabs';
12 | // @import 'progress';
13 | // @import 'modal';
14 | // @import 'tooltip';
15 | // @import 'loading';
16 | // @import 'form-field';
17 | // @import 'icon';
18 | 


--------------------------------------------------------------------------------
/src/scss/05_Layouts/README.md:
--------------------------------------------------------------------------------
1 | # Layouts
2 | 
3 | This folder contains everything that takes part in laying out the web site or application. These could be containers used for organizing elements and components within them like like a header, footer, or sidebar. This could also be used for your grid-system.


--------------------------------------------------------------------------------
/src/scss/05_Layouts/index.scss:
--------------------------------------------------------------------------------
1 | // @import 'grid-system';
2 | 


--------------------------------------------------------------------------------
/src/scss/06_Pages/README.md:
--------------------------------------------------------------------------------
1 | # Pages
2 | 
3 | This folder is for any page-specific styles, if you have any. Some sites may have custom styling for the Home page or the Contact Us page.


--------------------------------------------------------------------------------
/src/scss/06_Pages/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/break-stuff/kickstand-ui/1d9beffa6fcaea9a84e58762606e24cbe905aff0/src/scss/06_Pages/index.scss


--------------------------------------------------------------------------------
/src/scss/07_Utilities/README.md:
--------------------------------------------------------------------------------
1 | # Utilities
2 | 
3 | The Utilities are used to create overrides or call out specific rules for an elements or components. For example, you could have a class for making text bold or aligning it to the right. The rule of thumb is to make it specific and make it simple.


--------------------------------------------------------------------------------
/src/scss/07_Utilities/_animation.scss:
--------------------------------------------------------------------------------
1 | @import '../00_Abstracts/index';
2 | 
3 | .animate {
4 |     @each $key, $value in $transitions {
5 |         &-#{$key} {
6 |             @include transition($key);
7 |         }
8 |     }
9 | }


--------------------------------------------------------------------------------
/src/scss/07_Utilities/_lists.scss:
--------------------------------------------------------------------------------
 1 | @import '../00_Abstracts/index';
 2 | 
 3 | .list {
 4 |     &-inside {
 5 |         list-style-position: inside !important;
 6 |     }
 7 | 
 8 |     &-outside {
 9 |         list-style-position: outside !important;
10 |     }
11 | 
12 |     &-decimal {
13 |         list-style: decimal !important;
14 |     }
15 | 
16 |     &-disc {
17 |         list-style: disc !important;
18 |     }
19 | 
20 |     &-lower-alpha {
21 |         list-style: lower-alpha !important;
22 |     }
23 | 
24 |     &-upper-alpha {
25 |         list-style: upper-alpha !important;
26 |     }
27 | 
28 |     &-lower-roman {
29 |         list-style: lower-roman !important;
30 |     }
31 | 
32 |     &-upper-roman {
33 |         list-style: upper-roman !important;
34 |     }
35 | 
36 |     &-initial {
37 |         list-style: initial !important;
38 |     }
39 | 
40 |     &-none {
41 |         list-style: none !important;
42 |     }
43 | }


--------------------------------------------------------------------------------
/src/scss/07_Utilities/_mouse.scss:
--------------------------------------------------------------------------------
 1 | @import "../00_Abstracts/index";
 2 | 
 3 | .pointer {
 4 |     cursor: pointer !important;
 5 | }
 6 | 
 7 | .pointer-events-none {
 8 |     pointer-events: none !important;
 9 | }
10 | 
11 | .not-allowed {
12 |     cursor: not-allowed !important;
13 | }
14 | 
15 | .progress {
16 |     cursor: progress !important;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/scss/07_Utilities/_shadows.scss:
--------------------------------------------------------------------------------
 1 | @import '../00_Abstracts/index';
 2 | 
 3 | @each $key, $value in $shadows {
 4 |     .shadow-#{$key} {
 5 |         @include shadow($key, true);
 6 |     }
 7 | 
 8 |     .hover\:shadow-#{$key}:hover {
 9 |         @include shadow($key, true);
10 |     }
11 | 
12 |     .focus\:shadow-#{$key}:focus {
13 |         @include shadow($key, true);
14 |     }
15 | }


--------------------------------------------------------------------------------
/src/scss/07_Utilities/index.scss:
--------------------------------------------------------------------------------
 1 | @import 'spacing';
 2 | @import 'layout';
 3 | @import 'text';
 4 | @import 'colors';
 5 | @import 'border';
 6 | @import 'mouse';
 7 | @import 'display';
 8 | @import 'rotation';
 9 | @import 'shadows';
10 | @import 'position';
11 | @import 'lists';
12 | 


--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import './00_Abstracts/index';
2 | @import './01_Base/index';
3 | @import './02_Vendors/index';
4 | @import './03_Elements/index';
5 | @import './04_Components/index';
6 | @import './05_Layouts/index';
7 | @import './06_Pages/index';
8 | @import './07_Utilities/index';


--------------------------------------------------------------------------------
/stencil.config.ts:
--------------------------------------------------------------------------------
 1 | import { Config } from '@stencil/core';
 2 | import { sass } from '@stencil/sass';
 3 | import { postcss } from '@stencil/postcss';
 4 | import autoprefixer from 'autoprefixer';
 5 | import cssnano from 'cssnano';
 6 | 
 7 | export const config: Config = {
 8 |     namespace: 'kickstand-ui',
 9 |     outputTargets: [
10 |         {
11 |             type: 'dist',
12 |             esmLoaderPath: '../loader'
13 |         },
14 |         {
15 |             type: 'docs-readme'
16 |         },
17 |         {
18 |             type: 'docs-vscode',
19 |             file: './dist/custom-elements.json'
20 |         },
21 |         {
22 |             type: 'www',
23 |             serviceWorker: null, // disable service workers
24 |         },
25 |     ],
26 |     globalStyle: 'src/scss/styles.scss',
27 |     plugins: [
28 |         sass(),
29 |         postcss({
30 |             plugins: [
31 |                 autoprefixer(),
32 |                 cssnano()
33 |             ]
34 |         })
35 |     ],
36 |     buildEs5: 'prod',
37 |     extras: {
38 |         cssVarsShim: true,
39 |         shadowDomShim: false
40 |     }
41 | };
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "allowUnreachableCode": false,
 5 |     "declaration": false,
 6 |     "experimentalDecorators": true,
 7 |     "lib": [
 8 |       "dom",
 9 |       "es2017"
10 |     ],
11 |     "moduleResolution": "node",
12 |     "module": "esnext",
13 |     "target": "es2017",
14 |     "noUnusedLocals": true,
15 |     "noUnusedParameters": true,
16 |     "jsx": "react",
17 |     "jsxFactory": "h"
18 |   },
19 |   "include": [
20 |     "src",
21 |     "types/jsx.d.ts"
22 |   ],
23 |   "exclude": [
24 |     "node_modules"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------