@licklist/design 0.78.5-dev.9 → 0.78.5-gen.90

package/dist/index.js

@@ -5,6 +5,14 @@ export { UserNavDropDown } from './auth/Layout/UserNavDropDown.js';
 export { UserNavDropDownToggle } from './auth/Layout/UserNavDropDownToggle.js';
 export { LoginComponent } from './auth/Login/LoginComponent.js';
 export { LoginFormComponent } from './auth/Login/LoginFormComponent.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-bootstrap/Row';
+import 'react-bootstrap/Col';
+import 'react-i18next';
+import '@licklist/plugins/dist/context/app/hooks/useAlert';
+export { default as FormCard } from './static/FormCard.js';
+export { default as Logo } from './logo/Logo.js';
 export { RegisterComponent } from './auth/Register/RegisterComponent.js';
 export { BirthDateFormComponent } from './auth/Register/BirthDateFormComponent.js';
 export { RegisterFormComponent } from './auth/Register/RegisterFormComponent.js';
@@ -38,8 +46,6 @@ export { IframeEventCardSkeleton } from './iframe/event/event-card/IframeEventCa
 export { TicketDescription } from './iframe/event/ticket-description/TicketDescription.js';
 export { EventTables } from './iframe/event/event-tables/EventTables.js';
 export { EventOrderSummary } from './iframe/event/event-order-summary/EventOrderSummary.js';
-import 'react/jsx-runtime';
-import 'react-i18next';
 import 'react-bootstrap/Button';
 import 'react-icons/fa';
 import 'react-router-dom';
@@ -74,7 +80,6 @@ export { default as Container } from './layout/Container.js';
 export { default as BackgroundVideoContainer } from './layout/BackgroundVideoContainer.js';
 export { default as DropDown } from './layout/DropDown.js';
 export { default as DropDownToggle } from './layout/DropDownToggle.js';
-export { default as Logo } from './logo/Logo.js';
 export { CONFIRM_MODAL_ACTIONS, CONFIRM_MODAL_ACTION_CONFIRM, CONFIRM_MODAL_ACTION_DECLINE, ConfirmModal, ConfirmModalType } from './modals/confirmation/ConfirmModal.js';
 export { Dialog } from './modals/dialog/Dialog.js';
 export { DialogContext, DialogContextProvider, useDialogContext } from './modals/dialog/DialogContext.js';
@@ -153,7 +158,30 @@ export { SortableFieldList } from './sortable-fields/SortableFieldList.js';
 export { CreateSortableListItem } from './sortable-list/CreateSortableListItem.js';
 export { SORTABLE_ID_KEY, SortableList } from './sortable-list/SortableList.js';
 export { SortableTree } from './sortable-tree/SortableTree.js';
-import './static/index.js';
+import * as index from './static/images/index.js';
+export { index as Images };
+export { TextField } from './static/TextField.js';
+export { LoaderIndicator } from './static/loader/LoaderIndicator.js';
+export { BlockLoader } from './static/loader/BlockLoader.js';
+export { ButtonLoader } from './static/loader/ButtonLoader.js';
+export { SnippetLoader } from './static/loader/SnippetLoader.js';
+export { PaymentLoader } from './static/loader/PaymentLoader.js';
+export { FullScreenLoader } from './static/loader/FullScreenLoader.js';
+export { NumberInput } from './static/number-input/NumberInput.js';
+export { BooleanSwitch } from './static/switch/BooleanSwitch.js';
+export { Switch } from './static/switch/Switch.js';
+export { TextExpand } from './static/text-expand/TextExpand.js';
+export { Tabs as TabsLegacy } from './static/tabs/Tabs.js';
+export { default as CountrySelect } from './static/CountrySelect.js';
+export { default as Image } from './static/Image.js';
+export { default as SocialButton } from './static/SocialButton.js';
+export { default as StyledButton } from './static/StyledButton.js';
+export { default as RestrictedAccess } from './static/RestrictedAccess.js';
+export { default as WarningMessage } from './static/WarningMessage.js';
+export { DateRangeInput } from './static/date-range-input/DateRangeInput.js';
+export { ManualDatePicker } from './static/manual-date-picker/ManualDatePicker.js';
+export { CurrencyNumberInput } from './static/CurrencyNumberInput.js';
+export { FormNumberInput } from './static/form-number-input/FormNumberInput.js';
 export { FilterHelperComponent } from './table/FilterHelperComponent.js';
 export { PaginationHelperComponent } from './table/PaginationHelperComponent.js';
 export { PerPageHelperComponent } from './table/PerPageHelperComponent.js';
