@thinkpixellab-public/px-vue 4.0.10 → 4.0.12

package/.storybook/main.js

@@ -5,17 +5,9 @@ const config = {
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
-        {
-            name: '@storybook/addon-docs',
-            options: {
-                mdxPluginOptions: {
-                    // mdxCompileOptions: {
-                    //     remarkPlugins: [remarkGfm],
-                    // },
-                },
-            },
-        },
-        '@storybook/addon-mdx-gfm'
+        '@chromatic-com/storybook',
+        'storybook-addon-pseudo-states',
+        'storybook-dark-mode',
     ],
 
     framework: {

package/.storybook/manager.js

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/manager-api';
-import PxVueTheme from './px-vue.storybook.theme';
+import { themes } from '@storybook/theming';
 
 addons.setConfig({
-    theme: PxVueTheme,
+    theme: themes.dark,
 });

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 import { setup } from '@storybook/vue3';
+import { themes } from '@storybook/theming';
 import common from '../plugins/common.js';
 
 import './preview.scss';
@@ -10,7 +11,7 @@ setup(app => {
 
 const preview = {
     parameters: {
-        actions: { argTypesRegex: '^on[A-Z].*' },
+        //actions: { argTypesRegex: '^on[A-Z].*' },
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -18,11 +19,25 @@ const preview = {
                 string: /(itemsKey|itemsDisabled)$/i,
             },
         },
-
+        order: ['Intro', 'Components'],
+        storySort: (a, b) =>
+            a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
         // theme
+        // darkMode: {
+        //     // Override the default dark theme
+        //     dark: { ...themes.dark, appBg: '#2A2C2E' },
+        //     // Override the default light theme
+        //     light: { ...themes.normal },
+
+        //     darkClass: 'theme-dark',
+        //     lightClass: 'theme-light',
+        //     stylePreview: true,
+        //     classTarget: 'body',
+        // },
+
         docs: {
             // requires import { themes } from '@storybook/theming';
-            //theme: themes.dark,
+            // theme: themes.dark,
         },
     },
 };

package/.storybook/preview.scss

@@ -1,5 +1,71 @@
+@use '../styles/px.scss' as *;
+@use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
+
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Public+Sans:wght@300;400;500;600&family=Work+Sans:wght@400;600&display=swap');
 
+@if get('is-fluent', false) {
+    @font-face {
+        font-family: segoe-vf;
+        font-weight: 100;
+        src:
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-light.e452665.woff2)
+                format('woff2'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-light.68c90c4.woff)
+                format('woff'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-light.9d3d90d.ttf)
+                format('truetype');
+    }
+
+    @font-face {
+        font-family: segoe-vf;
+        font-weight: 300;
+        src:
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semilight.1338e9a.woff2)
+                format('woff2'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semilight.9c37400.woff)
+                format('woff'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semilight.f65cf1c.ttf)
+                format('truetype');
+    }
+
+    @font-face {
+        font-family: segoe-vf;
+        font-weight: 400;
+        src:
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display.e85854a.woff2)
+                format('woff2'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display.f8bb08f.woff)
+                format('woff'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display.dc5de3f.ttf)
+                format('truetype');
+    }
+
+    @font-face {
+        font-family: segoe-vf;
+        font-weight: 600;
+        src:
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semibold.1977a17.woff2)
+                format('woff2'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semibold.3326bd2.woff)
+                format('woff'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-semibold.0f5cc00.ttf)
+                format('truetype');
+    }
+
+    @font-face {
+        font-family: segoe-vf;
+        font-weight: 700;
+        src:
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-bold.2756fcb.woff2)
+                format('woff2'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-bold.65cd9e3.woff)
+                format('woff'),
+            url(https://edgestatic.azureedge.net/shared/edgeweb/fonts/segoeui-vf-display-bold.4f8bd09.ttf)
+                format('truetype');
+    }
+    @include fluent-themes();
+}
+
 // .sbdocs-h2,
 // .sbdocs-h3,
 // .sbdocs-h4,
@@ -19,6 +85,45 @@
 //     font-family: $font !important;
 // }
 
+// Update this to test font inheritance
+.sbdocs {
+    font-family: sans-serif;
+    perspective: 6000px;
+}
+
+body {
+    font-family: sans-serif;
+}
+
+.story-flex {
+    display: flex;
+    gap: 1em;
+    justify-content: center;
+    align-items: center;
+}
+
+.story-flex-top {
+    display: flex;
+    gap: 1em;
+    justify-content: center;
+    align-items: flex-start;
+}
+.story-flex-vert {
+    display: flex;
+    gap: 1em;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+}
+
+.story-flex-bounds {
+    @extend .story-flex;
+    > * {
+        @extend .story-bounds;
+    }
+}
+
 .story-bounds {
     display: inline-block;
     height: auto;
@@ -27,6 +132,14 @@
     margin: 0;
     display: block;
     border: 1px dashed rgba(black, 0.33);
+    perspective: 20em;
+}
+
+.story-square {
+    background-color: tomato;
+    width: 6em;
+    height: 6em;
+    border-radius: 0.5em;
 }
 
 .story-circle {
@@ -36,9 +149,109 @@
     border-radius: 100%;
 }
 
