webcoreui 0.0.5 → 0.0.7

package/README.md

@@ -132,5 +132,9 @@ import { Accordion } from 'webcoreui/react'
 ## Components
 
 - [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
+- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
+- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
+- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)

package/astro.d.ts

@@ -1,5 +1,19 @@
-declare module 'webcoreui/astro' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-
-    export function Accordion(_props: AccordionProps): any
-}
+
+declare module 'webcoreui/astro' {
+    import type { AccordionProps } from './components/Accordion/accordion'
+	import type { AlertProps } from './components/Alert/alert'
+	import type { BadgeProps } from './components/Badge/badge'
+	import type { ButtonProps } from './components/Button/button'
+	import type { CardProps } from './components/Card/card'
+	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+	import type { IconProps } from './components/Icon/icon'
+
+    export function Accordion(_props: AccordionProps): any
+	export function Alert(_props: AlertProps): any
+	export function Badge(_props: BadgeProps): any
+	export function Button(_props: ButtonProps): any
+	export function Card(_props: CardProps): any
+	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
+	export function Icon(_props: IconProps): any
+}
+    

package/astro.js

@@ -1,7 +1,15 @@
-import AccordionComponent from './components/Accordion/Accordion.astro'
-import ButtonComponent from './components/Button/Button.astro'
-import CardComponent from './components/Card/Card.astro'
-
-export const Accordion = AccordionComponent
-export const Button = ButtonComponent
-export const Card = CardComponent
+import AccordionComponent from './components/Accordion/Accordion.astro'
+import AlertComponent from './components/Alert/Alert.astro'
+import BadgeComponent from './components/Badge/Badge.astro'
+import ButtonComponent from './components/Button/Button.astro'
+import CardComponent from './components/Card/Card.astro'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import IconComponent from './components/Icon/Icon.astro'
+
+export const Accordion = AccordionComponent
+export const Alert = AlertComponent
+export const Badge = BadgeComponent
+export const Button = ButtonComponent
+export const Card = CardComponent
+export const ConditionalWrapper = ConditionalWrapperComponent
+export const Icon = IconComponent

package/components/Accordion/Accordion.astro

@@ -1,5 +1,6 @@
 ---
 import type { AccordionProps } from './accordion'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
 
 interface Props extends AccordionProps {}
 
@@ -8,17 +9,12 @@ const {
 } = Astro.props
 ---
 
