@brightspot/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1749563080275,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-webpack5","options":{"builder":{"useSWC":true}}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.12","storybookVersionSpecifier":"^8.6.12","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.6.12"},"@storybook/test":{"version":"8.6.12"},"@storybook/web-components":{"version":"8.6.12"},"@storybook/web-components-webpack5":{"version":"8.6.12"},"eslint-plugin-storybook":{"version":"0.12.0"},"storybook":{"version":"8.6.12"}},"addons":{"@storybook/addon-webpack5-compiler-swc":{"version":"3.0.0"},"@storybook/addon-essentials":{"version":"8.6.12"},"@storybook/addon-styling-webpack":{"version":"1.0.1"}}}
+{"generatedAt":1749834711051,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/web-components-webpack5","options":{"builder":{"useSWC":true}}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.12","storybookVersionSpecifier":"^8.6.12","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.6.12"},"@storybook/test":{"version":"8.6.12"},"@storybook/web-components":{"version":"8.6.12"},"@storybook/web-components-webpack5":{"version":"8.6.12"},"eslint-plugin-storybook":{"version":"0.12.0"},"storybook":{"version":"8.6.12"}},"addons":{"@storybook/addon-webpack5-compiler-swc":{"version":"3.0.0"},"@storybook/addon-essentials":{"version":"8.6.12"},"@storybook/addon-styling-webpack":{"version":"1.0.1"}}}