+.story-orange {
+    background-color: tomato;
+    padding: 0.5em;
+    color: white;
+    border-radius: 0.5em;
+}
+
 .story-fill {
     background-color: tomato;
     width: 100%;
     height: 100%;
     border-radius: 8px;
+    color: white;
+}
+
+.story-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.story-aspect-16-9 {
+    background-color: tomato;
+    width: 100%;
+    border-radius: 8px;
+    aspect-ratio: 16/9;
+}
+
+.story-gradient {
+    background-image: repeating-linear-gradient(
+            -45deg,
+            rgba(black, 0.1) 0 20px,
+            rgba(black, 0) 20px 40px
+        ),
+        linear-gradient(135deg, tomato, purple);
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}
+
+.story-state-blue {
+    background-color: dodgerblue;
+    color: white;
+    width: 3em;
+    height: 3em;
+    border-radius: 8px;
+    padding: 1em;
+}
+
+.story-state-orange {
+    background-color: tomato;
+    color: white;
+    width: 7em;
+    height: 7em;
+    border-radius: 8px;
+    padding: 1em;
+}
+
+.story-size-xs {
+    width: 2em;
+    height: 2em;
+}
+
+.story-size-sm {
+    width: 4em;
+    height: 4em;
+}
+
+.story-size-base {
+    width: 6em;
+    height: 6em;
+}
+.story-size-md {
+    width: 8em;
+    height: 8em;
+}
+
+.story-popup {
+    font-family: sans-serif;
+    padding: 1em;
+    @include popup();
+}
+
+.story-tooltip {
+    @include popup(
+        (
+            font-family: sans-serif,
+            padding: 0.5em,
+            font-size: 14px,
+            background-color: mix(dodgerblue, white, 15%),
+        )
+    );
+}
+
+// icons
+
+.story-inline-border {
+    display: inline-block;
+    border: 1px dotted tomato;
+    margin-inline: 0.25em;
+}
+
+.theme-dark {
+    background-color: #151617;
+    color: white;
 }

package/.storybook/px-styles.config.scss

@@ -0,0 +1,26 @@
+// ----------------------------------------------------------------------------
+// Default version (uncomment lines to force recognizable color/font)
+// ----------------------------------------------------------------------------
+
+@forward '@thinkpixellab-public/px-styles/all.scss';
+@use '@thinkpixellab-public/px-styles/all.scss' as *;
+
+// @include config('controls.base.font-family', 'Georgia');
+// @include config('colors.accent', #e4346f);
+
+@include init();
+
+// ----------------------------------------------------------------------------
+// Fluent version of styles (must be run with dev-px in order to get a reference
+// to the px-styles-fluent.scss file)
+// ----------------------------------------------------------------------------
+
+// @forward '@thinkpixellab-public/px-styles/all.scss';
+// @forward '@thinkpixellab/px-edge-shared/styles/px-styles-fluent.scss';
+
+// @use '@thinkpixellab-public/px-styles/all.scss' as *;
+// @use '@thinkpixellab/px-edge-shared/styles/px-styles-fluent.scss' as *;
+
+// @include fluent-defaults();
+
+// @include init();

package/README.md

@@ -4,6 +4,144 @@
 
 Basic component preview and testing can be done with storybook. Run storybook with `npm run dev-px`.
 