@@ -181,7 +209,6 @@ export { AffiliateCard } from './affiliate/card/AffiliateCard.js';
 export { AffiliateControl } from './affiliate/form/AffiliateControl.js';
 export { AffiliateForm } from './affiliate/form/AffiliateForm.js';
 export { TypeaheadHelperComponent } from './typeahead-helper/TypeaheadHelperComponent.js';
-export { ZoneCard } from './zone/card/ZoneCard.js';
 export { ZoneForm } from './zone/form/ZoneForm.js';
 export { ResourceForm } from './resource/form/ResourceForm.js';
 export { ResourceCard } from './resource/card/ResourceCard.js';
@@ -205,28 +232,72 @@ export { useFullscreenLoader } from './fullscreen-loader/useFullscreenLoader.js'
 export { FullscreenLoaderContext } from './fullscreen-loader/context.js';
 export { PrivacyComponent } from './pages/PrivacyComponent.js';
 export { TermsComponent } from './pages/TermsComponent.js';
-export { default as CountrySelect } from './static/CountrySelect.js';
-export { default as FormCard } from './static/FormCard.js';
-export { default as Image } from './static/Image.js';
-export { default as SocialButton } from './static/SocialButton.js';
-export { default as StyledButton } from './static/StyledButton.js';
-export { default as RestrictedAccess } from './static/RestrictedAccess.js';
-export { default as WarningMessage } from './static/WarningMessage.js';
-export { Tabs } from './static/tabs/Tabs.js';
-export { ManualDatePicker } from './static/manual-date-picker/ManualDatePicker.js';
-export { CurrencyNumberInput } from './static/CurrencyNumberInput.js';
-export { TextField } from './static/TextField.js';
-export { LoaderIndicator } from './static/loader/LoaderIndicator.js';
-export { BlockLoader } from './static/loader/BlockLoader.js';
-export { ButtonLoader } from './static/loader/ButtonLoader.js';
-export { SnippetLoader } from './static/loader/SnippetLoader.js';
-export { PaymentLoader } from './static/loader/PaymentLoader.js';
-export { FullScreenLoader } from './static/loader/FullScreenLoader.js';
-export { NumberInput } from './static/number-input/NumberInput.js';
-export { BooleanSwitch } from './static/switch/BooleanSwitch.js';
-export { Switch } from './static/switch/Switch.js';
-export { TextExpand } from './static/text-expand/TextExpand.js';
-export { DateRangeInput } from './static/date-range-input/DateRangeInput.js';
-export { FormNumberInput } from './static/form-number-input/FormNumberInput.js';
-import * as index from './static/images/index.js';
-export { index as Images };
+export { default as RadioButton } from './customRadioButton/RadioButton.js';
+export { PageNotFound } from './PageNotFound/PageNotFound.js';
+export { UnderMaintenance } from './UnderMaintenance/UnderMaintenance.js';
+export { MetricCard } from './v2/dashboard-analytics/metric-card/MetricCard.js';
+export { VenueCard } from './v2/dashboard-analytics/venue-card/VenueCard.js';
+export { VenueClosedCard } from './v2/dashboard-analytics/venue-closed-card/VenueClosedCard.js';
+export { Chart } from './v2/dashboard-analytics/chart/Chart.js';
+export { Dashboard } from './v2/dashboard-analytics/dashboard/Dashboard.js';
+export { Blog } from './v2/dashboard-analytics/blog-posts/Blog.js';
+export { AuthLayout } from './v2/pages/auth/AuthLayout/AuthLayout.js';
+export { LoginPage } from './v2/pages/auth/Login/LoginPage.js';
+export { ResetPasswordPage } from './v2/pages/auth/ResetPassword/ResetPasswordPage.js';
+export { CreatePasswordPage } from './v2/pages/auth/CreatePassword/CreatePasswordPage.js';
+export { VerifyEmailPage } from './v2/pages/auth/VerifyEmail/VerifyEmailPage.js';
+export { DashboardLayout } from './v2/navigation/DashboardLayout/DashboardLayout.js';
+export { ProviderSidebar } from './v2/navigation/DashboardLayout/ProviderSidebar.js';
+export { AdminSidebar } from './v2/navigation/DashboardLayout/AdminSidebar.js';
+export { TopNavigation } from './v2/navigation/DashboardLayout/TopNavigation.js';
+export { DashboardFooter } from './v2/navigation/DashboardLayout/DashboardFooter.js';
+export { AdminIcon, AnalyticsIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon, CircleIcon, ClearIcon, ClockIcon, CloseIcon, CompanyIcon, CurrencyDollarIcon, CurrencyEuroIcon, CurrencyPoundIcon, CustomersIcon, DashboardIcon, DeleteIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, GripVerticalIcon, InfoIcon, LayersIcon, LoyaltyIcon, MarketingIcon, NoEntryIcon, PaymentsIcon, PercentIcon, PlusIcon, ProfileIcon, ProviderPlusIcon, RefreshIcon, ReportsIcon, SearchIcon, SecurityIcon, SendIcon, SettingsIcon, SettingsPageWaiversIcon, SlidersIcon, TableHeaderArrowDownIcon, TableHeaderArrowUpIcon, UploadIcon, UserAddIcon, UserGroupIcon, UserImportIcon, VenueIcon, WaiversIcon, WarningTriangleIcon, XCircleIcon } from './v2/icons/index.js';
+export { SettingsPage } from './v2/pages/Settings/SettingsPage.js';
+export { SettingsTabs } from './v2/pages/Settings/SettingsTabs.js';
+export { SidebarCustomisation, defaultSidebarItems } from './v2/pages/Settings/components/SidebarCustomisation.js';
+export { SidebarNavItem } from './v2/pages/Settings/components/SidebarNavItem.js';
+export { ZonesResourcesPage } from './v2/pages/ZonesResources/ZonesResourcesPage.js';
+export { SettingsSubPage } from './v2/pages/SettingsSubPage/SettingsSubPage.js';
+export { IconButton } from './v2/components/IconButton/IconButton.js';
+export { Badge } from './v2/components/Badge/Badge.js';
+export { QuickFilter } from './v2/components/QuickFilter/QuickFilter.js';
+export { NewTable } from './v2/components/NewTable/NewTable.js';
+export { DataTable } from './v2/components/DataTable/DataTable.js';
+export { TableControls } from './v2/components/TableControls/TableControls.js';
+export { EmptyState } from './v2/components/EmptyState/EmptyState.js';
+export { Tabs } from './v2/components/Tabs/Tabs.js';
+export { NewTabs } from './v2/components/NewTabs/NewTabs.js';
+export { StepIndicator } from './v2/components/StepIndicator/StepIndicator.js';
+export { AvatarUpload } from './v2/components/AvatarUpload/AvatarUpload.js';
+export { InfoGrid } from './v2/components/InfoGrid/InfoGrid.js';
+export { StatusBadge } from './v2/components/StatusBadge/StatusBadge.js';
+export { TableSortIcon } from './v2/components/TableSortIcon/TableSortIcon.js';
+export { ActionMenu } from './v2/components/ActionMenu/ActionMenu.js';
+export { DeleteModal } from './v2/components/Modal/DeleteModal.js';
+export { FormField } from './v2/components/FormField/FormField.js';
+export { NewInput } from './v2/components/NewInput/NewInput.js';
+export { Checkbox } from './v2/components/Checkbox/Checkbox.js';
+export { InputCheckbox } from './v2/components/InputCheckbox/InputCheckbox.js';
+export { WYSIWYGEditor } from './v2/components/WYSIWYGEditor/WYSIWYGEditor.js';
+export { NewPageHeader } from './v2/components/NewPageHeader/NewPageHeader.js';
+export { SectionHeader } from './v2/components/SectionHeader/SectionHeader.js';
+export { Button, ButtonText } from './v2/components/Button/Button.js';
+export { GhostButton } from './v2/components/Button/GhostButton.js';
+export { Select } from './v2/components/Select/Select.js';
+export { Tooltip } from './v2/components/Tooltip/Tooltip.js';
+export { UserAvatar } from './v2/components/UserAvatar/UserAvatar.js';
+export { UserPanel } from './v2/components/UserPanel/UserPanel.js';
+export { EntityHeader } from './v2/components/EntityHeader/EntityHeader.js';
+export { Alert } from './v2/components/Alert/Alert.js';
+export { Toggle } from './v2/components/Toggle/Toggle.js';
+export { FeatureToggle } from './v2/components/FeatureToggle/FeatureToggle.js';
+export { AccountManagerCard } from './v2/components/AccountManagerCard/AccountManagerCard.js';
+export { NotificationBanner } from './v2/components/NotificationBanner/NotificationBanner.js';
+export { NPSScore } from './v2/components/NPSScore/NPSScore.js';
+export { Pagination } from './v2/components/Pagination/Pagination.js';
+export { RadioCardGroup } from './v2/components/RadioCard/RadioCardGroup.js';
+export { ZoneCard } from './v2/components/ZoneCard/ZoneCard.js';
+export { ZoneContainer } from './v2/components/ZoneCard/ZoneContainer.js';
+export { ZoneHeader } from './v2/components/ZoneCard/ZoneHeader.js';
+export { ResourceRow } from './v2/components/ZoneCard/ResourceRow.js';
+export { AddResourceButton } from './v2/components/ZoneCard/AddResourceButton.js';

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.9",
+  "version": "0.78.5-gen.90",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
+    "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
   },
   "author": "Yaroslav Havryliv",
   "license": "MIT",
   "type": "module",
