@designcrowd/fe-shared-lib 1.5.21-BestLogoIcons-3 → 1.5.21

package/.storybook-static/assets/Icon.stories-D6ECVMta.js

@@ -0,0 +1,751 @@
+import{I as m}from"./Icon-8mZGP41G.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const r={title:"Components/Icons",component:m},e=()=>({components:{Icon:m},data(){return{sizes:["xs","sm","md","lg","xl","2xl","3xl","4xl"],icons:[{name:"add-page"},{name:"ai"},{name:"arrow-down"},{name:"arrow-left"},{name:"arrow-right"},{name:"arrow-up"},{name:"arrow-up-underline"},{name:"attach"},{name:"auth-facebook"},{name:"auth-facebook-white"},{name:"auth-google"},{name:"brush"},{name:"banner"},{name:"banner-centered"},{name:"button-arrow"},{name:"button-arrow-left"},{name:"button-arrow-right"},{name:"button-brushstroke"},{name:"button-brushstroke-left"},{name:"button-brushstroke-right"},{name:"button-dashed-oval"},{name:"button-dashed-rectangle"},{name:"button-dashed-rounded"},{name:"button-doubleline-oval"},{name:"button-doubleline-rectangle"},{name:"button-doubleline-rounded"},{name:"button-paper"},{name:"button-paper-top"},{name:"button-paper-bottom"},{name:"button-softshadow-oval"},{name:"button-softshadow-rectangle"},{name:"button-softshadow-rounded"},{name:"business"},{name:"business-card-filled"},{name:"business-card-filled"},{name:"cap"},{name:"card"},{name:"cart-empty"},{name:"calendar"},{name:"check"},{name:"check-thin"},{name:"chevron-down"},{name:"chevron-left"},{name:"chevron-right"},{name:"chevron-right-wide"},{name:"chevron-up"},{name:"close"},{name:"community"},{name:"column-1"},{name:"column-2"},{name:"column-3"},{name:"column-4"},{name:"copy"},{name:"delete"},{name:"designs"},{name:"desktop"},{name:"divider-thick"},{name:"divider-thin"},{name:"divider"},{name:"donate"},{name:"download"},{name:"duplicate"},{name:"edit"},{name:"edit-line"},{name:"ellipsis"},{name:"error"},{name:"envelope-email"},{name:"eye-crossed"},{name:"fees"},{name:"filter"},{name:"filter-crazy-domains"},{name:"flag"},{name:"folder"},{name:"form"},{name:"form-message"},{name:"contact-message"},{name:"fullscreen"},{name:"fullscreen-exit"},{name:"globe"},{name:"globe-crazy-domains"},{name:"godaddy"},{name:"hamburger"},{name:"hamburger-1"},{name:"hamburger-2"},{name:"hamburger-3"},{name:"hamburger-4"},{name:"nav-style-tab-display-style-1"},{name:"nav-style-tab-display-style-2"},{name:"nav-style-hamburger-display-style-1"},{name:"nav-style-hamburger-display-style-2"},{name:"nav-style-hamburger-display-style-3"},{name:"nav-style-hamburger-display-style-4"},{name:"header-desktop-nav-style-tab-display-style-1"},{name:"header-desktop-nav-style-tab-display-style-2"},{name:"header-desktop-nav-style-tab-display-style-3"},{name:"header-desktop-nav-style-tab-display-style-4"},{name:"header-desktop-nav-style-tab-display-style-5"},{name:"header-desktop-nav-style-tab-display-style-6"},{name:"header-desktop-nav-style-tab-display-style-no-logo-1"},{name:"header-desktop-nav-style-tab-display-style-no-logo-2"},{name:"header-desktop-nav-style-tab-display-style-no-logo-3"},{name:"header-mobile-nav-style-tab-display-style-1"},{name:"header-mobile-nav-style-tab-display-style-2"},{name:"header-desktop-nav-style-hamburger-display-style-1"},{name:"header-desktop-nav-style-hamburger-display-style-2"},{name:"header-desktop-nav-style-hamburger-display-style-no-logo-1"},{name:"header-desktop-nav-style-hamburger-display-style-no-logo-2"},{name:"header-desktop-nav-style-hamburger-display-style-no-logo-3"},{name:"header-mobile-nav-style-hamburger-display-style-1"},{name:"header-mobile-nav-style-hamburger-display-style-2"},{name:"header-mobile-nav-style-hamburger-display-style-3"},{name:"header-mobile-nav-style-hamburger-display-style-4"},{name:"footer-centered"},{name:"footer-left"},{name:"footer-display-style-1"},{name:"footer-display-style-2"},{name:"home"},{name:"home-crazy-domains"},{name:"info"},{name:"jobs"},{name:"display-style-about-1"},{name:"display-style-about-2"},{name:"display-style-about-3"},{name:"display-style-about-4"},{name:"display-style-about-5"},{name:"display-style-about-6"},{name:"display-style-images-1"},{name:"display-style-images-2"},{name:"display-style-images-3"},{name:"display-style-images-4"},{name:"display-style-images-5"},{name:"display-style-images-6"},{name:"display-style-banner-1"},{name:"display-style-banner-2"},{name:"display-style-banner-3"},{name:"display-style-banner-4"},{name:"display-style-banner-5"},{name:"display-style-banner-6"},{name:"display-style-banner-7"},{name:"display-style-banner-8"},{name:"display-style-banner-9"},{name:"display-style-contact-1"},{name:"display-style-contact-2"},{name:"display-style-contact-4"},{name:"display-style-contact-5"},{name:"display-style-contact-6"},{name:"letterhead-filled"},{name:"link"},{name:"location"},{name:"lock"},{name:"macos-command"},{name:"map"},{name:"message"},{name:"minus"},{name:"minus-circle-light"},{name:"mobile"},{name:"mug"},{name:"other"},{name:"pause"},{name:"page-buttons"},{name:"page-hamburger"},{name:"page-tabs"},{name:"palette"},{name:"payment"},{name:"payments-featured"},{name:"payments-textonly"},{name:"payments-thumbnail"},{name:"phone"},{name:"plus"},{name:"plus-circle"},{name:"plus-circle-light"},{name:"poll"},{name:"portfolio"},{name:"preview"},{name:"printing"},{name:"processing"},{name:"question"},{name:"reload"},{name:"reorderable"},{name:"search"},{name:"secure"},{name:"services"},{name:"settings"},{name:"share"},{name:"sms"},{name:"social-facebook"},{name:"social-facebook-color"},{name:"social-facebook-crazy-domains"},{name:"social-google"},{name:"social-google-crazy-domains"},{name:"social-instagram-color"},{name:"social-instagram-crazy-domains"},{name:"social-linkedin-color"},{name:"social-share"},{name:"social-twitter-color"},{name:"social-twitter-crazy-domains"},{name:"social-youtube-crazy-domains"},{name:"star-filled"},{name:"star-hollow"},{name:"sticker"},{name:"submit"},{name:"time"},{name:"text-image"},{name:"testimonial-centered"},{name:"testimonial-big-image"},{name:"testimonial-columns"},{name:"text-image-left"},{name:"text-image-center"},{name:"text-image-only"},{name:"text-image-right"},{name:"tooltip-bottom"},{name:"tooltip-left"},{name:"tooltip-right"},{name:"tooltip-top"},{name:"upgrade"},{name:"upgrade-alt"},{name:"upload"},{name:"upload-arrow"},{name:"user-accounts"},{name:"user-headset"},{name:"watchlist-filled"},{name:"watchlist-hollow"},{name:"watchlist-hollow-alt"},{name:"website-filled"},{name:"website"},{name:"wholesale"},{name:"zoom"},{name:"zoom-in"},{name:"zoom-out"},{name:"background"},{name:"content"},{name:"images"},{name:"images-gallery"},{name:"image-gallery-grid"},{name:"image-gallery-carousel"},{name:"image-gallery-masonry"},{name:"bc-mast"},{name:"request-payment"},{name:"shop"},{name:"styles"},{name:"templates"},{name:"maker-animate"},{name:"maker-custom-landscape"},{name:"maker-email"},{name:"maker-email-symbol"},{name:"maker-etsy"},{name:"maker-facebook"},{name:"maker-favicon"},{name:"maker-flyer"},{name:"maker-gift-certificate"},{name:"maker-globe"},{name:"maker-image"},{name:"maker-instagram"},{name:"maker-invoice"},{name:"maker-invitation"},{name:"maker-link"},{name:"maker-linkedin"},{name:"maker-menu"},{name:"maker-phone"},{name:"maker-pinterest"},{name:"maker-postcard"},{name:"maker-poster"},{name:"maker-profile"},{name:"maker-qrcode"},{name:"maker-snapchat"},{name:"maker-soundcloud"},{name:"maker-text"},{name:"maker-thankyou-card"},{name:"maker-tiktok"},{name:"maker-t-shirt"},{name:"maker-tumblr"},{name:"maker-twitch"},{name:"maker-twitter"},{name:"maker-video"},{name:"maker-whatsapp"},{name:"maker-uppercase"},{name:"maker-youtube"},{name:"maker-zoom"},{name:"maker-align-center"},{name:"maker-align-justify"},{name:"maker-align-left"},{name:"maker-align-right"},{name:"maker-italic"},{name:"maker-bold"},{name:"maker-play"},{name:"maker-pause"},{name:"maker-eraser"},{name:"layout-ibn-tcn",altText:"Layout"},{name:"layout-ibn-tcs",altText:"Layout"},{name:"layout-ibs-tcn",altText:"Layout"},{name:"layout-icn-ctc",altText:"Layout"},{name:"layout-icn-ctt",altText:"Layout"},{name:"layout-icn-ctb",altText:"Layout"},{name:"layout-itn-tjn",altText:"Layout"},{name:"layout-iln-tjn",altText:"Layout"},{name:"layout-irn-tjn",altText:"Layout"},{name:"layout-iln-tcn",altText:"Layout"},{name:"layout-iln-tln",altText:"Layout"},{name:"layout-ils-tln",altText:"Layout"},{name:"layout-irn-tcn",altText:"Layout"},{name:"layout-irn-trn",altText:"Layout"},{name:"layout-irs-trn",altText:"Layout"},{name:"layout-itn-tcn",altText:"Layout"},{name:"layout-itn-tcs",altText:"Layout"},{name:"layout-its-tcn",altText:"Layout"},{name:"reset"},{name:"undo"},{name:"redo"},{name:"filters"},{name:"layer"},{name:"layer-bring-front"},{name:"layer-send-back"},{name:"opacity"},{name:"ban"},{name:"shape"},{name:"flip-horizontal"},{name:"flip-vertical"},{name:"volume"},{name:"volume-muted"},{name:"crop"},{name:"pages"},{name:"arrow-top-right"},{name:"aspect-ratio1_1"},{name:"aspect-ratio2_3"},{name:"aspect-ratio3_2"},{name:"aspect-ratio3_4"},{name:"aspect-ratio4_3"},{name:"aspect-ratio9_16"},{name:"aspect-ratio16_9"},{name:"aspect-ratio-circle"},{name:"aspect-ratio-original"}]}},template:`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-center tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon ({{icons.length}})</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tr v-for="(icon, i) in icons" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
+          <td class="tw-p-4 tw-bg-grayscale-400">
+            <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
+              <Icon
+                v-for="size in sizes"
+                :name="icon.name"
+                :alt-text="icon.altText"
+                :size="size"
+              />
+            </div>
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Icon :name="{{ icon.name }}" :alt-text="{{ icon.altText }}" size="{{ sizes.join('|') }}" /&gt;
+            </code>
+          </td>
+        </tr>
+      </table>
+    `});e.story={name:"Icon Library"};var a,n,t;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Icon
+    },
+    data() {
+      return {
+        sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+        icons: [{
+          name: 'add-page'
+        }, {
+          name: 'ai'
+        }, {
+          name: 'arrow-down'
+        }, {
+          name: 'arrow-left'
+        }, {
+          name: 'arrow-right'
+        }, {
+          name: 'arrow-up'
+        }, {
+          name: 'arrow-up-underline'
+        }, {
+          name: 'attach'
+        }, {
+          name: 'auth-facebook'
+        }, {
+          name: 'auth-facebook-white'
+        }, {
+          name: 'auth-google'
+        }, {
+          name: 'brush'
+        }, {
+          name: 'banner'
+        }, {
+          name: 'banner-centered'
+        }, {
+          name: 'button-arrow'
+        }, {
+          name: 'button-arrow-left'
+        }, {
+          name: 'button-arrow-right'
+        }, {
+          name: 'button-brushstroke'
+        }, {
+          name: 'button-brushstroke-left'
+        }, {
+          name: 'button-brushstroke-right'
+        }, {
+          name: 'button-dashed-oval'
+        }, {
+          name: 'button-dashed-rectangle'
+        }, {
+          name: 'button-dashed-rounded'
+        }, {
+          name: 'button-doubleline-oval'
+        }, {
+          name: 'button-doubleline-rectangle'
+        }, {
+          name: 'button-doubleline-rounded'
+        }, {
+          name: 'button-paper'
+        }, {
+          name: 'button-paper-top'
+        }, {
+          name: 'button-paper-bottom'
+        }, {
+          name: 'button-softshadow-oval'
+        }, {
+          name: 'button-softshadow-rectangle'
+        }, {
+          name: 'button-softshadow-rounded'
+        }, {
+          name: 'business'
+        }, {
+          name: 'business-card-filled'
+        }, {
+          name: 'business-card-filled'
+        }, {
+          name: 'cap'
+        }, {
+          name: 'card'
+        }, {
+          name: 'cart-empty'
+        }, {
+          name: 'calendar'
+        }, {
+          name: 'check'
+        }, {
+          name: 'check-thin'
+        }, {
+          name: 'chevron-down'
+        }, {
+          name: 'chevron-left'
+        }, {
+          name: 'chevron-right'
+        }, {
+          name: 'chevron-right-wide'
+        }, {
+          name: 'chevron-up'
+        }, {
+          name: 'close'
+        }, {
+          name: 'community'
+        }, {
+          name: 'column-1'
+        }, {
+          name: 'column-2'
+        }, {
+          name: 'column-3'
+        }, {
+          name: 'column-4'
+        }, {
+          name: 'copy'
+        }, {
+          name: 'delete'
+        }, {
+          name: 'designs'
+        }, {
+          name: 'desktop'
+        }, {
+          name: 'divider-thick'
+        }, {
+          name: 'divider-thin'
+        }, {
+          name: 'divider'
+        }, {
+          name: 'donate'
+        }, {
+          name: 'download'
+        }, {
+          name: 'duplicate'
+        }, {
+          name: 'edit'
+        }, {
+          name: 'edit-line'
+        }, {
+          name: 'ellipsis'
+        }, {
+          name: 'error'
+        }, {
+          name: 'envelope-email'
+        }, {
+          name: 'eye-crossed'
+        }, {
+          name: 'fees'
+        }, {
+          name: 'filter'
+        }, {
+          name: 'filter-crazy-domains'
+        }, {
+          name: 'flag'
+        }, {
+          name: 'folder'
+        }, {
+          name: 'form'
+        }, {
+          name: 'form-message'
+        }, {
+          name: 'contact-message'
+        }, {
+          name: 'fullscreen'
+        }, {
+          name: 'fullscreen-exit'
+        }, {
+          name: 'globe'
+        }, {
+          name: 'globe-crazy-domains'
+        }, {
+          name: 'godaddy'
+        }, {
+          name: 'hamburger'
+        }, {
+          name: 'hamburger-1'
+        }, {
+          name: 'hamburger-2'
+        }, {
+          name: 'hamburger-3'
+        }, {
+          name: 'hamburger-4'
+        }, {
+          name: 'nav-style-tab-display-style-1'
+        }, {
+          name: 'nav-style-tab-display-style-2'
+        }, {
+          name: 'nav-style-hamburger-display-style-1'
+        }, {
+          name: 'nav-style-hamburger-display-style-2'
+        }, {
+          name: 'nav-style-hamburger-display-style-3'
+        }, {
+          name: 'nav-style-hamburger-display-style-4'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-1'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-2'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-3'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-4'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-5'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-6'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-no-logo-1'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-no-logo-2'
+        }, {
+          name: 'header-desktop-nav-style-tab-display-style-no-logo-3'
+        }, {
+          name: 'header-mobile-nav-style-tab-display-style-1'
+        }, {
+          name: 'header-mobile-nav-style-tab-display-style-2'
+        }, {
+          name: 'header-desktop-nav-style-hamburger-display-style-1'
+        }, {
+          name: 'header-desktop-nav-style-hamburger-display-style-2'
+        }, {
+          name: 'header-desktop-nav-style-hamburger-display-style-no-logo-1'
+        }, {
+          name: 'header-desktop-nav-style-hamburger-display-style-no-logo-2'
+        }, {
+          name: 'header-desktop-nav-style-hamburger-display-style-no-logo-3'
+        }, {
+          name: 'header-mobile-nav-style-hamburger-display-style-1'
+        }, {
+          name: 'header-mobile-nav-style-hamburger-display-style-2'
+        }, {
+          name: 'header-mobile-nav-style-hamburger-display-style-3'
+        }, {
+          name: 'header-mobile-nav-style-hamburger-display-style-4'
+        }, {
+          name: 'footer-centered'
+        },
+        // TODO - deprecate
+        {
+          name: 'footer-left'
+        },
+        // TODO - deprecate
+
+        {
+          name: 'footer-display-style-1'
+        }, {
+          name: 'footer-display-style-2'
+        }, {
+          name: 'home'
+        }, {
+          name: 'home-crazy-domains'
+        }, {
+          name: 'info'
+        }, {
+          name: 'jobs'
+        }, {
+          name: 'display-style-about-1'
+        }, {
+          name: 'display-style-about-2'
+        }, {
+          name: 'display-style-about-3'
+        }, {
+          name: 'display-style-about-4'
+        }, {
+          name: 'display-style-about-5'
+        }, {
+          name: 'display-style-about-6'
+        }, {
+          name: 'display-style-images-1'
+        }, {
+          name: 'display-style-images-2'
+        }, {
+          name: 'display-style-images-3'
+        }, {
+          name: 'display-style-images-4'
+        }, {
+          name: 'display-style-images-5'
+        }, {
+          name: 'display-style-images-6'
+        }, {
+          name: 'display-style-banner-1'
+        }, {
+          name: 'display-style-banner-2'
+        }, {
+          name: 'display-style-banner-3'
+        }, {
+          name: 'display-style-banner-4'
+        }, {
+          name: 'display-style-banner-5'
+        }, {
+          name: 'display-style-banner-6'
+        }, {
+          name: 'display-style-banner-7'
+        }, {
+          name: 'display-style-banner-8'
+        }, {
+          name: 'display-style-banner-9'
+        }, {
+          name: 'display-style-contact-1'
+        }, {
+          name: 'display-style-contact-2'
+        }, {
+          name: 'display-style-contact-4'
+        }, {
+          name: 'display-style-contact-5'
+        }, {
+          name: 'display-style-contact-6'
+        }, {
+          name: 'letterhead-filled'
+        }, {
+          name: 'link'
+        }, {
+          name: 'location'
+        }, {
+          name: 'lock'
+        }, {
+          name: 'macos-command'
+        }, {
+          name: 'map'
+        }, {
+          name: 'message'
+        }, {
+          name: 'minus'
+        }, {
+          name: 'minus-circle-light'
+        }, {
+          name: 'mobile'
+        }, {
+          name: 'mug'
+        }, {
+          name: 'other'
+        }, {
+          name: 'pause'
+        }, {
+          name: 'page-buttons'
+        }, {
+          name: 'page-hamburger'
+        }, {
+          name: 'page-tabs'
+        }, {
+          name: 'palette'
+        }, {
+          name: 'payment'
+        }, {
+          name: 'payments-featured'
+        }, {
+          name: 'payments-textonly'
+        }, {
+          name: 'payments-thumbnail'
+        }, {
+          name: 'phone'
+        }, {
+          name: 'plus'
+        }, {
+          name: 'plus-circle'
+        }, {
+          name: 'plus-circle-light'
+        }, {
+          name: 'poll'
+        }, {
+          name: 'portfolio'
+        }, {
+          name: 'preview'
+        }, {
+          name: 'printing'
+        }, {
+          name: 'processing'
+        }, {
+          name: 'question'
+        }, {
+          name: 'reload'
+        }, {
+          name: 'reorderable'
+        }, {
+          name: 'search'
+        }, {
+          name: 'secure'
+        }, {
+          name: 'services'
+        }, {
+          name: 'settings'
+        }, {
+          name: 'share'
+        }, {
+          name: 'sms'
+        }, {
+          name: 'social-facebook'
+        }, {
+          name: 'social-facebook-color'
+        }, {
+          name: 'social-facebook-crazy-domains'
+        }, {
+          name: 'social-google'
+        }, {
+          name: 'social-google-crazy-domains'
+        }, {
+          name: 'social-instagram-color'
+        }, {
+          name: 'social-instagram-crazy-domains'
+        }, {
+          name: 'social-linkedin-color'
+        }, {
+          name: 'social-share'
+        }, {
+          name: 'social-twitter-color'
+        }, {
+          name: 'social-twitter-crazy-domains'
+        }, {
+          name: 'social-youtube-crazy-domains'
+        }, {
+          name: 'star-filled'
+        }, {
+          name: 'star-hollow'
+        }, {
+          name: 'sticker'
+        }, {
+          name: 'submit'
+        }, {
+          name: 'time'
+        }, {
+          name: 'text-image'
+        }, {
+          name: 'testimonial-centered'
+        }, {
+          name: 'testimonial-big-image'
+        }, {
+          name: 'testimonial-columns'
+        }, {
+          name: 'text-image-left'
+        }, {
+          name: 'text-image-center'
+        }, {
+          name: 'text-image-only'
+        }, {
+          name: 'text-image-right'
+        }, {
+          name: 'tooltip-bottom'
+        }, {
+          name: 'tooltip-left'
+        }, {
+          name: 'tooltip-right'
+        }, {
+          name: 'tooltip-top'
+        }, {
+          name: 'upgrade'
+        }, {
+          name: 'upgrade-alt'
+        }, {
+          name: 'upload'
+        }, {
+          name: 'upload-arrow'
+        }, {
+          name: 'user-accounts'
+        }, {
+          name: 'user-headset'
+        }, {
+          name: 'watchlist-filled'
+        }, {
+          name: 'watchlist-hollow'
+        }, {
+          name: 'watchlist-hollow-alt'
+        }, {
+          name: 'website-filled'
+        }, {
+          name: 'website'
+        }, {
+          name: 'wholesale'
+        }, {
+          name: 'zoom'
+        }, {
+          name: 'zoom-in'
+        }, {
+          name: 'zoom-out'
+        }, {
+          name: 'background'
+        }, {
+          name: 'content'
+        }, {
+          name: 'images'
+        }, {
+          name: 'images-gallery'
+        }, {
+          name: 'image-gallery-grid'
+        }, {
+          name: 'image-gallery-carousel'
+        }, {
+          name: 'image-gallery-masonry'
+        }, {
+          name: 'bc-mast'
+        }, {
+          name: 'request-payment'
+        }, {
+          name: 'shop'
+        }, {
+          name: 'styles'
+        }, {
+          name: 'templates'
+        }, {
+          name: 'maker-animate'
+        }, {
+          name: 'maker-custom-landscape'
+        }, {
+          name: 'maker-email'
+        }, {
+          name: 'maker-email-symbol'
+        }, {
+          name: 'maker-etsy'
+        }, {
+          name: 'maker-facebook'
+        }, {
+          name: 'maker-favicon'
+        }, {
+          name: 'maker-flyer'
+        }, {
+          name: 'maker-gift-certificate'
+        }, {
+          name: 'maker-globe'
+        }, {
+          name: 'maker-image'
+        }, {
+          name: 'maker-instagram'
+        }, {
+          name: 'maker-invoice'
+        }, {
+          name: 'maker-invitation'
+        }, {
+          name: 'maker-link'
+        }, {
+          name: 'maker-linkedin'
+        }, {
+          name: 'maker-menu'
+        }, {
+          name: 'maker-phone'
+        }, {
+          name: 'maker-pinterest'
+        }, {
+          name: 'maker-postcard'
+        }, {
+          name: 'maker-poster'
+        }, {
+          name: 'maker-profile'
+        }, {
+          name: 'maker-qrcode'
+        }, {
+          name: 'maker-snapchat'
+        }, {
+          name: 'maker-soundcloud'
+        }, {
+          name: 'maker-text'
+        }, {
+          name: 'maker-thankyou-card'
+        }, {
+          name: 'maker-tiktok'
+        }, {
+          name: 'maker-t-shirt'
+        }, {
+          name: 'maker-tumblr'
+        }, {
+          name: 'maker-twitch'
+        }, {
+          name: 'maker-twitter'
+        }, {
+          name: 'maker-video'
+        }, {
+          name: 'maker-whatsapp'
+        }, {
+          name: 'maker-uppercase'
+        }, {
+          name: 'maker-youtube'
+        }, {
+          name: 'maker-zoom'
+        }, {
+          name: 'maker-align-center'
+        }, {
+          name: 'maker-align-justify'
+        }, {
+          name: 'maker-align-left'
+        }, {
+          name: 'maker-align-right'
+        }, {
+          name: 'maker-italic'
+        }, {
+          name: 'maker-bold'
+        }, {
+          name: 'maker-play'
+        }, {
+          name: 'maker-pause'
+        }, {
+          name: 'maker-eraser'
+        }, {
+          name: 'layout-ibn-tcn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-ibn-tcs',
+          altText: 'Layout'
+        }, {
+          name: 'layout-ibs-tcn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-icn-ctc',
+          altText: 'Layout'
+        }, {
+          name: 'layout-icn-ctt',
+          altText: 'Layout'
+        }, {
+          name: 'layout-icn-ctb',
+          altText: 'Layout'
+        }, {
+          name: 'layout-itn-tjn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-iln-tjn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-irn-tjn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-iln-tcn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-iln-tln',
+          altText: 'Layout'
+        }, {
+          name: 'layout-ils-tln',
+          altText: 'Layout'
+        }, {
+          name: 'layout-irn-tcn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-irn-trn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-irs-trn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-itn-tcn',
+          altText: 'Layout'
+        }, {
+          name: 'layout-itn-tcs',
+          altText: 'Layout'
+        }, {
+          name: 'layout-its-tcn',
+          altText: 'Layout'
+        }, {
+          name: 'reset'
+        }, {
+          name: 'undo'
+        }, {
+          name: 'redo'
+        }, {
+          name: 'filters'
+        }, {
+          name: 'layer'
+        }, {
+          name: 'layer-bring-front'
+        }, {
+          name: 'layer-send-back'
+        }, {
+          name: 'opacity'
+        }, {
+          name: 'ban'
+        }, {
+          name: 'shape'
+        }, {
+          name: 'flip-horizontal'
+        }, {
+          name: 'flip-vertical'
+        }, {
+          name: 'volume'
+        }, {
+          name: 'volume-muted'
+        }, {
+          name: 'crop'
+        }, {
+          name: 'pages'
+        }, {
+          name: 'arrow-top-right'
+        }, {
+          name: 'aspect-ratio1_1'
+        }, {
+          name: 'aspect-ratio2_3'
+        }, {
+          name: 'aspect-ratio3_2'
+        }, {
+          name: 'aspect-ratio3_4'
+        }, {
+          name: 'aspect-ratio4_3'
+        }, {
+          name: 'aspect-ratio9_16'
+        }, {
+          name: 'aspect-ratio16_9'
+        }, {
+          name: 'aspect-ratio-circle'
+        }, {
+          name: 'aspect-ratio-original'
+        }]
+      };
+    },
+    template: \`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-center tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon ({{icons.length}})</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tr v-for="(icon, i) in icons" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
+          <td class="tw-p-4 tw-bg-grayscale-400">
+            <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
+              <Icon
+                v-for="size in sizes"
+                :name="icon.name"
+                :alt-text="icon.altText"
+                :size="size"
+              />
+            </div>
+          </td>
+          <td class="tw-p-4">
+            <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;Icon :name="{{ icon.name }}" :alt-text="{{ icon.altText }}" size="{{ sizes.join('|') }}" /&gt;
+            </code>
+          </td>
+        </tr>
+      </table>
+    \`
+  };
+}`,...(t=(n=e.parameters)==null?void 0:n.docs)==null?void 0:t.source}}};const i=["IconSample"];export{e as IconSample,i as __namedExportsOrder,r as default};