@thinkpixellab-public/px-vue 4.0.9 → 4.0.11

package/.storybook/main.js

@@ -0,0 +1,26 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+    stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@chromatic-com/storybook',
+        'storybook-addon-pseudo-states',
+        'storybook-dark-mode',
+    ],
+
+    framework: {
+        name: '@storybook/vue3-vite',
+        options: {},
+    },
+
+    docs: {
+        autodocs: true,
+        defaultName: 'Documentation',
+    },
+    features: {
+        interactionsDebugger: true,
+    },
+};
+export default config;

package/.storybook/manager.js

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

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+    window.global = window;
+</script>

package/.storybook/preview.js

@@ -0,0 +1,45 @@
+import { setup } from '@storybook/vue3';
+import { themes } from '@storybook/theming';
+import common from '../plugins/common.js';
+
+import './preview.scss';
+
+// px-vue common plugins
+setup(app => {
+    app.use(common);
+});
+
+const preview = {
+    parameters: {
+        //actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+                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,
+        },
+    },
+};
+
+export default preview;

package/.storybook/preview.scss

@@ -0,0 +1,257 @@
+@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,
+// .sbdocs-h5,
+// .sbdocs h1:where(:not(.sb-unstyled h1)),
+// .sbdocs h2:where(:not(.sb-unstyled h2)),
+// .sbdocs h3:where(:not(.sb-unstyled h3)),
+// .sbdocs h4:where(:not(.sb-unstyled h4)),
+// .sbdocs h5:where(:not(.sb-unstyled h5)),
+// .sbdocs-title,
+// .sbdocs-content p,
+// .docblock-argstable,
+// .docblock-argstable tr,
+// .docblock-argstable th,
+// .docblock-argstable td,
+// .docblock-argstable td button {
+//     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;
+    width: auto;
+    padding: 0;
+    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 {
+    background-color: tomato;
+    width: 6em;
+    height: 6em;
+    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

@@ -1,40 +1,189 @@
 # px-vue
 
+## Storybook
+
+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
+
 This template should help get you started developing with Vue 3 in Vite.
 
-## Recommended IDE Setup
+### 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
+### Customize configuration
 
 See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-## Project Setup
+### Project Setup
 
 ```sh
 npm install
 ```
 
-### Compile and Hot-Reload for Development
+#### Compile and Hot-Reload for Development
 
 ```sh
 npm run dev
 ```
 
-### Compile and Minify for Production
+#### Compile and Minify for Production
 
 ```sh
 npm run build
 ```
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+#### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
 npm run test:unit
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+#### Lint with [ESLint](https://eslint.org/)
 
 ```sh
 npm run lint

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>