-  "homepage": "https://bitbucket.org/artelogicsoft/licklist_design#readme",
+  "homepage": "https://bitbucket.org/bookedit-licklist/licklist_design#readme",
   "description": "",
   "scripts": {
-    "start": "start-storybook -p 9009 -s ./src/assets --no-manager-cache",
-    "build-storybook": "build-storybook -c .storybook -o build",
+    "start": "storybook dev -p 9009",
+    "build-storybook": "storybook build -o build",
     "type-check": "tsc --noEmit",
     "type-check:watch": "yarn type-check -- --watch",
     "build": "rollup -c",
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.2",
+    "@licklist/core": "0.36.1-dev.40",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.36.4-dev.1",
+    "@licklist/plugins": "0.36.4-dev.15",
     "clsx": "2.1.1",
     "i18next": "25.3.2",
     "lodash": "4.17.21",
@@ -64,14 +64,40 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.1-dev.2",
+    "@hookform/resolvers": "^5.2.2",
+    "@licklist/core": "0.36.1-dev.22",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.36.4-dev.1",
+    "@licklist/plugins": "0.36.4-dev.15",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-aria/utils": "3.9.0",
+    "@svgr/webpack": "^6.5.1",
     "@tanstack/react-table": "8.10.6",
     "@tiptap/core": "2.0.0-beta.176",
     "@tiptap/extension-blockquote": "2.0.0-beta.29",
@@ -97,21 +123,27 @@
     "@wojtekmaj/react-daterange-picker": "4.1.0",
     "bootstrap": "4.6.0",
     "bootstrap-social": "5.1.1",
+    "chromatic": "^13.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "2.29.3",
+    "embla-carousel-react": "^8.6.0",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "emojibase-regex": "6.0.1",
     "framer-motion": "4.1.17",
     "i18next": "25.3.2",
+    "input-otp": "^1.4.2",
     "konva": "6.0.0",
     "lodash": "4.17.21",
+    "lucide-react": "^0.555.0",
     "luxon": "3.5.0",
     "moment": "2.29.1",
-    "react": "18.3.1",
     "react-bootstrap": "1.6.1",
     "react-color": "2.19.3",
     "react-date-range": "1.4.0",
-    "react-dom": "18.3.1",
+    "react-day-picker": "^9.14.0",
     "react-email-editor": "1.6.1",
     "react-highlighter": "0.4.3",
     "react-hook-form": "7.52.2",
@@ -124,29 +156,38 @@
     "react-overlays": "4.1.1",
     "react-phone-number-input": "3.1.16",
     "react-query": "3.34.12",
+    "react-resizable-panels": "^4.7.3",
     "react-select": "5.3.0",
     "react-swipeable": "6.2.0",
     "react-use": "17.3.1",
     "react-virtualized": "9.22.5",
     "recharts": "2.0.6",
     "rrule": "2.6.8",
+    "style-inject": "0.3.0",
+    "tailwind-merge": "^3.5.0",
     "twemoji-parser": "14.0.0",
-    "use-debounce": "7.0.1"
+    "use-debounce": "7.0.1",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "1.6.1",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@chromatic-com/storybook": "2.0.2",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@rollup/plugin-image": "3.0.3",
     "@rollup/plugin-json": "6.1.0",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-actions": "6.3.12",
-    "@storybook/addon-docs": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.3.12",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.3.12",
+    "@storybook/addon-a11y": "9.1.13",
+    "@storybook/addon-docs": "9.1.13",
+    "@storybook/addon-links": "9.1.13",
+    "@storybook/react": "9.1.13",
+    "@storybook/react-vite": "9.1.13",
+    "@storybook/react-webpack5": "^9.1.13",
     "@svgr/rollup": "8.1.0",
     "@swc/core": "1.6.5",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
     "@types/lodash": "4.17.5",
     "@types/luxon": "3.4.2",
     "@types/mdx-js__react": "1.5.3",
@@ -179,27 +220,34 @@
     "postcss-simple-vars": "7.0.1",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.8",
+    "react-router-dom": "6.30.1",
     "rollup": "3.29.4",
     "rollup-plugin-auto-external": "2.0.0",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-swc3": "0.11.2",
     "rollup-plugin-typescript2": "0.31.0",
-    "sass": "1.77.8",
+    "sass": "^1.93.2",
     "sass-loader": "10.1.1",
+    "storybook": "9.1.13",
     "style-loader": "2.0.0",
     "tailwindcss": "3.4.13",
-    "typescript": "5.5.4",
+    "tailwindcss-animate": "^1.0.7",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
     "url-loader": "4.1.1",
     "vite": "5.3.5",
     "vite-plugin-dts": "4.0.2",
-    "vite-plugin-svgr": "4.2.0",
+    "vite-plugin-svgr": "^4.5.0",
     "vite-tsconfig-paths": "5.0.1"
   },
   "resolutions": {
     "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
+    "@types/react-dom": "18.3.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -208,10 +256,10 @@
       "yarn tsc"
     ]
   },