package/dist/storybook/runtime~main.36ab40ff.iframe.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.exports}__webpack_require__.m=__webpack_modules__,__webpack_require__.amdO={},deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>(({123:"stories-Heading-stories",264:"stories-ScrollShadow-stories",471:"stories-Colors-stories",544:"stories-Badge-stories",791:"stories-Button-stories",840:"stories-Icon-stories",894:"stories-Loader-stories"}[chunkId]||chunkId)+"."+{123:"b41961f8",264:"252ec9e7",342:"9186a774",364:"84b2a293",471:"324d20d0",544:"52b61cf3",648:"0f0c2ea1",689:"b6901a43",791:"777d0529",840:"171bf8c3",894:"cd5e8fb5",936:"7e4d4897",980:"2bfde12a"}[chunkId]+".iframe.bundle.js"),__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@brightspot/ui:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@brightspot/ui:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.p="",(()=>{__webpack_require__.b=document.baseURI||self.location.href;var installedChunks={354:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(354!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/dist/storybook/{stories-Button-stories.5286bed3.iframe.bundle.js → stories-Button-stories.777d0529.iframe.bundle.js}

@@ -5,5 +5,5 @@
     >
       ${label}
     </button>
-  `})(args),argTypes:{size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]},color:{control:{type:"select"},options:["primary","gray","error"]},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},contained:{control:{type:"boolean"},description:"Does the button have a container?"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"}},args:{color:"primary",label:"Button",pressed:!1,fill:!0,contained:!0,outlined:!1,size:"md"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
-//# sourceMappingURL=stories-Button-stories.5286bed3.iframe.bundle.js.map
+  `})(args),argTypes:{size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]},color:{control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"]},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},contained:{control:{type:"boolean"},description:"Does the button have a container?"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"}},args:{color:"primary",label:"Button",pressed:!1,fill:!0,contained:!0,outlined:!1,size:"md"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Button-stories.777d0529.iframe.bundle.js.map

package/dist/storybook/stories-Button-stories.777d0529.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Button-stories.777d0529.iframe.bundle.js","mappings":";;;AAmCA;;AAUA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Button.ts"],"sourcesContent":["import { html } from 'lit'\nimport type { ThemeColors } from '../tailwind-plugin-theme'\n\nexport interface ButtonProps {\n  color?: ThemeColors\n  /** Is the button depressed or not? */\n  pressed?: boolean\n  /** Should the button have a background? */\n  fill?: boolean\n  /** Should the button have a container? */\n  contained?: boolean\n  /** Should the button be outlined? */\n  outlined?: boolean\n  /** How large should the button be? */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  label: string\n}\n\nexport const Button = ({\n  color = 'primary',\n  pressed,\n  fill,\n  contained,\n  outlined,\n  size = 'sm',\n  label,\n}: ButtonProps) => {\n  const depressed = pressed ? 'btu-button-pressed' : ''\n  const filled = fill ? 'btu-button-fill' : 'btu-button-fill-none'\n  const container = contained ? '' : 'btu-button-container-none'\n  const outline = outlined ? 'btu-button-outline' : ''\n\n  return html`\n    <button\n      type=\"button\"\n      class=${[\n        'btu-button',\n        `btu-button-${color}`,\n        `btu-button-${size}`,\n        filled,\n        container,\n        outline,\n        depressed,\n      ].join(' ')}\n    >\n      ${label}\n    </button>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/storybook/stories-Icon-stories.171bf8c3.iframe.bundle.js

@@ -0,0 +1,8 @@
+"use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[840],{"./src/stories/Icon.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Icon_stories});var lit=__webpack_require__("./node_modules/lit/index.js"),info=__webpack_require__("./node_modules/lucide-static/font/info.json"),lucide_static=__webpack_require__("./node_modules/lucide-static/dist/esm/lucide-static.js");const symbols=/[\r\n%#()<>?[\\\]^`{|}]/g;function getIcon(iconName){try{const kebabName=iconName.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),pascalName=function kebabToPascal(str){return str.split("-").map((word=>word.charAt(0).toUpperCase()+word.slice(1))).join("")}(kebabName);if(lucide_static[pascalName]){const encodedSvg=function encodeSVG(data){return(data=(data=(data=data.replace(/"/g,"'")).replace(/>\s{1,}</g,"><")).replace(/\s{2,}/g," ")).replace(symbols,encodeURIComponent)}(function addNameSpaceXML(data){return data.indexOf("http://www.w3.org/2000/svg")<0&&(data=data.replace(/<svg/g,"<svg xmlns='http://www.w3.org/2000/svg'")),data}(lucide_static[pascalName]));return{compat:info[kebabName]?.encodedCode||"",iconSvg:encodedSvg}}}catch(e){console.error("Error loading Lucide icon ${iconName}:",e)}}const Icon_stories={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"We use Lucide Icons: https://lucide.dev/icons/. All strokes in these icons have been converted to single vectors so color overrides are respected within variants. We recommend attaching icon classes to before/after pseudo-elements, like so: `before:btu-icon before:btu-icon-smile`."},controls:{expanded:!0}},render:args=>(({name,size="md"})=>{let data,kebabName,icon="";return name?(data=getIcon(name),kebabName=name.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()):icon="before:btu-icon-smile",lit.qy`
+    <div
+      style=${`--compat-icon:'${info[kebabName]?.encodedCode||""}';\n      --Icon-svg: url("data:image/svg+xml,${data?.iconSvg||""}");\n      --compat-icon-via-mask: url("data:image/svg+xml,${data?.iconSvg}");`}
+      data-icon=${name?`${name}`:""}
+      class=${["before:btu-icon",`before:btu-icon-${size}`,icon].join(" ")}
+    ></div>
+  `})(args),argTypes:{size:{control:{type:"select"},description:"Icon size. Works with arbitrary values like: `before:btu-icon-[10.5rem]`",options:["xs","sm","md","lg","xl"]},name:{control:{type:"text"},description:"Name of the icon to display. Try names like `waves`, `salad`, or `star`."}},args:{size:"xl"}},Default={args:{}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n  args: {}\n}",...Default.parameters?.docs?.source}}}}}]);
+//# sourceMappingURL=stories-Icon-stories.171bf8c3.iframe.bundle.js.map

package/dist/storybook/stories-Icon-stories.171bf8c3.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-Icon-stories.171bf8c3.iframe.bundle.js","mappings":";;AA6BA;AAGA;AACA;;AAEA","sources":["webpack://@brightspot/ui/./src/stories/Icon.ts"],"sourcesContent":["import { html } from 'lit'\nimport icons from 'lucide-static/font/info.json'\nimport { getIcon } from '../LucideDynamicLoader'\n\nexport interface IconProps {\n  name?: string\n  /** How large should the icon be?\n      before:btu-icon-xs\n      before:btu-icon-sm\n      before:btu-icon-md\n      before:btu-icon-lg\n      before:btu-icon-xl\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n}\n\nexport const Icon = ({ name, size = 'md' }: IconProps) => {\n  let data\n  let kebabName\n  let icon = ''\n  if (!name) {\n    icon = 'before:btu-icon-smile'\n  } else {\n    data = getIcon(name)\n    kebabName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n  }\n\n  return html`\n    <div\n      style=${`--compat-icon:'${icons[kebabName as keyof typeof icons]?.encodedCode || ''}';\n      --Icon-svg: url(\"data:image/svg+xml,${data?.iconSvg || ''}\");\n      --compat-icon-via-mask: url(\"data:image/svg+xml,${data?.iconSvg}\");`}\n      data-icon=${name ? `${name}` : ''}\n      class=${['before:btu-icon', `before:btu-icon-${size}`, icon].join(' ')}\n    ></div>\n  `\n}\n"],"names":[],"sourceRoot":""}

package/dist/tailwind-plugin-icon.js

@@ -1,6 +1,8 @@
 import plugin from 'tailwindcss/plugin';
 import icons from 'lucide-static/font/info.json';
 import * as LucideExports from 'lucide-static/dist/cjs/lucide-static';
+import { pascalToKebab } from './util/string';
+import { addNameSpaceXML, encodeSVG } from './util/svg';
 /**
  * Lucide Icons | https://lucide.dev/icons/
  * Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
@@ -39,31 +41,7 @@ for (const [key, value] of Object.entries(LucideExports)) {
         }
     }
 }
-function addNameSpace(data) {
-    if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
-        data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`);
-    }
-    return data;
-}
-function pascalToKebab(str) {
-    return str
-        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-        .replace(/([A-Za-z])([0-9])/g, '$1-$2')
-        .toLowerCase();
-}
-function kebabToPascal(str) {
-    return str
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join('');
-}
-function encodeSVG(data) {
-    data = data.replace(/"/g, `'`);
-    data = data.replace(/>\s{1,}</g, `><`);
-    data = data.replace(/\s{2,}/g, ` `);
-    return data.replace(symbols, encodeURIComponent);
-}
-module.exports = plugin(function ({ addBase, addComponents, matchUtilities, theme }) {
+module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
     const size = 'var(--Icon-size)';
     const prefix = '.btu-icon-';
     Object.entries(svgs).forEach(([key, svg]) => {
@@ -76,7 +54,7 @@ module.exports = plugin(function ({ addBase, addComponents, matchUtilities, them
             },
             [`${prefix}via-mask-${pascalToKebab(key)}`]: {
                 '--size': '20px',
-                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svg))}")`,
+                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
                 mask: 'var(--Icon-svg) center / contain no-repeat',
                 'aspect-ratio': '1',
                 'inline-size': 'var(--Icon-size, --size)',
@@ -126,113 +104,6 @@ module.exports = plugin(function ({ addBase, addComponents, matchUtilities, them
             '--Icon-size': value,
         }),
     }, { values: theme('iconSize') });
-    // Compat v4 Icons:
-    // Icon names which are Google Material icons mapped to a lucide equivalent to support the legacy markup.
-    const compatNames = new Map();
-    compatNames.set('arrow_downward', 'arrow-down');
-    compatNames.set('arrow_upward', 'arrow-up');
-    compatNames.set('assessment', 'file-chart-pie');
-    compatNames.set('assignment', 'clipboard-check');
-    compatNames.set('attachment', 'file');
-    compatNames.set('auto_stories', 'book');
-    compatNames.set('ballot', 'shield-question');
-    compatNames.set('border_all', 'table-2');
-    compatNames.set('cancel', 'circle-x');
-    compatNames.set('chat_bubble', 'message-circle');
-    compatNames.set('check_circle', 'circle-check-big');
-    compatNames.set('chrome_reader_mode', 'table-properties');
-    compatNames.set('class', 'book-type');
-    compatNames.set('close', 'x');
-    compatNames.set('code', 'code');
-    compatNames.set('comment', 'message-circle-plus');
-    compatNames.set('comments_disabled', 'message-circle-x');
-    compatNames.set('create_new_folder', 'boxes');
-    compatNames.set('description', 'file-text');
-    compatNames.set('edit', 'pencil');
-    compatNames.set('error', 'circle-alert');
-    compatNames.set('expand_more', 'chevrons-up-down');
-    compatNames.set('expand_less', 'chevrons-down-up');
-    compatNames.set('feed', 'scroll-text');
-    compatNames.set('format_align_center', 'align-center');
-    compatNames.set('format_align_left', 'align-left');
-    compatNames.set('format_align_right', 'align-right');
-    compatNames.set('format_bold', 'bold');
-    compatNames.set('format_clear', 'remove-formatting');
-    compatNames.set('format_indent_increase', 'indent-increase');
-    compatNames.set('format_indent_decrease', 'indent-decrease');
-    compatNames.set('format_italic', 'italic');
-    compatNames.set('format_list_bulleted', 'list');
-    compatNames.set('format_list_numbered', 'badge-help');
-    compatNames.set('format_quote', 'quote');
-    compatNames.set('format_strikethrough', 'strikethrough');
-    compatNames.set('format_underlined', 'underline');
-    compatNames.set('fullscreen', 'maximize-2');
-    compatNames.set('grid_on', 'file-spreadsheet');
-    compatNames.set('handshake', 'handshake');
-    compatNames.set('help', 'circle-help');
-    compatNames.set('history', 'history');
-    compatNames.set('home', 'house');
-    compatNames.set('import_contacts', 'book');
-    compatNames.set('insert_photo', 'file-image');
-    compatNames.set('keyboard', 'keyboard');
-    compatNames.set('link', 'link-2');
-    compatNames.set('link_off', 'link-2-off');
-    compatNames.set('live_tv', 'tv-minimal-play');
-    compatNames.set('local_offer', 'tag');
-    compatNames.set('manage_search', 'text-search');
-    compatNames.set('menu_book', 'book-marked');
-    compatNames.set('more_horiz', 'ellipsis');
-    compatNames.set('music_note', 'music-2');
-    compatNames.set('notes', 'notebook-text');
-    compatNames.set('ondemand_video', 'video');
-    compatNames.set('open_with', 'move');
-    compatNames.set('person', 'user-pen');
-    compatNames.set('photo', 'file-image');
-    compatNames.set('photo_camera', 'camera');
-    compatNames.set('photo_library', 'images');
-    compatNames.set('picture', 'image-up');
-    compatNames.set('play', 'square-play');
-    compatNames.set('playlist_play', 'list-video');
-    compatNames.set('post_add', 'clipboard-plus');
-    compatNames.set('question_answer', 'pencil-line');
-    compatNames.set('rate_review', 'square-pen');
-    compatNames.set('redo', 'redo');
-    compatNames.set('remove', 'minus');
-    compatNames.set('school', 'badge-info');
-    compatNames.set('search', 'search');
-    compatNames.set('settings_ethernet', 'chevrons-left-right-ellipsis');
-    compatNames.set('short_text', 'text');
-    compatNames.set('slideshow', 'film');
-    compatNames.set('slow_motion_video', 'list-video');
-    compatNames.set('subject', 'letter-text');
-    compatNames.set('textsms', 'message-circle-more');
-    compatNames.set('theaters', 'clapperboard');
-    compatNames.set('toc', 'notebook-tabs');
-    compatNames.set('toggle_off', 'toggle-left');
-    compatNames.set('toggle_on', 'toggle-right');
-    compatNames.set('undo', 'undo');
-    compatNames.set('vertical_align_bottom', 'subscript');
-    compatNames.set('vertical_align_top', 'superscript');
-    compatNames.set('view_compact', 'layout-panel-top');
-    compatNames.set('volume_up', 'volume-2');
-    compatNames.set('warning', 'triangle-alert');
-    compatNames.set('wb_incandescent', 'lightbulb');
-    compatNames.set('widgets', 'blocks');
-    compatNames.set('zap', 'zap');
-    compatNames.forEach((value, key) => {
-        addBase({
-            /* this is the default icon when no mapped icon is found */
-            [`[data-icon],[data-icon-name],[data-icon-button-name]`]: {
-                '--compat-icon': `'${icons['circle-dashed'].encodedCode}'`,
-                '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs['CircleDashed']))}")`,
-            },
-            [`html [data-icon="${key}"],html [data-icon-name="${key}"],html [data-icon-button-name="${key}"]`]: {
-                // tslint:disable-next-line
-                '--compat-icon': `'${icons[value].encodedCode}'`,
-                '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs[kebabToPascal(value)]))}")`,
-            },
-        });
-    });
 }, {
     theme: {
         iconSize: {

package/dist/tailwind-plugin-icon.ts

@@ -1,15 +1,10 @@
 import plugin from 'tailwindcss/plugin'
 import icons from 'lucide-static/font/info.json'
 import * as LucideExports from 'lucide-static/dist/cjs/lucide-static'
+import { pascalToKebab } from './util/string'
+import { addNameSpaceXML, encodeSVG } from './util/svg'
 declare let module: any
 
-interface LucideTypes {
-  encodedCode: string
-  prefix: string
-  className: string
-  unicode: string
-}
-
 /**
  * Lucide Icons | https://lucide.dev/icons/
  * Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
@@ -50,36 +45,8 @@ for (const [key, value] of Object.entries(LucideExports)) {
   }
 }
 
-function addNameSpace(data: string): string {
-  if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
-    data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`)
-  }
-  return data
-}
-
-function pascalToKebab(str: string): string {
-  return str
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .replace(/([A-Za-z])([0-9])/g, '$1-$2')
-    .toLowerCase()
-}
-
-function kebabToPascal(str: string): string {
-  return str
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('')
-}
-
-function encodeSVG(data: string): string {
-  data = data.replace(/"/g, `'`)
-  data = data.replace(/>\s{1,}</g, `><`)
-  data = data.replace(/\s{2,}/g, ` `)
-  return data.replace(symbols, encodeURIComponent)
-}
-
 module.exports = plugin(
-  function ({ addBase, addComponents, matchUtilities, theme }) {
+  function ({ addComponents, matchUtilities, theme }) {
     const size = 'var(--Icon-size)'
     const prefix = '.btu-icon-'
 
@@ -93,7 +60,7 @@ module.exports = plugin(
         },
         [`${prefix}via-mask-${pascalToKebab(key)}`]: {
           '--size': '20px',
-          '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svg))}")`,
+          '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
           mask: 'var(--Icon-svg) center / contain no-repeat',
           'aspect-ratio': '1',
           'inline-size': 'var(--Icon-size, --size)',
@@ -154,116 +121,6 @@ module.exports = plugin(
       },
       { values: theme('iconSize') },
     )
-
-    // Compat v4 Icons:
-    // Icon names which are Google Material icons mapped to a lucide equivalent to support the legacy markup.
-    const compatNames = new Map()
-    compatNames.set('arrow_downward', 'arrow-down')
-    compatNames.set('arrow_upward', 'arrow-up')
-    compatNames.set('assessment', 'file-chart-pie')
-    compatNames.set('assignment', 'clipboard-check')
-    compatNames.set('attachment', 'file')
-    compatNames.set('auto_stories', 'book')
-    compatNames.set('ballot', 'shield-question')
-    compatNames.set('border_all', 'table-2')
-    compatNames.set('cancel', 'circle-x')
-    compatNames.set('chat_bubble', 'message-circle')
-    compatNames.set('check_circle', 'circle-check-big')
-    compatNames.set('chrome_reader_mode', 'table-properties')
-    compatNames.set('class', 'book-type')
-    compatNames.set('close', 'x')
-    compatNames.set('code', 'code')
-    compatNames.set('comment', 'message-circle-plus')
-    compatNames.set('comments_disabled', 'message-circle-x')
-    compatNames.set('create_new_folder', 'boxes')
-    compatNames.set('description', 'file-text')
-    compatNames.set('edit', 'pencil')
-    compatNames.set('error', 'circle-alert')
-    compatNames.set('expand_more', 'chevrons-up-down')
-    compatNames.set('expand_less', 'chevrons-down-up')
-    compatNames.set('feed', 'scroll-text')
-    compatNames.set('format_align_center', 'align-center')
-    compatNames.set('format_align_left', 'align-left')
-    compatNames.set('format_align_right', 'align-right')
-    compatNames.set('format_bold', 'bold')
-    compatNames.set('format_clear', 'remove-formatting')
-    compatNames.set('format_indent_increase', 'indent-increase')
-    compatNames.set('format_indent_decrease', 'indent-decrease')
-    compatNames.set('format_italic', 'italic')
-    compatNames.set('format_list_bulleted', 'list')
-    compatNames.set('format_list_numbered', 'badge-help')
-    compatNames.set('format_quote', 'quote')
-    compatNames.set('format_strikethrough', 'strikethrough')
-    compatNames.set('format_underlined', 'underline')
-    compatNames.set('fullscreen', 'maximize-2')
-    compatNames.set('grid_on', 'file-spreadsheet')
-    compatNames.set('handshake', 'handshake')
-    compatNames.set('help', 'circle-help')
-    compatNames.set('history', 'history')
-    compatNames.set('home', 'house')
-    compatNames.set('import_contacts', 'book')
-    compatNames.set('insert_photo', 'file-image')
-    compatNames.set('keyboard', 'keyboard')
-    compatNames.set('link', 'link-2')
-    compatNames.set('link_off', 'link-2-off')
-    compatNames.set('live_tv', 'tv-minimal-play')
-    compatNames.set('local_offer', 'tag')
-    compatNames.set('manage_search', 'text-search')
-    compatNames.set('menu_book', 'book-marked')
-    compatNames.set('more_horiz', 'ellipsis')
-    compatNames.set('music_note', 'music-2')
-    compatNames.set('notes', 'notebook-text')
-    compatNames.set('ondemand_video', 'video')
-    compatNames.set('open_with', 'move')
-    compatNames.set('person', 'user-pen')
-    compatNames.set('photo', 'file-image')
-    compatNames.set('photo_camera', 'camera')
-    compatNames.set('photo_library', 'images')
-    compatNames.set('picture', 'image-up')
-    compatNames.set('play', 'square-play')
-    compatNames.set('playlist_play', 'list-video')
-    compatNames.set('post_add', 'clipboard-plus')
-    compatNames.set('question_answer', 'pencil-line')
-    compatNames.set('rate_review', 'square-pen')
-    compatNames.set('redo', 'redo')
-    compatNames.set('remove', 'minus')
-    compatNames.set('school', 'badge-info')
-    compatNames.set('search', 'search')
-    compatNames.set('settings_ethernet', 'chevrons-left-right-ellipsis')
-    compatNames.set('short_text', 'text')
-    compatNames.set('slideshow', 'film')
-    compatNames.set('slow_motion_video', 'list-video')
-    compatNames.set('subject', 'letter-text')
-    compatNames.set('textsms', 'message-circle-more')
-    compatNames.set('theaters', 'clapperboard')
-    compatNames.set('toc', 'notebook-tabs')
-    compatNames.set('toggle_off', 'toggle-left')
-    compatNames.set('toggle_on', 'toggle-right')
-    compatNames.set('undo', 'undo')
-    compatNames.set('vertical_align_bottom', 'subscript')
-    compatNames.set('vertical_align_top', 'superscript')
-    compatNames.set('view_compact', 'layout-panel-top')
-    compatNames.set('volume_up', 'volume-2')
-    compatNames.set('warning', 'triangle-alert')
-    compatNames.set('wb_incandescent', 'lightbulb')
-    compatNames.set('widgets', 'blocks')
-    compatNames.set('zap', 'zap')
-
-    compatNames.forEach((value: string, key) => {
-      addBase({
-        /* this is the default icon when no mapped icon is found */
-        [`[data-icon],[data-icon-name],[data-icon-button-name]`]: {
-          '--compat-icon': `'${icons['circle-dashed'].encodedCode}'`,
-          '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs['CircleDashed']))}")`,
-        },
-        [`html [data-icon="${key}"],html [data-icon-name="${key}"],html [data-icon-button-name="${key}"]`]:
-          {
-            // tslint:disable-next-line
-            '--compat-icon': `'${(icons as Record<string, LucideTypes>)[value].encodedCode}'`,
-            '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs[kebabToPascal(value)]))}")`,
-          },
-      })
-    })
   },
   {
     theme: {

package/dist/util/string.js

@@ -0,0 +1,14 @@
+// Given "WaterBalloon", returns "water-balloon"
+export function pascalToKebab(str) {
+    return str
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Za-z])([0-9])/g, '$1-$2')
+        .toLowerCase();
+}
+// Given "water-balloon", returns "WaterBalloon"
+export function kebabToPascal(str) {
+    return str
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}

package/dist/util/svg.js

@@ -0,0 +1,13 @@
+const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
+export function addNameSpaceXML(data) {
+    if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
+        data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`);
+    }
+    return data;
+}
+export function encodeSVG(data) {
+    data = data.replace(/"/g, `'`);
+    data = data.replace(/>\s{1,}</g, `><`);
+    data = data.replace(/\s{2,}/g, ` `);
+    return data.replace(symbols, encodeURIComponent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
   "main": "./dist/tailwind.config.ts",