+## Migration Notes / Approach
+
+### Two-way Props / v-model
+
+Move away from .sync and use v-model with an argument instead
+
+#### Minimal v-model Implementation
+
+The minimal implementation allows the parent component to "own" data and pass it the child component
+as a prop. If the child component wants to update the value, it does so by emitting an event with
+the preferred value.
+
+```html
+<MyComponent v-model:selected="selected" />
+```
+
+```js
+{
+    emits: ['update:selected'],
+    props: {
+        selected: { default: null }
+    },
+    methods: {
+        updateSelected(selectedValue) {
+            this.$emit('update:selected', selectedValue);
+        }
+    }
+}
+```
+
+#### Local Data v-model Implementation
+
+In many cases a component should be able to update the data without requiring a parent component to
+actually provide the data store. In this case we create a data property and keep it in sync with the
+prop.
+
+By convention the internal data field has the same name ast the prop with "Value" appended. If the
+prop were named `selected`, for example, the corresponding data field would be named
+`selectedValue`. Internally the component should always use `selectedValue` instead of `selected`.
+
+```html
+<MyComponent v-model:selected="selected" />
+```
+
+```js
+
+emits: ['update:selected'],
+props: {
+    selected: { default: null }
+},
+data() {
+    return {
+        selectedValue: this.selected
+    };
+},
+watch: {
+    selected(nv) {
+        this.selectedValue = nv;
+    },
+
+    selectedValue(nv) {
+        this.$emit('update:selected', nv);
+    }
+}
+
+```
+
+## Styles / Customization
+
+-   **Component Fallbacks** Hardcoded values defined in the component style.
+-   **Component Variants** Overrides defined within the component
+
+App Defaults App Scoped Defaults App Variants
+
+Usage Defaults Usage Class
+
+Style
+
+### FAQ
+
+#### Where should component styles be defined?
+
+TLDR
+
+1. Use expanded (non-mixin) CSS as much as possible right in the component.
+
+2. Repeating styles (e.g. a popup or a button) should generally have their own component and
+   variants for that style.
+
+Since we use single file components, these should obviously be defined in the component. That said,
+many of our more generic components are currently using px-styles mixins for this (i.e. the whole
+style section could just be something like `@include button()`) and I think we should move away from
+that and instead keep as much of the component's css in an "expanded" state as possible. This makes
+it much easier to understand what's going on.
+
+#### Where should styling defaults come from?
+
+We want to have a hierarchy that roughly looks like this:
+
+1. The component should provide default values in a way that no external CSS or configuration is
+   necessary to get a generic version of the component.
+
+2. It should be straightforward to define app defaults and these can be encapsulated into a
+   shareable "theme" file that can be customized / used for projects. It also might make sense to
+   have different levels of specificity in that theme. For example a property like "border-radius"
+   might be shared by many controls (button, textbox, dropdown, etc.) so it would make sense that
+   you can define an app-level default for that. But you should also be able to have different
+   values for different components
+
+3. It makes sense that the component can
+
+Component Defaults App Defaults (with levels of specificty) Variants App Variants
+
+    <style>
+
+#### When should we use CSS variables in custom components?
+
+Is it useful to reexpose CSS variables for properties that already exist like border radius (e.g.
+`px-textbox-border-radius`)? It doesn't seem like it because you would define it at the root as the
+default and then again at usage. Might as well just use `border-radius`. What about for global
+defaults? For that we can use SASS config/vars.
+
+On the other hand, it does seem useful to use CSS variables for high level concepts that don't have
+a semantically equivalent CSS property but would make sense to customize. An example of this might
+be something like '--toggle-track-background' or in a toggle switch or '--dropdown-arrow-svg' in a
+dropdown.
+
+These can then be treated like other CSS properties where they would take their default from a SCSS
+config (with a fallaback) but then be easily overriden in a local style or class.
+
+#### When should we use v-bind to expose style-related properties as props?
+
+If the value is likely to change a lot based on usage then maybe it makes sense to do this but I
+think it is rare. Most of the time it's better keep CSS modifications in CSS. Keep styling in
+styles/CSS for the most part. This doesn't mean never use v-bind in CSS, it just means that we don't
+want to arbitraily expose many CSS properties as props on the component because it just becomes
+unclear how you should style or modify the component.
+
 ---
 
 ## Default README
@@ -12,7 +150,10 @@ This template should help get you started developing with Vue 3 in Vite.
 
 ### Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) +
+[Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) +
+[TypeScript Vue Plugin
+(Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
 ### Customize configuration
 

package/assets/feather/activity.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>

package/assets/feather/airplay.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

package/assets/feather/alert-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/assets/feather/alert-octagon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/assets/feather/alert-triangle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/assets/feather/align-center.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-center"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-center"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>

package/assets/feather/align-justify.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-justify"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-justify"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>

package/assets/feather/align-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>

package/assets/feather/align-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-right"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-right"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>

package/assets/feather/anchor.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-anchor"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-anchor"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></svg>

package/assets/feather/aperture.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>

package/assets/feather/archive.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>

package/assets/feather/arrow-down-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>

package/assets/feather/arrow-down-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-left"><line x1="17" y1="7" x2="7" y2="17"></line><polyline points="17 17 7 17 7 7"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-left"><line x1="17" y1="7" x2="7" y2="17"></line><polyline points="17 17 7 17 7 7"></polyline></svg>

package/assets/feather/arrow-down-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-right"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-right"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></svg>

package/assets/feather/arrow-down.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

package/assets/feather/arrow-left-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>

package/assets/feather/arrow-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

package/assets/feather/arrow-right-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>

package/assets/feather/arrow-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

package/assets/feather/arrow-up-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>

package/assets/feather/arrow-up-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-left"><line x1="17" y1="17" x2="7" y2="7"></line><polyline points="7 17 7 7 17 7"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-left"><line x1="17" y1="17" x2="7" y2="7"></line><polyline points="7 17 7 7 17 7"></polyline></svg>

package/assets/feather/arrow-up-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>

package/assets/feather/arrow-up.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>