-  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
   },
-  "stableVersion": "0.71.4-dev.1"
-}
+  "packageManager": "yarn@4.8.0",
+  "stableVersion": "0.78.5-dev.39"
+}

package/rollup.config.js

@@ -7,6 +7,7 @@ import autoExternal from 'rollup-plugin-auto-external'
 import purge from 'rollup-plugin-delete'
 import json from '@rollup/plugin-json'
 import { swc } from 'rollup-plugin-swc3'
+import postcss from 'rollup-plugin-postcss'
 
 export default [
   {
@@ -28,11 +29,22 @@ export default [
       json(),
       image(),
       svgr(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        use: ['sass'],
+        extract: false,
+        minimize: true,
+        inject(cssVariableName) {
+          return `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`
+        },
+      }),
 
       copy({
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/v2/styles/*', dest: './dist/v2/styles' },
+          { src: './src/v2/shadcn/styles/globals.css', dest: './dist/v2/shadcn/styles' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),
@@ -42,7 +54,7 @@ export default [
         clean: true,
       }),
     ],
-    external: ['tslib', /node_modules/],
+    external: ['tslib', 'style-inject', /node_modules/],
   },
   {
     input: 'src/index.ts',
@@ -59,6 +71,15 @@ export default [
       json(),
       image(),
       svgr(),
+      postcss({
+        extensions: ['.css', '.scss'],
+        use: ['sass'],
+        extract: false,
+        minimize: true,
+        inject(cssVariableName) {
+          return `import styleInject from 'style-inject';\nstyleInject(${cssVariableName});`
+        },
+      }),
 
       swc({
         jsc: {
@@ -90,6 +111,6 @@ export default [
         isModule: true,
       }),
     ],
-    external: ['tslib', /node_modules/],
+    external: ['tslib', 'style-inject', /node_modules/],
   },
 ]