-<ul data-id="accordion">
-    {items.map(item => (
+<ul class="w-accordion" data-id="w-accordion">
+    {items.map((item: AccordionProps['items'][0]) => (
         <li>
             <div class="accordion-title">
                 {item.title}
-                <img
-                    src="/icons/arrow-down.svg"
-                    alt="GitHub"
-                    width={15}
-                    height={15}
-                />
+                <Fragment set:html={ArrowDown} />
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">
@@ -30,7 +26,7 @@ const {
 </ul>
 
 <script>
-    const accordions = document.querySelectorAll('[data-id="accordion"]')
+    const accordions = document.querySelectorAll('[data-id="w-accordion"]')
 
     Array.from(accordions).forEach(element => {
         element.addEventListener('click', event => {

package/components/Accordion/Accordion.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
+    import ArrowDown from '../../icons/arrow-down.svg?raw'
 
     export let items: AccordionProps['items']
 
@@ -13,7 +14,7 @@
     }
 </script>
 
-<ul>
+<ul class="w-accordion">
     {#each items as item, index}
         <li>
             <div
@@ -22,12 +23,7 @@
                 on:click={() => toggle(index)}
             >
                 {item.title}
-                <img
-                    src="/icons/arrow-down.svg"
-                    alt="GitHub"
-                    width={15}
-                    height={15}
-                />
+                {@html ArrowDown}
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">

package/components/Accordion/Accordion.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import type { AccordionProps } from './accordion'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
 import './accordion.scss'
 
-export const Accordion = ({ items }: AccordionProps) => {
+const Accordion = ({ items }: AccordionProps) => {
     const [state, setState] = useState(Array(items.length).fill(false))
 
     const toggle = (index: number) => {
@@ -13,21 +14,14 @@ export const Accordion = ({ items }: AccordionProps) => {
     }
 
     return (
-        <ul data-id="accordion">
+        <ul className="w-accordion">
             {items.map((item, index) => (
                 <li key={index}>
                     <div
                         className={state[index] ? 'accordion-title open' : 'accordion-title'}
                         onClick={() => toggle(index)}
-                    >
-                        {item.title}
-                        <img
-                            src="/icons/arrow-down.svg"
-                            alt="GitHub"
-                            width={15}
-                            height={15}
-                        />
-                    </div>
+                        dangerouslySetInnerHTML={{ __html: `${item.title} ${ArrowDown}` }}
+                    />
                     <div className="accordion-wrapper">
                         <div className="accordion-content">
                             <div dangerouslySetInnerHTML={{ __html: item.content }} />
@@ -38,3 +32,5 @@ export const Accordion = ({ items }: AccordionProps) => {
         </ul>
     )
 }
+
+export default Accordion

package/components/Accordion/accordion.scss

@@ -1,6 +1,6 @@
 @import '../../scss/config.scss';
 
-ul {
+.w-accordion {
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -25,13 +25,16 @@ ul {
             align-items: center;
             cursor: pointer;
 
-            img {
+            svg {
                 @include Transition(transform);
-                filter: brightness(.7);
+                color: #BBB;
+                width: 15px;
+                height: 15px;
+                pointer-events: none;
             }
 
             &.open {
-                img {
+                svg {
                     transform: rotate(180deg);
                 }
 

package/components/Alert/Alert.astro

@@ -0,0 +1,64 @@
+---
+import type { AlertProps } from './alert'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
+
+interface Props extends AlertProps {}
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const {
+    element = 'section',
+    title,
+    titleTag = 'strong',
+    className,
+    theme,
+    ...rest
+} = Astro.props
+
+const Component = element
+const Title = titleTag
+const hasCustomIcon = Astro.slots.has('icon')
+
+const classes = [
+    'w-alert',
+    (!hasCustomIcon && !theme) && 'col',
+    theme,
+    className
+].filter(Boolean).join(' ')
+
+const props = {
+    class: classes
+}
+---
+
+<Component {...props} {...rest}>
+    <slot name="icon" />
+
+    {!hasCustomIcon && theme && <Fragment set:html={iconMap[theme]} />}
+
+    <ConditionalWrapper condition={!!(hasCustomIcon || theme)}>
+        <div class="alert-wrapper" slot="wrapper">
+            children
+        </div>
+        {title && (
+            <Title class:list="alert-title">{title}</Title>
+        )}
+        <div class="alert-body">
+            <slot />
+        </div>
+    </ConditionalWrapper>
+</Component>
+
+<style lang="scss">
+    @import './alert.scss';
+</style>

package/components/Alert/Alert.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { AlertProps } from './alert'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import info from '../../icons/info.svg?raw'
+    import success from '../../icons/check.svg?raw'
+    import warning from '../../icons/warning.svg?raw'
+    import alert from '../../icons/alert.svg?raw'
+
+    export let element: AlertProps['element'] = 'section'
+    export let title: AlertProps['title'] = null
+    export let titleTag: AlertProps['title'] = 'strong'
+    export let className: AlertProps['className'] = null
+    export let theme: AlertProps['theme'] = null
+
+    const iconMap = {
+        info,
+        success,
+        warning,
+        alert
+    }
+
+    const hasCustomIcon = $$slots.icon
+
+    const classes = [
+        'w-alert',
+        (!hasCustomIcon && !theme) && 'col',
+        theme,
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<svelte:element this={element} class={classes} {...$$restProps}>
+    <slot name="icon" />
+
+    {#if !hasCustomIcon && theme}
+        {@html iconMap[theme]}
+    {/if}
+    
+    <ConditionalWrapper
+        condition={!!(hasCustomIcon || theme)}
+        element="div"
+        class="alert-wrapper"
+    >
+        {#if title}
+            <svelte:element this={titleTag} class="alert-title">
+                {title}
+            </svelte:element>
+        {/if}
+        <div class="alert-body">
+            <slot />
+        </div>
+    </ConditionalWrapper>
+</svelte:element>
+
+<style lang="scss">
+    @import './alert.scss';
+</style>

package/components/Alert/Alert.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import type { AlertProps } from './alert'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
+
+import './alert.scss'
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const Alert = ({
+    Element = 'section',
+    title,
+    TitleTag = 'strong',
+    className,
+    theme,
+    children,
+    icon,
+    ...rest
+}: AlertProps & { icon?: any }) => {
+    const classes = [
+        'w-alert',
+        (!icon && !theme) && 'col',
+        theme,
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <Element className={classes} {...rest}>
+            {icon && icon}
+            {!icon && theme && <div dangerouslySetInnerHTML={{ __html: iconMap[theme] }} />}
+
+            <ConditionalWrapper condition={!!(icon || theme)} wrapper={children => (
+                <div className="alert-wrapper">
+                    {children}
+                </div>
+            )}>
+                {title && (
+                    <TitleTag className="alert-title">{title}</TitleTag>
+                )}
+                <div className="alert-body">
+                    {children}
+                </div>
+            </ConditionalWrapper>
+        </Element>
+    )
+}
+
+export default Alert

package/components/Alert/alert.scss

@@ -0,0 +1,52 @@
+@import '../../scss/config.scss';
+
+.w-alert {
+    border: 1px solid #252525;
+    border-radius: 5px;
+    padding: 15px;
+    display: flex;
+
+    &.col {
+        flex-direction: column;
+    }
+
+    &:not(.col) {
+        gap: 10px;
+    }
+
+    &.info {
+        border: 1px solid #0abde3;
+        color: #0abde3;
+    }
+
+    &.success {
+        border: 1px solid #1dd1a1;
+        color: #1dd1a1;
+    }
+
+    &.warning {
+        border: 1px solid #ff9f43;
+        color: #ff9f43;
+    }
+
+    &.alert {
+        border: 1px solid #e73f40;
+        color: #e73f40;
+    }
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-top: 1px;
+    }
+
+    .alert-title {
+        display: block;
+        margin-bottom: 5px;
+    }
+
+    .alert-body {
+        font-size: 16px;
+        color: #BBB;
+    }
+}

package/components/Alert/alert.ts

@@ -0,0 +1,13 @@
+export type AlertProps = {
+    element?: string
+    title?: string | null
+    titleTag?: string
+    icon?: string | null
+    className?: string | null
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    [key: string]: any
+}

package/components/Badge/Badge.astro

@@ -0,0 +1,27 @@
+---
+import type { BadgeProps } from './badge'
+
+interface Props extends BadgeProps {
+    interactive?: boolean
+}
+
+const {
+    theme,
+    interactive
+} = Astro.props
+
+const classes = [
+    'w-badge',
+    theme || null,
+    interactive && 'hover'
+]
+---
+
+<span class:list={classes}>
+    <slot />
+</span>
+
+
+<style lang="scss">
+    @import './badge.scss';
+</style>

package/components/Badge/Badge.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { BadgeProps } from './badge'
+    
+    export let theme: BadgeProps['theme'] = null
+    export let onClick: BadgeProps['onClick'] = () => {}
+    
+    const classes = [
+        'w-badge',
+        theme || null,
+        onClick && 'hover'
+    ].filter(Boolean).join(' ')
+</script>
+
+<span class={classes} on:click={onClick}>
+    <slot />
+</span>
+
+<style lang="scss">
+    @import './badge.scss';
+</style>

package/components/Badge/Badge.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { BadgeProps } from './badge'
+import './badge.scss'
+
+const Badge = ({ theme, onClick, children }: BadgeProps) => {
+    const classes = [
+        'w-badge',
+        theme || null,
+        onClick && 'hover'
+    ].filter(Boolean).join(' ')
+
+    return (
+        <span className={classes} onClick={onClick}>
+            {children}
+        </span>
+    )
+}
+
+export default Badge

package/components/Badge/badge.scss

@@ -0,0 +1,85 @@
+@import '../../scss/config.scss';
+
+.w-badge {
+    @include Transition();
+    padding: 5px 10px;
+    border-radius: 5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    background: #FFF;
+    color: #252525;
+
+    &.hover {
+        cursor: pointer;
+
+        &:hover {
+            background: #BBB;
+        }
+
+        &.secondary:hover {
+            background: #333;
+        }
+
+        &.outline:hover {
+            color: #FFF;
+            background: transparent;
+            box-shadow: inset 0px 0px 0px 1px #FFF;
+        }
+
+        &.flat:hover {
+            background: #333;
+        }
+
+        &.info:hover {
+            background: #48dbfb;
+        }
+
+        &.success:hover {
+            background: #1dd1a1;
+        }
+
+        &.warning:hover {
+            background: #f7aa61;
+        }
+
+        &.alert:hover {
+            background: #ee5253;
+        }
+    }
+
+    
+    &.secondary {
+        background: #252525;
+        color: #FFF;
+    }
+
+    &.outline {
+        background: #000;
+        color: #BBB;
+        box-shadow: inset 0px 0px 0px 1px #BBB;
+    }
+
+    &.flat {
+        background: #000;
+        color: #FFF;
+    }
+
+    &.info {
+        background: #0abde3;
+    }
+
+    &.success {
+        background: #10ac84;
+    }
+
+    &.warning {
+        background: #ff9f43;
+    }
+
+    &.alert {
+        background: #e73f40;
+        color: #fff;
+    }
+}

package/components/Badge/badge.ts

@@ -0,0 +1,12 @@
+export type BadgeProps = {
+    theme?: 'secondary'
+        | 'outline'
+        | 'flat'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    onClick?: () => any
+    [key: string]: any
+}

package/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { ButtonProps } from './button'
 import './button.scss'
 
-export const Button = ({
+const Button = ({
     theme,
     bold,
     href,
@@ -30,3 +30,5 @@ export const Button = ({
         </button>
     )
 }
+
+export default Button

package/components/Button/button.scss

@@ -35,12 +35,12 @@
 
     &.outline {
         background: #000;
-        color: #FFF;
-        box-shadow: inset 0px 0px 0px 1px #FFF;
-
+        color: #BBB;
+        box-shadow: inset 0px 0px 0px 1px #BBB;
+        
         &:hover {
-            color: #BBB;
-            box-shadow: inset 0px 0px 0px 1px #BBB;
+            color: #FFF;
+            box-shadow: inset 0px 0px 0px 1px #FFF;
         }
     }
 

package/components/Card/Card.astro

@@ -1,12 +1,7 @@
 ---
-interface Props {
-    element?: string
-    title?: string
-    compact?: boolean
-    className?: string
-    secondary?: boolean
-    [key: string]: any
-}
+import type { CardProps } from './card'
+
+interface Props extends CardProps {}
 
 const {
     element = 'section',
@@ -19,9 +14,9 @@ const {
 } = Astro.props
 
 const classes = [
+    'w-card',
     className,
     secondary && 'secondary',
-    'card'
 ].filter(Boolean).join(' ')
 
 const props = {

package/components/Card/Card.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { CardProps } from './card'
+
+    export let element: CardProps['element'] = 'section'
+    export let title: CardProps['title'] = ''
+    export let titleTag: CardProps['titleTag'] = 'span'
+    export let compact: CardProps['compact'] = false
+    export let className: CardProps['className'] = ''
+    export let secondary: CardProps['secondary'] = false
+
+    const classes = [
+        'w-card',
+        className,
+        secondary && 'secondary'
+    ].filter(Boolean).join(' ')
+</script>
+
+<svelte:element this={element} class={classes} {...$$restProps}>
+    {#if title}
+        <svelte:element this={titleTag} class="card-title">
+            {title}
+        </svelte:element>
+    {/if}
+    <div class="card-body" class:compact>
+        {#if compact && !secondary}
+            <div class="card-wrapper"><slot /></div>
+        {:else}
+            <slot />
+        {/if}
+    </div>
+</svelte:element>
+
+<style lang="scss">
+    @import './card.scss';
+</style>

package/components/Card/Card.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import type { CardProps } from './card'
+import './card.scss'
+
+const Card = ({
+    Element = 'section',
+    title,
+    TitleTag = 'span',
+    compact,
+    className,
+    secondary,
+    children,
+    ...rest
+}: CardProps) => {
+    const classes = [
+        'w-card',
+        className,
+        secondary && 'secondary'
+    ].filter(Boolean).join(' ')
+
+    return (
+        <Element className={classes} {...rest}>
+            {title && (
+                <TitleTag className="card-title">{title}</TitleTag>
+            )}
+            <div className={compact ? 'card-body compact' : 'card-body'}>
+                {compact && !secondary
+                    ? <div className="card-wrapper">{children}</div>
+                    : children
+                }
+            </div>
+        </Element>
+    )
+}
+
+export default Card

package/components/Card/card.scss

@@ -1,4 +1,4 @@
-.card {
+.w-card {
     border: 1px solid #252525;
     border-radius: 5px;
     display: flex;

package/components/Card/card.ts

@@ -0,0 +1,8 @@
+export type CardProps = {
+    element?: string
+    title?: string
+    compact?: boolean
+    className?: string
+    secondary?: boolean
+    [key: string]: any
+}

package/components/ConditionalWrapper/ConditionalWrapper.astro

@@ -0,0 +1,17 @@
+---
+import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+interface Props extends ConditionalWrapperProps {}
+
+const { condition } = Astro.props
+
+const wrapper = await Astro.slots.render('wrapper')
+const children = await Astro.slots.render('default')
+const wrapped = wrapper?.replace('children', children)
+
+if (!Astro.slots.has('wrapper')) {
+  console.error('Missing wrapper. Add slot="wrapper" to one of the elements.')
+}
+---
+
+<Fragment set:html={condition ? wrapped : children} />

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+    export let condition: ConditionalWrapperProps['condition']
+    export let element: string
+</script>
+
+{#if condition}
+    <svelte:element this={element} {...$$restProps}>
+        <slot />
+    </svelte:element>
+{:else}
+    <slot />
+{/if}

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+type ExtendedConditionalWrapperProps = {
+  condition: ConditionalWrapperProps['condition']
+  wrapper: (_: React.ReactNode) => any
+  children: React.ReactNode
+};
+
+const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) =>
+  condition ? wrapper(children) : children
+
+export default ConditionalWrapper

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -0,0 +1,3 @@
+export type ConditionalWrapperProps = {
+    condition: boolean
+}

package/components/Icon/Icon.astro

@@ -0,0 +1,20 @@
+---
+import type { IconProps } from './icon'
+
+interface Props extends IconProps {}
+
+const {
+    type,
+    size = 24,
+    color
+} = Astro.props
+
+const { default: markup } = await import(`../../icons/${type}.svg?raw`)
+const icon = markup
+    .replace('width="24"', `width=${size}`)
+    .replace('height="24"', color
+        ? `height=${size} color=${color}`
+        : `height=${size}`)
+---
+
+<Fragment set:html={icon} />

package/components/Icon/Icon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { IconProps } from './icon'
+
+    import Github from '../../icons/github.svg?raw'
+    import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+    export let type: IconProps['type'] = ''
+    export let size: IconProps['size'] = 24
+    export let color: IconProps['color'] = ''
+
+    const iconMap = {
+        'github': Github,
+        'arrow-down': ArrowDown
+    }
+
+    const icon = iconMap[type as keyof typeof iconMap]
+        .replace('width="24"', `width=${size}`)
+        .replace('height="24"', color
+            ? `height=${size} color=${color}`
+            : `height=${size}`)
+</script>
+
+{@html icon}

package/components/Icon/Icon.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import type { IconProps } from './icon'
+
+import Github from '../../icons/github.svg?raw'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+const iconMap = {
+    'github': Github,
+    'arrow-down': ArrowDown
+}
+
+const Icon = ({
+    type,
+    size = 24,
+    color
+}: IconProps) => {
+    const icon = iconMap[type as keyof typeof iconMap]
+        .replace('width="24"', `width=${size}`)
+        .replace('height="24"', color
+            ? `height=${size} color=${color}`
+            : `height=${size}`)
+
+    return <span dangerouslySetInnerHTML={{ __html: icon }} />
+}
+
+export default Icon

package/components/Icon/icon.ts

@@ -0,0 +1,5 @@
+export type IconProps = {
+    type: string
+    size?: number
+    color?: string
+}

package/icons/alert.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.48872 2.15394C7.48856 2.1541 7.48888 2.15378 7.48872 2.15394L2.15302 7.48964C1.99269 7.64997 1.93416 7.74684 1.9045 7.81776C1.87504 7.88818 1.84615 7.99973 1.84615 8.23015V15.7698C1.84615 15.9963 1.8732 16.1054 1.90221 16.1759C1.93113 16.2463 1.9898 16.3459 2.15425 16.5104L7.48964 21.847C7.48966 21.847 7.48961 21.847 7.48964 21.847C7.64992 22.0073 7.74685 22.0658 7.81776 22.0955C7.88818 22.125 7.99973 22.1538 8.23015 22.1538H15.7698C15.9964 22.1538 16.1061 22.1268 16.1771 22.0976C16.2477 22.0687 16.3471 22.0102 16.5104 21.847L21.847 16.5104C22.0073 16.35 22.0658 16.2532 22.0955 16.1822C22.125 16.1118 22.1538 16.0003 22.1538 15.7698V8.23015C22.1538 8.00362 22.1268 7.89393 22.0976 7.82287C22.0687 7.75228 22.0102 7.65286 21.847 7.48964L16.5104 2.15302C16.3471 1.9898 16.2477 1.9313 16.1771 1.90235C16.1061 1.87321 15.9964 1.84615 15.7698 1.84615H8.23015C8.0037 1.84615 7.89439 1.87319 7.82354 1.90227C7.75298 1.93123 7.65289 1.99031 7.48872 2.15394ZM7.12261 0.194349C7.48962 0.0437307 7.85846 0 8.23015 0H15.7698C16.1415 0 16.5105 0.0437121 16.8776 0.194263C17.2452 0.345007 17.5433 0.575125 17.8158 0.847594L23.1524 6.18421C23.4249 6.45668 23.655 6.75479 23.8057 7.12236C23.9563 7.48946 24 7.85853 24 8.23015V15.7698C24 16.1548 23.952 16.5282 23.7987 16.8947C23.6455 17.2607 23.4155 17.5527 23.1524 17.8158L17.8158 23.1524C17.5433 23.4249 17.2452 23.655 16.8776 23.8057C16.5105 23.9563 16.1415 24 15.7698 24H8.23015C7.84519 24 7.47182 23.952 7.10532 23.7987C6.73932 23.6455 6.44726 23.4155 6.18421 23.1524L0.848825 17.8158C0.8488 17.8158 0.84885 17.8158 0.848825 17.8158C0.576388 17.5433 0.345783 17.2454 0.194714 16.8779C0.0437194 16.5106 0 16.1415 0 15.7698V8.23015C0 7.84519 0.0480391 7.47182 0.20135 7.10532C0.354452 6.73932 0.58454 6.44726 0.847594 6.18421L6.18513 0.846674C6.45759 0.574982 6.7554 0.345054 7.12261 0.194349ZM12 5.69477C12.5098 5.69477 12.9231 6.10804 12.9231 6.61785V13.3871C12.9231 13.8969 12.5098 14.3102 12 14.3102C11.4902 14.3102 11.0769 13.8969 11.0769 13.3871V6.61785C11.0769 6.10804 11.4902 5.69477 12 5.69477ZM12 15.8437C12.5098 15.8437 12.9231 16.257 12.9231 16.7668V17.3822C12.9231 17.892 12.5098 18.3052 12 18.3052C11.4902 18.3052 11.0769 17.892 11.0769 17.3822V16.7668C11.0769 16.257 11.4902 15.8437 12 15.8437Z" fill="currentColor"/>
+</svg>

package/{public/icons → icons}/arrow-down.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.360618 6.42142C0.864272 5.88419 1.70806 5.85699 2.24526 6.36062L12 15.5057L21.7547 6.36062C22.292 5.85699 23.1358 5.88419 23.6395 6.42142C24.143 6.95865 24.1158 7.80243 23.5787 8.30606L12.9119 18.3062C12.3991 18.787 11.601 18.787 11.0881 18.3062L0.421418 8.30606C-0.11581 7.80243 -0.143009 6.95865 0.360618 6.42142Z" fill="white" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.360618 6.42142C0.864272 5.88419 1.70806 5.85699 2.24526 6.36062L12 15.5057L21.7547 6.36062C22.292 5.85699 23.1358 5.88419 23.6395 6.42142C24.143 6.95865 24.1158 7.80243 23.5787 8.30606L12.9119 18.3062C12.3991 18.787 11.601 18.787 11.0881 18.3062L0.421418 8.30606C-0.11581 7.80243 -0.143009 6.95865 0.360618 6.42142Z" fill="currentColor" />
 </svg>

package/icons/check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6425 7.92858C17.0558 8.22704 17.1489 8.80404 16.8505 9.21734L12.4237 15.3474C12.4236 15.3475 12.4238 15.3473 12.4237 15.3474C12.2341 15.6102 11.9873 15.8271 11.7024 15.9814C11.4174 16.1357 11.1011 16.2237 10.7773 16.2389C10.4535 16.254 10.1304 16.1958 9.83224 16.0687C9.53413 15.9416 9.26855 15.7489 9.05527 15.5049C9.0552 15.5048 9.05534 15.505 9.05527 15.5049L7.20296 13.3867C6.86736 13.003 6.90641 12.4198 7.29017 12.0842C7.67393 11.7486 8.25709 11.7877 8.59268 12.1714L10.445 14.2896C10.4755 14.3245 10.5136 14.3522 10.5562 14.3704C10.5988 14.3886 10.645 14.3969 10.6912 14.3947C10.7375 14.3925 10.7827 14.38 10.8234 14.3579C10.8641 14.3359 10.8993 14.3049 10.9264 14.2674L15.3538 8.13651C15.6522 7.72321 16.2292 7.63012 16.6425 7.92858Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.84615C6.39219 1.84615 1.84615 6.39219 1.84615 12C1.84615 17.6078 6.39219 22.1538 12 22.1538C17.6078 22.1538 22.1538 17.6078 22.1538 12C22.1538 6.39219 17.6078 1.84615 12 1.84615ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
+</svg>

package/{public/icons → icons}/github.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.3903 6.12641C21.3172 4.24172 19.8617 2.74961 18.0232 1.64975C16.1845 0.549822 14.1772 0 11.9999 0C9.82282 0 7.81486 0.54999 5.97655 1.64975C4.13797 2.74956 2.68246 4.24172 1.60939 6.12641C0.536482 8.01104 0 10.0691 0 12.3005C0 14.9808 0.762885 17.3911 2.28904 19.5319C3.81503 21.6728 5.78638 23.1543 8.20293 23.9764C8.48422 24.0299 8.69245 23.9923 8.82785 23.8644C8.96329 23.7364 9.03093 23.5761 9.03093 23.3841C9.03093 23.3521 9.02825 23.0639 9.02305 22.5193C9.01812 22.0442 9.01549 21.5691 9.01517 21.094L8.65579 21.1577C8.42665 21.2008 8.13758 21.219 7.78859 21.2138C7.43977 21.2088 7.07764 21.1714 6.70271 21.1017C6.32762 21.0326 5.97874 20.8725 5.6558 20.6215C5.33302 20.3706 5.10388 20.0422 4.96844 19.6367L4.81219 19.2681C4.70805 19.0227 4.54409 18.7502 4.32009 18.4514C4.0961 18.1523 3.86959 17.9496 3.64045 17.8428L3.53105 17.7625C3.45816 17.7092 3.39051 17.6448 3.32796 17.5702C3.26546 17.4955 3.21867 17.4208 3.18742 17.346C3.15612 17.2711 3.18206 17.2096 3.26552 17.1614C3.34898 17.1133 3.4998 17.0899 3.71865 17.0899L4.03103 17.1377C4.23937 17.1805 4.49708 17.3084 4.80448 17.522C5.11171 17.7356 5.36427 18.0131 5.56222 18.3547C5.80192 18.7926 6.09071 19.1262 6.42941 19.3559C6.76784 19.5855 7.10906 19.7001 7.45274 19.7001C7.79642 19.7001 8.09325 19.6734 8.34335 19.6202C8.59318 19.5668 8.82757 19.4866 9.04642 19.3799C9.14017 18.6642 9.39541 18.1143 9.81193 17.73C9.21826 17.6661 8.68452 17.5697 8.21042 17.4417C7.7366 17.3134 7.24697 17.1053 6.74184 16.8167C6.23645 16.5285 5.81719 16.1707 5.48396 15.7438C5.15068 15.3166 4.87715 14.7559 4.66378 14.062C4.45029 13.3678 4.34352 12.5671 4.34352 11.6595C4.34352 10.3673 4.75506 9.26765 5.57798 8.35997C5.19249 7.38846 5.22888 6.29936 5.68727 5.0928C5.98936 4.99659 6.43735 5.06879 7.03102 5.30894C7.6248 5.54921 8.05954 5.75504 8.33569 5.92569C8.61184 6.09629 8.8331 6.24085 8.99979 6.3581C9.96872 6.08058 10.9686 5.94179 11.9998 5.94179C13.0309 5.94179 14.0311 6.08058 15 6.3581L15.5938 5.97388C15.9998 5.71751 16.4792 5.48257 17.031 5.269C17.5831 5.05555 18.0052 4.99675 18.297 5.09296C18.7656 6.29959 18.8074 7.38863 18.4217 8.36014C19.2446 9.26782 19.6563 10.3677 19.6563 11.6597C19.6563 12.5673 19.5492 13.3705 19.336 14.07C19.1226 14.7696 18.8467 15.3298 18.5083 15.7518C18.1695 16.1737 17.7475 16.5288 17.2424 16.8169C16.7372 17.1052 16.2474 17.3134 15.7735 17.4416C15.2995 17.5698 14.7658 17.6662 14.1721 17.7303C14.7136 18.2106 14.9843 18.9688 14.9843 20.0045V23.3837C14.9843 23.5756 15.0495 23.7359 15.1798 23.864C15.31 23.9918 15.5156 24.0295 15.7969 23.9759C18.2138 23.1539 20.1851 21.6724 21.7111 19.5314C23.2368 17.3907 24 14.9804 24 12.3C23.9995 10.0689 23.4627 8.01104 22.3903 6.12641Z" fill="white"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.3903 6.12641C21.3172 4.24172 19.8617 2.74961 18.0232 1.64975C16.1845 0.549822 14.1772 0 11.9999 0C9.82282 0 7.81486 0.54999 5.97655 1.64975C4.13797 2.74956 2.68246 4.24172 1.60939 6.12641C0.536482 8.01104 0 10.0691 0 12.3005C0 14.9808 0.762885 17.3911 2.28904 19.5319C3.81503 21.6728 5.78638 23.1543 8.20293 23.9764C8.48422 24.0299 8.69245 23.9923 8.82785 23.8644C8.96329 23.7364 9.03093 23.5761 9.03093 23.3841C9.03093 23.3521 9.02825 23.0639 9.02305 22.5193C9.01812 22.0442 9.01549 21.5691 9.01517 21.094L8.65579 21.1577C8.42665 21.2008 8.13758 21.219 7.78859 21.2138C7.43977 21.2088 7.07764 21.1714 6.70271 21.1017C6.32762 21.0326 5.97874 20.8725 5.6558 20.6215C5.33302 20.3706 5.10388 20.0422 4.96844 19.6367L4.81219 19.2681C4.70805 19.0227 4.54409 18.7502 4.32009 18.4514C4.0961 18.1523 3.86959 17.9496 3.64045 17.8428L3.53105 17.7625C3.45816 17.7092 3.39051 17.6448 3.32796 17.5702C3.26546 17.4955 3.21867 17.4208 3.18742 17.346C3.15612 17.2711 3.18206 17.2096 3.26552 17.1614C3.34898 17.1133 3.4998 17.0899 3.71865 17.0899L4.03103 17.1377C4.23937 17.1805 4.49708 17.3084 4.80448 17.522C5.11171 17.7356 5.36427 18.0131 5.56222 18.3547C5.80192 18.7926 6.09071 19.1262 6.42941 19.3559C6.76784 19.5855 7.10906 19.7001 7.45274 19.7001C7.79642 19.7001 8.09325 19.6734 8.34335 19.6202C8.59318 19.5668 8.82757 19.4866 9.04642 19.3799C9.14017 18.6642 9.39541 18.1143 9.81193 17.73C9.21826 17.6661 8.68452 17.5697 8.21042 17.4417C7.7366 17.3134 7.24697 17.1053 6.74184 16.8167C6.23645 16.5285 5.81719 16.1707 5.48396 15.7438C5.15068 15.3166 4.87715 14.7559 4.66378 14.062C4.45029 13.3678 4.34352 12.5671 4.34352 11.6595C4.34352 10.3673 4.75506 9.26765 5.57798 8.35997C5.19249 7.38846 5.22888 6.29936 5.68727 5.0928C5.98936 4.99659 6.43735 5.06879 7.03102 5.30894C7.6248 5.54921 8.05954 5.75504 8.33569 5.92569C8.61184 6.09629 8.8331 6.24085 8.99979 6.3581C9.96872 6.08058 10.9686 5.94179 11.9998 5.94179C13.0309 5.94179 14.0311 6.08058 15 6.3581L15.5938 5.97388C15.9998 5.71751 16.4792 5.48257 17.031 5.269C17.5831 5.05555 18.0052 4.99675 18.297 5.09296C18.7656 6.29959 18.8074 7.38863 18.4217 8.36014C19.2446 9.26782 19.6563 10.3677 19.6563 11.6597C19.6563 12.5673 19.5492 13.3705 19.336 14.07C19.1226 14.7696 18.8467 15.3298 18.5083 15.7518C18.1695 16.1737 17.7475 16.5288 17.2424 16.8169C16.7372 17.1052 16.2474 17.3134 15.7735 17.4416C15.2995 17.5698 14.7658 17.6662 14.1721 17.7303C14.7136 18.2106 14.9843 18.9688 14.9843 20.0045V23.3837C14.9843 23.5756 15.0495 23.7359 15.1798 23.864C15.31 23.9918 15.5156 24.0295 15.7969 23.9759C18.2138 23.1539 20.1851 21.6724 21.7111 19.5314C23.2368 17.3907 24 14.9804 24 12.3C23.9995 10.0689 23.4627 8.01104 22.3903 6.12641Z" fill="currentColor"/>
+</svg>

package/icons/info.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.15381C12.5098 6.15381 12.9231 6.56708 12.9231 7.07689V7.69227C12.9231 8.20207 12.5098 8.61535 12 8.61535C11.4902 8.61535 11.0769 8.20207 11.0769 7.69227V7.07689C11.0769 6.56708 11.4902 6.15381 12 6.15381ZM10.4615 10.7692C10.4615 10.2594 10.8748 9.84612 11.3846 9.84612H12C12.5098 9.84612 12.9231 10.2594 12.9231 10.7692V16.0525C13.2816 16.1792 13.5385 16.5211 13.5385 16.923C13.5385 17.4328 13.1252 17.8461 12.6154 17.8461H11.3846C10.8748 17.8461 10.4615 17.4328 10.4615 16.923C10.4615 16.5211 10.7184 16.1792 11.0769 16.0525V11.6397C10.7184 11.513 10.4615 11.1711 10.4615 10.7692Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5084 0.0701433C17.6498 -1.24757e-05 16.5847 -6.90184e-06 15.2406 1.40675e-07H8.75939C7.41534 -6.90184e-06 6.3502 -1.24757e-05 5.4916 0.0701433C4.61356 0.141887 3.87051 0.291634 3.192 0.63723C2.09202 1.19771 1.19765 2.09215 0.637165 3.19213C0.29157 3.87064 0.141887 4.61356 0.0701433 5.4916C-1.24757e-05 6.3502 -6.90184e-06 7.41534 1.40675e-07 8.75939V15.2406C-6.90184e-06 16.5847 -1.24757e-05 17.6498 0.0701433 18.5084C0.141887 19.3864 0.291634 20.1295 0.63723 20.808C1.19771 21.908 2.09215 22.8024 3.19213 23.3628C3.87064 23.7084 4.61356 23.8581 5.4916 23.9299C6.35019 24 7.41532 24 8.75937 24H15.2406C16.5847 24 17.6498 24 18.5084 23.9299C19.3864 23.8581 20.1295 23.7084 20.808 23.3628C21.908 22.8023 22.8024 21.9078 23.3628 20.8079C23.7084 20.1294 23.8581 19.3864 23.9299 18.5084C24 17.6498 24 16.5847 24 15.2406V8.75937C24 7.41532 24 6.35019 23.9299 5.4916C23.8581 4.61356 23.7084 3.87051 23.3628 3.192C22.8023 2.09202 21.9079 1.19765 20.8079 0.637165C20.1294 0.29157 19.3864 0.141887 18.5084 0.0701433ZM4.03016 2.28216C4.40516 2.09117 4.87822 1.97257 5.64194 1.91017C6.41655 1.84687 7.40631 1.84615 8.8 1.84615H15.2C16.5937 1.84615 17.5834 1.84687 18.3581 1.91017C19.1219 1.97258 19.5949 2.0912 19.97 2.28222C20.7225 2.66571 21.3344 3.27758 21.7178 4.03016C21.9088 4.40516 22.0274 4.87822 22.0898 5.64194C22.1531 6.41656 22.1538 7.40631 22.1538 8.8V15.2C22.1538 16.5937 22.1531 17.5834 22.0898 18.3581C22.0274 19.1218 21.9088 19.5948 21.7178 19.9698C21.3344 20.7225 20.7225 21.3344 19.9698 21.7178C19.5948 21.9088 19.1218 22.0274 18.3581 22.0898C17.5834 22.1531 16.5937 22.1538 15.2 22.1538H8.8C7.40631 22.1538 6.41656 22.1531 5.64194 22.0898C4.87822 22.0274 4.40516 21.9088 4.03016 21.7178C3.27758 21.3344 2.66571 20.7225 2.28222 19.97C2.0912 19.5949 1.97258 19.1219 1.91017 18.3581C1.84687 17.5834 1.84615 16.5937 1.84615 15.2V8.8C1.84615 7.40631 1.84687 6.41655 1.91017 5.64194C1.97257 4.87822 2.09117 4.40516 2.28216 4.03016C2.66563 3.27764 3.27764 2.66563 4.03016 2.28216Z" fill="currentColor"/>
+</svg>

package/icons/warning.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9222 8.23694C12.395 8.23694 12.7784 8.62029 12.7784 9.09318V15.3722C12.7784 15.8451 12.395 16.2284 11.9222 16.2284C11.4493 16.2284 11.0659 15.8451 11.0659 15.3722V9.09318C11.0659 8.62029 11.4493 8.23694 11.9222 8.23694ZM11.9222 17.652C12.395 17.652 12.7784 18.0354 12.7784 18.5083V19.0791C12.7784 19.552 12.395 19.9353 11.9222 19.9353C11.4493 19.9353 11.0659 19.552 11.0659 19.0791V18.5083C11.0659 18.0354 11.4493 17.652 11.9222 17.652Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8974 18.9385L13.639 3.83981C12.9304 2.54425 11.0696 2.54425 10.361 3.83981L2.10258 18.9385C1.42165 20.1834 2.32258 21.7031 3.74156 21.7031H20.2584C21.6774 21.7031 22.5784 20.1834 21.8974 18.9385ZM15.278 2.94334C13.8607 0.35222 10.1393 0.35222 8.72202 2.94334L0.463591 18.042C-0.898272 20.5319 0.903593 23.5712 3.74156 23.5712H20.2584C23.0964 23.5712 24.8983 20.5319 23.5364 18.042L15.278 2.94334Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -28,7 +28,7 @@
     },
     "files": [
         "components",
-        "public",
+        "icons",
         "scss",
         "astro.d.ts",
         "astro.js",

package/react.d.ts

@@ -1,5 +1,19 @@
-declare module 'webcoreui/react' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-
-    export function Accordion(_props: AccordionProps): any
-}
+
+declare module 'webcoreui/react' {
+    import type { AccordionProps } from './components/Accordion/accordion'
+	import type { AlertProps } from './components/Alert/alert'
+	import type { BadgeProps } from './components/Badge/badge'
+	import type { ButtonProps } from './components/Button/button'
+	import type { CardProps } from './components/Card/card'
+	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+	import type { IconProps } from './components/Icon/icon'
+
+    export function Accordion(_props: AccordionProps): any
+	export function Alert(_props: AlertProps): any
+	export function Badge(_props: BadgeProps): any
+	export function Button(_props: ButtonProps): any
+	export function Card(_props: CardProps): any
+	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
+	export function Icon(_props: IconProps): any
+}
+    

package/react.js

@@ -1,7 +1,15 @@
-import { Accordion as AccordionComponent } from './components/Accordion/Accordion.tsx'
-import { Button as ButtonComponent } from './components/Button/Button.tsx'
-import { Card as CardComponent } from './components/Card/Card.tsx'
-
-export const Accordion = AccordionComponent
-export const Button = ButtonComponent
-export const Card = CardComponent
+import AccordionComponent from './components/Accordion/Accordion.tsx'
+import AlertComponent from './components/Alert/Alert.tsx'
+import BadgeComponent from './components/Badge/Badge.tsx'
+import ButtonComponent from './components/Button/Button.tsx'
+import CardComponent from './components/Card/Card.tsx'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
+import IconComponent from './components/Icon/Icon.tsx'
+
+export const Accordion = AccordionComponent
+export const Alert = AlertComponent
+export const Badge = BadgeComponent
+export const Button = ButtonComponent
+export const Card = CardComponent
+export const ConditionalWrapper = ConditionalWrapperComponent
+export const Icon = IconComponent

package/svelte.d.ts

@@ -1,5 +1,19 @@
-declare module 'webcoreui/svelte' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-
-    export function Accordion(_props: AccordionProps): any
-}
+
+declare module 'webcoreui/svelte' {
+    import type { AccordionProps } from './components/Accordion/accordion'
+	import type { AlertProps } from './components/Alert/alert'
+	import type { BadgeProps } from './components/Badge/badge'
+	import type { ButtonProps } from './components/Button/button'
+	import type { CardProps } from './components/Card/card'
+	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+	import type { IconProps } from './components/Icon/icon'
+
+    export function Accordion(_props: AccordionProps): any
+	export function Alert(_props: AlertProps): any
+	export function Badge(_props: BadgeProps): any
+	export function Button(_props: ButtonProps): any
+	export function Card(_props: CardProps): any
+	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
+	export function Icon(_props: IconProps): any
+}
+    

package/svelte.js

@@ -1,7 +1,15 @@
-import AccordionComponent from './components/Accordion/Accordion.svelte'
-import ButtonComponent from './components/Button/Button.svelte'
-import CardComponent from './components/Card/Card.svelte'
-
-export const Accordion = AccordionComponent
-export const Button = ButtonComponent
-export const Card = CardComponent
+import AccordionComponent from './components/Accordion/Accordion.svelte'
+import AlertComponent from './components/Alert/Alert.svelte'
+import BadgeComponent from './components/Badge/Badge.svelte'
+import ButtonComponent from './components/Button/Button.svelte'
+import CardComponent from './components/Card/Card.svelte'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import IconComponent from './components/Icon/Icon.svelte'
+
+export const Accordion = AccordionComponent
+export const Alert = AlertComponent
+export const Badge = BadgeComponent
+export const Button = ButtonComponent
+export const Card = CardComponent
+export const ConditionalWrapper = ConditionalWrapperComponent
+export const Icon = IconComponent

package/public/img/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>